Design system

A design system is a reusable set of components, tokens, and rules a website or product is built from, instead of designing each page as a one-off. It keeps a growing site consistent and fast to extend.

A design system is the reusable kit a site is built from: components, spacing and colour tokens, type scale, and the rules for how they combine. Instead of drawing every page from scratch, you assemble pages out of parts that already agree with each other.

The payoff shows up over time. A one-off page looks fine on launch day and drifts as the site grows; a system stays consistent because a heading, a button, or a card is defined once and reused everywhere. It’s also faster to extend — a new page is mostly assembly, not invention — and cheaper to maintain, because a fix in one place propagates.

We design sites this way on purpose. The reasoning is in a website is a system, not pages, and how it fits the wider build is in how we build a website.

Quick recall

What is a design system? A reusable set of components, tokens, and rules a site is built from instead of one-off pages.

Why use one? Consistency as the site grows, faster new pages, cheaper maintenance.

How does it relate to brand? It carries the brand identity into the product, so the two stay in sync.