Foundations
Design Tokens
Prism's foundations are the raw design decisions — colors, type, spacing — encoded as tokens that flow through every component.
Color
Prism uses a structured color palette: a shared neutral base, semantic colors, and three product accent palettes.
Brand
Neutral Palette
Semantic
Product Palettes
All text/background color combinations in Prism meet WCAG AA contrast ratio (4.5:1 for normal text, 3:1 for large text). Use the semantic surface tokens for accessible surfaces automatically.
Typography
Prism uses Inter as the primary sans-serif and Roboto Mono for code. The scale follows a modular 1.25× ratio.
Spacing
Prism uses a 4px base unit. All spacing values are multiples of 4.
Motion
Motion in Prism is purposeful — used to communicate state changes and guide attention, never decorative.
| Token | Duration | Easing | Use |
|---|---|---|---|
duration-fast |
100ms | ease-out | Hover states, small opacity changes |
duration-base |
200ms | ease | Button press, toggle, color transitions |
duration-slow |
350ms | ease-in-out | Modal open/close, slide-in panels |
duration-slower |
500ms | cubic-bezier(0.34,1.56,0.64,1) | Spring entrance animations |
duration-progress |
400ms | ease | Progress bars, loading indicators |
Always respect prefers-reduced-motion. Wrap non-essential transitions in a media query to disable animations for users who request it.
Elevation
Shadows communicate depth. Prism uses three levels of elevation.
Grid & Layout
Prism uses a 12-column grid with consistent gutters at each breakpoint.
| Breakpoint | Min Width | Columns | Gutter | Margin |
|---|---|---|---|---|
| Mobile | 0px | 4 | 16px | 16px |
| Tablet | 768px | 8 | 24px | 24px |
| Desktop | 1024px | 12 | 24px | 32px |
| Wide | 1280px | 12 | 32px | 48px |