Guide11 min readInteractive

Design Token Architecture & Hand-Off Guide

Learn how to build a unified design system where every Figma style maps 1:1 to Tailwind CSS classes and TypeScript tokens.

Audit score

0/6

1. Token Layering Structure

0/3 passed

Tier 1: Primitives P0

Raw values (e.g., obsidian-950: #090b07, lime-400: #d0ff58) with zero semantic meaning.

Tier 2: Semantics P0

Contextual aliases (e.g., bg-canvas: obsidian-950, text-accent: lime-400, border-subtle).

Tier 3: Component Tokens

Scoped component styling (e.g., btn-primary-bg, card-surface-hover).

0/3 passed

Automated WCAG contrast check P0

Do all text and surface token pairs exceed 4.5:1 contrast ratios?

Explicit focus visible tokens P0

Are focus rings standard, high contrast, and offset from dark surfaces?

Zero arbitrary magic numbers P0

Are all padding, margins, and radii values locked to the 4/8px token ladder?

Your progress is saved in this browser only.

Principles

Tokens represent decisions, not just hex codes. Changing a token updates your entire product consistently.
Keep primitive palettes small: having 15 different shades of gray is a failure of constraint.

FAQ

Should tokens be stored in Figma or code?

Code is the final source of truth. We export design tokens from code (TypeScript/JSON) into Figma variables to maintain absolute parity.

Other toolkits

Checklist12 min read

A battle-tested 50-point checklist covering onboarding, navigation, tables, forms, and mobile heuristics for SaaS founders and engineers.

Template10 min read

The exact heuristic framework, severity scorecard, and presentation structure I use for $499 client audits.

Checklist8 min read

Ensure your data visualization, summary metrics, and operational cards empower user action instead of cognitive fatigue.