Foundations

Tokens

Every value in Sorted UI comes from one file, src/tokens/tokens.css: plain CSS custom properties. This page reads that file when the site builds, so it always shows the current values. Type tokens are on the Typography page.

Brand / accent

8 tokens

--blue#135bffprimary signal — "if it can be blue, it must be blue"

--blue-2#0d46dbpress · nav ground · hero ground

--blue-ink#0b3db0blue text on light

--blue-hi#7fa8fffooter index · link hover · dark accent-text

--blue-soft#eaf0ffblue tint bg

--live#3fd08aLIVE status dot — the ONLY green

--ok#1e8f5atext-safe status green

--warn#c77700caution / save

Neutral ramp: ink

7 tokens

--ink-1#10141fprimary text

--ink-2#262c3bhigh-emphasis secondary

--ink-3#3c4453secondary

--ink-4#545c6emuted body

--ink-5#6c7689labels / tertiary

--ink-6#8791a2disabled text / faint

--ink-7#a2aab8placeholder / lowest

Neutral ramp: hair

6 tokens

--hair-1#e9ecf2faint inset rule

--hair-2#e2e6eegridlines

--hair-3#cdd3dfstronger border / gridline parent

--hair-4#b0b8c6emphasis divider / focus-adjacent

--inkvar(--ink-1)

--hairvar(--hair-2)

Surfaces

4 tokens

--bg#f7f8faapp ground

--paper#ffffffpanel fill

--paper-2#f3f5f8hover / inset

--paper-3#edf0f5deeper inset / scrim base

Constant dark-blue surfaces

14 tokens

--notif#041745

--notif-hair#15347enotification bar

--nav#0d46db

--nav-ash#bcd0ff

--nav-hairrgba(255, 255, 255, 0.16)nav

--foot#07256a

--foot-panel#0a2d7a

--foot-hair#1e458f

--foot-ash#aec2ec

--foot-dim#8499c8footer

--drawer#071a40mobile drawer ground (§F.5.1)

--on-blue#ffffff

--on-blue-soft#bcd0ff

--on-blue-accent#9fc2ff"Sorted." accent on the blue hero ground

Elevation

4 tokens

--elev-edgevar(--blue)2px accent top-edge marks an elevated panel

--elev-bordervar(--hair-4)

--elev-fillvar(--paper)

--scrimrgba(16, 20, 31, 0.4)

Opacity scale

7 tokens

--white-10rgba(255, 255, 255, 0.1)

--white-16rgba(255, 255, 255, 0.16)

--white-28rgba(255, 255, 255, 0.28)

--font-mono"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace

--font-prose"IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif

--font-primaryvar(--font-mono)

--font-sansvar(--font-primary)back-compat alias

Spacing

11 tokens

Token	Value	Use
`--space-2`	`2px`	segmented-meter gaps only
`--space-4`	`4px`	icon gaps, tight inline
`--space-8`	`8px`	chip padding, small gaps
`--space-12`	`12px`	control inner padding (y)
`--space-16`	`16px`	control inner padding (x), label gaps
`--space-20`	`20px`	cell padding (compact)
`--space-24`	`24px`	cell padding (default), gutters
`--space-32`	`32px`	section internal, button x-padding (lg)
`--space-40`	`40px`	hero side padding (desktop)
`--space-56`	`56px`	hero vertical padding
`--space-80`	`80px`	major section vertical rhythm

Radius

2 tokens

--r: 3px

--radius-none: 0

Borders

2 tokens

Token	Value	Use
`--border-hairline`	`1px solid var(--hair)`
`--border-hairline-2`	`1px solid var(--hair-3)`

Motion

1 tokens

Token	Value	Use
`--motion`	`150ms ease`

Using tokens

Read tokens with var(). Never copy the value into a component.

CSS

.card {
  background: var(--paper);
  border: 1px solid var(--hair-2);
  border-radius: var(--r);
  padding: var(--space-24);
  color: var(--ink-1);
}
.card:hover { box-shadow: inset 3px 0 0 var(--blue); transition: box-shadow var(--motion); }

Use --blue for links, primary actions and the one highlight on a surface.
Use the ink ramp for text and the hair ramp for borders and grid lines.
Use the spacing tokens; the scale is strict 4px.

Don't

Use --live for anything but the LIVE status dot.
Round a corner past --r (3px).
Theme the constant dark-blue surfaces (nav, footer, drawer).