What a design system actually is — and why your brand needs one

Three years ago a client came to us with a problem they couldn't articulate clearly. Their website looked good. Their app looked good. Their pitch deck looked good. The product UI looked good. But when you put them all on the same screen, they looked like four different companies. The blue was almost the same blue, except on the app where it had drifted purple over two redesigns. The button radius was 6 pixels on the site, 8 in the app, square in the deck. The headline font appeared in three different weights nobody could remember choosing.

Their customers weren't complaining. Their analytics weren't suffering visibly. But every internal team was wasting hours each week recreating the same elements from scratch, every freelance designer who joined a project started by asking what the brand colours actually were, and every new product launch felt slightly off-brand even when nobody could explain why. They were paying what we call the inconsistency tax, and it was bigger than they realised.

What they needed was a design system. They thought design systems were a Google or Shopify thing, only relevant at hundreds of designers and millions of users. They were wrong. This article explains what a design system actually is, when your brand reaches the threshold of needing one, and what a well-built system contains.

What is a design system

A design system is a single, authoritative library of reusable design elements and the rules for using them, maintained as a living asset across both design tooling and code. It is not a PDF. It is not a Figma file your designers refer to. It is a connected system in which the components your designers draw and the components your developers build are the same components, defined once, kept in sync, and updated together.

A design system has three layers. Tokens are the smallest unit of design decision: the exact hex of "primary blue", the precise scale of spacing increments, the font sizes that exist and the ones that don't. Components are reusable assemblies built from those tokens: buttons, form fields, cards, modal dialogues, navigation patterns. Documentation sits around all of it, explaining when to use each component, when not to use it, and what variants exist for what purposes.

The "system" part matters. A pile of components without rules is just a library. A set of rules without enforcement mechanisms is just a wishlist. A design system works because the components are reusable, the rules are followable, and both sides of the team (design and engineering) are pulling from the same source.

Design system versus brand guidelines versus style guide

These three terms get used interchangeably and they shouldn't be.

Brand guidelines define what your brand is at a strategic and identity level. Logo usage, primary colour palette, typography pairings, tone of voice, photography direction. They tell anyone touching the brand what it stands for and how it should feel. Brand guidelines are usually a PDF or a Notion page. They're the constitution.

A style guide is a more tactical document covering visual rules for digital applications specifically. Header sizes, button styles, form patterns, spacing rules. It bridges brand guidelines and implementation but it's still a document, not a tool. People read it and try to apply it.

A design system operationalises all of that. The tokens are real variables in the codebase. The components exist as both Figma library symbols and React (or Vue, or whatever stack) components. Updating the system updates every place it's used, automatically. Designers stop redrawing buttons because they can drag a button in. Developers stop hand-coding spacing because they reference a token. The system enforces consistency by making consistency the path of least resistance.

A brand can have all three: brand guidelines at the strategic level, a design system at the operational level, and a lightweight style guide for partners and external teams who need the rules but not the tooling.

When you need a design system

You don't always need one. Building a proper design system costs between £15,000 and £80,000 depending on scope, and maintaining it costs ongoing time. There are signals that tell you you've crossed the threshold.

You have three or more digital touchpoints. Marketing site, product app, email templates, sales decks, internal tools. As soon as the same brand needs to appear in three or more places maintained by three or more people, drift becomes inevitable without a system.

You have multiple teams or multiple agencies. A single in-house designer can hold the brand in their head. Once you have a marketing team, a product team and external partners, the rules need to live outside anyone's head.

You ship frequently. If you're launching new pages, new features, new campaigns every week, the cost of recreating components from scratch each time outweighs the cost of building the system.

You're hearing the symptoms. Designers asking what the brand font is. Developers hard-coding hex values from screenshots. PMs noticing that the same button looks different across the product. New hires taking weeks to "get" the brand.

You're planning a rebrand or major redesign. This is the cleanest moment to build a system, because you're rebuilding the components anyway. Stopping to do it properly costs marginal extra effort and pays back across the next five years.

You probably don't need one yet if you're a solo founder, a pre-product startup, or a small team running one website and one social presence. A well-maintained Figma file and a Notion page of brand rules will serve you. Build the system when the cost of not having one starts to exceed the cost of building one.

Tokens turn brand colours from a guess into a contract. Source: Pexels

What's inside a well-built design system

Colour tokens, defined semantically

Junior teams define colour palettes as flat lists of hex codes. Senior teams define them semantically. The difference is enormous.

A flat palette says: brand-blue is #1E3A8A, brand-orange is #F97316, grey-50 through grey-900 are these nine values. That tells you what the colours are but nothing about when to use them.

A semantic palette adds a layer on top: "primary" is brand-blue, "surface-default" is white, "surface-elevated" is grey-50, "text-primary" is grey-900, "feedback-success" is a specific green, "feedback-error" is a specific red. Now the rules are encoded. A designer dropping a success state doesn't pick a green; they reference the success token. If you ever rebrand and shift your primary from blue to teal, you change one token and the whole product follows.

A design system is a toolset, not a rulebook. Source: Pexels

A typography scale

Not a list of fonts. A scale. The exact sizes that exist (typically eight to twelve steps from caption through display), the weights that are allowed at each size, the line-heights, the letter-spacing where it matters. A proper type scale eliminates the conversation about whether a heading should be 22px or 24px. Neither: it's 28px because that's the next step on the scale.

A spacing system

The same logic for whitespace. A spacing scale based on a single base unit (4px or 8px are the common choices), with named tokens (xs, sm, md, lg, xl, 2xl) referenced by both designers and developers. Every margin, padding and gap in the product becomes a multiple of the base unit, which makes layouts feel mathematically calm rather than visually noisy.

A component library, linked across Figma and code

This is the heart of the system. Buttons, inputs, selects, checkboxes, radio groups, cards, tabs, accordions, modals, toasts, navigation patterns. Each one exists as a Figma component and as a code component, both consuming the same tokens. When the system is mature, designers and developers stop building these from scratch entirely. They compose.

The number of components is smaller than you'd think. Most mature design systems have 40 to 80 core components. Stripe's published system is around 60. Shopify's Polaris is similar. The discipline is in keeping the library small and the variants well-defined, not in cramming in every possible UI pattern.

An icon set

Either a curated subset of a third-party icon library (Phosphor, Lucide, Material Symbols) or a bespoke set drawn for the brand. Either way, consistent stroke weight, consistent corner radius, consistent grid. Inconsistent icons are the single most common visual tell of a brand without a design system.

Motion guidelines

How long does a hover transition last? What easing curve do modals open with? How does a toast animate in? Motion is often the last thing teams formalise and the first thing users register subconsciously. Defining four or five base durations (instant, fast, default, slow, deliberate) and three or four easing curves gets you most of the way.

Documentation that engineers actually read

The component library and tokens are useless if nobody knows how to use them. Documentation lives alongside the code, typically in tools like Storybook, Zeroheight or a custom internal site. For each component, it covers: anatomy (what parts it has), variants and states, accessibility notes (keyboard behaviour, ARIA roles, contrast requirements), usage rules (when to pick this component over a similar one), and code examples that copy-paste cleanly.

🎬 Watch: Designing inside a system, not around it

When the system carries the weight, designers can focus on the decisions that matter.

The business case

The pitch for a design system isn't aesthetic. It's economic. Three concrete returns.

Time saved on every new build. Once components are in the library, new pages and features assemble in hours instead of days. Internal benchmarks at companies like Airbnb and Atlassian have put the speed-up at 30 to 50% on shipping velocity for design-heavy work. Even at 20%, the system pays back inside a year on most teams of five or more.

Brand consistency without manual policing. The system enforces consistency by default. A designer using the library can't accidentally use the wrong blue, because the wrong blue isn't in the library. Quality control shifts from a person reviewing every screen to a system preventing the error upstream.

Faster onboarding. New designers and developers ramp up in days instead of weeks. They learn the system once, not the brand quirks of every project they touch.

There's also a softer return that matters at the executive level. A coherent brand expressed consistently across every surface compounds over time into trust. Customers don't analyse it. They feel it. A confident, consistent brand is read as a confident, consistent business.

Design systems live or die at the design/dev interface. Source: Pexels

How Nexus builds design systems

We don't sell design systems as a separate service to clients who don't need them. We sell them as the natural endpoint of work that grows past a certain scale.

When we do build them, we work in this order. First, a brand audit: we collect every existing surface (sites, apps, decks, social, print) and document where the brand is consistent and where it's drifted. That audit becomes the brief for the system.

Second, tokens. We define the colour, typography, spacing and elevation token sets before drawing a single component. This is the slow part. Get the tokens right and the components compose themselves; get them wrong and the system collapses.

Third, components. Built in Figma and code in parallel, by the same team, with both versions reviewed together. We typically ship the first usable system with around 30 core components and grow from there.

Fourth, documentation and governance. We document the system in Storybook or Zeroheight, define who owns updates, and set up a contribution process so the system stays alive rather than ossifying.

For most mid-market brands we work with, a first version of the system ships in eight to twelve weeks. The ROI shows up immediately in the first project that consumes it.

Building on multiple products? Let's scope a design system.

If you're running more than one digital surface, paying for the same components to be rebuilt across teams, or watching your brand drift without quite knowing how to stop it, a design system is probably the highest-leverage investment you can make in the next twelve months. Book a 30-minute scoping call and we'll walk you through what yours would look like and what it would cost.