Short answer
A design system consists of tokens for color, typography and spacing, components built from them, and a build check that fails code carrying loose values. In our experience from our own projects it pays for itself around the tenth page, or the second time a brand has to change across a whole site.
A design system is usually described as a collection of components. The more decisive part is the rule about where values are allowed to live, because that rule decides whether the system still holds six months later.
What the system actually contains
Four layers, and the last one is what separates a system from a folder of files.
- Tokens: every color, spacing step, radius and type size defined in one place
- Primitives: buttons, cards, headings and fields built from tokens
- Blocks: finished sections that pages are assembled from
- A build check that stops raw values reaching page code
The check is what makes the system true
A system that exists only as a document drifts apart, because typing a color value is always faster than looking up the right token. This site runs that check: a build step reads the code and fails the build on the first raw hex or pixel value outside the design system. After that the question stops coming up.
Contrast is calculated before a color is used
Every color pair in the system is checked against WCAG AA, which requires at least 4.5:1 for body text, in both light and dark mode. Calculated at the token level, a page further down the line can never turn illegible, because the combination that would cause it does not exist.
The size at which it pays off
Below five pages a system costs more than it returns. At ten pages it is roughly even. At 30 pages, two themes and nine languages it is the difference between a day of work and a week when something has to change everywhere, which is the arithmetic we ran for this site.
Small screens belong to the system
Every component is designed for 320 pixels first and grows upward. The tests run each page type at seven widths from 320 pixels up, and a page that scrolls horizontally fails the build. That is cheaper than repairing a broken phone layout after launch.
Common questions
- Does a small website need a design system?
- Below five pages, a set of conventions is enough. From ten pages upward the system earns back the time it cost, particularly if the site is going to grow or ship in several languages.
- How does it differ from a brand manual?
- The manual describes how things should look. The system is the code that makes them look that way. A PDF can never fail a build, and that function is what holds the expression together over time.
- How is dark mode handled?
- Every token carries one value for light mode and one for dark. Contrast is calculated on both, so one theme can never end up worse than the other.
- Who owns the design system after launch?
- You do, and it lives in your repository. It is built so another developer can take over: values in one place, components documented, and the check running as part of the build.
- How often does a design system need redoing?
- Rarely in full. Tokens change when the brand does, and components get added as they are needed. A system that needs rewriting every other year was built for a single campaign.
- Can a system be introduced on an existing site?
- Yes, one page type at a time. Start with tokens and the most-used components, switch the check on for the directories already converted, and expand from there.
Tell us what you want to build
Thirty minutes, free of charge, and a straight answer on whether we are the right studio for it.