A design system that lasts

A design system almost always dies the same way: it becomes a file nobody opens any more. Six months after delivery the real interface holds eleven shades of grey, four button sizes and three ways of showing an error — while the mockup still shows one of each.

What keeps a system alive is the code

A system holds when using it is easier than working around it. In practice: colours, spacing and text sizes are declared in one place, and no page can write a colour by hand. On our projects that isn't a team convention — it's a test that fails if a file contains a hard-coded hex value. A rule you can forget isn't a rule, it's a wish.

Start small and let it grow

Systems built in one block, with eighty components planned “for later”, are the ones that get abandoned: half will never be used, and the other half won't match the real need on the day it arrives.

A useful system starts with what your pages already use — buttons, fields, cards, headings. You add a component when a third screen needs it, not the second: with two, you still can't tell what is genuinely shared from what merely looks alike.

Name by role, never by appearance

A colour called green becomes a lie the day the brand changes. The same colour called accent stays true. The same goes for button-large, which says nothing about what it's for, against primary-action, which does.

That detail of vocabulary decides how long the system lives. Named by appearance, it has to be rebuilt at every rebrand. Named by role, it survives redesigns by changing only its values — which is exactly what it's for.