Why it shows up in your week
Three landing pages shipped in one quarter. Each has a slightly different button, form, and spacing rhythm. The brand looks tired and engineering estimates rise. A design system is how you stop paying that tax.
In plain language
Tokens define colour, type, and spacing. Components assemble those tokens into buttons, forms, cards, and navigation. Documentation says when to use each variant.
For WordPress, the practical system is often theme.json plus block patterns that mirror the Figma library.
States matter: hover, focus, error, disabled. Pretty default buttons that fail accessibility checks are not a system.
Governance matters: who can add a new component, and who rejects one-off exceptions that break the library.
Start small. A lean system that ships beats a 200-component fantasy that nobody maintains.
Facts worth keeping
- Layers
- Tokens → components → patterns/templates → docs
- Common tools
- Figma libraries, Storybook, theme.json / CSS variables
- WordPress mapping
- Block patterns + theme.json tokens
- Quality bar
- Accessible states, naming parity design↔code
- Failure mode
- Shadow components invented per campaign
Not the same as
- A brand style guide PDFUseful for logo and tone. A design system is implementable UI with coded or CMS-ready parts.
- A component library dumpComponents without usage rules and tokens still drift. The system includes when and why.
- Full product design ops overnightMarketing sites can start with a lightweight pattern system. Depth can grow with product needs.
Where it bites
Missing design systems hurt when five landing pages look related only by logo colour, or when engineers invent spacing that marketing cannot reproduce in the CMS.
Every new campaign then renegotiates basics instead of shipping the offer.
What to check
- Do Figma and production share the same component names and states?
- Are spacing and type expressed as tokens, not one-off values?
- Can an editor build a new section from patterns without breaking brand rules?
- Are focus and error states defined, not only the happy default?
- Who approves exceptions when a campaign wants a one-off component?
Common questions
What is a design system?
A shared set of UI components, design tokens, and rules that keep interfaces consistent across pages and teams.
Do marketing sites need a design system?
Yes when more than a handful of templates must stay on-brand. Even a lightweight pattern library prevents drift across campaigns.
How is a design system different from a style guide?
Style guides describe. Design systems ship reusable parts with rules that design and engineering both use.
What should you check first in a design system?
Core components (buttons, forms, navigation, type scale) match between design files and production, including hover and error states.
Can WordPress use a design system?
Yes. theme.json, block patterns, and custom blocks are the usual mapping from Figma to editor-friendly parts.