Foundations Every colour, size, space, form and tempo in Palette is a CSS custom property. The values below are read live from this page, so they change when you switch theme or text size. Tap a token to copy it.
# ColourToken Value now Use --inkThe person’s layer: their text and choices --ink-2Secondary text --ink-3Labels and captions --lapisThe interface’s layer: controls and focus --pigmentThe model’s layer: text and fills --tyrianSolid pigment for strokes and outlines --viridianDone --ochreNeeds you --madderError --groundThe page --surfaceCards, sheets and fields --surface-2Wells --lineDividers --ink-lPigment lightness, locked per theme --ink-cPigment chroma, locked per theme
# TypeToken Value now Use --f-displayTitles and key numbers --f-bodyReading text and controls --f-monoLabels, values and code --t-heroThe wordmark --t-largePage titles --t-1Section titles --t-2Headings --t-3Subheadings --t-bodyBody text --t-calloutControls --t-subSupporting text --t-footFootnotes --t-capCaptions
# Space and formToken Value now Use --s-14 px step --s-28 px step --s-312 px step --s-416 px step --s-624 px step --s-840 px step --s-1196 px step --gutterPage edge, grows with the screen --measureReading width --r-smFields and rows --r-mdCards and tables --r-lgLarge cards and sheets --r-pillChips and capsules
# ElevationToken Value now Use --e-1Resting cards --e-2Raised cards and specimens --e-3Sheets, murmurs and menus --glassBars over content
# MotionToken Value now Use --beatSignal motion: the model’s live work --signalInterface responses --ease-flowStart and settle --ease-outTouch responses --ease-springArrivals
# Using tokensRead tokens with var() and never copy their values. Dark mode, text size and future versions change the values, not the names.