How to Use Brand Token Studio to Build a Design System

A design system without tokens is a style guide that nobody follows. Design tokens — the named values for colors, typography, spacing, and shadows that define your brand — are the foundation of consistent UI across any project. But creating and maintaining them manually is tedious, error-prone, and disconnected from the code that actually uses them.

Brand Token Studio is a free browser-based tool in our Developer Labs suite that lets you define, preview, and export design tokens in a single workflow. No signup required to start. This guide walks through how to use it from scratch.

What Are Design Tokens?

Design tokens are the atomic building blocks of a design system. Instead of scattering raw hex codes, pixel values, and font stacks across your CSS, you define them once as named variables and reference those everywhere.

• Colors: Primary, secondary, accent, background, surface, text, and state colors (success, warning, error)
• Typography: Font families, sizes, weights, line heights, and letter spacing for headings, body, and UI text
• Spacing: A consistent scale (4px, 8px, 12px, 16px, 24px, 32px, etc.) used for padding, margins, and gaps
• Shadows: Elevation levels from subtle surface lifts to prominent modal overlays

When these values live in one place, changing your brand's primary color from blue to teal takes seconds, not hours of find-and-replace across a codebase.

Getting Started with Brand Token Studio

Open Brand Token Studio in your browser. The tool is free and runs entirely client-side. You'll see four sections, each corresponding to a token category: Colors, Typography, Spacing, and Shadows.

Step 1: Define Your Color Palette

Start with the colors section. The studio provides slots for your core palette:

• Primary — Your main brand color, used for buttons, links, and key UI elements
• Secondary — A complementary accent for secondary actions and highlights
• Background & Surface — Base canvas and card-level colors
• Text — Primary, secondary, and muted text colors
• State Colors — Success (green), warning (amber), error (red), info (blue)

Use the color pickers to set values, or type hex codes directly. As you adjust colors, the live preview updates in real time so you can see how your palette looks across common UI patterns — buttons, cards, form fields, and navigation.

Step 2: Set Typography Tokens

Typography tokens define the type scale your project uses. In the typography section, you can configure:

• Font families — Separate settings for headings, body text, and monospace/code
• Size scale — From small labels to large display headings
• Weight scale — Light, regular, medium, semibold, bold
• Line height & letter spacing — Tuned per size level for readability

Step 3: Configure Spacing

Spacing tokens replace magic numbers in your CSS. Instead of guessing whether a card needs 16px or 20px of padding, you reference a named step from a consistent scale. The studio lets you define a base unit and generates a scale from it — typically powers of a base like 4px or 8px.

Token Name	4px Base	8px Base	Common Use
space-1	4px	8px	Tight gaps, icon padding
space-2	8px	16px	Form field spacing, button padding
space-3	12px	24px	Card padding, section gaps
space-4	16px	32px	Container padding
space-6	24px	48px	Section spacing
space-8	32px	64px	Page-level margins

Step 4: Define Shadow Tokens

Shadows communicate elevation — which elements sit above others. The studio provides a shadow scale from subtle (surface cards, inputs) to prominent (modals, dropdowns). For each level, you control offset, blur, spread, and color with live preview on sample elements.

Exporting Your Tokens

Once your tokens look right in the preview, export them in the format your project needs:

• CSS Custom Properties — Drop into any project using var(--color-primary) syntax. Works with plain CSS, SCSS, or any framework.
• JSON — Structured token data for programmatic consumption. Feed it into build tools, theme providers, or documentation generators.
• Tailwind Config — A ready-to-use tailwind.config.js theme extension. Paste it in and your tokens become Tailwind utility classes.

Saving and Sharing Projects

The tool runs entirely in your browser with no account required. However, creating a free Wigley Studios account lets you save token sets as named projects and return to them later. This is useful when managing tokens for multiple brands or iterating on a design system over time.

Saved projects store your complete token configuration — every color, font, spacing value, and shadow — so you can pick up exactly where you left off or duplicate a project as a starting point for a new brand.

Practical Workflow Example

Here's how a typical workflow looks from start to finish:

1. Open Brand Token Studio and define your color palette based on your brand guidelines or Figma file
2. Set typography — choose your heading and body fonts, pick a type scale ratio
3. Configure spacing using an 8px base unit for a comfortable, consistent rhythm
4. Add shadows at 3–4 elevation levels (surface, raised, overlay, modal)
5. Preview everything on the live sample components to verify the system feels cohesive
6. Export as CSS and paste the custom properties at the top of your stylesheet
7. Optionally, hand off to UI Kit Generator to create a full component library using those tokens

Total time from blank canvas to exported tokens: under 10 minutes for most projects. And since every value is in one place, updating the system later is equally fast.

When to Use Design Tokens

If your project has more than a few pages, design tokens pay for themselves immediately. They're especially valuable for:

• Multi-developer teams — Everyone references the same named values instead of guessing colors
• White-label products — Swap one token set for another and the entire UI re-themes
• Design-to-code handoff — Designers and developers share the same vocabulary and values
• Long-lived projects — Tokens prevent style drift as a codebase grows over months and years

Even for solo projects, the discipline of defining tokens upfront prevents the "50 shades of gray" problem where slightly-different values accumulate over time and make the UI feel inconsistent.