Simplifai
Design System
Scaling AI-native interfaces with a semantic token architecture and a token-driven Figma → React sync pipeline — one library serving 5 product teams.
01 — Before State
What We Were Working With
Fragmented design across 5+ products, each team writing components independently, zero token alignment.
5+
Product teams with conflicting patterns
3
Separate design files with no shared library
0
Shared components pre-system
~14d
Avg. time to deliver one new component
- ✕Inconsistent spacing — each team used different scale
- ✕Duplicated components across 5+ product files
- ✕Zero shared design tokens or color variables
- ✕~14 days average to deliver a new component
- ✕Dev handoff required manual re-specification every sprint
- ✓Single source of truth — one Figma library
- ✓Semantic token layer: color, spacing, radius, type
- ✓42% faster product iteration cycles
- ✓Token-driven Figma → React sync via Style Dictionary + auto-generated PRs
- ✓Design and engineering speaking the same language
02 — System Anatomy
The Design System
Color tokens, type scale, and components — from a single Figma library that eliminated 3 separate design files and 5 teams working in silos.
Color Tokens
Type Scale
Components
Built from the ground up,
one atom at a time.
Every decision is deliberate. Every token reusable. Explore how we went from raw values to full product surfaces.
A single token change cascades to 2,400+ instances across the product.
One change.
Everywhere, instantly.
Click any token or component below to trace its connections through the system. This is how a rebrand takes 4 minutes, not 4 weeks.
Tweak the knobs.
Watch the system flex.
Every control here maps to a real token group. Theme, density, and radius all cascade from a single source of truth.
Designed to spec.
Built to precision.
Every component is a precise assembly of tokens. Hover the node in inspect mode to reveal its full token specification.
Text Analysis
v2.1.0 • Stable
Switch to Inspect Mode
WCAG 2.2 AAA Compliant
Automated checks ensure 4.5:1 contrast and 44px touch targets on all interactive elements.
Development Velocity
Reduction in UI dev time after implementing the tokenized system.
Engineered, not just designed
The Simplifai Design System was built with semantic design tokens synced directly from Figma to React — creating a single source of truth across design and code.
Component Annotation
A system is only as good
as its adoption.
I led both the design and the cultural change — introducing governance processes that turned sporadic UI effort into a disciplined, high-velocity product engine.
Through visual consistency alone across 50+ product screens.
Standardized tokens eliminated redundant design debates.
Built from scratch to cover every AI-native surface.
Cross-functional alignment from product to engineering.
The "Sync" Workflow
Bidirectional Figma ↔ React handoff, automated end-to-end
The gap between
spec and production.
A design system is only as strong as its enforcement. Even the best-documented system drifts when developers are under pressure.
The “Ideal” State
We built a robust system. Tokens were defined, guidelines were clear, and the Figma library was pristine.
Yet, as we scaled, I noticed a recurring pattern: implementation drift.
The gap between design intent and product reality.
Small deviations—a hex code here, a hardcoded margin there—were breaking accessibility silently.
This realization sparked a question: What if the product could govern its own quality?
Ratio is 3.1:1. Expected 4.5:1 (AA).
“A design system is only as strong as its enforcement. Aulys is the automated layer of that enforcement.”See How I Built Aulys
Continue the journey