Design Systems: So the Fiftieth Page Looks Like the First
Tokens, components and CMS blocks that stay in sync. Consistency should be the default, not a review process.
Built in Figma and in code, by the team that also ships the site.
A design system is the single source of truth for how a brand is built on screen. It has three layers.
A style guide describes how things should look. A design system makes it structurally difficult to do it any other way.
Brands do not drift on purpose. They drift page by page
Every site launches consistent. Then a campaign needs a slightly different hero, someone adds a one-off section, a new starter picks a near-miss shade of the brand blue, and eighteen months later the site is thirty variations of four ideas.
A design system prevents that structurally rather than by policing it. Colour, type, spacing and radius live as tokens with single definitions. Components are built once and reused. The CMS offers a fixed set of blocks, so composing a new page cannot produce an off-brand one.
The payoff is speed as much as consistency: new pages become assembly rather than design, and the marketing team stops queueing for a developer. It is what makes the headless CMS genuinely usable.
METHOD
How we actually do it
Define once, reuse everywhere.
Audit what already exists.
Most brands have more variation than they realise. We inventory the real components in use, collapse the near-duplicates, and agree the canonical set before building anything.
Define the tokens.
Colour, typography, spacing, radius and shadow as named tokens with one definition each, theme-aware where the product needs light and dark. Every component draws from these rather than hard-coding values.
Build the component library.
Each component built once, accessible, responsive and documented with the states it supports. Built in code as well as in Figma, because a design file that has drifted from production is a liability.
Map components to CMS blocks.
The system only pays off if the editor can use it. Every component becomes a block the content team can compose with, which is the mechanism that keeps the fiftieth page on brand.
What you get
Deliverables, not adjectives.
When a design system is worth it, and when it is not
We would rather tell you it is not worth it than build one you will abandon.
Questions, answered straight
No fluff, as promised.
Do we need a design system for a small site?
Not always. Below roughly twenty pages with one editor, a system can be more overhead than it saves. The case gets strong when multiple people publish, or when the site is going to keep growing.
Will this make the site look generic?
The opposite, when it is done properly. A system enforces your brand rather than a framework default, the genericness people fear comes from unstyled component kits, not from having a system.
What happens when we rebrand?
That is the best argument for tokens. A rebrand becomes a change to token values that propagates everywhere, instead of a hunt through hundreds of hard-coded hex values.
What is the difference between a design system and a style guide?
A style guide describes how things should look and relies on people following it. A design system makes it structurally difficult not to: tokens with one definition, components built once, and a CMS that only offers approved blocks. One is a document, the other is a mechanism.
Can you build a system on our existing site?
Yes, and it usually starts with an audit that finds more variation than anyone expected. Collapsing near-duplicate components is often the single biggest win, before anything new gets built.
Who maintains it afterwards?
Your team, ours, or both. The contribution guidance exists so the system survives people leaving, which is the most common way systems die. If nobody on your side will own it, we will say so before building one.
Do we own the system?
Yes, in your repository and your Figma workspace from the start. If you take the build elsewhere, the system goes with you and works without us.
Brand drifting page by page?
Tell us what you're working on. You'll get an honest answer about whether we can help, and exactly how.