Building Your First Design System

1.A brand is not a design system

A brand ships a logo, one or two colours, a typeface, some photos. Enough for a poster or a homepage hero. Not enough for a product. The moment you need a button's disabled state, a link's hover colour, or the tint of a selected row, the brand says nothing. You are on your own.

A design system sits between the brand and the product. It takes the raw material, colour and type and shape, and builds the tokens every screen needs. Primary and secondary. Success, warning, error. Borders at three weights. Backgrounds at four elevations. Type at seven sizes with line heights that fit. Spacing on a grid. None of this is in the brand. All of it comes from it.

Dark mode shows the gap plainly. The brand gives one set of colours. It does not say what text goes on a coloured button, or how a shadow that means depth in daylight works on black, where shadows disappear. Those answers are a second system. You build it next to the first. Getting one right tells you little about the other.

That derivation is the skill. It does not show in the result. The output is a list of colours and sizes. The work behind it looks like nothing, so almost nobody names it.

2.Why the skill is rare

Brand designers think in identity and mood. They work in Illustrator and on print. To them a brand is an object you hold. Engineers think in state and edge cases. They work in code. To them a brand is a CSS variable. Two jobs, two people, rarely at the same desk.

The translation belongs to neither. It needs a designer's feel for what reads as the brand, an engineer's discipline about state, and a systems thinker's grip on the whole token graph. People with all three are rare. Teams that know the skill exists are rarer.

So it happens by accident. A developer picks a hover colour that looks about right. A designer grabs a grey that was already on the canvas. Six months later the product has eighty-seven greys and nobody knows which one is real. The brand and the product drifted, and no one can point to when.

3.What the skill actually consists of

The skill breaks down into three layers, each with its own way of going wrong.

Perception. Look at a brand and see what it is doing. Is the hero blue strong because it is saturated, because it is dark, or because of the off-white next to it? Which choices carry weight, which are decoration? Most brands have two or three real moves and a lot of surface. Telling them apart comes first.

Abstraction. Turn that essence into a token graph. The graph has three tiers. Primitives are raw values: a hex, a pixel. Semantic tokens give them meaning: surface, text-on-brand, the colour that flips for dark mode. Components bind to the semantic tokens. A brand has one blue. The system has blue-50 to blue-900, plus hover, active, disabled, focus. The ratios between them, how they sit on neutrals, how they hold up on the brand background. None of it is given. You invent it so it looks obvious afterwards.

Systems thinking. Hold it as a graph, not a list. Change the primary hue and every colour derived from it has to move with it. A new typeface has to fit the sizes already there. A new component reuses tokens or justifies new ones. This is what decides whether the system survives year two.

4.The shortcut that does not exist

A recurring hope: pull the colours off the homepage, run a tool, get a design system. Dembrandt does part of this. It extracts the raw tokens on a live site in seconds. That part is real. It turns a slow manual step into one command.

It does not do the layer above. Extracted tokens are a starting point. They tell you what is on the site today. They do not tell you what the system needs, which shades are missing, which semantic roles to invent, or how the hover state of a button you have not built relates to the primary you have. That still takes a person who works across all three layers.

It resists automation for one reason: the work is perceptual, not arithmetic. A scale is not the primary divided by 1.25 down the line. You pull saturation back in the light tones so they do not glare. The same grey looks blue next to orange and warm next to blue. Two saturated colours side by side vibrate. The eye decides this, in the real screen, not on a swatch. A tool proposes a scale in a tenth of a second. Only a person can say if it reads as the brand in a live button.

So the shortcut is not brand to design system. It is manual extraction to automated extraction. That gives the person doing the abstraction more time. The middle skill does not get automated. It gets unblocked.

5.Where to start, if you have never done this

Take a brand you rate and rebuild it. Pull the primary. Derive the full scale. Work out the semantic colours. Decide the type scale and why those sizes. Do it without looking at their real system. Then compare. The gap between your version and theirs is the skill, measured.

Then do it again. Pattern recognition comes from repetition. After ten brands you see the same five or six moves under identities that look nothing alike. After thirty you do the abstraction in your head while still on the homepage. That is when it stops being mysterious.

Almost nobody turns a brand into a working system because the work is invisible from both sides. From the brand side it looks like engineering. From the engineering side it looks like brand work. It is both. The people who do it well usually got tired of staying in one box.

The tooling is getting good. Extraction is automated. Token formats are converging on DTCG. AI can generate UI from structured tokens. The plumbing is no longer the bottleneck. The bottleneck is the few people who can look at a brand and see the system it should become. That part is still human. It is worth getting good at.