Design Tokens at Scale: Bridging the Divide Between Figma Variables and Production React Code

The Disconnect Between Design and Production Code

In many software organizations, the relationship between design and engineering is plagued by manual friction. Designers create components in Figma using custom color values and spacing; developers manually eyeball these in code using arbitrary pixel values (`margin-top: 23px`, `color: #2b49fe`).

Over time, this results in visual inconsistency, broken accessibility contrast ratios, and bloated CSS bundles.

To solve this, Northwind Studio establishes a single source of truth using Design Tokens structured as CSS Custom Properties and synchronized directly from Figma variables.

1. Three-Tier Token Architecture

We structure our design tokens in three distinct layers:

• **Global Tier (Raw Primitives):** Base values without semantic context (e.g., `--blue-600: #2F4BFF`, `--space-4: 16px`).
• **Semantic Tier (Purpose-Driven):** Tokens assigned to functional UI roles (e.g., `--brand-primary: var(--blue-600)`, `--surface-canvas: var(--neutral-50)`).
• **Component Tier (Scoped Variables):** Tokens tied to specific component states (e.g., `--button-bg-hover: var(--brand-primary)`).

2. Enforcing WCAG 2.2 AA Contrast at the Token Level

Rather than checking contrast on individual pages, we validate contrast ratios mathematically across our semantic color tokens. If the contrast between `--ink-700` and `--bg-canvas` falls below 4.5:1, our automated token compiler fails the build before any design reaches production.

Conclusion

A mature design system is not a static Figma sticker sheet; it is living software infrastructure. By codifying visual decisions into typed design tokens, teams build faster, eliminate UI regressions, and ensure flawless design consistency across every customer touchpoint.