What Is a Design System? A Plain-English Explainer

A design system is a shared set of design decisions and reusable parts. It has three layers: tokens (the colors, type sizes and spacing you have decided on), components (buttons, forms, cards and other pieces built once), and guidelines (written rules for how to use them). Every page is then assembled from the same parts, which keeps your site consistent and makes each new page faster to build.

Most explanations are written for product teams with dozens of designers and engineers. This one is for a small business. It covers what a design system contains, how it differs from a style guide, whether you need one, and what a light version looks like.

Key takeaways

• A design system is tokens, components and guidelines, kept in one place and used by everyone who makes your pages.
• It saves time by removing repeated decisions: nobody re-chooses a button color or a spacing value.
• A style guide describes the look. A design system also contains the built parts and the rules.
• A small business does not need a full system. It needs a light one: about five token groups, ten components and one page of rules.
• A system is only worth having if someone owns it and keeps it current.

What is a design system, in two sentences?

The Nielsen Norman Group defines it as "a complete set of standards intended to manage design at scale using reusable components and patterns" (NN/g, Design Systems 101). In plain terms: you decide how things look and behave once, write it down, build the parts once, and reuse them everywhere.

The word "scale" matters. A system exists to stop the same decision being made again and again by different people. If only one person ever touches your site, that problem is smaller, and the system can be smaller too.

What is inside a design system?

Most systems have five layers. You can think of them as a set of building blocks, from small to large.

Tokens

A token is a name for a design value. Instead of writing #7C3AED in forty places, you write color-accent once and point to it. Change the value in one place and every button, link and icon follows. Tokens are the cheapest layer to set up and the one that pays off first, especially at a rebrand.

Components

A component is a part you build once, with all its states: default, hover, focused, disabled, error. NN/g describes a component library as a catalog of reusable elements, each with a name, description, adjustable attributes, states and code (NN/g). The point is that a "Button" is one thing in the design file and one thing in the code, not twelve slightly different buttons.

Guidelines

Guidelines are the short rules that stop good parts being used badly. Examples: how many words a button label may have, what error messages sound like, which heading sizes may be used in which place. They are the layer small teams skip most often and miss most later.

Design system vs style guide vs brand guidelines vs UI kit

These four terms get mixed up. They overlap, but they do different jobs.

Brand guidelines come first. They are the input. If you do not have those yet, start with our guide to brand identity vs a logo, because a system built on an unclear brand just makes the confusion consistent. For checking that print and web actually match, see the brand consistency checklist.

Why do teams use a design system?

NN/g lists the main benefits: designs can be produced and replicated faster with less risk of inconsistency, routine styling work shrinks, a shared vocabulary reduces miscommunication, and rebrands can be managed at scale (NN/g). For a small business, three of these matter most.

1. Speed. A new landing page is built from existing parts. You are arranging, not inventing.
2. Consistency. Visitors notice when a button looks different on the pricing page. Mismatched details make a business look less careful, even when people cannot say why.
3. Fewer questions at handoff. When the designer says "card" and the developer builds "card", nothing gets lost in between. This is where the system connects to design handoff and to the design QA checklist: the system is the reference you check the finished build against.

We are not going to quote a percentage for "time saved". Published figures vary by team and are mostly self-reported, so a number would be a guess. The honest version is that the saving grows with the number of pages and the number of people.

What are some design system examples?

Four public systems are good to study. They are far bigger than anything a small business needs, so copy the structure, not the size.

• Material Design (Google): a large, widely used system with tokens, components and detailed guidance.
• Polaris (Shopify): built for the Shopify admin, notable for plain-language writing guidelines.
• Carbon (IBM): described on its site as IBM's open-source design system, informed by the IBM Design Language (Carbon).
• GOV.UK Design System: organized into styles, components and patterns, with reusable, accessible components for forms, navigation and tables (GOV.UK).

What to copy: the way each component page shows when to use it, when not to, and its states. That "when not to" line is the most useful habit to borrow.

Do you need a design system for a small business?

Honest answer: usually not a full one, and sometimes nothing at all.

Signs you have outgrown "just a style guide": the same button exists in three shades, a developer asks you what a spacing value should be, a new page takes longer than the last one, or a freelancer's work does not match the rest.

What does a light design system look like?

A light system is the smallest version that still removes repeated decisions. It fits on a few screens.

Copyable checklist

• Colors: one primary, one accent, a neutral scale, and success, warning and error colors, all named
• Type: a font pair and five or six named sizes (for example heading 1 to 3, body, small)
• Spacing: a short scale, such as 4, 8, 16, 24, 40 and 64 pixels
• Shape: one corner radius, one shadow style, one border style
• Ten components with their states: button, link, input, textarea, select, card, header, footer, form message, section wrapper
• Three or four patterns: hero, contact form, testimonials, call to action
• One page of rules: what to use when, tone of voice, image style, what not to do
• One owner, and a date to review it

How to start small

1. Audit what you have. Screenshot every page and list the buttons, colors and font sizes actually in use. You will find more variations than you expect.
2. Cut it down. Choose the version of each thing you want to keep and drop the rest.
3. Name the tokens. Give each kept value a name that describes its job (color-primary), not its look (color-blue).
4. Build the ten components once, in the design file and in code, with their states.
5. Write the rules on one page. If it needs more than a page, it will not be read.

Then use it for the next page you build, and fix gaps as you meet them. Do not try to finish the system first.

Keeping it alive

A system goes stale the day nobody owns it. Pick one person who approves changes. When someone needs a part that does not exist, they add it to the system first and then use it. Review it twice a year. If it is not used for the next page, it is not working, and it is better to simplify it than to defend it.

How it ties to a website build

On a website project, the design system is the bridge between design and code. Tokens become CSS variables, components become coded components, and the guidelines become the checklist for sign-off. A studio that designs and builds the site can make the system once and use it directly, with no translation step. If you want that handled for you, see our Design & Development service.

Lobos Design is a two-person studio in Las Palmas de Gran Canaria that designs and builds websites and the systems behind them.