What a design system is and when it pays off
Five layers of a design system, what is inside it, one decision that changes everything at once, when it pays off, a site with and without a system and ready systems — with live examples.
In short
A design system is a shared language of a product: principles, tokens, components and templates with rules for using them, living both in the layout and in the code. Instead of designing every page from scratch, the team assembles it from proven parts — a button, a field, a card — whose look and behaviour are already agreed. It pays off when there are many pages and screens, several people work on the product, it develops for years or several products must look like one brand. For a single landing page a full system is overkill — a short set of tokens is enough.
What a design system is made of: five layers
Each layer rests on the one below. Products are built from templates, templates from components, components from tokens, tokens follow from principles.
- Productssite, app, newsletters, presentations
- Templatesproduct page, checkout, account
- Componentsbuttons, fields, cards, navigation, tables
- Tokenscolours, type, spacing, radii, motion
- Principleswho we are for, how we speak, what matters more
Most teams start from the middle — they draw a set of buttons — and wonder why the system does not hold. Without principles there is nothing to decide disputes with, and without tokens components cannot change together.
What is inside and why
Six parts of a working system. A system without documentation and an owner turns into a folder of pictures.
| Part | What it contains | What it gives |
|---|---|---|
| Principles | audience, tone, priorities | a way to settle disputes |
| Tokens | colours, type, spacing, radii, motion | one source of values |
| Components | buttons, fields, cards with all states | the same behaviour everywhere |
| Templates | typical pages and screens | new pages in hours, not weeks |
| Documentation | when to use what, examples, code | new people work without questions |
| Owner and process | who changes the system and how | the system stays alive |
One decision, every place at once
Change the accent: the tag, the progress, the button, the chart, the link and the email change together, because they all refer to one token.
Kitchen, the Petrovs
68% done · assembly on 14 October
Open the projectYour project is ready
Look at the visualisation and confirm the sizes.
ViewWithout a system the same change is a search through every file and screen, and something is always missed. With a system it is one value — and a check that nothing has become unreadable.
When a design system pays off
Eight typical situations with an honest verdict.
-
One landing page for a campaign
Not neededA few CSS variables are enough.
-
A corporate site of 10–20 pages
Tokens and a few componentsTokens, a type scale and the main components.
-
An online shop
Tokens and a few componentsCards, filters, forms and checkout repeat on hundreds of pages.
-
A SaaS product
Full systemDozens of screens and a team that adds new ones every week.
-
Several products of one company
Full systemOne brand must feel the same in all of them.
-
A site, an app and a mobile app
Full systemTokens connect web, iOS and Android.
-
A prototype to test an idea
Not neededSpeed matters more; a ready library will do.
-
A redesign of a large site
Full systemThe best moment to put order in place instead of repeating the chaos.
The same site without a system and with one
Six buttons from different pages. On the left each was drawn separately; on the right they are one component in three variants.
A ready system or your own
Public systems are good to learn from and to start a prototype; a brand needs its own.
| System | Who made it | Good for |
|---|---|---|
| Material Design | Android apps, learning the principles | |
| Human Interface Guidelines | Apple | iOS and macOS apps |
| Carbon | IBM | complex business interfaces |
| Fluent | Microsoft | products near the Microsoft ecosystem |
| shadcn/ui | open source | React interfaces with your own styles |
| Your own | your team | a recognisable brand |
Why design systems fail
-
A system only in the layout tool
The code lives its own life, and after a few months they no longer match.
-
Too big from the start
A hundred components before the first page — and none of them tested in real work.
-
No owner
Everyone adds their own variants, and the system turns back into chaos.
-
No documentation
People do not know when to use which button and draw a new one.
-
A copy of someone else’s system
The product looks like thousands of others built on the same library.
-
A system as a project, not a product
It is finished once and then slowly falls out of date.
Questions about design systems
What is a design system in simple words?
A set of rules and ready parts from which all pages and screens of a product are assembled.
How is it different from a UI kit?
A UI kit is a set of pictures of components; a system adds tokens, code, states, documentation and rules.
How is it different from a brand book?
A brand book describes the identity; a design system turns it into working parts of an interface.
Does a small site need a design system?
A full one — no; a set of tokens and a type scale — yes, it costs almost nothing and keeps order.
Who should own the system?
A designer and a developer together, with a simple process for proposing changes.
Can I take Material Design instead?
For an internal tool or a prototype — yes; a brand will look like everyone else’s.
Online form
A design system
for your product
I build design systems at the scale the product needs: from a set of tokens for a site to a library of components for several products. Tell me about the project — I answer within one working day.