Lumen AI
A complete design system for an enterprise AI image generation platform — 546 variables, Atomic Design, light/dark theming, built with AI-augmented workflow.
Lumen v1 had no design system — every screen was built ad hoc with hardcoded values. V2 needed enterprise features (auth, roles, preset catalog) that couldn't scale without systematic foundations. No shared design language, no theming infrastructure, no component governance.
546 variables. Zero hardcoded values.
The entire system runs on Figma Variables organized into 5 collections: palette (270 raw colors), theme (126 semantic aliases), typography (139 font tokens), radius (7 border values), and responsive (4 breakpoint tokens). Every color traces through a three-level chain: primitive → semantic → component.
7 roles, infinite flexibility
Instead of naming colors by appearance, I built a role-based system: brand, accent, neutral, info, positive, negative, warning. Each role has a full scale from 25 to 950 — semantic naming that survives any palette change.
One system, two expressions
126 theme variables switch simultaneously between dark and light modes. Dark mode first — the natural context for AI image generation where UI shouldn't compete with generated content.
Atomic Design — every component earned its place
23 molecules and 12 organisms, each following strict rules: reusable elements need 2+ uses before becoming a molecule. Every interactive component has 3 mandatory states: default, hover, click. No unnecessary abstraction.
Designed with AI, directed by a human
Token architecture, documentation, and design-to-code mapping — accelerated by Claude Code + Figma MCP. Visual decisions, layout proportions, and interaction design — crafted manually. AI handles the systematic middle; human judgment sets the direction.
From preset to pixel
8 production screens across 3 layout patterns: dual-panel for generation workflows, full-width for browsing, centered for auth. Every screen assembled entirely from the component library — no one-off elements.
