Source Design

Resources

Guides &
frameworks.

Listicles, comparisons, and original definitions from the Source Design team. Built for teams evaluating design system tooling.

Contents

7 Design Token Formats Compared (2026)

Not all token formats are created equal. Here's how the major formats stack up for real production use.

CSS Custom Properties

Universal baseline

Works everywhere, zero build step. Lack of nesting and type safety limits scale. Best for small teams or vanilla CSS projects.

Tailwind v4 @theme

Framework-native powerhouse

First-class Tailwind integration. Tokens become utilities automatically. Requires Tailwind — not portable to non-Tailwind projects.

W3C Design Tokens (DTCG)

The emerging standard

Vendor-neutral JSON format with type annotations. Supported by Style Dictionary, Figma plugins, and pipeline compilers. Still pre-1.0 but widely adopted.

Style Dictionary JSON

Pipeline workhorse

Amazon's format powers cross-platform token compilation (iOS, Android, web). Verbose but battle-tested. The industry default for multi-platform design systems.

Figma Variables API

Design-tool native

Lives inside Figma. Great for designer-developer handoff within the Figma ecosystem. Not portable without export tooling.

DESIGN.md (Markdown)

Human-readable docs

Source Design's readable format. Lists palette, type, spacing, and shadows in structured markdown. Not machine-parseable but excellent for onboarding and audits.

JSON Theme Spec (Theme UI / Stitches)

CSS-in-JS native

JavaScript-first token objects for styled-components, Emotion, or Stitches. Tight runtime integration but couples tokens to a specific styling library.

5 Signs Your Design System Needs Extraction

If any of these sound familiar, your design system has drifted from production reality.

1. Your Figma and your CSS disagree on the primary color

When the spec says #3B82F6 but production renders #2563EB, decisions are being made in code that never flow back to design. Extraction catches every shipped value.

2. Developers are hard-coding hex values instead of using tokens

If your codebase has raw color literals scattered across components, you don't have a working design system — you have a document nobody reads.

3. You can't answer 'how many grays do we use?' in under 60 seconds

A healthy design system has a countable, intentional palette. If the answer requires grepping the repo, extraction will reveal the actual count.

4. Your spacing feels inconsistent but nobody can explain why

Inconsistent spacing usually means developers are guessing values. Extraction ranks spacing tokens by frequency, revealing the de-facto spacing scale.

5. A redesign is coming and nobody knows the current baseline

You can't improve what you haven't measured. Extracting the current system gives the redesign a concrete starting point instead of tribal knowledge.

Manual vs. Automated Design System Extraction

Two approaches to turning a live website into a design system. Here's when each makes sense.

DimensionManualAutomated
Speed2–8 hours per siteUnder 8 seconds
AccuracyHuman judgment — good for intent, misses edge casesExhaustive — every CSS rule parsed and ranked by usage
ConsistencyVaries by analystDeterministic — same input, same output
Semantic rolesStrong — humans understand brand hierarchyGood — clustering assigns primary/secondary/canvas roles algorithmically
CostHigh — skilled designer timeFree — Source Design is zero-cost
Best forBrand strategy, subjective decisions, redesign directionAudits, handoff, migration, CI pipelines, baseline measurement

Use automated extraction for speed and objectivity. Layer manual review on top for brand-level decisions.

Tailwind v4 vs. CSS Custom Properties vs. W3C Design Tokens

Source Design exports all three. Here's how to choose which one to integrate.

DimensionTailwind v4CSS PropsW3C Tokens
PortabilityTailwind projects onlyAny CSS environmentAny pipeline (Style Dictionary, Figma, etc.)
Type safetyImplicit via utilitiesNone — string valuesExplicit type annotations (color, dimension, etc.)
Build stepRequired (PostCSS)NoneRequired (compiler)
Best forTailwind-first teamsVanilla CSS, legacy projects, quick prototypesMulti-platform systems, Figma sync, enterprise

Start with CSS custom properties for maximum portability. Add Tailwind theme if you're in the Tailwind ecosystem. Use W3C tokens for cross-platform or enterprise pipelines.

Definitions & frameworks

Original terminology and frameworks from Source Design.

Token-First Design
A methodology where design decisions are derived from extracted implementation tokens rather than top-down specification documents. The live CSS is the source of truth; the design system is compiled from reality, not written from intention.
— Source Design, 2025
Design Drift
The measurable divergence between a design system's documented tokens (in Figma, a style guide, or a spec) and the actual CSS values deployed in production. Drift compounds silently — a shifted hex here, an extra gray there — until the documented system no longer represents the real product.
— Industry term, formalized by Source Design
Semantic Token Clustering
The automated process of grouping raw CSS values (colors, spacing, type sizes) into semantic roles (canvas, ink, accent, primary, secondary) based on usage frequency and contrast relationships, without human labeling.
— Source Design extraction engine