A design system is not a project. It is an asset. Once it exists, the marginal cost of a new page approaches zero. Without one, every page costs a day of manual work.
Here is the minimum version that covers 95% of what you need.
The twelve essential foundations
A premium design system divides into four layers.
Tokens (four items)
- A palette of six colours: a base background, a raised background, primary text, secondary text, an accent, and an error state.
- A type scale: nine fluid sizes using clamp.
- A spacing grid in multiples of 8 px.
- A radius ramp: 4, 8, 12, 24, pill.
Typography (three faces at most)
- A display family for headings.
- A readable body family.
- Optionally, an editorial italic for accents.
Components (five essentials)
- Primary and secondary buttons.
- A standard content card.
- Form fields: input, select, textarea.
- Main navigation.
- Footer.
What it saves you
Without a system every page is an independent decision. With one, every page is an assembly of approved components. The cost drops from a day a page to an hour. And the visual consistency that carried your credibility becomes impossible to break.
A minimum viable design system built in two days by a specialist studio is the best design return a premium brand can sign.