moncodes /monlqn
← All work

Lumen Design System

A headless component library and design-token pipeline that keeps a dozen apps visually consistent from a single source of truth.

Role
Lead engineer
Year
2024
Stack
React TypeScript Style Dictionary Storybook

Placeholder project — replace with your real work.

Overview

Lumen is a design system built to let multiple teams ship UI fast without drifting apart. Tokens are defined once and compiled to every target.

What I built

  • A token pipeline (Style Dictionary) emitting CSS variables, Tailwind config, and native theme files from one JSON source.
  • ~40 accessible, headless React components documented in Storybook.
  • A visual-regression CI gate so no PR can silently change the look.

Outcome

New product surfaces went from design to production-ready UI in days instead of weeks, with WCAG AA baked in.