Skip to content

Tokens

Every value below is read from packages/ui/src/tokens/tokens.css. Components reach them through the typed vars object, never by name.

Colour

Semantic roles, not a palette. Each token has a light and a dark value through light-dark(), so a theme is only a color-scheme.

Neutral scale

Blue-grey at hue 255, chroma under 0.012. Components never use the steps directly.

0
25
50
100
150
200
300
400
500
600
700
800
850
900
950
975

Surfaces

Light
Dark
pagevar(--sb-n50)var(--sb-n975)
Light
Dark
surfacevar(--sb-n0)var(--sb-n950)
Light
Dark
raisedvar(--sb-n0)var(--sb-n900)
Light
Dark
sunkenvar(--sb-n100)oklch(0.11 0.004 255)
Light
Dark
tintvar(--sb-n100)var(--sb-n850)
Light
Dark
controlvar(--sb-n0)var(--sb-n950)
Light
Dark
fillvar(--sb-n150)var(--sb-n800)

Ink

Light
Dark
inkvar(--sb-n950)var(--sb-n25)
Light
Dark
ink-2var(--sb-n600)var(--sb-n400)
Light
Dark
ink-3oklch(0.51 0.012 255)oklch(0.62 0.012 255)
Light
Dark
inversevar(--sb-n950)var(--sb-n25)
Light
Dark
on-inversevar(--sb-n25)var(--sb-n950)
Light
Dark
inverse-hovervar(--sb-n800)var(--sb-n200)

Lines

Light
Dark
lineoklch(0.2 0.01 255 / 0.11)oklch(1 0 0 / 0.1)
Light
Dark
line-strongoklch(0.2 0.01 255 / 0.2)oklch(1 0 0 / 0.18)
Light
Dark
hairlinevar(--sb-n150)var(--sb-n850)

Accent

patch violet (hue 285

Light
Dark
accentoklch(0.53 0.21 285)oklch(0.7 0.17 285)
Light
Dark
accent-hoveroklch(0.47 0.21 285)oklch(0.76 0.15 285)
Light
Dark
accent-tintoklch(0.95 0.04 285)oklch(0.32 0.09 285 / 0.45)
Light
Dark
accent-inkoklch(0.45 0.2 285)oklch(0.8 0.12 285)
Light
Dark
on-accentvar(--sb-n0)var(--sb-n975)

Status

solid (dots, icons, emphasised text), tint (washes), ink (text on tint

Light
Dark
successoklch(0.58 0.14 155)oklch(0.76 0.16 155)
Light
Dark
success-tintoklch(0.96 0.04 155)oklch(0.36 0.08 155 / 0.35)
Light
Dark
success-inkoklch(0.45 0.11 155)oklch(0.82 0.13 155)
Light
Dark
warningoklch(0.66 0.15 70)oklch(0.8 0.14 75)
Light
Dark
warning-tintoklch(0.96 0.05 85)oklch(0.38 0.08 70 / 0.35)
Light
Dark
warning-inkoklch(0.48 0.11 60)oklch(0.85 0.12 80)
Light
Dark
dangeroklch(0.58 0.21 25)oklch(0.7 0.18 25)
Light
Dark
danger-hoveroklch(0.52 0.21 25)oklch(0.75 0.16 25)
Light
Dark
danger-tintoklch(0.95 0.03 25)oklch(0.38 0.12 25 / 0.35)
Light
Dark
danger-inkoklch(0.5 0.19 25)oklch(0.8 0.13 25)
Light
Dark
infooklch(0.6 0.12 230)oklch(0.75 0.11 230)
Light
Dark
info-tintoklch(0.96 0.03 230)oklch(0.36 0.07 230 / 0.35)
Light
Dark
info-inkoklch(0.47 0.1 230)oklch(0.82 0.09 230)

Focus ring

box-shadow

Light
Dark
focus0 0 0 2px var(--sb-page), 0 0 0 4px var(--sb-accent)

Type

IBM Plex Sans for everything, Plex Mono only for identifiers people type into other programs. 14px is the content size; larger sizes are for headings.

text-xs12px / 16px
Route each request to the right serverMeta, counts, hints
text-sm13px / 18px
Route each request to the right serverSecondary text, table meta
text-base14px / 21px
Route each request to the right serverContent and every control
text-lg16px / 24px
Route each request to the right serverSection headings
text-xl20px / 28px
Route each request to the right serverPage titles
text-2xl24px / 32px
sb.example.dev/mcp/u_7f3k2The trunk URL, rare
font-sansServers 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif
font-monocreate_issue 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace
weight-regularServers 400
weight-mediumServers 500
weight-semiboldServers 600

Space

4px base. 6 inside a text group, 16 between controls, 24 between blocks, 32 between page sections.

Space tokens
TokenValueSize
--sb-space-0_52px
--sb-space-14px
--sb-space-1_56px
--sb-space-28px
--sb-space-312px
--sb-space-416px
--sb-space-520px
--sb-space-624px
--sb-space-832px
--sb-space-1040px
--sb-space-1248px
--sb-space-1664px

Radius

Small radii on controls, larger on layers. A nested radius is the outer radius minus the padding.

radius-xs 4px
radius-sm 6px
radius-md 10px
radius-lg 14px
radius-full 9999px

Elevation

A 1px ring plus a drop shadow, never a border and a shadow together. Dark drops are heavier so layers still separate.

elevation-0
elevation-1
elevation-2
elevation-3
elevation-0
elevation-1
elevation-2
elevation-3
Elevation tokens
TokenValue
--sb-drop-1light-dark(oklch(0 0 0 / 0.05), oklch(0 0 0 / 0.35))
--sb-drop-2light-dark(oklch(0 0 0 / 0.08), oklch(0 0 0 / 0.45))
--sb-drop-3light-dark(oklch(0 0 0 / 0.18), oklch(0 0 0 / 0.55))
--sb-elevation-00 0 0 1px var(--sb-line)
--sb-elevation-10 0 0 1px var(--sb-line), 0 1px 2px var(--sb-drop-1)
--sb-elevation-20 0 0 1px var(--sb-line), 0 4px 12px -2px var(--sb-drop-2), 0 2px 4px var(--sb-drop-1)
--sb-elevation-30 0 0 1px var(--sb-line), 0 16px 40px -8px var(--sb-drop-3)

Motion

Hover is instant. Motion answers an action: opening, closing, confirming. Everything is zeroed under prefers-reduced-motion. Hover or focus a row to run it.

Fast120ms ease-out
Switch thumb, press nudge
Base180ms ease-out
Popovers, menus, tab indicator
Slow240ms ease-in-out
Dialogs, sheets, toasts
Motion tokens
TokenValue
--sb-ease-outcubic-bezier(0.2, 0.8, 0.2, 1)
--sb-ease-in-outcubic-bezier(0.6, 0, 0.3, 1)
--sb-duration-fast120ms
--sb-duration-base180ms
--sb-duration-slow240ms

Density

Control and row heights. [data-density="compact"] on any element shrinks them for its subtree.

Density tokens
TokenValue
--sb-control-sm28px
--sb-control-md32px
--sb-control-lg36px
--sb-row44px
--sb-row-compact36px