React

Design Token Studio

Edit this site's tokens live; export the CSS.

These sliders edit this page's real CSS custom properties: the whole site re-themes as you drag. Reset puts the stylesheet back in charge.

ink on paper: 14.35:1 · AAAshu-strong on paper: 5.55:1 · AA
--paper
--surface
--ink
--ink-muted
--shu
--shu-strong
:root {
  --paper: oklch(0.972 0.005 85);
  --surface: oklch(0.99 0.003 85);
  --ink: oklch(0.26 0.012 60);
  --ink-muted: oklch(0.47 0.012 60);
  --shu: oklch(0.585 0.165 36);
  --shu-strong: oklch(0.52 0.17 36);
}