Design systems: when your product needs one and what it costs

A product needs a design system when its interface grows, several designers and developers work on it and identical elements start to diverge. It is a shared set of rules, tokens and components in design and code that speeds up new screens and keeps the interface consistent. For a landing page or small MVP, a UI kit is enough.

Here is what it consists of, when it pays off and how to introduce it gradually.

What is a design system?

A design system is the single source of interface rules: colours, fonts, spacing, components and guidance on using them, captured in both designs and code. What sets it apart from a set of mock-ups is that code components match design components, so a change in one place spreads across the whole product.

What it usually includes:

• design tokens — colours, font sizes, spacing, radii and shadows as named variables;
• components — buttons, fields, tables and modals with all their states;
• patterns — standard screens and blocks: forms, lists, cards;
• guidelines — when to use which component, tone of voice, accessibility;
• documentation — a living component catalogue with examples.

When does a design system pay off?

A design system pays off when the interface is large and constantly evolving: many screens, several products under one brand, a team of several designers and front-end developers. There it saves time on every new screen and reduces inconsistencies that would otherwise need fixing.

Situation	What you need
Landing page, corporate site	A style guide and a few blocks in the designs
Product MVP	A UI kit: basic components in design and code
A growing product with several developers	Design tokens and a component library in code
Several products under one brand	A full design system with documentation and an owner

Photo: Unsplash

What does a design system look like in code?

In code, a design system starts with tokens — variables used by every component — and a component library that mirrors the designs one to one. Developers assemble screens from ready components instead of drawing a button from scratch.

:root {
  --color-primary: #1e3a8a;
  --color-danger: #b91c1c;
  --color-text: #111827;
  --font-size-body: 1rem;
  --space-2: 0.5rem;
  --space-4: 1rem;
  --radius-md: 8px;
}

.button {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: #fff;
}

What tokens plus components give you

1. Changing the brand colour or font is one edit to the tokens.
2. A dark theme is another set of values for the same tokens.
3. States — focus, error, loading — are built once and look the same everywhere.
4. Accessibility is built into components and inherited by every screen — see website accessibility.

How much does a design system cost?

The cost depends on scale: a UI kit for an MVP is part of normal design and development, while a full system with documentation and a support team is a separate ongoing project. The main mistake is building a large system up front while the product is still finding its shape and the interface changes weekly.

What drives the cost:

• the number of components and their states;
• the number of platforms: web, iOS, Android;
• whether documentation and a component catalogue are needed;
• who will maintain the system after it is built.

A design system without an owner goes stale quickly: the team starts building components "on the side", and a year later there are two of everything again.

How do you introduce a design system gradually?

Introduce a design system gradually: start with tokens and the most common components, use them on new screens and migrate old screens as they change. Stopping development for a "big interface overhaul" is almost never necessary.

The order:

• audit what exists: collect every variant of buttons, fields and colours;
• agree on tokens and move them into variables;
• build 10–15 basic components that cover most screens;
• assemble every new screen only from system components;
• appoint an owner who approves changes and keeps design and code in sync.

If you are still choosing a front-end framework, remember that ready component libraries for it also speed up the start — see Vue vs React.

In short

• A design system is shared tokens, components and interface rules in design and code.
• It pays off in a large, evolving product with several designers and developers.
• A landing page needs a style guide; an MVP needs a UI kit.
• Start with tokens and common components; migrate old screens gradually.
• Without an owner a design system goes stale — appoint one.