Design system
One shared set of colours, type, spacing and components that every screen draws from, so a product looks and behaves like one thing.
Updated October 2026 · with examples from our own builds
What does design system mean in practice?
A design system replaces one-off styling with named tokens, such as a primary colour, a body text size or a corner radius, and a kit of components built from them. Change a token and every screen that uses it changes with it.
The return is speed and consistency. New screens assemble from parts that already work, themes and rebrands become a settings change, and designers and developers talk about the same named things.
A system that looks tidy but isn't enforced will drift. A duplicated token or a hard-coded colour can break one theme while every build stays green, so the rules need a check that fails, not just a style guide.
Design system at a glance
- Made of
- Tokens, components and written usage rules
- Pays off when
- Several roles, themes or apps must stay consistent
- Needs
- An automated check, or it drifts
Where has design system come up in our builds?
Raw colours are declared once and components read only semantic roles that each palette re-points. A raw token declared twice once turned body text white on a near-white background in three of the four themes while TypeScript and the build stayed green; check:tokens now fails on that, which is what let the firm restyle its site from the panel with five palettes and five font sets.
One design brief, one token sheet and one shared component kit sit above all 135 screens, so the web console, the public site and three phone apps read as one product.
Before building the case-study pages we wrote a pattern library: section types every study shares reuse one layout across all three, while no two sections on the same page repeat a pattern.
Common questions about design system
Is a design system worth it for a small product?
A small one is. Even a few named colour and type tokens, plus a check against hard-coded values, makes later themes and rebrands cheap and keeps an admin panel and a public site looking related.
Can a client change the look of their site without a developer?
Yes, if colours and fonts run on tokens with enforced roles. BogarInfra's partners pick from five palettes and five font sets in the admin panel and preview the real public site before visitors see the change.
Related terms
Planning a product and not sure where design system fits? Ask us, or browse all 116 terms in the glossary.