Skip to main content

Prism Design System

Prism is the shared foundation behind a family of products — commerce, campus, finance, health, hospitality and media. One set of tokens, components and patterns, re-skinned per product through a single signature switch. The goal is simple: teams ship coherent, accessible interfaces fast, without re-litigating color, spacing or focus behaviour on every screen.

This site is the reference. It is generated directly from the component source, so the props, types and live demos here match what you actually import.

Start here​

  • Designers — read Foundations for the token model, then browse Components. Pick up the signature and density story in Theming & signatures.
  • Engineers — see Installation and For engineers. Every component page lists its props and a live, interactive demo backed by the real bundle.
  • Building with AI tools — Prism ships a machine-readable layer so coding agents generate on-system code. Start at Build with AI.

What's inside​

  • 102 components across 17 families — core controls, forms, navigation, data, charts, overlays, cards, lockups, privacy, permissions, workflow and a dedicated TV / ten-foot kit.
  • 608 design tokens under 13 theme scopes — a light and dark base plus six product signatures, each re-mapping the brand ramp, chart palette and density from one attribute.
  • Patterns for the hard parts — forms, data tables, empty and error states, permissions, privacy and compliance, and the cinematic TV experience.
  • Platform kits — reference compositions for each product OS.

How the demos work​

Every component page embeds a live demo that loads the compiled Prism bundle and renders the actual component. Use the Open ↗ control to view a demo full-screen, or Taller to give it more room. What you see is the shipping behaviour, including focus rings, keyboard interaction and theming.

Principles in one line each​

  • Accessible by default. Focus, contrast and keyboard support are built in, not bolted on.
  • One source, many skins. Re-theme an entire product by remapping the brand ramp — never by overriding individual components.
  • Density is a setting, not a fork. Compact, neutral and relaxed share the same components.
  • Tokens over values. If you are typing a hex code or a pixel value into a component, reach for a token instead.