Most websites don’t lose their look in one bad decision. They drift: a campaign page with its own shade of blue, an editor who bolds headings by hand, a language version whose buttons no longer match. A website design system prevents that drift by building the brand’s decisions into the parts every page is made from.
The idea comes from software products with hundreds of screens, so it can sound like overkill for a company website. Sized properly, it isn’t, especially for a corporate, multilingual or multi-site website.
The short answer
A design system is the shared set of decisions and reusable parts a website is built from, in four layers:
- Design tokens: named values for colour, typography and spacing.
- Components: reusable parts such as buttons, form fields, cards and navigation.
- Patterns: tested combinations of components for recurring jobs, such as an enquiry section.
- Usage guidance: when and how to use each part, including the words.
Unlike a style guide, it is built into the website itself, so changing a value once changes it everywhere. If several people edit your site, it runs in several languages or you publish campaign pages regularly, you need one. Not the software-company kind, though: global colours, a type scale, a spacing scale and reusable components in the CMS usually cover it.
Design system vs style guide vs brand guidelines
The terms get used interchangeably, but they do different jobs. Brand guidelines define the brand across every channel, and print-first versions leave gaps on screen (see brand guidelines for websites). A style guide describes how one site should look. A design system adds the working parts: the button in the guidance is the button editors place on the page.
| At a glance | Brand guidelines | Style guide | Design system |
|---|---|---|---|
| Answers | How does our brand look and sound everywhere? | What should this site look like? | How do we build and extend this site consistently? |
| Lives in | A PDF or brand portal | A document or design file | The CMS, the code and the design file |
| Used by | Everyone who represents the brand | Mainly designers | Designers, developers and editors |
| Enforced by | Reviews and goodwill | Reviews and goodwill | The components themselves |
| Typical failure | Silent about screens | Drifts from what was built | Over-built for the site |
What goes into a website design system
Design tokens
Tokens are named design decisions: color-action-primary rather than a hex code, space-md rather than 24 pixels. Designs and code refer to the name, so the value can change without touching anything that uses it.
Most systems separate two tiers. Primitive tokens hold the raw palette, such as blue-700. Semantic tokens describe a job, such as color-text-body, and point to a primitive. Components only use semantic tokens, so a rebrand, a second brand or a campaign theme becomes a change of mapping rather than a redesign.
On the web, tokens usually become CSS custom properties. The Design Tokens Community Group, hosted by the W3C, published the first stable version of a shared token file format in 2025. It helps teams that sync a design tool with code, but it isn’t a formal W3C standard, and a business website can do without it.
Components and the component library
Buttons, form fields, cards, accordions, navigation, quotes. A component isn’t finished until every state is built: hover, keyboard focus, disabled, error, and a very long label or a missing image.
Components are also where accessibility is cheapest. Build visible focus styles, labelled fields and colour pairs that meet WCAG 2.2’s contrast minimums (4.5:1 for normal text; 3:1 for large text and for the visible parts of controls, such as input borders and focus indicators) into each component, and every page inherits them. Our guide to colour contrast shows how to check.
The built components form your component library. It usually exists twice, in a design tool such as Figma and in the CMS; give both the same names, so “Project card” means one thing to designers, developers and editors.
Patterns
Patterns combine components to solve a recurring problem: an enquiry section with a form, reassurance and other ways to get in touch; a filterable project grid; a campaign hero. This is where a system starts capturing what converts, not just how things look.
Usage guidance
The rules that prevent misuse: one primary button per section, when a card beats a list, how long a hero heading can run, which image ratio each slot takes.
How much of a design system a business website needs
Public systems such as Google’s Material Design, IBM’s Carbon and the GOV.UK Design System serve many teams and have dedicated maintainers. A company website needs far less, and most of it can live in the CMS:
- Global colours with named roles: brand, text, background, surface, border, success, error.
- A type scale: a few heading and body sizes stepping up in proportion, with line heights that suit every script you publish in (see web typography).
- A spacing scale: a handful of steps, such as 8, 16, 24, 32, 48 and 64 pixels, used for every gap.
- Core components, patterns and page templates for the page types you publish most.
- A page or two of guidance, kept where editors will see it.
Global styles in WordPress and page builders
WordPress has much of this built in. Modern themes define the palette, font sizes, spacing and content widths in a theme.json file, which WordPress outputs as CSS custom properties, such as --wp--preset--color--primary, for blocks to reuse. In block themes, the Styles panel in the Site Editor changes these global styles site-wide, and theme.json can switch off the custom colour picker and custom font sizes so editors pick from the palette instead of inventing shades.
Synced patterns make a section, such as a call-to-action band, one shared element: edit it once and it updates everywhere it is used. Content-only locking keeps a section’s layout and design fixed while leaving its text and images editable.
Page builders such as Elementor and Breakdance offer global colours and fonts plus reusable templates or global blocks. The discipline matters more than the tool: a builder with colours typed into every widget has no design system, whatever its settings say. See WordPress best practices for what a solid build looks like.
Several sites or brands
Running several sites, brands or regional versions? Share the components and give each brand its own semantic token values, so a second brand is a new mapping, not a second build. This is where a design system pays back fastest, and where a separate documentation site starts to earn its keep.
How a design system keeps every page, campaign and language on-brand
Brand consistency online is mostly lost after launch, by people who weren’t in the original project, working to a deadline. Components do most of the protecting; five habits cover the rest.
Locked styles in reusable components
Give editors choices, not controls. A call-to-action band might offer two approved backgrounds and an optional image, but no colour picker or font-size field. Editors change words, links and images; the tokens handle the rest. A genuinely new need becomes a new variant, built once for everyone.
A content style guide
Pages can match visually and still read as off-brand. Keep a short guide to voice, heading capitalisation, button wording (“Book a site visit”, not “Submit”), numbers, dates, prices and alt text, linked from the CMS dashboard, not buried in a shared drive.
A terminology glossary per language
For each language, record product and service names, terms you never translate, approved translations of key phrases, and interface text such as menu labels and form errors. Share it with every translator and translation tool. Then test components with real translations: text grows or shrinks, some scripts need more line height, and a button that fits in one language wraps in another. See planning a multilingual website.
A light review step
Before a new template, pattern or campaign page goes live, the system owner or a trained editor checks it:
With sound components, that takes minutes.
A twice-yearly brand audit
Every six months, sample pages from each site, language and recent campaign. The CSS Overview panel in Chrome’s developer tools lists every colour and font size a page uses, so stray shades surface fast. Retire one-off components and note what editors kept working around: that is your list of components to build next.
Signs your website needs a design system
Check it yourself. Screenshot every button, heading, card and form on your ten most visited pages and put them on one board, an interface inventory. If it looks like the work of several companies, you have your answer.
One or two ticks: tidy your global styles and templates. Several, especially across sites or languages: plan a lightweight system. A small single-language site with one editor needs little more than good global styles.
When to introduce one, and how to stop it decaying
A redesign or rebrand is the natural moment
A redesign rebuilds every template anyway, so it is the cheapest moment to build them as a system; retrofitting one later means reworking the same pages twice. A rebrand is more direct still: with semantic tokens in place, much of the new identity is a change of values. Rebranding your website covers the rest of that launch.
Later change gets cheaper too. When one of the web design trends worth adopting earns its place, it is one change to the system, and as easy to reverse, which is why the future of websites points to design systems over page-by-page design.
Governance that keeps it alive
A design system without an owner decays into a style guide nobody reads. Keep the governance light:
- One named owner who approves new components and variants.
- A request route, so new needs are built for the library, not improvised on one page.
- A short change log of what is new and what has been retired.
- Expiry dates on exceptions, such as a one-off campaign style.
For roles, permissions and approvals across a big site, see website governance for multi-team sites.
A small-first starting plan
With or without a redesign, start small and in this order:
- Inventory the colours, type styles, buttons and sections on your most visited templates.
- Define the tokens: colour roles, type scale and spacing scale, with text and background pairs checked for contrast.
- Build the core components with every state, tested in every language.
- Assemble templates for the pages you publish most, campaign landing pages first if you run many.
- Lock it down: restrict overrides and limit who can change global styles.
- Write the guidance: component notes, a content style guide and a glossary per language.
- Name an owner and book the first audit for six months’ time.
- Grow on demand: add a component when a second page needs it.
Build the system into the site, not a PDF
For a business website, a design system isn’t a deliverable for its own sake. It keeps the strategy, UX, accessibility, content and performance decisions made during a build intact long after launch.
If your site has already drifted, a website redesign is usually the most efficient moment to put one in place. We audit what is there, keep what works and rebuild the rest on WordPress, with global styles and reusable sections your team can edit without breaking the design. Unsure how far to go? Talk to us about what your website needs.