Case Study · 2024–Present

← Back to Work

Tailwind Design System

A Tailwind CSS design system that eliminates the gap between Figma and production — OKLCH color tokens, Vue components, and shared scales that make design-to-dev handoff feel like a non-event.

50% faster handoff Single source of truth 30+ components
Design system overview
Why Build This

The product had grown organically for years. Different features had different visual languages. Spacing was inconsistent, colors drifted between hex values, and the same button existed in four slightly different implementations. Every feature I designed required re-establishing basic rules.

As the sole designer working with multiple engineering squads, I needed a system that spoke both languages. Designers think in tokens, variants, and compositions. Engineers think in utility classes, props, and state. The system had to bridge both.

Principles

Code is the source

Figma reflects code, not the other way around. Color tokens, spacing scales, and typography are defined in the Tailwind config first, then mirrored to Figma. This eliminates the "which version is right?" problem.

OKLCH everywhere

All colors use OKLCH for perceptual uniformity. A "blue-500" and "green-500" have the same perceived lightness. This makes the palette predictable across contexts and eliminates the need for manual adjustments.

Composition over configuration

Components are small and composable rather than monolithic with dozens of props. A card is a surface + padding + border, not a Card component with 15 variants. Engineers combine primitives instead of learning a proprietary API.

Components
Color tokens and OKLCH scale
Typography scale and component library
Buttons, inputs, and surface components
Technical Architecture

Tailwind v4 + Vue.js

The system runs on Tailwind CSS v4 with custom theme configuration. Vue components wrap common patterns with sensible defaults. The Tailwind config file is the design token source — colors, spacing, typography, shadows, and border radii all live there.

Component registry

Every component is documented in a registry that lists its properties, variants, color mappings, and usage guidelines. This registry powers both the documentation site and the AI Figma plugin — the same metadata that helps designers understand a component also helps AI generate it correctly.

Impact

System-level leverage.

50%

Faster design-to-development handoff

30+

Components documented and maintained

0

"Which version is right?" conversations since launch