Getting started
Design tokens
Every color, radius, shadow and timing is a CSS variable prefixed
--pl-, mapped to Tailwind utilities like bg-surface or text-accent-ink. Switch palette and theme from the header: everything below follows.Surfaces
bg
surface
surface-2
elevated
fill
fill-2
fill-3
Content
fg
fg-muted
fg-subtle
separator
border
Accent
accent
accent-hover
accent-active
accent-soft
accent-ink
on-accent
ring
Status
success
success-ink
success-soft
warning
warning-ink
warning-soft
danger
danger-ink
danger-soft
info
info-ink
info-soft
Accent scale
Generated from the palette seed in OKLCH: bg-accent-50 … bg-accent-950.
50
100
200
300
400
500
600
700
800
900
950
Typography
text-display-xlDisplay XL
text-displayDisplay
text-display-smDisplay S
text-large-titleLarge Title
text-title1Title 1
text-title2Title 2
text-title3Title 3
text-headlineHeadline
text-bodyBody
text-calloutCallout
text-subheadSubhead
text-footnoteFootnote
text-caption1Caption 1
text-caption2Caption 2
Radius
All radii scale with one variable, --pl-roundness (try it on the Theming page).
xs
sm
md
lg
xl
2xl
3xl
4xl
Elevation
shadow-xs
shadow-sm
shadow-md
shadow-lg
shadow-xl
Motion
--pl-duration-fast160msPresses, hovers, small state changes
--pl-duration-base240msPopovers, toggles, most transitions
--pl-duration-slow400msSheets and page-level movement
--pl-ease-ioscubic-bezier(.32,.72,0,1)The iOS curve: quick start, long settle
--pl-ease-springcubic-bezier(.34,1.4,.64,1)A CSS spring with a small overshoot
spring.snap / sheet / soft / bouncyMotion springspleate/motion, for JS animations