Design to Code

Translating Figma designs to production-ready React/Tailwind code with consistent tokens.

Design Token Structure

// tokens/index.ts — single source of truth
export const tokens = {
  color: {
    // Primitive palette (don't use directly in components)
    blue: { 50: '#eff6ff', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8' },
    red:  { 50: '#fef2f2', 500: '#ef4444', 600: '#dc2626' },
    gray: { 50: '#f9fafb', 100: '#f3f4f6', 200: '#e5e7eb', 500: '#6b7280', 900: '#111827' },