Design systems for small teams: a WordPress-native approach
You do not need a 200-component library. You need tokens, a handful of blocks and rules everyone follows. Here is how we do it inside WordPress.
On this page 5 sections
Key takeaways
- Small teams need consistency, not a huge component library.
- Define colour, type, spacing and radius once, as tokens, and use them everywhere.
- In WordPress, theme.json feeds the same tokens to the editor and the front end.
- Patterns give editors starting points without letting layouts drift.
- Write the rules on one page and keep it next to the code.
Design systems have a reputation for being enterprise projects with their own teams. For a small business the goal is simpler: every page should look like it belongs to the same site, and nobody should need a designer to publish an article.
Tokens first#
Colour, type scale, spacing and radius are defined once as variables. In WordPress these live in theme.json, which feeds both the front end and the editor, so what editors see is what readers get. This site uses eight type sizes and a small set of colour tokens, each with a light and a dark value.
A small set of real components#
Buttons, cards, callouts, stats, quotes, media with captions. Each exists as a block style or pattern inside the editor, with its CSS written once by hand. Editors assemble pages from these; they do not style anything themselves.
Patterns over page builders#
Block patterns give editors starting points for common layouts, such as a service section or a case-study summary, without unlocking arbitrary margins and colours. Lock what should stay fixed and leave the content editable.
Rules that fit on one page#
When to use the gradient highlight, how long a headline can be, which image ratio goes where. We write these as a one-page guide and keep it in the repository next to the code.
Why this works#
Editors move faster because there are fewer decisions. Developers move faster because there is one source of truth. And the site stays light because nothing is loaded that the system did not define.
Sources and further reading
- Global settings and styles (theme.json) — Theme Handbook developer.wordpress.org
- Block patterns — Theme Handbook developer.wordpress.org