§ Case 03 — Design Systems · Engineering
MonolithUI2025
A design system for an enterprise data platform. Density, contrast, and motion calibrated for power users handling 30K+ daily sessions — now with a token pipeline that ships through Style Dictionary.
Year
2025
Role
Design Systems
Stack
React · Radix
Recognition target
Target: CSS Design Awards · UI of the Day
Case 03 · 2025
Design Systems · Engineering
01 · Brief
Monolith UI — brief
Monolith's data platform served 30 000 power users across nine product surfaces; six different teams shipped UI without a shared vocabulary. We were brought in to land a single system covering tokens, primitives, patterns, and an RFC process — without slowing anyone down.
02 · Approach
Approach
Tokens first, primitives second, patterns last. Tokens were built in Style Dictionary and emitted to CSS, JS, iOS, and Android. Primitives wrap Radix. Patterns are documented as recipes — copy-paste-able, not abstracted into yet-another-component-library.
03 · Solution
Solution
40 primitives, 64 documented patterns, four density modes, and a contrast checker baked into the docs. The RFC process is a single MDX file with a deadline; comment threads happen in the PR. Six teams adopted the system within twelve weeks.
◊ Gallery
Selected frames
Click any image to enter the lightbox. Use ←/→ to step through, Esc to close.
◊ Numbers
40
Primitives
6 / 6
Adopting teams
−92%
a11y regressions
−38%
Time to feature
◊ Deliverables
- 01Token pipeline (Style Dictionary → CSS / TS / iOS / Android)
- 0240-primitive React library on top of Radix UI
- 0364 documented design patterns with copy-paste recipes
- 04Storybook deployment with contrast + density toggles
- 05RFC + ADR templates and review process
- 06Quarterly metrics dashboard tracking adoption + drift
04 · Outcome
Outcome
The engagement model tracks adoption, accessibility regressions, and time-to-feature as measurable outcomes before any award submission or public recognition claim is made.
◊ Stack
React
Radix
TypeScript
Storybook