Tokens

Components use these semantic names and never raw values. That is why the whole site changes theme by swapping one set of CSS variables. Toggle the theme to see each swatch change.

Colour

  • backgroundPage canvas
  • surfaceCards, inputs, raised elements
  • surface-hoverHover state for surfaces and ghost buttons
  • borderHairlines and dividers
  • foregroundPrimary text and icons
  • mutedSecondary text, captions
  • accentPrimary actions, selected states
  • accent-hoverHover state for accent
  • accent-foregroundText on accent
  • dangerDestructive actions, errors
  • ringFocus indicator

Motion

Durations
instant80ms
fast150ms
base240ms
slow400ms
Springs
snappystiffness 520 · damping 34
pressstiffness 800 · damping 40
gentlestiffness 260 · damping 30