4,025
Components
38 library pages · 475 icon sets (5 sizes each) · deep variant matrices on buttons, nav, cards, dialogs.
How do you keep
UX coherent at enterprise scale?
Prisma design system
Enterprise-grade accessible UI component library powering modern automotive diagnostics and technician workflows.
Automotive aftersales platform · 5,000+ dealerships · 54 countries · four international Scrum teams shipping into shared surfaces. Without a governed system, every squad solved UI locally — duplicate components, drifting styles, and no way to ship global changes like dark mode without rewriting hundreds of screens. I took stewardship of the Figma library and token architecture, working with development to implement semantic tokens in the Prisma Theme and validate variables against production UI.
Why the system mattered
Many teams, one product surface. The library had to absorb transverse change — themes, contrast, rebranding — while keeping custom feature work visually aligned.
User challenge: Long-shift eye strain and low accessibility compliance — especially for technicians on extended 24/7 operations.
- Visual drift — the same patterns rebuilt differently across squads; overrides instead of shared components.
- Token sprawl — raw hex values in files; no shared semantic layer with development.
- Bloated variants — copied components with local tweaks rather than extending the system safely.
- Transverse change risk — dark mode or contrast fixes meant screen-by-screen rework without variables.
Library at a glance
Theme-aware Figma library — atomic components, legacy styles, and a two-collection variable stack with Light and Dark modes.
391
Variables
Primitive → semantic aliasing · Accessible & legacy primitive modes · Light/Dark semantics.
152
Paint styles
8 hue ramps · base + tint (−t) + shade (−s) steps · basis neutrals alongside variables.
11
Text styles
Headline and body scales — XL 32px down to badge 12px.
26
Effect styles
Light/dark shadow pairs — button, card, dialog, nav, focus.
My contribution
Owned design system evolution in a scaled agile program — Figma library, tokens aligned with engineering, and weekly UX consultation hours to keep squads on-system.
- Token architecture — unified naming convention aligned with engineering; see interactive breakdown below.
- Prisma Theme — semantic tokens implemented and tested in code, not just documented in Figma.
- Patterns & library growth — snackbar, restructured icon library, mobile navigation, metadata pills, conditional card-table actions.
- Usage guidelines — UX/UI and user patterns documented in Confluence for designers and POs across teams.
- Handoff & governance — design-to-dev guidelines; architecture council on what enters the library vs. stays local.
In practice
Token naming convention
Every variable follows the same hierarchy — namespace through modifier — so design, development, and documentation share one language. Click through to see how a token name builds up.
Implementing tokens in the Prisma Theme
Naming was step one — tokens still had to land in the theme developers ship. I supported that end-to-end: mapping Figma variables to code, testing side-by-side until design and build matched, and rolling out through workshop-style handoffs.
Design → theme mapping
Primitive and semantic variables mapped to Prisma Theme token slots; semantics alias primitives per Light/Dark mode.
Test & compare
Components reviewed in Figma and built UI until color, spacing, and type aligned.
Accessibility pass
WCAG 2.1 AA contrast checks in Figma, then verified on built UI — failing pairs fixed in tokens, not per screen.
Dark mode & accessibility
The Prisma Dark Mode Theme was the first production proof of the token stack — landing page with Quick Actions shipped as pilot, then accessible dark colours extended across the library.
The dark mode pilot wasn't an easy internal sell — but showing a real production screen side by side changed the conversation.
- Positive feedback on reduced eye strain from extended-shift users.
- Accessibility standards adopted for subsequent platform development.
- Reference UI for the ecosystem-wide refresh.
Outcomes
- Semantic tokens and Figma library adopted across squads — custom work stayed on-system.
- Prisma Theme live in production — design variables matched coded output.
- Dark mode pilot validated the stack before ecosystem-wide rollout.
- User patterns in Confluence — shared reference beyond the Figma file.
- System scaled to 5,000+ dealerships in 54 countries without visual fragmentation.
Learnings
Tokens mattered more than component count. Semantic variables let squads build outside the library without breaking coherence. Dark mode proved the model — transverse change through tokens, not screen-by-screen rescue.
Documentation and handoff mattered as much as the Figma file. Pattern docs, consultation hours, and engineering pairing only work as a loop — docs, align, build, govern. Without that rhythm and architecture-council governance, the system becomes a catalog nobody uses.