Skip to main content

For designers

What Prism gives you​

A complete, accessible component set with the hard parts already solved: focus order, contrast, density, dark mode and per-product theming. You compose screens from these rather than redrawing controls, which means your time goes to flow and content, not to re-specifying a checkbox.

What is fixed, what is yours​

Fixed — the token model, component anatomy and interaction behaviour. A Prism button is a Prism button everywhere; that consistency is the value.

Yours — composition, copy, information architecture, and the product signature. You decide what goes on the screen and how it is arranged; Prism decides how each piece behaves.

A working method​

  1. Start from the foundations so your spacing and type land on the scale.
  2. Reach for patterns before components for the recurring screens — forms, tables, empty states. They encode decisions you would otherwise remake.
  3. Drop to components for the pieces. Each page has a live demo you can poke at to feel the real behaviour.
  4. Apply the product signature last. Design in the target product's skin, not the default cobalt, so contrast and emphasis are honest.

Things to check before handoff​

  • Does every interactive element have a visible focus state and a real label?
  • Does the layout hold at compact and relaxed density?
  • Are your status colors semantic (positive / notice / negative) rather than decorative?
  • Have you used tokens, not one-off values, for anything an engineer will translate to code?