Design Token System

The problem

Every project I started had the same problem: hardcoded values everywhere. Change a color in one place, miss it in five others. The design and code drifted apart. I needed a system that made visual decisions explicit, auditable, and consistent — from Figma variables to CSS custom properties.

The solution

A two-layer token architecture: primitives (raw values with no semantic meaning) mapped to semantic tokens (named by role). Semantic tokens are what you use in components. Primitive tokens are what you change when rebranding. This separation means you can swap an entire color palette without touching a single component file.

What it does

• Full color palette — neutral and accent scales with semantic aliases and status colors
• Fluid typography — type scale using clamp(), no media queries needed
• Spacing on a 4px base — 13-step scale from 4px to 128px
• Elevation, motion, and z-index — layered shadows, named durations and easing curves, named z-index layers
• Interactive visual reference — open index.html to explore all tokens; click any color to copy the CSS variable

Stack

What I learned

The naming is the hard part. Getting the primitive/semantic split right takes real thought — if semantic tokens are too specific they stop being reusable, too vague and they lose their meaning. I rewrote the color layer twice before it felt right.