Tokens

Semantic CSS custom properties — use these instead of raw palette values. Covers colour, radius, shadow, z-index, and spacing.

Backgrounds

TokenLightDark
--ui-bg

#f4f4f4

lightgrey-200

#4c5a68

lightgrey-900

--ui-bg-muted

#ffffff

lightgrey-50

#7a8890

lightgrey-800

--ui-bg-elevated

#eceff0

lightgrey-300

#7a8890

lightgrey-800

--ui-bg-accented

#f4f4f4

lightgrey-200

#8d9aa1

lightgrey-700

--ui-bg-inverted

#7a8890

lightgrey-800

#ffffff

white

Text

TokenLightDark
--ui-text-dimmed

#ccd3d5

lightgrey-500

#ccd3d5

lightgrey-500

--ui-text-muted

#b8c5ca

lightgrey-600

#dde2e3

lightgrey-400

--ui-text-toned

#4c5a68

lightgrey-900

#eceff0

lightgrey-300

--ui-text

#292e3a

lightgrey-950

#f4f4f4

lightgrey-200

--ui-text-highlighted

#1445c7

royalblue-500

#ffffff

white

--ui-text-inverted

#ffffff

white

#4c5a68

lightgrey-900

Borders

TokenLightDark
--ui-border

#4c5a68

lightgrey-900

#7a8890

lightgrey-800

--ui-border-muted

#dde2e3

lightgrey-400

#8d9aa1

lightgrey-700

--ui-border-accented

#8d9aa1

lightgrey-700

#8d9aa1

lightgrey-700

--ui-border-inverted

#4c5a68

lightgrey-900

#ffffff

white

--ui-border-highlighted

#1445c7

royalblue-500

#1445c7

royalblue-500

Border Radius

Defined in tokens.css and mapped to --ui-radius-*. Use Tailwind's rounded-* utilities or reference the CSS variable directly.

TokenValuepxPreviewUse case
--ui-radius-xs0.25rem4px
Tightest corner — checkboxes, small chips, badges
--ui-radius-sm0.5rem8px
Compact — tags, inline elements
--ui-radius-md0.75rem12px
Default input and button corner
--ui-radius-lg1rem16px
Cards, table containers
--ui-radius-xl1.25rem20px
Panels, dropdown menus
--ui-radius-2xl1.5rem24px
Modals, large surface containers
--ui-radius-3xl2rem32px
Slideovers, drawers (--ui-radius default)
--ui-radius-full9999px9999px
Pills, avatar chips, circular buttons

Shadows

Defined as --ui-shadow-* in tokens.css. Use via box-shadow: var(--ui-shadow-xl) or Tailwind's shadow-* utilities for rough equivalents.

--ui-shadow-sm
Subtle lift — chips, small UI elements, secondary cards
--ui-shadow-md
Medium depth — dropdown menus, select panels
--ui-shadow-lg
Prominent depth — popovers, date pickers, floating toolbars
--ui-shadow-xl
Strong lift — modals, slideovers, drawers
--ui-shadow-2xl
Maximum depth — fullscreen overlays, command palettes

Z-Index

Semantic layer scale defined as --ui-z-*. Always reference these tokens instead of arbitrary numeric z-index values to keep stacking order consistent.

TokenValueUse case
--ui-z-base0Default document flow
--ui-z-raised10Slightly elevated — sticky table headers, floating labels
--ui-z-dropdown100Dropdown menus, select panels, autocomplete
--ui-z-sticky200Sticky page headers, pinned sidebars
--ui-z-overlay300Overlay/backdrop behind modals
--ui-z-modal400Modals, slideovers, drawers
--ui-z-toast500Toast notifications
--ui-z-tooltip600Tooltips — always on top of everything

Spacing

All spacing is on a strict 4px grid. Only use these steps for p-*, m-*, gap-*, and sizing utilities — fractional steps (0.5, 1.5, 2.5 etc.) are off-grid and should not be used.

SteprempxVisual
000
10.25rem4px
20.5rem8px
30.75rem12px
41rem16px
51.25rem20px
61.5rem24px
71.75rem28px
82rem32px
92.25rem36px
102.5rem40px
123rem48px
143.5rem56px
164rem64px
205rem80px
246rem96px