Home / Design Systems & Components / Prism, Component Library
Prism, Component Library
A product team's screens have drifted apart, three blues and four button styles, and nobody can change the brand colour without a week of edits.
The brief and the build
Brief: Build a small, themeable component library with accessible defaults, plus a live page where changing one token restyles every component and shows whether the result still meets contrast guidelines.
Components read only semantic tokens (accent, radius, spacing, surface), never raw values. Changing the accent, corner radius, density, or mode on the theme panel updates every component at once, and a table lists the token values currently in effect.
A live contrast check computes WCAG ratios for the chosen accent on both white and the current surface, so a brand colour that fails AA is flagged before it ships. Components follow established patterns: tabs with arrow-key, Home, and End support, a switch built on a checkbox with role="switch", and a native dialog for focus handling and Escape.
The three designs reuse the same components and tokens, which is the point: Light is a sidebar documentation layout, Dark is a single-column docs layout, and Creative is a sticker-style theme built only by overriding tokens and a few shapes.
Results
- Problem: Screens had drifted apart, with several blues and button styles, and changing the brand colour meant editing every screen.
- Built: A token-driven component set with a theme panel, a live WCAG contrast check, and keyboard-accessible tabs, switch and dialog.
- Lighthouse, light design, mobile profile: Performance 100, Accessibility 100, Best Practices 100, SEO 100. Largest contentful paint 0.9 s, total blocking time 0 ms, layout shift 0. Desktop profile: Performance 100, Accessibility 100, Best Practices 100, SEO 100.
- Weight: page, stylesheet and script total 12.1 KB (4.7 KB gzipped). The script alone is 6.6 KB (2.7 KB gzipped).
- Requests: 3 (page, stylesheet, script). No external requests and no libraries beyond what the browser provides.
- Browser check: all three designs load at 1280 and 390 px wide with no console errors, failed requests or horizontal overflow. The dark and creative designs score 96 and 100 for accessibility (100 in the other three categories); the gap is colour contrast.
Measured on 2026-11-06 with Lighthouse 13.6 in headless Chromium against the built site. Mobile uses Lighthouse’s simulated throttling.
Stack
Highlights
- Design tokens
- Live theming
- Contrast checker
- WAI-ARIA patterns
- Native dialog
Need something like this?
Tell me what you're building and I'll tell you how I'd approach it.