What is a design system?
Glossary · By Utkarsh Dhairya Panwar · Updated
A design system is the shared set of decisions a product is built from: design tokens (colour, type, spacing), reusable components, and written rules for using them, kept in sync between design files and code. It makes the same thing look and behave the same everywhere.
The three layers, in plain words
- Tokens are the named raw values, like a colour called text-muted, a spacing step called space-4 or a radius called radius-md.
- Components are the buttons, inputs, tables, filter bars and modals built from those tokens, along with their states (hover, disabled, loading, empty, error).
- Rules are the written part: when to use a modal versus a new page, how a destructive action is confirmed, what an empty table says.
A Figma file full of components is only the middle layer. With no tokens underneath, every component hard-codes its own values. With no rules on top, two designers will use the same components to build two different patterns.
Why product teams bother
Speed first, then trust. When a severity label or a table behaves the same on every page, users learn it once. When engineers can import the table instead of rebuilding it, features ship sooner and reviews stop being arguments about which version is correct.
A system pays for itself only when it matches production. A beautiful library that engineers can't import is a picture of a system. The test I use is simple: when someone builds a new screen, do they reach for the shared parts without being asked?
The two small systems I built, at CodeAnt AI and xPay, are written up in my guide to design systems for startups, with what each one changed and how small each started.
Misconceptions I run into
- "A design system is a UI kit." A kit is a set of parts. A system also includes the decisions about when each part is used.
- "You need one before you have a product." Building a large library before the product settles wastes the work. Start with the pieces your screens already repeat.
- "Once it's built, it's done." A system nobody maintains drifts back into one-offs within a few releases.
- "It's a design team thing." If the names in Figma don't match the names in code, the system only exists for designers.
Related terms
Design tokens are the bottom layer. A component library is the middle layer without the rules, and the difference matters when you decide what to build first. A style guide covers brand rules like logo, palette and tone, and usually gets absorbed into a system's foundations. Design debt is the drift a system is usually built to pay down.
Design system vs component library: Style guide, UI kit, library and system side by side, and which one a startup needs first.
Design tokens, defined: The named values every component in a system is built from.
Questions people ask
What is a design system in Figma?
In Figma it usually means a published library: variables for tokens, components with their states, and documentation pages. It only becomes a system when the same names and values exist in the codebase.
What are examples of design systems?
Public ones include GitHub Primer, Atlassian's design system, Vercel Geist and Shopify Polaris. My design system examples page covers what a small team should borrow from each.
Who owns a design system at a startup?
Usually the first designer, with one engineer who owns the coded side. At CodeAnt I built the system in parallel with the product as founding designer.
Sources
- Design Systems 101, Nielsen Norman Group
- Design Tokens Format Module 2025.10, W3C Design Tokens Community Group
- Guide to variables in Figma, Figma Help Center
Working on this?
Tell me what you're building and where it's stuck: book a 30-minute call, email work@utkarshdesign.com or send a brief.