Component library
A component library is a collection of reusable interface parts, such as buttons, cards, forms and navigation, designed once and used across many pages or screens.
Area
Design systems
What it means in practice
Each component has defined variants (primary and secondary buttons, for example), states (hover, focus, disabled, error) and properties that can change without breaking the design. In Figma, components and variants live in a shared library every design file can use. In code or in a website builder, matching components let the team build pages from the same parts.
For a marketing site, the library often includes whole sections too: hero layouts, feature grids, logo strips, testimonial blocks, pricing tables and footers. With those in place, a marketing team can put together a new landing page from parts that already work.
The library only helps while design and build stay in sync. When the Figma version and the built version drift apart, people stop trusting both and start making one-offs.
Why it matters for B2B and AI teams
B2B marketing teams publish often, from campaign pages and launches to comparison and event pages. A component library lets them move quickly and keep the brand intact.
In a product, a library keeps the interface consistent as engineering grows. Fixes spread too. An accessibility fix or design update made to one component reaches every place it’s used.
How we approach it
We design in Figma and build websites in Framer or Webflow, and both platforms support reusable components. Building pages from shared components is what lets a team keep publishing consistently after handover.
FAQ
The library is the set of components. A design system adds tokens, patterns, guidelines and the process for maintaining all of it.
Enough to cover your repeating sections and elements. Most B2B marketing sites need a few dozen once you count buttons, cards and section layouts.
Yes, as a starting point. Plan to adapt it to your brand, or the site will look like every other site built from the same kit.
Keep exploring
Related terms
Design system
A design system is a shared set of reusable components, patterns, tokens and guidelines that a team uses to design and build consistent interfaces and brand material.
Design tokens
Design tokens are named values for the basic decisions in a design system, like colors, type sizes, spacing and corner radii, stored so design tools and code can share them.
Landing page
A landing page is a web page built for one audience and one action, usually the destination of a campaign, ad, email or launch.
Design handoff
Design handoff is the point where finished design work passes to the people who will build, run or extend it, with the files and guidance they need.
Framer
Framer is a visual website builder that lets teams design, build, host and publish production websites from a canvas that works much like a design tool.
Show us what you’re working on
Book a call and walk us through what’s changing. We’ll suggest the scope that fits, or tell you if you don’t need us yet.