Component libraries that match the brand

A UI component library earns its place when the buttons, fields, and cards look like your brand. Default kits look like the kit. You can recognize them: the same radius, the same gray, the same focus ring, the same density as a hundred other apps that installed the same package and changed the logo.

That recognition is the problem. A founder can ship faster with a kit, and the product will feel finished in the way a template feels finished. It will not feel like the company. The useful library starts from the brand's type, the brand's color, and the few components the product actually repeats.

Why the kit shows through

A component kit is a set of opinions. It has a point of view about density, shadow, type scale, and how loud a primary button should be. Those opinions are fine for the people who designed the kit. They are a second brand when you drop them under your wordmark.

The show-through is strongest on the controls people see constantly. A button, an input, a menu, a checkbox. Marketing pages can hide a mismatched button in a custom hero. A product cannot. If the daily screen is a table of leads or a list of jobs, the row, the filter, and the primary action are the brand. Got Next and Leadly, both public Hanabi product interfaces, stay focused because the repeated controls carry one idea. A kit dropped on top of that kind of screen would argue with the layout even if the colors were close.

You can still borrow structure. Accessible behavior, keyboard handling, and the unglamorous open-and-close logic of a menu are expensive to reinvent. Borrow that. Replace the surface. If the borrowed piece cannot be restyled without fighting it, it is the wrong piece to borrow.

Start from what the product repeats

List the controls that appear on more than one screen. For an early product the list is often short.

• A primary button and a quiet button.
• A text field with a label and an error.
• A link that is obviously a link.
• The row or card that holds the main object, whether that object is a lead, an order, or a document.
• Navigation, if it is stable.

Build those, and stop. A date picker, a multi-select, and a command palette can wait until a workflow needs them. Each extra component is a set of states you now have to keep aligned with the brand. The library should feel slightly incomplete. Completeness is how kits grow a look you did not choose.

Name the components in the language of the product where you can. "Lead row" is more useful than "ListItem" if the team only has leads. A generic name is better when the same row will hold a second kind of object next quarter. The test is whether a new teammate can find the piece without a tour.

Type and color before variants

Variants multiply. A button can be primary, quiet, destructive, small, large, loading, and disabled. Teams design the variant grid first and the brand second. Reverse that. Set the type, the color, the radius, and the focus treatment. Then ask which variants the product has already needed.

Most early products need two button emphases and a disabled state. They need a field that can show an error. They need a card that can be static. They do not need six sizes. A small control and a default control cover density. A third size is usually a layout that should reflow.

Color inside a component should reference the named decisions, not a private palette. The primary button uses accent. The quiet button uses the surface and the line. Destructive uses the danger color you already named. If a variant needs a new color, that is a token conversation, held before the variant ships. Otherwise the library becomes the place where drift is institutionalized, with a proper name and a Figma component to make it official.

The W3C's Web Content Accessibility Guidelines are the check on those choices. A component has to be perceivable and operable: readable text, a visible focus state, and a name a screen reader can use. Build the focus ring with the component, in the brand's color logic, so every screen inherits it. A kit's default ring, left in place because it was already there, is another way the kit shows through, and it may not even meet the contrast of your surfaces.

What to rebuild, and what to wrap

Rebuild the pieces that carry the brand and appear everywhere. A button is small. Its look is the company. An input is the same. These are not the place to accept a near match.

Wrap the pieces that are mostly behavior. A dialog that traps focus, a popover that positions itself, a listbox that handles the keyboard. Put your surface on the outside: your type, your color, your radius, your padding. Hide the donor styles. If you cannot hide them, do not use that donor.

Write the wrapper once. The failure mode is every screen importing the kit and styling it a little differently. That produces a library of exceptions. The wrapper is the library. Screens import the wrapper.

Document the states you actually built. Default, hover, focus, disabled, error, and loading if the action can be slow. Skip the states you do not have. A storybook full of imaginary variants teaches people to use components that were never designed. A short page next to the code, with the real states and a line about when not to use the piece, is enough. Engineers open that. They do not open a brand film.

One idea on the site and in the product

The marketing site and the product can share a library without sharing every component. The site might need a quiet display headline and a wide section. The product might need a dense row. What they share is the idea: the same type, the same accent, the same sense of how loud a control is allowed to be. If the site is calm and the app is a wall of gradients, the library did not fail. The brand was never one idea.

Check that idea on a real screen, not on a component poster. Put the homepage and the main product view next to each other. The type should look related. The accent should mean the same thing, which is usually "do this next." If the product needs a louder accent than the site, decide that on purpose and use it in both places where action is required. Two accents that both mean action will train people to ignore one of them.

The longer version of this alignment is how brand and interface share one idea. Read it when the site and the product are starting to feel like different companies.

Hanabi designs the components with the product, in the same engagement as the visual system. The offer is on Hanabi's services: a library that matches the brand because it was drawn from the brand, sized to the controls the product repeats.