Design system
Prism Design System
Four brands, recognizably related and never interchangeable from one token structure.
Role:
Solo systems design architecture, tokens, accessibility, documentation
Built with:
Figma + Claude
Overview
Prism runs four independent brands,Cobalt, Iris, Coral, Harbour from one token structure. Each brand keeps its own color, type, and geometry. None of it lives in the components. Adding a new brand costs 109 tokens and one setting. Nothing else moves.
The constraint
Recognizably related. Never interchangeable.These are products in one portfolio, so a family resemblance is correct the failure mode isn't looking similar, it's being swappable. Every brand differentiates on four axes at once:
Color alone would have made them variants. Type, geometry, density, and timing make them brands.
The architecture
Components only ever bind to Semantic. Primitives are hidden from the picker entirely, so nobody can reach past the layer that gives a color meaning.
Before this, one color did two jobs — blue was both a brand color and the "info" status. Change one, break the other. The split made that impossible rather than just fixed.
Measured, not guessed
Cobalt's accent was supposed to be a specific yellow. It failed contrast at 1.55:1 against a 4.5:1 minimum.
Instead of guessing a replacement, I measured how much saturation each hue can hold once it's dark enough to pass.
Warm hues can't be dark and saturated at once — which is why every warm accent in the system had looked dull. The accent became magenta. Passes at 4.55:1.
Using Prism Design System and Claude to build a full Roadmap & Tasks dashboard
The fix that wasn't
White text on dark-mode buttons was failing at 3.1:1. Two fixes
The first fix didn't fix anything it moved the failure from the text to the button. Shipped the second.
What AI did, and what it didn't
751 tokens × 4 brands × 2 themes is not a thing you re-check by hand every time something changes. Claude scripted the audits — contrast ratios, unbound colors, whether every token actually resolved.
It also got things wrong. One early script flagged 68 tokens as broken that were fine. The fix wasn't correcting the script — it was learning to test that a checker passes the known-good cases, not just flags the bad ones.
Claude checked the work. Every design decision was mine.
Outcome
- 416 text + 192 non-text contrast pairs verified across every brand and theme.
- 751 tokens, 4 brands differentiated on color, type, geometry, density and motion.
- 58 components, zero broken instances, zero forked per brand.
- 696 brand/theme/token combinations, zero unresolved.
- Chart palettes validated against colorblind simulation, not eyeballed.
Reflections
The interesting part wasn't designing the system. It was finding out how much it still got wrong, once I re-measured it, and again once I used it. A token I'd logged as a near-miss in one brand was failing in all four.
Systems don't drift because people are careless. They drift because nobody re-measures.
Lets Talk!
For collaboration or freelance opportunities, please contact me at alexis.blas@me.com. follow me on LinkedIn.