UI Kit

A UI kit is a library of ready-made graphic components (buttons, form fields, cards, menus, icons) that you assemble to design screens faster and with a consistent look. It is often the first concrete building block of a design system, before the full formalization.

What is inside a UI kit

• Foundations: color palette, typefaces, spacing scale, corner radii, shadows.
• Core components: buttons, input fields, checkboxes, dropdowns, tabs, modals, cards, navigation bars, alerts.
• States: each component exists at rest, on hover, on keyboard focus, active, disabled and in error. A kit that shows only one state leaves the team to improvise the rest.
• Variants: sizes, hierarchy (primary, secondary, subtle button), light and dark versions.
• Icons: a coherent set with consistent stroke weight and style.
• Screen templates: some kits include assembled page layouts (sign-in, dashboard, pricing) to save time at the start.

Free, paid or custom

Three sources, three uses:

• Free kits circulate in the Figma community and on resource sites. Platform owners such as Google, with Material Design, and Apple also publish their own kits for designing native apps.
• Paid kits are sold on specialist marketplaces. They are more complete and more polished, but still generic.
• A custom kit is built for one brand and one product. It is the only kind that truly carries the company’s identity.

An off-the-shelf kit is an excellent starting point for a prototype. It becomes a problem when you keep it unchanged: the product ends up looking like everyone else’s.

How to choose a kit

• State coverage. Check that focus, error and disabled states are drawn.
• Accessibility. Sufficient contrast, tap target size, visible focus. Fixing these afterward costs more than choosing well up front.
• License. Whether commercial use is allowed, for how many projects, and whether you can redistribute.
• File construction. Components with variants, styles and variables. A kit made of flattened images cannot be customized.
• Fit with production. If the site is built in Webflow, favor a kit whose logic (grid, spacing) translates easily into classes and components.

Building your own UI kit

1. Take inventory. Capture every button, field and card on the current site. Teams often find far more versions of the same button than they expected.
2. Set the foundations. Colors, type and spacing come first. Components follow.
3. Start with the most used components. Five well-built components beat thirty half-finished ones.
4. Name things clearly. A readable naming convention (“button / primary / hover”) prevents duplicates.
5. Test on two or three real screens before going further. That is where gaps show up.
6. Keep it versioned. A change to the kit should reach every screen that uses it.

Many teams organize their kit along atomic design lines: simple elements that combine into components, then into page sections.

An example: the button

A plain button shows why a kit demands rigor. Picture three levels of hierarchy (primary, secondary, subtle), three sizes and five states (rest, hover, focus, disabled, loading): that is already forty-five combinations to draw and maintain. In a well-built file, those combinations are variants of a single component. Changing the corner radius or the primary color happens in one place and carries through everywhere.

When a UI kit is enough

For a single product, a small team or a brochure site, a well-kept UI kit covers every need. A design system becomes worth considering when several teams or products use it and someone has to arbitrate, document and version. Until then, a kit is lighter, quicker to set up and easier to get adopted.

From kit to code

The kit lives on the design side. To be useful, every designed component needs a built counterpart: a site component, classes, and color and type variables carrying the same values. The more exact the match, the smaller the gap between the mockup and the live page. On Webflow, that is the job of components and variables, which we cover in our article on structuring a Figma design system to speed up Webflow development.

Common mistakes

• Using an off-the-shelf kit without adapting it to the brand.
• Forgetting error and focus states, which users meet far more often than designers expect.
• Multiplying variants until nobody knows which one to pick.
• Letting the kit age: as soon as screens work around it, it stops being the reference.

At Mazette.co, interface kits are drawn alongside design systems and the typography guide, within the UX/UI and Product design offer.