Chromatic

Tokens

Every value, resolved live.

Switch theme or mode in the header and the semantic table below re-reads its values from the document. Copy any token as var(--name). The saturation bar flags anything above the 25% ceiling.

<link rel="stylesheet" href="/ds/colors_and_type.css">view colors_and_type.css

Semantic tokens

resolved for Neutral · light

TokenRoleValue
--background
Page—
--card
Card / surface—
--popover
Popover / menu—
--primary
Primary action—
--secondary
Secondary action—
--muted
Sunken / disabled—
--accent
Selected / highlight—
--border
1px borders—
--input
Input background—
--ring
Focus ring—
--destructive
Error / delete—
--success
Success—
--warning
Warning—
--info
Info—

Palette ramps

The standalone CSS ships the full achromatic ramp plus the 500 anchor of every chromatic-gray family. Full 11-step ramps for all 21 families live in assets/chromatic-tokens.ts.

achromatic

11 shades · click to copy var()

redGray

2 shades · click to copy var()

orangeGray

2 shades · click to copy var()

stoneGray

crimsonGray

yellowGray

goldGray

greenGray

emeraldGray

tealGray

cyanGray

azureGray

blueGray

indigoGray

violetGray

purpleGray

magentaGray

roseGray

slateGray

Constant tokens

Type, spacing, radii, shadows, and motion do not change with theme. They are the part of the system that makes the twenty-theme switch possible.

Type

  • --font-sans"Geist", ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif
  • --font-mono"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace
  • --font-pixel"Geist Pixel", "Geist Mono", monospace
  • --font-code"Monaspace Neon", "Geist Mono", ui-monospace, monospace
  • --font-argon"Monaspace Argon", var(--font-code)
  • --font-xenon"Monaspace Xenon", var(--font-code)
  • --font-radon"Monaspace Radon", cursive, var(--font-code)
  • --font-krypton"Monaspace Krypton", var(--font-code)
  • --text-2xs10px
  • --text-xs12px
  • --text-sm14px
  • --text-base16px
  • --text-md18px
  • --text-lg20px
  • --text-xl24px
  • --text-2xl30px
  • --text-3xl36px
  • --text-4xl48px
  • --text-5xl60px
  • --text-6xl76px
  • --leading-tight1.1
  • --leading-snug1.25
  • --leading-normal1.5
  • --leading-relaxed1.625
  • --tracking-tight-0.02em
  • --tracking-snug-0.01em
  • --tracking-normal0
  • --tracking-wide0.02em
  • --tracking-mono-0.01em
  • --weight-thin100
  • --weight-light300
  • --weight-regular400
  • --weight-medium500
  • --weight-semibold600
  • --weight-bold700
  • --weight-black900

Spacing

  • --space-14px
  • --space-28px
  • --space-312px
  • --space-416px
  • --space-520px
  • --space-624px
  • --space-832px
  • --space-1040px
  • --space-1248px
  • --space-1664px
  • --space-2080px
  • --space-2496px

Radii

  • --radius-none0px
  • --radius-sm2px
  • --radius-md6px
  • --radius-lg12px
  • --radius-xl20px
  • --radius-full9999px

Shadows

  • --shadow-xs0 1px 0 hsl(0 0% 0% / 0.04)
  • --shadow-sm0 1px 2px hsl(0 0% 0% / 0.06), 0 1px 1px hsl(0 0% 0% / 0.04)
  • --shadow-md0 4px 6px hsl(0 0% 0% / 0.07), 0 2px 4px hsl(0 0% 0% / 0.05)
  • --shadow-lg0 10px 15px hsl(0 0% 0% / 0.10), 0 4px 6px hsl(0 0% 0% / 0.05)
  • --shadow-xl0 20px 25px hsl(0 0% 0% / 0.12), 0 8px 10px hsl(0 0% 0% / 0.05)
  • --shadow-glow0 0 0 1px hsl(var(--ring) / 0.35), 0 0 18px hsl(var(--ring) / 0.20)

Motion

  • --ease-outcubic-bezier(0.4, 0, 0.2, 1)
  • --ease-incubic-bezier(0.4, 0, 1, 1)
  • --ease-emphasizedcubic-bezier(0.2, 0.6, 0, 1)
  • --duration-fast120ms
  • --duration-base200ms
  • --duration-slow320ms