Every project starts with good intentions about consistency, and most end the same way: the brand's blue exists as #3B82F6 in forty-one places, #3b82f7 in three (nobody knows why), and a lone rgb(59,130,246) someone pasted from DevTools. Then the rebrand lands, and “change the blue” becomes a week of find-and-replace archaeology. A design system is the cure, and it's built from two layers: tokens — your design decisions, named and stored in one place — and components that consume those tokens instead of hardcoding values. This guide walks the full workflow with two Wigley Studios tools: Brand Token Studio to define and export the tokens, and UI Kit Packs for token-driven components that wear them — so a rebrand becomes a token swap, not a rewrite.
The Bigger Idea
This is the “single source of truth” principle applied to design. If you want the architecture story of why tokens beat scattered hex codes — naming, scales, semantic layers — start with Inside Brand Token Studio. This guide is the hands-on how.
The Two Layers of a Design System (and Why You Want Both)
When teams say “we need a design system,” they usually mean two needs that are better understood separately:
- The tokens — the decisions: your colors, type scale, spacing rhythm, radii, and shadows, each with a name (
--color-primary,--space-4) and exactly one defined value. This is what makes the brand consistent. That's Brand Token Studio's job. - The components — the consumers: the buttons, cards, forms, and navbars that reference those names instead of hardcoding values. This is what makes the brand usable. That's UI Kit Packs' job.
One without the other only half-works. Tokens with no components are a beautiful palette nobody applies consistently; components with hardcoded values are a rebrand time bomb. Wire components to tokens and you get the design-system payoff everyone actually wants: change the decision once, and everything that consumes it follows.
Step 1: Define Your Tokens in Brand Token Studio
Start with the decisions. Brand Token Studio is a free, browser-based token editor: define your brand's visual DNA, see it applied live, and export it in the format your stack speaks.
1 Set the five families
Work through colors (primary, secondary, accent, and neutral scales, plus semantic success/warning/error/info — with 50–950 shade scales generated for you), typography, spacing, radii, and shadows. Not sure where to start? Load one of the starter themes and bend it toward your brand rather than facing a blank palette.
2 Preview against real components
The live component showcase applies your tokens to buttons, cards, forms, alerts, and type as you edit — so you're judging the system the way users will actually meet it, not squinting at swatches. This is where you catch the accent that vanishes on cards or the radius that reads as a different brand entirely.
3 Export in your stack's dialect
One click gives you the token set as CSS Custom Properties, JSON Design Tokens (the W3C format), or a Tailwind config. Grab the CSS variables for the workflow below — the JSON is your tool-agnostic archive, and the Tailwind config drops into an existing Tailwind pipeline.
Step 2: Drop the Tokens Into UI Kit Packs
Decisions made — now they need components to wear them. UI Kit Packs are component libraries built token-first: 16 component families — buttons, cards, forms, navigation, and the rest — in HTML, Tailwind, and React flavors, with every color, space, and radius referencing a CSS-custom-property token layer instead of hardcoded values. That design choice is exactly what makes this workflow click (the architecture is covered in Inside UI Kit Packs).
The handoff itself is a deliberate, two-minute manual token-drop: open the pack's token file — the :root block where its custom properties live — and replace those values with your Brand Token Studio export. Map your names onto the pack's (your --color-primary feeds its primary, your spacing scale feeds its spacing), save, and reload. Every component in the pack re-dresses itself in your brand at once — no per-component editing, because none of them ever hardcoded a value in the first place.
Prefer a generated kit instead?
Brand Token Studio's export screen also offers a one-click “send to UI Kit Generator” path — that's a separate tool that generates a component library from your tokens, covered in our five-minute UI kit guide. Use the Generator when you want a kit produced from scratch; use the manual drop above when you're theming the pre-built, hand-tuned UI Kit Packs. Same tokens either way — that's the point of having them.
Step 3: Prove It With the Rebrand Test
Here's how you know you built a design system and not just a styled page: change one token — shift the primary color, tighten the base radius — re-export, and drop the updated variables in. If every button, card, form, and alert follows the change instantly and nothing needs hand-editing, the system works. That thirty-second test is the entire value proposition compressed: the difference between “change the blue” being a token edit and being an archaeology project. Run it once at the start, and you'll never accept a hardcoded hex value in a component again.
Which Tool for Which Job
| You need… | Reach for |
|---|---|
| Colors, type, spacing, radii, shadows — named and scaled | Brand Token Studio |
| A live preview of tokens on real components | Brand Token Studio |
| Exports: CSS variables, W3C JSON, Tailwind config | Brand Token Studio |
| Production-ready components in HTML, Tailwind, or React | UI Kit Packs |
| 16 component families that consume a token layer | UI Kit Packs |
| A one-click generated kit from your tokens | UI Kit Generator (its own tool) |
Why This Beats Styling as You Go
The usual approach — style each component as you build it, copy values from the last one — fails in two predictable ways. It drifts: forty-one blues become forty-four, spacing invents itself per page, and consistency erodes one small decision at a time. And it locks you in: with values scattered through every component, any brand change costs a full sweep of the codebase, so the brand simply stops evolving. Tokens fix both with one move — every decision lives in exactly one place, and every component borrows rather than owns it. Define the decisions in Brand Token Studio, let UI Kit Packs' components wear them, and you have what teams pay design-system consultants for: a brand you can change with a token swap — built in an afternoon.
Define Your Tokens, Free, in the Browser
Brand Token Studio is part of Developer Labs — define your brand's colors, type, spacing, and shadows, preview them on live components, and export CSS, W3C JSON, or Tailwind config. Then dress your components in them.
Open Brand Token Studio