Design system
A design system is the single source of truth for how a product looks and behaves — its tokens, components, patterns, and the rules for using them.
A good design system is not a document but a working toolkit shared by designers and engineers. It keeps a product coherent as it grows and lets teams move faster, because the decisions have already been made once and encoded as reusable parts.
How it works
A design system has layers. At the bottom are design tokens: named colours, type sizes and spacing steps. Components such as buttons, forms and cards are built from those tokens. Patterns combine components into answers to recurring problems, like a sign-up flow or an empty state. Guidelines explain when to use what and why.
It needs owners and a way to change: a place to propose new components, a review, and a versioned release so product teams know what changed.
Example
The Catering Prishtina website's seven routes were built from one design system, so every page shares the same typography, spacing and components, and adding a page means assembling known parts rather than designing from scratch.
Common mistakes
- Starting with a large documentation site before the components exist in code.
- Having no owner, so the system freezes while the product moves on.
- Copying another company's system instead of encoding your own product's decisions.
