Design Tokens
Generated from tokens/tokens.json by pnpm build:docs. Do not edit by hand.
See these rendered live in Portal Design Studio → Foundations.
Three tiers: global (raw values) → brand (per-client, switched by [data-brand],
mapped onto Radix Themes variables) → component (aliases components reference).
Brands: neutral, departmnt, genesys, hlls (default: neutral).
Global
spacing
| Token |
Value |
--global-spacing-1 |
4px |
--global-spacing-2 |
8px |
--global-spacing-3 |
12px |
--global-spacing-4 |
16px |
--global-spacing-5 |
24px |
--global-spacing-6 |
32px |
--global-spacing-7 |
40px |
--global-spacing-8 |
48px |
radius
| Token |
Value |
--global-radius-1 |
3px |
--global-radius-2 |
4px |
--global-radius-3 |
6px |
--global-radius-4 |
8px |
--global-radius-full |
9999px |
font-size
| Token |
Value |
--global-font-size-xs |
12px |
--global-font-size-sm |
14px |
--global-font-size-md |
16px |
--global-font-size-lg |
18px |
--global-font-size-xl |
20px |
--global-font-size-2xl |
24px |
--global-font-size-3xl |
32px |
--global-font-size-4xl |
60px |
font-weight
| Token |
Value |
--global-font-weight-light |
300 |
--global-font-weight-regular |
400 |
--global-font-weight-medium |
500 |
--global-font-weight-bold |
700 |
line-height
| Token |
Value |
--global-line-height-none |
1 |
--global-line-height-tight |
1.1 |
--global-line-height-snug |
1.25 |
--global-line-height-normal |
1.5 |
letter-spacing
| Token |
Value |
--global-letter-spacing-tighter |
-0.75px |
--global-letter-spacing-tight |
-0.25px |
--global-letter-spacing-normal |
0 |
--global-letter-spacing-wide |
0.25px |
transition
| Token |
Value |
--global-transition-fast |
150ms ease |
--global-transition-normal |
250ms ease |
--global-transition-slow |
350ms ease |
z-index
| Token |
Value |
--global-z-index-base |
0 |
--global-z-index-dropdown |
1000 |
--global-z-index-sticky |
1100 |
--global-z-index-overlay |
1200 |
--global-z-index-modal |
1300 |
--global-z-index-toast |
1400 |
size
| Token |
Value |
--global-size-control-xs |
24px |
--global-size-control-sm |
32px |
--global-size-control-md |
40px |
--global-size-control-lg |
48px |
--global-size-control-xl |
64px |
--global-size-icon-sm |
16px |
--global-size-icon-md |
24px |
--global-size-icon-lg |
32px |
--global-size-avatar-xs |
24px |
--global-size-avatar-sm |
32px |
--global-size-avatar-md |
40px |
--global-size-avatar-lg |
56px |
--global-size-avatar-xl |
64px |
--global-size-spinner-sm |
16px |
--global-size-spinner-md |
24px |
--global-size-spinner-lg |
32px |
Brands
neutral
- Default appearance:
light
- Font:
Inter, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif
Light and dark scales both ship; Radix flips them by appearance (.radix-themes vs .dark).
Accent scale — light (1 → 12):
| Step |
Solid |
| 1 |
#fcfcfc |
| 2 |
#f8f8f8 |
| 3 |
#f0f0f0 |
| 4 |
#e8e8e8 |
| 5 |
#dedede |
| 6 |
#d3d3d3 |
| 7 |
#c5c5c5 |
| 8 |
#b1b1b1 |
| 9 |
#202020 |
| 10 |
#151515 |
| 11 |
#696969 |
| 12 |
#303030 |
Gray scale — light (1 → 12):
| Step |
Solid |
| 1 |
#fcfcfc |
| 2 |
#f8f8f8 |
| 3 |
#f0f0f0 |
| 4 |
#e8e8e8 |
| 5 |
#dedede |
| 6 |
#d3d3d3 |
| 7 |
#c5c5c5 |
| 8 |
#b1b1b1 |
| 9 |
#8b8b8b |
| 10 |
#7c7c7c |
| 11 |
#696969 |
| 12 |
#303030 |
Accent scale — dark (1 → 12):
| Step |
Solid |
| 1 |
#111111 |
| 2 |
#191919 |
| 3 |
#232323 |
| 4 |
#2c2c2c |
| 5 |
#363636 |
| 6 |
#434343 |
| 7 |
#555555 |
| 8 |
#6d6d6d |
| 9 |
#b0b0b0 |
| 10 |
#c0c0c0 |
| 11 |
#b4b4b4 |
| 12 |
#e8e8e8 |
Gray scale — dark (1 → 12):
| Step |
Solid |
| 1 |
#111111 |
| 2 |
#191919 |
| 3 |
#232323 |
| 4 |
#2c2c2c |
| 5 |
#363636 |
| 6 |
#434343 |
| 7 |
#555555 |
| 8 |
#6d6d6d |
| 9 |
#3e3e3e |
| 10 |
#4b4b4b |
| 11 |
#b4b4b4 |
| 12 |
#e8e8e8 |
Semantic colours:
| Token |
Value |
--brand-color-primary |
#202020 |
--brand-color-primary-fg |
#ffffff |
--brand-color-secondary |
#bbbbbb |
--brand-color-secondary-fg |
#ffffff |
--brand-color-accent |
#313131 |
--brand-color-accent-fg |
#ffffff |
--brand-color-background |
#ffffff |
--brand-color-foreground |
#202020 |
--brand-color-surface |
#f8f8f8 |
--brand-color-$comment-card |
Module card surface, per appearance (build emits card in the light scale block, card-dark in the dark one). Grey so modules read as modular blocks (DEPARTMNT default); genesys overrides to white. |
--brand-color-card |
#f1f1f0 |
--brand-color-card-dark |
#1c1c1a |
--brand-color-muted |
rgba(0, 7, 20, 0.62) |
--brand-color-border |
rgba(0, 0, 0, 0.12) |
--brand-color-border-subtle |
rgba(0, 0, 0, 0.08) |
--brand-color-overlay |
rgba(0, 0, 0, 0.4) |
--brand-color-focus |
#202020 |
--brand-color-success |
#34c759 |
--brand-color-success-fg |
#ffffff |
--brand-color-warning |
#ff9500 |
--brand-color-warning-fg |
#202020 |
--brand-color-error |
#dc3e42 |
--brand-color-error-fg |
#ffffff |
departmnt
- Default appearance:
dark
- Font:
'Monument Grotesk', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, sans-serif
Light and dark scales both ship; Radix flips them by appearance (.radix-themes vs .dark).
Accent scale — light (1 → 12):
| Step |
Solid |
| 1 |
#fffce9 |
| 2 |
#fff7d1 |
| 3 |
#ffeeb4 |
| 4 |
#ffe499 |
| 5 |
#ffd97f |
| 6 |
#fbcd61 |
| 7 |
#f1bd37 |
| 8 |
#dfa700 |
| 9 |
#ffc300 |
| 10 |
#eeb300 |
| 11 |
#8e5f00 |
| 12 |
#472a00 |
Gray scale — light (1 → 12):
| Step |
Solid |
| 1 |
#fcfcfc |
| 2 |
#f8f8f8 |
| 3 |
#f0f0f0 |
| 4 |
#e8e8e8 |
| 5 |
#dedede |
| 6 |
#d3d3d3 |
| 7 |
#c5c5c5 |
| 8 |
#b1b1b1 |
| 9 |
#8b8b8b |
| 10 |
#7c7c7c |
| 11 |
#696969 |
| 12 |
#303030 |
Accent scale — dark (1 → 12):
| Step |
Solid |
| 1 |
#161004 |
| 2 |
#231700 |
| 3 |
#331e00 |
| 4 |
#422500 |
| 5 |
#502d00 |
| 6 |
#623900 |
| 7 |
#794a00 |
| 8 |
#976200 |
| 9 |
#ffc300 |
| 10 |
#ffd32f |
| 11 |
#deac28 |
| 12 |
#ffe495 |
Gray scale — dark (1 → 12):
| Step |
Solid |
| 1 |
#111111 |
| 2 |
#191919 |
| 3 |
#232323 |
| 4 |
#2c2c2c |
| 5 |
#363636 |
| 6 |
#434343 |
| 7 |
#555555 |
| 8 |
#6d6d6d |
| 9 |
#3e3e3e |
| 10 |
#4b4b4b |
| 11 |
#b4b4b4 |
| 12 |
#e8e8e8 |
Semantic colours:
| Token |
Value |
--brand-color-primary |
#4f46e5 |
--brand-color-primary-fg |
#ffffff |
--brand-color-secondary |
#313131 |
--brand-color-secondary-fg |
#ffffff |
--brand-color-accent |
#6366f1 |
--brand-color-accent-fg |
#ffffff |
--brand-color-background |
#111110 |
--brand-color-foreground |
#ffffff |
--brand-color-surface |
#1a1a1a |
--brand-color-card |
#f1f1f0 |
--brand-color-card-dark |
#1c1c1a |
--brand-color-muted |
rgba(255, 255, 255, 0.6) |
--brand-color-border |
rgba(255, 255, 255, 0.15) |
--brand-color-border-subtle |
rgba(255, 255, 255, 0.08) |
--brand-color-overlay |
rgba(0, 0, 0, 0.8) |
--brand-color-focus |
#6366f1 |
--brand-color-success |
#34c759 |
--brand-color-success-fg |
#04130a |
--brand-color-warning |
#ff9500 |
--brand-color-warning-fg |
#1a1200 |
--brand-color-error |
#dc3e42 |
--brand-color-error-fg |
#ffffff |
genesys
- Default appearance:
light
- Font:
Inter, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif
Light and dark scales both ship; Radix flips them by appearance (.radix-themes vs .dark).
Accent scale — light (1 → 12):
| Step |
Solid |
| 1 |
#fcfcfc |
| 2 |
#f8f8f8 |
| 3 |
#f0f0f0 |
| 4 |
#e8e8e8 |
| 5 |
#dedede |
| 6 |
#d3d3d3 |
| 7 |
#c5c5c5 |
| 8 |
#b1b1b1 |
| 9 |
#202020 |
| 10 |
#151515 |
| 11 |
#696969 |
| 12 |
#303030 |
Gray scale — light (1 → 12):
| Step |
Solid |
| 1 |
#fcfcfc |
| 2 |
#f8f8f8 |
| 3 |
#f0f0f0 |
| 4 |
#e8e8e8 |
| 5 |
#dedede |
| 6 |
#d3d3d3 |
| 7 |
#c5c5c5 |
| 8 |
#b1b1b1 |
| 9 |
#8b8b8b |
| 10 |
#7c7c7c |
| 11 |
#696969 |
| 12 |
#303030 |
Accent scale — dark (1 → 12):
| Step |
Solid |
| 1 |
#111111 |
| 2 |
#191919 |
| 3 |
#232323 |
| 4 |
#2c2c2c |
| 5 |
#363636 |
| 6 |
#434343 |
| 7 |
#555555 |
| 8 |
#6d6d6d |
| 9 |
#b0b0b0 |
| 10 |
#c0c0c0 |
| 11 |
#b4b4b4 |
| 12 |
#e8e8e8 |
Gray scale — dark (1 → 12):
| Step |
Solid |
| 1 |
#111111 |
| 2 |
#191919 |
| 3 |
#232323 |
| 4 |
#2c2c2c |
| 5 |
#363636 |
| 6 |
#434343 |
| 7 |
#555555 |
| 8 |
#6d6d6d |
| 9 |
#3e3e3e |
| 10 |
#4b4b4b |
| 11 |
#b4b4b4 |
| 12 |
#e8e8e8 |
Semantic colours:
| Token |
Value |
--brand-color-primary |
#202020 |
--brand-color-primary-fg |
#ffffff |
--brand-color-secondary |
#bbbbbb |
--brand-color-secondary-fg |
#ffffff |
--brand-color-accent |
#313131 |
--brand-color-accent-fg |
#ffffff |
--brand-color-background |
#f4f4f3 |
--brand-color-foreground |
#202020 |
--brand-color-surface |
#ffffff |
--brand-color-card |
#ffffff |
--brand-color-card-dark |
#191919 |
--brand-color-muted |
rgba(0, 7, 20, 0.62) |
--brand-color-border |
rgba(0, 0, 0, 0.12) |
--brand-color-border-subtle |
rgba(0, 0, 0, 0.08) |
--brand-color-overlay |
rgba(0, 0, 0, 0.4) |
--brand-color-focus |
#202020 |
--brand-color-success |
#34c759 |
--brand-color-success-fg |
#ffffff |
--brand-color-warning |
#ff9500 |
--brand-color-warning-fg |
#202020 |
--brand-color-error |
#dc3e42 |
--brand-color-error-fg |
#ffffff |
hlls
- Default appearance:
dark
- Font:
'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif
Light and dark scales both ship; Radix flips them by appearance (.radix-themes vs .dark).
Accent scale — light (1 → 12):
| Step |
Solid |
| 1 |
#fff6f1 |
| 2 |
#ffece1 |
| 3 |
#ffdecd |
| 4 |
#ffcfba |
| 5 |
#ffc0a9 |
| 6 |
#ffb095 |
| 7 |
#ff9b7f |
| 8 |
#ff8263 |
| 9 |
#bf3414 |
| 10 |
#ae2000 |
| 11 |
#b03e25 |
| 12 |
#5b1102 |
Gray scale — light (1 → 12):
| Step |
Solid |
| 1 |
#fcfcfc |
| 2 |
#f8f8f8 |
| 3 |
#f0f0f0 |
| 4 |
#e8e8e8 |
| 5 |
#dedede |
| 6 |
#d3d3d3 |
| 7 |
#c5c5c5 |
| 8 |
#b1b1b1 |
| 9 |
#8b8b8b |
| 10 |
#7c7c7c |
| 11 |
#696969 |
| 12 |
#303030 |
Accent scale — dark (1 → 12):
| Step |
Solid |
| 1 |
#1b0c09 |
| 2 |
#2d0e07 |
| 3 |
#420e05 |
| 4 |
#550e01 |
| 5 |
#660f00 |
| 6 |
#7d1600 |
| 7 |
#992204 |
| 8 |
#bc381b |
| 9 |
#bf3414 |
| 10 |
#d14628 |
| 11 |
#ff8c71 |
| 12 |
#ffceb8 |
Gray scale — dark (1 → 12):
| Step |
Solid |
| 1 |
#111111 |
| 2 |
#191919 |
| 3 |
#232323 |
| 4 |
#2c2c2c |
| 5 |
#363636 |
| 6 |
#434343 |
| 7 |
#555555 |
| 8 |
#6d6d6d |
| 9 |
#3e3e3e |
| 10 |
#4b4b4b |
| 11 |
#b4b4b4 |
| 12 |
#e8e8e8 |
Semantic colours:
| Token |
Value |
--brand-color-primary |
#bf3414 |
--brand-color-primary-fg |
#ffe4db |
--brand-color-secondary |
#792918 |
--brand-color-secondary-fg |
#ffe4db |
--brand-color-accent |
#bf3414 |
--brand-color-accent-fg |
#ffe4db |
--brand-color-background |
#000000 |
--brand-color-foreground |
rgba(255, 255, 255, 0.93) |
--brand-color-surface |
#0a0a0a |
--brand-color-card |
#f1f1f0 |
--brand-color-card-dark |
#141414 |
--brand-color-muted |
rgba(241, 247, 254, 0.71) |
--brand-color-border |
rgba(255, 255, 255, 0.12) |
--brand-color-border-subtle |
rgba(255, 255, 255, 0.08) |
--brand-color-overlay |
rgba(0, 0, 0, 0.8) |
--brand-color-focus |
#bf3414 |
--brand-color-success |
#34c759 |
--brand-color-success-fg |
#04130a |
--brand-color-warning |
#ff9500 |
--brand-color-warning-fg |
#1a1200 |
--brand-color-error |
#dc3e42 |
--brand-color-error-fg |
#ffffff |
Component aliases
container
| Token |
Reference |
--container-width |
393px |
--container-padding |
{global.spacing.4} |
button
| Token |
Reference |
--button-bg |
{brand.action.bg} |
--button-fg |
{brand.action.fg} |
--button-hover |
{brand.color.accent} |
--button-radius |
{global.radius.2} |
--button-height |
{global.size.control-md} |
--button-padding-x |
{global.spacing.4} |
--button-font-size |
{global.font-size.sm} |
--button-font-weight |
{global.font-weight.medium} |
button-secondary
| Token |
Reference |
--button-secondary-bg |
{brand.color.secondary} |
--button-secondary-fg |
{brand.color.secondary-fg} |
input
| Token |
Reference |
--input-bg |
{brand.color.background} |
--input-fg |
{brand.color.foreground} |
--input-border |
{brand.color.border} |
--input-focus |
{brand.color.focus} |
--input-radius |
{global.radius.2} |
--input-height |
{global.size.control-md} |
--input-padding-x |
{global.spacing.3} |
--input-placeholder |
{brand.color.muted} |
card
| Token |
Reference |
--card-$comment |
Module card surface. bg is per-brand (grey for DEPARTMNT/default, white for genesys). Padding is 8px and radius generous, matching the Figma page template. |
--card-bg |
{brand.color.card} |
--card-fg |
{brand.color.foreground} |
--card-border |
{brand.color.border} |
--card-radius |
{global.radius.4} |
--card-padding |
{global.spacing.2} |
module
| Token |
Reference |
--module-$comment |
Semantic module-painting slots — consume these in module UI instead of hard-coding --gray-3/--gray-12/--accent-8. Defaults map to the neutral gray scale; colour profiles (data-color-profile) remap them onto --accent-*/--gray-* using Radix step semantics (3 subtle surface, 4 raised, 6 idle border, 8 active border, 12 text, 11 muted text). See build-tokens.ts for the per-profile blocks. |
--module-surface |
var(--gray-3) |
--module-surface-raised |
var(--gray-4) |
--module-outline |
var(--gray-6) |
--module-outline-active |
var(--accent-8) |
--module-fg |
var(--gray-12) |
--module-fg-muted |
var(--gray-11) |
page
| Token |
Reference |
--page-$comment |
Text sitting directly on the page background (chrome, borderless module headers) + the logo slot. Defaults follow the gray scale; colour profiles repoint them (accent/panels → seed-9 logo; background/colour → seed-contrast). |
--page-fg |
var(--gray-12) |
--page-fg-muted |
var(--gray-11) |
--page-logo |
var(--page-fg) |
dialog
| Token |
Reference |
--dialog-bg |
{brand.color.surface} |
--dialog-fg |
{brand.color.foreground} |
--dialog-border |
{brand.color.border} |
--dialog-overlay |
{brand.color.overlay} |
--dialog-radius |
{global.radius.4} |
badge
| Token |
Reference |
--badge-bg |
{brand.color.accent} |
--badge-fg |
{brand.color.accent-fg} |
--badge-radius |
{global.radius.full} |
text
| Token |
Reference |
--text-color |
{brand.color.foreground} |
--text-muted |
{brand.color.muted} |
focus
| Token |
Reference |
--focus-ring |
{brand.color.focus} |