Prism

Prism is a sidebar-navigated single-page app where each design system section is a React component mounted in the main content area. Navigation state is managed with a simple activeSection string in component state rather than URL routing, keeping the demo fully self-contained and eliminating route-transition overhead for what is fundamentally a document-navigation pattern. All section components are pre-loaded, so switching sections is instant.

The colour swatch grid is one of the more technically interesting sections. Each swatch renders its hex value alongside a contrast-appropriate label (black or white) calculated at render time using the relative luminance formula — so dark swatches get white labels and light swatches get black labels, automatically, without any per-swatch specification. This mirrors how production design tokens work in systems that use automated WCAG contrast checking.

Dark mode applies to every component simultaneously via a CSS class on the root wrapper, with all colour values defined as CSS custom properties. Switching from light to dark is a single class toggle that cascades through all eight component sections at once, demonstrating how a properly structured design system handles theming at scale rather than per-component overrides.