API
Tokens
The design tokens on :root, with their resolved light and dark values.
Tokens are custom properties on :root in base/_variables.css. Primitives read them through var(), utilities take them as values, and you theme by redefining them: on :root for the whole page, on a subtree for a region. Color roles are light-dark() pairs, so data-ui="theme-dark" flips every one of them without a second stylesheet.
Three places to change how something looks, narrowest last:
- A token on
:root:--radius-multiplier: 0squares every scaled radius (--radius-fulland--radius-nonestay fixed);--color-primary: light-dark(…, …)recolors every primary surface. - A hook on a subtree:
<nav style="--ui-button-px: 2">retunes every button inside. Hooks are listed on each primitive's page. - A utility on one element:
--bg: var(--color-muted), which also flattens the element's states.
Color roles
Paired surface and text roles. Use these in utilities and CSS so light and dark swap for free. --color-ring is the focus ring; --color-shadow tints every shadow.
| Token | Light | Dark | |
|---|---|---|---|
--color-background | oklch(1 0 0) | oklch(0.241 0.009 285.7) | |
--color-border | oklch(0.949 0.001 287.28) | oklch(0.336 0.014 285.66) | |
--color-border-foreground | oklch(from oklch(1 0 0) l c h / 0.96) | oklch(from oklch(0.198 0.008 285.68) l c h / 0.5) | |
--color-card | oklch(1 0 0) | oklch(0.198 0.008 285.68) | |
--color-card-foreground | oklch(0.241 0.009 285.7) | oklch(1 0 0) | |
--color-destructive | oklch(0.5771 0.2152 27.33) | oklch(0.5054 0.1905 27.52) | |
--color-destructive-foreground | oklch(1 0 0) | oklch(1 0 0) | |
--color-faded | oklch(from oklch(1 0 0) l c h / 0.4) | oklch(from oklch(0.198 0.008 285.68) l c h / 0.1) | |
--color-faded-foreground | oklch(from oklch(1 0 0) l c h / 0.6) | oklch(from oklch(0.198 0.008 285.68) l c h / 0.6) | |
--color-foreground | oklch(0.241 0.009 285.7) | oklch(1 0 0) | |
--color-info | oklch(0.5876 0.1389 241.97) | oklch(0.5 0.1193 242.75) | |
--color-info-foreground | oklch(1 0 0) | oklch(1 0 0) | |
--color-input | oklch(0.973 0.001 287.31) | oklch(from oklch(1 0 0) l c h / 0.1) | |
--color-input-foreground | oklch(0.241 0.009 285.7) | oklch(1 0 0) | |
--color-muted | oklch(from oklch(0.198 0.008 285.68) l c h / 0.04) | oklch(from oklch(1 0 0) l c h / 0.1) | |
--color-muted-foreground | oklch(from oklch(0.198 0.008 285.68) l c h / 0.6) | oklch(from oklch(1 0 0) l c h / 0.6) | |
--color-popover | oklch(1 0 0) | oklch(0.198 0.008 285.68) | |
--color-popover-foreground | oklch(0.241 0.009 285.7) | oklch(1 0 0) | |
--color-primary | oklch(0.145 0 0) | oklch(0.985 0 0) | |
--color-primary-foreground | oklch(1 0 0) | oklch(0.145 0 0) | |
--color-ring | oklch(0.145 0 0) | oklch(0.985 0 0) | |
--color-secondary | oklch(13% 0.028 261.692) | oklch(98.5% 0.002 247.839) | |
--color-secondary-foreground | oklch(1 0 0) | oklch(13% 0.028 261.692) | |
--color-selection | oklch(0.145 0 0) | oklch(0.985 0 0) | |
--color-selection-foreground | oklch(1 0 0) | oklch(0.145 0 0) | |
--color-shadow | oklch(0 0 0) | oklch(0 0 0) | |
--color-success | oklch(0.596 0.1274 163.23) | oklch(0.5081 0.1049 165.61) | |
--color-success-foreground | oklch(1 0 0) | oklch(1 0 0) | |
--color-tertiary | oklch(0.147 0.004 49.3) | oklch(0.986 0.002 67.8) | |
--color-tertiary-foreground | oklch(1 0 0) | oklch(0.147 0.004 49.3) | |
--color-warning | oklch(0.6658 0.1574 58.32) | oklch(0.5553 0.1455 49) | |
--color-warning-foreground | oklch(1 0 0) | oklch(1 0 0) |
Color scales
Fixed shades, 50 to 950, for when a role is not enough. The light theme binds the brand roles at 950 and the dark theme at 50.
| Token | Light | Dark | |
|---|---|---|---|
--color-black | oklch(0 0 0) | oklch(0 0 0) | |
--color-neutral-50 | oklch(0.973 0.001 287.31) | oklch(0.973 0.001 287.31) | |
--color-neutral-100 | oklch(0.949 0.001 287.28) | oklch(0.949 0.001 287.28) | |
--color-neutral-200 | oklch(0.871 0.004 286.58) | oklch(0.871 0.004 286.58) | |
--color-neutral-300 | oklch(0.784 0.007 286.38) | oklch(0.784 0.007 286.38) | |
--color-neutral-400 | oklch(0.708 0.009 286.28) | oklch(0.708 0.009 286.28) | |
--color-neutral-500 | oklch(0.629 0.012 286.12) | oklch(0.629 0.012 286.12) | |
--color-neutral-600 | oklch(0.535 0.015 285.91) | oklch(0.535 0.015 285.91) | |
--color-neutral-700 | oklch(0.442 0.015 285.82) | oklch(0.442 0.015 285.82) | |
--color-neutral-800 | oklch(0.336 0.014 285.66) | oklch(0.336 0.014 285.66) | |
--color-neutral-900 | oklch(0.241 0.009 285.7) | oklch(0.241 0.009 285.7) | |
--color-neutral-950 | oklch(0.198 0.008 285.68) | oklch(0.198 0.008 285.68) | |
--color-primary-50 | oklch(0.985 0 0) | oklch(0.985 0 0) | |
--color-primary-100 | oklch(0.967 0.001 0) | oklch(0.967 0.001 0) | |
--color-primary-200 | oklch(0.92 0.004 0) | oklch(0.92 0.004 0) | |
--color-primary-300 | oklch(0.87 0 0) | oklch(0.87 0 0) | |
--color-primary-400 | oklch(0.708 0 0) | oklch(0.708 0 0) | |
--color-primary-500 | oklch(0.556 0 0) | oklch(0.556 0 0) | |
--color-primary-600 | oklch(0.439 0 0) | oklch(0.439 0 0) | |
--color-primary-700 | oklch(0.371 0 0) | oklch(0.371 0 0) | |
--color-primary-800 | oklch(0.269 0 0) | oklch(0.269 0 0) | |
--color-primary-900 | oklch(0.205 0 0) | oklch(0.205 0 0) | |
--color-primary-950 | oklch(0.145 0 0) | oklch(0.145 0 0) | |
--color-secondary-50 | oklch(98.5% 0.002 247.839) | oklch(98.5% 0.002 247.839) | |
--color-secondary-100 | oklch(96.7% 0.003 264.542) | oklch(96.7% 0.003 264.542) | |
--color-secondary-200 | oklch(92.8% 0.006 264.531) | oklch(92.8% 0.006 264.531) | |
--color-secondary-300 | oklch(87.2% 0.01 258.338) | oklch(87.2% 0.01 258.338) | |
--color-secondary-400 | oklch(70.7% 0.022 261.325) | oklch(70.7% 0.022 261.325) | |
--color-secondary-500 | oklch(55.1% 0.027 264.364) | oklch(55.1% 0.027 264.364) | |
--color-secondary-600 | oklch(44.6% 0.03 256.802) | oklch(44.6% 0.03 256.802) | |
--color-secondary-700 | oklch(37.3% 0.034 259.733) | oklch(37.3% 0.034 259.733) | |
--color-secondary-800 | oklch(27.8% 0.033 256.848) | oklch(27.8% 0.033 256.848) | |
--color-secondary-900 | oklch(21% 0.034 264.665) | oklch(21% 0.034 264.665) | |
--color-secondary-950 | oklch(13% 0.028 261.692) | oklch(13% 0.028 261.692) | |
--color-tertiary-50 | oklch(0.986 0.002 67.8) | oklch(0.986 0.002 67.8) | |
--color-tertiary-100 | oklch(0.96 0.002 17.2) | oklch(0.96 0.002 17.2) | |
--color-tertiary-200 | oklch(0.922 0.005 34.3) | oklch(0.922 0.005 34.3) | |
--color-tertiary-300 | oklch(0.868 0.007 39.5) | oklch(0.868 0.007 39.5) | |
--color-tertiary-400 | oklch(0.714 0.014 41.2) | oklch(0.714 0.014 41.2) | |
--color-tertiary-500 | oklch(0.547 0.021 43.1) | oklch(0.547 0.021 43.1) | |
--color-tertiary-600 | oklch(0.438 0.017 39.3) | oklch(0.438 0.017 39.3) | |
--color-tertiary-700 | oklch(0.367 0.016 35.7) | oklch(0.367 0.016 35.7) | |
--color-tertiary-800 | oklch(0.268 0.011 36.5) | oklch(0.268 0.011 36.5) | |
--color-tertiary-900 | oklch(0.214 0.009 43.1) | oklch(0.214 0.009 43.1) | |
--color-tertiary-950 | oklch(0.147 0.004 49.3) | oklch(0.147 0.004 49.3) | |
--color-white | oklch(1 0 0) | oklch(1 0 0) |
Overlays
Translucent black (shade) and white (tint) for scrims and backdrops; --color-shade-900 is the dialog backdrop.
| Token | Light | Dark | |
|---|---|---|---|
--color-shade-50 | oklch(from oklch(0.198 0.008 285.68) l c h / 0.04) | oklch(from oklch(0.198 0.008 285.68) l c h / 0.04) | |
--color-shade-100 | oklch(from oklch(0.198 0.008 285.68) l c h / 0.1) | oklch(from oklch(0.198 0.008 285.68) l c h / 0.1) | |
--color-shade-200 | oklch(from oklch(0.198 0.008 285.68) l c h / 0.2) | oklch(from oklch(0.198 0.008 285.68) l c h / 0.2) | |
--color-shade-300 | oklch(from oklch(0.198 0.008 285.68) l c h / 0.3) | oklch(from oklch(0.198 0.008 285.68) l c h / 0.3) | |
--color-shade-400 | oklch(from oklch(0.198 0.008 285.68) l c h / 0.4) | oklch(from oklch(0.198 0.008 285.68) l c h / 0.4) | |
--color-shade-500 | oklch(from oklch(0.198 0.008 285.68) l c h / 0.5) | oklch(from oklch(0.198 0.008 285.68) l c h / 0.5) | |
--color-shade-600 | oklch(from oklch(0.198 0.008 285.68) l c h / 0.6) | oklch(from oklch(0.198 0.008 285.68) l c h / 0.6) | |
--color-shade-700 | oklch(from oklch(0.198 0.008 285.68) l c h / 0.7) | oklch(from oklch(0.198 0.008 285.68) l c h / 0.7) | |
--color-shade-800 | oklch(from oklch(0.198 0.008 285.68) l c h / 0.8) | oklch(from oklch(0.198 0.008 285.68) l c h / 0.8) | |
--color-shade-900 | oklch(from oklch(0.198 0.008 285.68) l c h / 0.9) | oklch(from oklch(0.198 0.008 285.68) l c h / 0.9) | |
--color-shade-950 | oklch(from oklch(0.198 0.008 285.68) l c h / 0.96) | oklch(from oklch(0.198 0.008 285.68) l c h / 0.96) | |
--color-shade-full | oklch(from oklch(0.198 0.008 285.68) l c h / 1) | oklch(from oklch(0.198 0.008 285.68) l c h / 1) | |
--color-shade-none | oklch(from oklch(0.198 0.008 285.68) l c h / 0) | oklch(from oklch(0.198 0.008 285.68) l c h / 0) | |
--color-tint-50 | oklch(from oklch(1 0 0) l c h / 0.04) | oklch(from oklch(1 0 0) l c h / 0.04) | |
--color-tint-100 | oklch(from oklch(1 0 0) l c h / 0.1) | oklch(from oklch(1 0 0) l c h / 0.1) | |
--color-tint-200 | oklch(from oklch(1 0 0) l c h / 0.2) | oklch(from oklch(1 0 0) l c h / 0.2) | |
--color-tint-300 | oklch(from oklch(1 0 0) l c h / 0.3) | oklch(from oklch(1 0 0) l c h / 0.3) | |
--color-tint-400 | oklch(from oklch(1 0 0) l c h / 0.4) | oklch(from oklch(1 0 0) l c h / 0.4) | |
--color-tint-500 | oklch(from oklch(1 0 0) l c h / 0.5) | oklch(from oklch(1 0 0) l c h / 0.5) | |
--color-tint-600 | oklch(from oklch(1 0 0) l c h / 0.6) | oklch(from oklch(1 0 0) l c h / 0.6) | |
--color-tint-700 | oklch(from oklch(1 0 0) l c h / 0.7) | oklch(from oklch(1 0 0) l c h / 0.7) | |
--color-tint-800 | oklch(from oklch(1 0 0) l c h / 0.8) | oklch(from oklch(1 0 0) l c h / 0.8) | |
--color-tint-900 | oklch(from oklch(1 0 0) l c h / 0.9) | oklch(from oklch(1 0 0) l c h / 0.9) | |
--color-tint-950 | oklch(from oklch(1 0 0) l c h / 0.96) | oklch(from oklch(1 0 0) l c h / 0.96) | |
--color-tint-full | oklch(from oklch(1 0 0) l c h / 1) | oklch(from oklch(1 0 0) l c h / 1) | |
--color-tint-none | oklch(from oklch(1 0 0) l c h / 0) | oklch(from oklch(1 0 0) l c h / 0) |
Spacing
--spacing is the unit behind every scale number; the --space-* tokens are steps on it. All of them are fluid, so the table shows the range.
| Token | Value |
|---|---|
--space-2xl | 9rem – 10rem |
--space-2xs | 0.225rem – 0.25rem |
--space-lg | 2.475rem – 2.75rem |
--space-md | 1.35rem – 1.5rem |
--space-sm | 0.9rem – 1rem |
--space-xl | 5.4rem – 6rem |
--space-xs | 0.45rem – 0.5rem |
--spacing | 0.225rem – 0.25rem |
Radius
xs to xl scale with --radius-multiplier; none and full are fixed. Conventions: md for buttons and inputs, lg for cards and dialogs, sm for badges, full for pills.
| Token | Value |
|---|---|
--radius-2xl | 2.25rem – 2.5rem |
--radius-2xs | 0.1125rem – 0.125rem |
--radius-full | 9999rem |
--radius-lg | 1.0125rem – 1.125rem |
--radius-md | 0.5625rem – 0.625rem |
--radius-multiplier | 1 |
--radius-none | 0rem |
--radius-sm | 0.3375rem – 0.375rem |
--radius-xl | 1.575rem – 1.75rem |
--radius-xs | 0.225rem – 0.25rem |
Shadows and ring
Soft, multi-layer shadows and the focus ring's geometry.
| Token | Value |
|---|---|
--outline-offset | var(--ring-offset-width) |
--outline-style | solid |
--outline-width | var(--ring-width) |
--ring-offset-shadow | 0 0 0 var(--ring-offset-width) var(--ring-offset-shadow-color) |
--ring-offset-shadow-color | var(--color-background) |
--ring-offset-width | 0px |
--ring-opacity | 20% |
--ring-shadow | 0 0 0 calc(var(--ring-offset-width) + var(--ring-width)) var(--ring-shadow-color) |
--ring-shadow-color | color-mix(in oklch, var(--color-ring) var(--ring-opacity), transparent) |
--ring-width | 3px |
--shadow-2xl | calc(555 * var(--_shadow-x)) calc(555 * var(--_shadow-y)) 156px 0 oklch(from var(--shadow-hue, var(--color-shadow)) l c h / 0), calc(356 * var(--_shadow-x)) calc(356 * var(--_shadow-y)) 143px 0 oklch(from var(--shadow-hue, var(--color-shadow)) l c h / 0.01), calc(200 * var(--_shadow-x)) calc(200 * var(--_shadow-y)) 120px 0 oklch(from var(--shadow-hue, var(--color-shadow)) l c h / 0.04), calc(89 * var(--_shadow-x)) calc(89 * var(--_shadow-y)) 89px 0 oklch(from var(--shadow-hue, var(--color-shadow)) l c h / 0.06), calc(23 * var(--_shadow-x)) calc(23 * var(--_shadow-y)) 50px 0 oklch(from var(--shadow-hue, var(--color-shadow)) l c h / 0.08) |
--shadow-2xs | calc(1 * var(--_shadow-x)) calc(1 * var(--_shadow-y)) 1px 0 oklch(from var(--shadow-hue, var(--color-shadow)) l c h / 0.04), 0 0 1px 0 oklch(from var(--shadow-hue, var(--color-shadow)) l c h / 0.05) |
--shadow-lg | calc(247 * var(--_shadow-x)) calc(247 * var(--_shadow-y)) 69px 0 oklch(from var(--shadow-hue, var(--color-shadow)) l c h / 0), calc(158 * var(--_shadow-x)) calc(158 * var(--_shadow-y)) 63px 0 oklch(from var(--shadow-hue, var(--color-shadow)) l c h / 0.01), calc(89 * var(--_shadow-x)) calc(89 * var(--_shadow-y)) 53px 0 oklch(from var(--shadow-hue, var(--color-shadow)) l c h / 0.03), calc(39 * var(--_shadow-x)) calc(39 * var(--_shadow-y)) 39px 0 oklch(from var(--shadow-hue, var(--color-shadow)) l c h / 0.05), calc(10 * var(--_shadow-x)) calc(10 * var(--_shadow-y)) 22px 0 oklch(from var(--shadow-hue, var(--color-shadow)) l c h / 0.06) |
--shadow-md | calc(66 * var(--_shadow-x)) calc(66 * var(--_shadow-y)) 18px 0 oklch(from var(--shadow-hue, var(--color-shadow)) l c h / 0), calc(42 * var(--_shadow-x)) calc(42 * var(--_shadow-y)) 17px 0 oklch(from var(--shadow-hue, var(--color-shadow)) l c h / 0.01), calc(24 * var(--_shadow-x)) calc(24 * var(--_shadow-y)) 14px 0 oklch(from var(--shadow-hue, var(--color-shadow)) l c h / 0.03), calc(11 * var(--_shadow-x)) calc(11 * var(--_shadow-y)) 11px 0 oklch(from var(--shadow-hue, var(--color-shadow)) l c h / 0.04), calc(3 * var(--_shadow-x)) calc(3 * var(--_shadow-y)) 6px 0 oklch(from var(--shadow-hue, var(--color-shadow)) l c h / 0.05) |
--shadow-ring | var(--ring-offset-shadow), var(--ring-shadow) |
--shadow-sm | calc(25 * var(--_shadow-x)) calc(25 * var(--_shadow-y)) 7px 0 oklch(from var(--shadow-hue, var(--color-shadow)) l c h / 0), calc(16 * var(--_shadow-x)) calc(16 * var(--_shadow-y)) 6px 0 oklch(from var(--shadow-hue, var(--color-shadow)) l c h / 0.01), calc(9 * var(--_shadow-x)) calc(9 * var(--_shadow-y)) 5px 0 oklch(from var(--shadow-hue, var(--color-shadow)) l c h / 0.03), calc(4 * var(--_shadow-x)) calc(4 * var(--_shadow-y)) 4px 0 oklch(from var(--shadow-hue, var(--color-shadow)) l c h / 0.04), calc(1 * var(--_shadow-x)) calc(1 * var(--_shadow-y)) 2px 0 oklch(from var(--shadow-hue, var(--color-shadow)) l c h / 0.05) |
--shadow-xl | calc(370 * var(--_shadow-x)) calc(370 * var(--_shadow-y)) 104px 0 oklch(from var(--shadow-hue, var(--color-shadow)) l c h / 0), calc(237 * var(--_shadow-x)) calc(237 * var(--_shadow-y)) 95px 0 oklch(from var(--shadow-hue, var(--color-shadow)) l c h / 0.01), calc(133 * var(--_shadow-x)) calc(133 * var(--_shadow-y)) 80px 0 oklch(from var(--shadow-hue, var(--color-shadow)) l c h / 0.04), calc(59 * var(--_shadow-x)) calc(59 * var(--_shadow-y)) 59px 0 oklch(from var(--shadow-hue, var(--color-shadow)) l c h / 0.06), calc(15 * var(--_shadow-x)) calc(15 * var(--_shadow-y)) 33px 0 oklch(from var(--shadow-hue, var(--color-shadow)) l c h / 0.07) |
--shadow-xs | calc(8 * var(--_shadow-x)) calc(8 * var(--_shadow-y)) 2px 0 oklch(from var(--shadow-hue, var(--color-shadow)) l c h / 0), calc(5 * var(--_shadow-x)) calc(5 * var(--_shadow-y)) 2px 0 oklch(from var(--shadow-hue, var(--color-shadow)) l c h / 0.01), calc(3 * var(--_shadow-x)) calc(3 * var(--_shadow-y)) 2px 0 oklch(from var(--shadow-hue, var(--color-shadow)) l c h / 0.03), calc(1 * var(--_shadow-x)) calc(1 * var(--_shadow-y)) 1px 0 oklch(from var(--shadow-hue, var(--color-shadow)) l c h / 0.04), 0 0 1px 0 oklch(from var(--shadow-hue, var(--color-shadow)) l c h / 0.05) |
Type: families, sizes, weights
Fluid sizes. The family tokens are system stacks by default; to use your own font, load it and set --font-family-body: "Inter", var(--font-sans-fallback).
| Token | Value |
|---|---|
--font-alternates-body | normal |
--font-alternates-heading | normal |
--font-caps-body | normal |
--font-caps-heading | normal |
--font-east-asian-body | normal |
--font-east-asian-heading | normal |
--font-emoji-body | normal |
--font-emoji-heading | normal |
--font-family-body | var(--font-sans-fallback) |
--font-family-heading | var(--font-sans-fallback) |
--font-family-mono | var(--font-mono-fallback) |
--font-feature-body | normal |
--font-feature-heading | normal |
--font-kerning-body | auto |
--font-kerning-heading | auto |
--font-language-body | normal |
--font-language-heading | normal |
--font-ligatures-body | normal |
--font-ligatures-heading | normal |
--font-mono-fallback | ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace |
--font-numeric-body | normal |
--font-numeric-heading | normal |
--font-optical-sizing-body | auto |
--font-optical-sizing-heading | auto |
--font-position-body | normal |
--font-position-heading | normal |
--font-sans-fallback | -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" |
--font-serif-fallback | ui-serif, Georgia, Cambria, "Times New Roman", Times, serif |
--font-settings-body | normal |
--font-settings-heading | normal |
--font-size-2xl | 1.4238rem – 1.9531rem |
--font-size-2xs | 0.512rem – 0.5787rem |
--font-size-adjust-body | none |
--font-size-adjust-heading | none |
--font-size-display | 2.5658rem – 5.9605rem |
--font-size-eyebrow | 0.512rem – 0.5787rem |
--font-size-h1 | 2.2807rem – 4.7684rem |
--font-size-h2 | 2.0273rem – 3.8147rem |
--font-size-h3 | 1.802rem – 3.0518rem |
--font-size-h4 | 1.6018rem – 2.4414rem |
--font-size-h5 | 1.4238rem – 1.9531rem |
--font-size-h6 | 1.2656rem – 1.5625rem |
--font-size-lg | 1.125rem – 1.25rem |
--font-size-md | clamp(1rem, 1rem + 0vi, 1rem) |
--font-size-sm | 0.7901rem – 0.8rem |
--font-size-xl | 1.2656rem – 1.5625rem |
--font-size-xs | 0.5787rem – 0.64rem |
--font-weight-body | 400 |
--font-weight-eyebrow | 600 |
--font-weight-heading | 600 |
--font-weight-strong | 500 |
Type: leading, tracking, rhythm
| Token | Value |
|---|---|
--decoration-color | currentColor |
--decoration-line | underline |
--decoration-offset | 1px |
--decoration-style | solid |
--decoration-thickness | 1px |
--leading-2xl | 1.25 |
--leading-2xs | 1.5 |
--leading-display | 0.95 |
--leading-eyebrow | 1.2 |
--leading-h1 | 0.95 |
--leading-h2 | 0.95 |
--leading-h3 | 1 |
--leading-h4 | 1 |
--leading-h5 | 1 |
--leading-h6 | 1 |
--leading-lg | 1.5 |
--leading-md | 1.6 |
--leading-sm | 1.5 |
--leading-xl | 1.5 |
--leading-xs | 1.5 |
--paragraph-spacing-2xl | calc(1rlh * var(--_paragraph-spacing-multiplier)) |
--paragraph-spacing-2xs | calc(0.5rlh * var(--_paragraph-spacing-multiplier)) |
--paragraph-spacing-display | calc(3.5rlh * var(--_paragraph-spacing-multiplier)) |
--paragraph-spacing-eyebrow | calc(1rlh * var(--_paragraph-spacing-multiplier)) |
--paragraph-spacing-h1 | calc(3.5rlh * var(--_paragraph-spacing-multiplier)) |
--paragraph-spacing-h2 | calc(3rlh * var(--_paragraph-spacing-multiplier)) |
--paragraph-spacing-h3 | calc(3rlh * var(--_paragraph-spacing-multiplier)) |
--paragraph-spacing-h4 | calc(2rlh * var(--_paragraph-spacing-multiplier)) |
--paragraph-spacing-h5 | calc(2rlh * var(--_paragraph-spacing-multiplier)) |
--paragraph-spacing-h6 | calc(2rlh * var(--_paragraph-spacing-multiplier)) |
--paragraph-spacing-lg | calc(0.75rlh * var(--_paragraph-spacing-multiplier)) |
--paragraph-spacing-md | calc(0.75rlh * var(--_paragraph-spacing-multiplier)) |
--paragraph-spacing-sm | calc(0.5rlh * var(--_paragraph-spacing-multiplier)) |
--paragraph-spacing-xl | calc(0.75rlh * var(--_paragraph-spacing-multiplier)) |
--paragraph-spacing-xs | calc(0.5rlh * var(--_paragraph-spacing-multiplier)) |
--tracking-2xl | -0.01em |
--tracking-2xs | 0em |
--tracking-display | -0.05em |
--tracking-eyebrow | 0.05em |
--tracking-h1 | -0.05em |
--tracking-h2 | -0.025em |
--tracking-h3 | -0.025em |
--tracking-h4 | -0.015em |
--tracking-h5 | -0.01em |
--tracking-h6 | -0.005em |
--tracking-lg | 0em |
--tracking-md | 0em |
--tracking-sm | 0em |
--tracking-xl | 0em |
--tracking-xs | 0em |
Layout widths
Band and component widths in rem, and the article reading measures in ch.
| Token | Value |
|---|---|
--article-2xl | 90ch |
--article-2xs | 30ch |
--article-lg | 70ch |
--article-md | 65ch |
--article-sm | 50ch |
--article-xl | 75ch |
--article-xs | 45ch |
--gutters | 1.35rem – 1.5rem |
--layout-2xl | 96rem |
--layout-lg | 64rem |
--layout-md | 48rem |
--layout-sm | 40rem |
--layout-xl | 80rem |
Motion
The spring easing, its duration, and the default transition bundle. prefers-reduced-motion: reduce zeroes the duration globally.
| Token | Value |
|---|---|
--bezier-easing | cubic-bezier(0.17, 0.84, 0.44, 1) |
--default-transition | var(--default-transition-colors), var(--default-transition-transforms), var(--default-transition-effects), var(--default-transition-content) |
--default-transition-colors | text-decoration-color var(--default-transition-duration) var(--default-transition-timing-function), background-color var(--default-transition-duration) var(--default-transition-timing-function), border-color var(--default-transition-duration) var(--default-transition-timing-function), color var(--default-transition-duration) var(--default-transition-timing-function), fill var(--default-transition-duration) var(--default-transition-timing-function), stroke var(--default-transition-duration) var(--default-transition-timing-function) |
--default-transition-content | display var(--default-transition-duration) var(--default-transition-timing-function) allow-discrete, content-visibility var(--default-transition-duration) var(--default-transition-timing-function) allow-discrete, overlay var(--default-transition-duration) var(--default-transition-timing-function) allow-discrete, pointer-events var(--default-transition-duration) var(--default-transition-timing-function) allow-discrete |
--default-transition-duration | var(--spring-duration, 0.333s) |
--default-transition-effects | opacity var(--default-transition-duration) var(--default-transition-timing-function), filter var(--default-transition-duration) var(--default-transition-timing-function), -webkit-backdrop-filter var(--default-transition-duration) var(--default-transition-timing-function), backdrop-filter var(--default-transition-duration) var(--default-transition-timing-function), box-shadow var(--default-transition-duration) var(--default-transition-timing-function) |
--default-transition-property | var(--default-transition-property-colors), var(--default-transition-property-transforms), var(--default-transition-property-effects), var(--default-transition-property-discrete) |
--default-transition-property-colors | text-decoration-color, background-color, border-color, color, fill, stroke |
--default-transition-property-discrete | display, content-visibility, overlay, pointer-events |
--default-transition-property-effects | opacity, filter, -webkit-backdrop-filter, backdrop-filter, box-shadow |
--default-transition-property-transforms | transform, translate, scale, rotate |
--default-transition-timing-function | var(--spring-easing, var(--bezier-easing)) |
--default-transition-transforms | transform var(--default-transition-duration) var(--default-transition-timing-function), translate var(--default-transition-duration) var(--default-transition-timing-function), scale var(--default-transition-duration) var(--default-transition-timing-function), rotate var(--default-transition-duration) var(--default-transition-timing-function) |
--spring-duration | 0.333s |
--spring-easing | linear( 0, 0.012 0.9%, 0.049 2%, 0.409 9.3%, 0.513 11.9%, 0.606 14.7%, 0.691 17.9%, 0.762 21.3%, 0.82 25%, 0.868 29.1%, 0.907 33.6%, 0.937 38.7%, 0.976 51.3%, 0.994 68.8%, 1 ) |