Design systems start with nouns

Every design system I have seen fail failed the same way: it shipped components before it shipped words. A folder of beautifully built parts that nobody could find, because nobody agreed what anything was called.

The unglamorous truth is that a design system is a vocabulary first and a component library second. When a designer says "use a callout here" and the engineer reaches for the thing called Callout, the system is working. When the same concept is a callout in Figma, an alert in the code, and "the little banner thing" in standup, there is no system — just an expensive folder.

Name the surfaces, then the parts

The nouns that matter most are the quiet structural ones. What do you call the page background? The raised panel? The hairline between sections? Settle those and write them down as tokens:

--color-canvas   the page ground
--color-surface  wells and raised panels
--color-ink      primary text
--color-muted    secondary text
--color-line     hairlines and dividers

Semantic names are load-bearing. A token called gray-100 is a fact about a color; a token called surface is a decision about a role. Facts cannot be retuned — the moment you darken gray-100, its name is a lie. Roles retune for free, which is how one set of markup survives a redesign, a rebrand, and a dark theme without edits.

The grammar comes cheap

Once the nouns hold, composition rules — the grammar — almost write themselves. Ink on canvas. Muted for supporting text. Line for separation, never for emphasis. New contributors stop asking which of nine grays to use, because there are no grays; there are roles, and the roles answer the question.

So before the next component sprint, run the cheaper exercise. List every visual concept in the product. Give each one a name everyone will say out loud. Delete the synonyms. The components will follow, and this time people will find them.