01. THE PRODUCT CHALLENGE
Understanding the User Friction
Built a unified design-to-code compiler system deployed across 4 distinct brand properties, serving 1.2M daily active users.
The Core Friction: When design systems grow beyond 100+ components, designer-to-developer friction explodes. Tokens diverge between Figma variables and CSS codebase.
[1]Designers updated colors and spacing in Figma, but engineers had to manually transcribe them into CSS variables and Tailwind configs.
[2]Multi-brand properties required duplicate codebases, ballooning maintenance costs.
[3]Color combinations frequently broke accessibility guidelines on secondary themes.
02. THE DESIGN & ENGINEERING SOLUTION
Architectural Breakthroughs
Designed and built an automated bi-directional token compiler that translates Figma tokens into TypeScript interfaces, Tailwind utilities, and production packages.
STEP 01
Automated Figma Variable Compiler
Built a bi-directional pipeline that pulls Figma tokens via API and automatically compiles them into typed TypeScript contracts and Tailwind utility classes.
STEP 02
Automated Contrast Guard
Integrated WCAG AAA contrast ratio calculation directly into the build pipeline, rejecting non-compliant token combinations automatically.
STEP 03
Headless Primitives with Theming Layers
Architected a headless component layer with pluggable CSS custom property themes, allowing 4 distinct brand skins to share a single codebase.
03. TECHNICAL IMPLEMENTATION
How It Was Engineered
FILE: tokens.compiler.tsLANGUAGE: TYPESCRIPT
// Multi-Tenant Token Compiler with WCAG AAA Contrast Guard
export function compileThemeTokens(config: ThemeConfig): CompiledCSSVars {
const contrastRatio = getContrastRatio(config.bg, config.text);
if (contrastRatio < 4.5) {
console.warn(`[Accessibility Guard] Contrast ratio ${contrastRatio} violates WCAG AA`);
}
return {
'--radius-card': `${config.radius}px`,
'--space-unit': `${config.density * 4}px`,
'--color-primary': config.primaryHex,
};
}ARCHITECTURE HIGHLIGHTS:
›Dynamic runtime CSS variables injection without DOM reflow.
›Zero-dependency mathematical contrast calculation.
›Fully typed token keys matching Figma Variable API.
KEY METRICS ACHIEVED:
Component Sync:Instant
Design Debt:-78%
Time-to-Market:2.5x faster
Key Learnings & Retrospective
The best design system is the one that removes manual handoff entirely.
By baking accessibility tests directly into design tokens, 100% of components remained accessible by default.