Foundations
Tokens
The atomic decisions the rest of the system inherits from. These aren't abstract — they're rendering this page right now.
01Color
--bg
Background
--surface
Surface
--surface-2
Surface/Raised
--ink
Ink
--ink-2
Ink/Secondary
--muted
Muted
--line
Line
--line-strong
Line/Strong
--accent
Accent
--accent-ink
Accent/Ink
--focus
Focus
Status
--stable
Accent (green)
--beta
Amber
--deprecated
Gray
02Motion
Timing and easing curves that govern interaction feedback.
--ease-default
cubic-bezier(0.2, 0.7, 0.2, 1)
--ease-expressive
cubic-bezier(0.05, 0.7, 0.1, 1)
--ease-bounce
cubic-bezier(0.34, 1.56, 0.64, 1)
--duration-fast
150ms
--duration-norm
300ms
--duration-slow
600ms
03Radius
Corner radii applied to surfaces and components.
--radius-sm
4px
--radius-md
8px
--radius-lg
12px
--radius-xl
16px