Tokens

Reference

Colour, the page

The page: white ground and kurobeni ink, reversed in dark theme.

Ground, surface and ink are the inputs; every other role is mixed from them. Under prefers-contrast: more the secondary inks and edges move towards the ink; colors.json has those values too.

Variable	Light	Dark
`--kb-ground`	`#ffffff`	`#100c0e`
`--kb-surface`	`#ffffff`	`#191417`
`--kb-ink`	`#23191e`	`#f1ebed`
`--kb-accent`	`#c2163b`	`#c2163b`
`--kb-ink-2`	`#554d51`	`#afa9ab`
`--kb-ink-3`	`#6a6266`	`#979193`
`--kb-edge`	`#898285`	`#767173`
`--kb-line-strong`	`#c9c6c8`	`#393537`
`--kb-line`	`#e4e2e3`	`#241f21`
`--kb-well`	`#f5f4f5`	`#171315`
`--kb-band`	`#eeeded`	`#252023`
`--kb-hover`	`#f0eff0`	`#231e21`
`--kb-press`	`#e4e2e3`	`#2d272a`
`--kb-solid`	`#23191e`	`#f1ebed`
`--kb-on-solid`	`#ffffff`	`#191417`
`--kb-solid-hover`	`#41383c`	`#c8c2c4`
`--kb-accent-fill`	`#c2163b`	`#cd4151`
`--kb-accent-fill-hover`	`#aa1e37`	`#c2163b`
`--kb-on-accent`	`#ffffff`	`#ffffff`
`--kb-accent-ink`	`#892232`	`#da6f75`
`--kb-ok`	`#2d613d`	`#72ab81`
`--kb-warn`	`#815823`	`#cca16c`
`--kb-err`	`#9a3e27`	`#eb896e`
`--kb-info`	`#2f527a`	`#729bc6`
`--kb-focus`	`#892232`	`#da6f75`
`--kb-accent-wash`	`#fdecec`	`#27171a`
`--kb-ok-wash`	`#eaf3ec`	`#151714`
`--kb-warn-wash`	`#f6eee3`	`#221913`
`--kb-err-wash`	`#ffeeea`	`#211312`
`--kb-info-wash`	`#eaf1f8`	`#14151c`
`--kb-series-1`	`#3069a3`	`#4f8ac5`
`--kb-series-2`	`#ad7820`	`#d09946`
`--kb-series-3`	`#318568`	`#53a687`
`--kb-series-4`	`#9b438b`	`#be64ac`
`--kb-series-5`	`#5e54b5`	`#7b75d9`
`--kb-series-6`	`#6f852d`	`#8da64f`
`--kb-series-7`	`#b44837`	`#d86a56`
`--kb-series-8`	`#3c8ca8`	`#5eaeca`

Colour, sunk

Recessed bands and sidebars, one step below the page in both themes. data-tone="sunk".

Variable	Light	Dark
`--kb-ground`	`#f5f2f3`	`#0a0708`
`--kb-surface`	`#ffffff`	`#151113`
`--kb-ink`	`#23191e`	`#f1ebed`
`--kb-accent`	`#c2163b`	`#c2163b`
`--kb-ink-2`	`#534a4e`	`#ada7a9`
`--kb-ink-3`	`#675e62`	`#948e90`
`--kb-edge`	`#847c80`	`#726d6f`
`--kb-line-strong`	`#c2bdbf`	`#342f31`
`--kb-line`	`#dbd7d9`	`#1e1a1b`
`--kb-well`	`#ece8e9`	`#110d0f`
`--kb-band`	`#eeeded`	`#211d1f`
`--kb-hover`	`#f0eff0`	`#201b1d`
`--kb-press`	`#e4e2e3`	`#292426`
`--kb-solid`	`#23191e`	`#f1ebed`
`--kb-on-solid`	`#ffffff`	`#151113`
`--kb-solid-hover`	`#40363b`	`#c6c1c3`
`--kb-accent-fill`	`#c2163b`	`#cd4151`
`--kb-accent-fill-hover`	`#aa1e37`	`#c2163b`
`--kb-on-accent`	`#ffffff`	`#ffffff`
`--kb-accent-ink`	`#892232`	`#da6f75`
`--kb-ok`	`#2d613d`	`#72ab81`
`--kb-warn`	`#815823`	`#cca16c`
`--kb-err`	`#9a3e27`	`#eb896e`
`--kb-info`	`#2f527a`	`#729bc6`
`--kb-focus`	`#892232`	`#da6f75`
`--kb-accent-wash`	`#fdecec`	`#231517`
`--kb-ok-wash`	`#e1e8e2`	`#0f120e`
`--kb-warn-wash`	`#eee3d9`	`#1c130d`
`--kb-err-wash`	`#f6e3df`	`#1b0e0c`
`--kb-info-wash`	`#e1e5ed`	`#0f1016`
`--kb-series-1`	`#3069a3`	`#4f8ac5`
`--kb-series-2`	`#ad7820`	`#d09946`
`--kb-series-3`	`#318568`	`#53a687`
`--kb-series-4`	`#9b438b`	`#be64ac`
`--kb-series-5`	`#5e54b5`	`#7b75d9`
`--kb-series-6`	`#6f852d`	`#8da64f`
`--kb-series-7`	`#b44837`	`#d86a56`
`--kb-series-8`	`#3c8ca8`	`#5eaeca`

Colour, deep

Dark in both themes, for footers and feature bands. data-tone="deep".

Variable	Light	Dark
`--kb-ground`	`#23191e`	`#23191e`
`--kb-surface`	`#2c2126`	`#2c2126`
`--kb-ink`	`#f4eff0`	`#f4eff0`
`--kb-accent`	`#c2163b`	`#c2163b`
`--kb-ink-2`	`#b8b1b3`	`#b8b1b3`
`--kb-ink-3`	`#a29a9d`	`#a29a9d`
`--kb-edge`	`#847b7f`	`#847b7f`
`--kb-line-strong`	`#4b4146`	`#4b4146`
`--kb-line`	`#372c31`	`#372c31`
`--kb-well`	`#2a2025`	`#2a2025`
`--kb-band`	`#382d32`	`#382d32`
`--kb-hover`	`#362b30`	`#362b30`
`--kb-press`	`#3f3439`	`#3f3439`
`--kb-solid`	`#f4eff0`	`#f4eff0`
`--kb-on-solid`	`#2c2126`	`#2c2126`
`--kb-solid-hover`	`#cfc8ca`	`#cfc8ca`
`--kb-accent-fill`	`#cd4151`	`#cd4151`
`--kb-accent-fill-hover`	`#c2163b`	`#c2163b`
`--kb-on-accent`	`#ffffff`	`#ffffff`
`--kb-accent-ink`	`#e08084`	`#e08084`
`--kb-ok`	`#73ad82`	`#73ad82`
`--kb-warn`	`#cda36d`	`#cda36d`
`--kb-err`	`#ec8b6e`	`#ec8b6e`
`--kb-info`	`#739cc7`	`#739cc7`
`--kb-focus`	`#e08084`	`#e08084`
`--kb-accent-wash`	`#392328`	`#392328`
`--kb-ok-wash`	`#272323`	`#272323`
`--kb-warn-wash`	`#342521`	`#342521`
`--kb-err-wash`	`#341f21`	`#341f21`
`--kb-info-wash`	`#26212b`	`#26212b`
`--kb-series-1`	`#4f8ac6`	`#4f8ac6`
`--kb-series-2`	`#d09a47`	`#d09a47`
`--kb-series-3`	`#53a787`	`#53a787`
`--kb-series-4`	`#bf65ac`	`#bf65ac`
`--kb-series-5`	`#7c76d9`	`#7c76d9`
`--kb-series-6`	`#8ea74f`	`#8ea74f`
`--kb-series-7`	`#d86b56`	`#d86b56`
`--kb-series-8`	`#5eafcb`	`#5eafcb`

Colour, accent

The accent as background. Every text role on it is the plain ink. data-tone="accent".

Variable	Light	Dark
`--kb-ground`	`#c2163b`	`#c2163b`
`--kb-surface`	`#c2163b`	`#c2163b`
`--kb-ink`	`#ffffff`	`#ffffff`
`--kb-accent`	`#c2163b`	`#c2163b`
`--kb-ink-2`	`#ffffff`	`#ffffff`
`--kb-ink-3`	`#ffffff`	`#ffffff`
`--kb-edge`	`#ffffff`	`#ffffff`
`--kb-line-strong`	`#f0acad`	`#f0acad`
`--kb-line`	`#e48286`	`#e48286`
`--kb-well`	`#c62842`	`#c62842`
`--kb-band`	`#c93348`	`#c93348`
`--kb-hover`	`#c82f46`	`#c82f46`
`--kb-press`	`#cc3f4f`	`#cc3f4f`
`--kb-solid`	`#ffffff`	`#ffffff`
`--kb-on-solid`	`#c2163b`	`#c2163b`
`--kb-solid-hover`	`#fbdede`	`#fbdede`
`--kb-accent-fill`	`#ffffff`	`#ffffff`
`--kb-accent-fill-hover`	`#fbe0e0`	`#fbe0e0`
`--kb-on-accent`	`#c2163b`	`#c2163b`
`--kb-accent-ink`	`#ffffff`	`#ffffff`
`--kb-ok`	`#ffffff`	`#ffffff`
`--kb-warn`	`#ffffff`	`#ffffff`
`--kb-err`	`#ffffff`	`#ffffff`
`--kb-info`	`#ffffff`	`#ffffff`
`--kb-focus`	`#ffffff`	`#ffffff`
`--kb-accent-wash`	`#c2163b`	`#c2163b`
`--kb-ok-wash`	`#b9333d`	`#b9333d`
`--kb-warn-wash`	`#c22e38`	`#c22e38`
`--kb-err-wash`	`#c51f39`	`#c51f39`
`--kb-info-wash`	`#b82f49`	`#b82f49`
`--kb-series-1`	`#ffffff`	`#ffffff`
`--kb-series-2`	`#ffffff`	`#ffffff`
`--kb-series-3`	`#ffffff`	`#ffffff`
`--kb-series-4`	`#ffffff`	`#ffffff`
`--kb-series-5`	`#ffffff`	`#ffffff`
`--kb-series-6`	`#ffffff`	`#ffffff`
`--kb-series-7`	`#ffffff`	`#ffffff`
`--kb-series-8`	`#ffffff`	`#ffffff`

Space

data-density="compact" sets 0.75 and "comfortable" 1.25; auto is compact below 768px. Controls keep their size.

Variable	Default
`--kb-space-3xs`	`2px`
`--kb-space-2xs`	`4px`
`--kb-space-xs`	`8px`
`--kb-space-sm`	`12px`
`--kb-space-md`	`16px`
`--kb-space-lg`	`24px`
`--kb-space-xl`	`32px`
`--kb-space-2xl`	`48px`
`--kb-space-3xl`	`64px`
`--kb-space-4xl`	`96px`
`--kb-space-5xl`	`128px`

Type

sm is for the interface (controls, tables, navigation), md for body text. The top three steps scale fluidly between 360px and 1280px.

Size	Leading	Tracking
`--kb-text-xs`: `0.75rem`	`1.5`	`0.01em`
`--kb-text-sm`: `0.875rem`	`1.5`	`0`
`--kb-text-md`: `1rem`	`1.6`	`0`
`--kb-text-lg`: `1.125rem`	`1.55`	`0`
`--kb-text-xl`: `1.25rem`	`1.4`	`-0.005em`
`--kb-text-2xl`: `clamp(1.5rem, 1.4rem + 0.45vw, 1.75rem)`	`1.3`	`-0.01em`
`--kb-text-3xl`: `clamp(1.875rem, 1.6rem + 1.2vw, 2.5rem)`	`1.2`	`-0.015em (--kb-display-tracking)`
`--kb-text-4xl`: `clamp(2.25rem, 1.7rem + 2.4vw, 3.5rem)`	`1.12`	`-0.02em`

Radius and controls

Touch screens get the touch heights at any density.

Variable	Default
`--kb-radius-sm`	`3px`
`--kb-radius-md`	`4px`
`--kb-radius-lg`	`6px`
`--kb-radius-full`	circle or pill

Variable	Mouse	Touch
`--kb-control-sm`	`32px`	`40px`
`--kb-control-md`	`36px`	`44px`
`--kb-control-lg`	`44px`	`48px`

Knobs and fixed sizes

Knobs are the values meant to be set per site or subtree. Fixed sizes ignore density.

Knob	Default
`--kb-accent`	`#c2163b`
`--kb-density`	`1`
`--kb-round`	`1`
`--kb-font-sans`	`'Atkinson Hyperlegible Next', 'BIZ UDPGothic', 'Hiragino Sans', 'Yu Gothic UI', 'Noto Sans JP', system-ui, sans-serif`
`--kb-font-display`	`var(--kb-font-sans)`
`--kb-font-mono`	`'Atkinson Hyperlegible Mono', 'BIZ UDGothic', ui-monospace, 'SFMono-Regular', Menlo, monospace`
`--kb-display-weight`	`700`
`--kb-display-tracking`	`-0.015em`

Variable	Value
`--kb-page-width`	`1200px`
`--kb-measure`	`40rem`
`--kb-side-width`	`240px`
`--kb-rail-width`	`280px`
`--kb-bar-height`	`56px`
`--kb-gutter`	`clamp(16px, 4vw, 32px)`
`--kb-duration`	`150ms`
`--kb-ease`	`cubic-bezier(0.2, 0, 0, 1)`
`--kb-shadow-card`	`none`
`--kb-shadow-float`	`0 0 0 1px rgb(35 25 30 / 0.06), 0 8px 24px -4px rgb(35 25 30 / 0.2)`
`--kb-scrim`	`rgb(21 16 19 / 0.5)`
`--kb-layer-tip`	`10`
`--kb-layer-list`	`50`
`--kb-layer-bar`	`100`
`--kb-layer-toast`	`200`
`--kb-layer-skip`	`300`