What Is a Design System?
Tiffinbox is a food-delivery company with four products: the customer app, a web dashboard for partner restaurants, an app for delivery riders and a marketing website. Put them side by side and you find three shades of orange, three different "confirm" buttons and three ways of showing an error. Nobody chose that. It happened because each team solved the same problems on its own. A design system is how a company stops that from happening.
The rule
Shared decisions, shipped as reusable parts, with rules for using them.
A design system has three layers, and it needs all three.
- Decisions. Choices made once and given names: the brand orange, the type sizes, the spacing steps, the way the product sounds when it talks to people.
- Reusable parts. Those decisions built into pieces people can pick up and use: a button, a text field, a card. They exist twice: as components in the design tool, and as working code in each product.
- Rules. Written guidance on when and how to use each part, plus an agreed process for changing them.
At Tiffinbox, the system is called Thali, after the plate that holds many small bowls. One decision in Thali, stored once and used by every product, looks like this:
:root {
--thali-color-brand: #E8590C;
--thali-space-4: 16px;
}Take away any layer and the system weakens. Decisions with no parts are a brand PDF that engineers never implement. Parts with no decisions are a pile of widgets that don't match. Both with no rules drift apart within a year.
One more idea matters from the start: a design system is a product that serves other products. Its users are the designers and engineers who build Tiffinbox's apps. Like any product it needs releases, documentation, support and a roadmap. It is never "done".
Many companies publish theirs, so you can study real ones: Google's Material Design, IBM's Carbon, Shopify's Polaris and the GOV.UK Design System are good places to start.
The shortcut
When someone says "we have a design system", run the decision, part, rule check. Look for each layer. If one is missing, you have a piece of a system, not a system.
The claim
A designer says, "We already have a design system: a shared file with 40 components."
Drills
Answer fast — trust the rule.
Which description fits a design system best?
Tiffinbox has a written colour palette and a voice guide, but nothing built in the design tool or in code. Which layer is missing?
Who are the main, day-to-day users of Thali?
Why is a design system described as "a product that serves other products"?
Remember
- A design system is shared decisions, shipped as reusable parts, with rules for using them.
- Shortcut: run the decision, part, rule check. A missing layer means a piece of a system, not a system.
- Trap: calling a file of drawings or a code package a design system. It is a product that needs care, never a one-off delivery.