Foundations
The token system that underpins every component. Color, typography, spacing, elevation. Edit tokens.css to change the system; every consumer follows.
Color
Warm cream surfaces with deep ink and orange accent. All tokens are OKLCH for perceptually uniform mixing. Neutrals are tinted toward the orange hue at ~78° to create subconscious cohesion.
Surfaces
Ink scale
Accent - Orange
Status
Build phase
Cool slate hue (228°) - machine processing stages in the pipeline bar: Build Queued and In Build.
Token reference
Class reference
| Token | Swatch | Value | Use |
|---|---|---|---|
| --build-600 | oklch(44% 0.12 228) | Build phase hover / emphasis | |
| --build-500 | oklch(53% 0.14 228) | In Build pipeline segment | |
| --build-100 | oklch(92% 0.028 228) | Build Queued pipeline segment, build tinted surfaces | |
| --bg-raised | oklch(99.2% 0.005 78) | Cards, inputs, raised surfaces | |
| --bg-panel | cream-50 | Sidebar, panels | |
| --bg-app | cream-100 | App canvas, main background | |
| --bg-sunken | cream-200 | Inactive tabs, count chips, sunken wells | |
| --line | oklch(89% 0.022 78) | Default borders, dividers | |
| --line-strong | oklch(84% 0.028 78) | Emphasized borders, table headers | |
| --ink | ink-900 | Primary text | |
| --ink-soft | ink-500 | Secondary text, nav labels | |
| --ink-muted | ink-400 | Metadata, placeholders, labels | |
| --accent | orange-500 | Primary accent, active states, CTA | |
| --accent-dark | orange-600 | Hover state, links, text on accent-wash | |
| --accent-soft | orange-100 | Focus rings, tinted surfaces | |
| --accent-wash | orange-50 | Active nav bg, today column bg |
Typography
Three font roles. Barlow for display and headings; Red Hat Text for all UI body copy; Rubik for metadata, labels, counts, and IDs.
Type scale
Font roles
Class reference
| Token | Family | Use |
|---|---|---|
| --font-display | Barlow | Page titles, section heads, card titles, KPI values, day numbers |
| --font-ui | Red Hat Text | Body copy, nav items, buttons, inputs, table cells, all interactive UI |
| --font-mono | Rubik | IDs, counts, dates, status tags, pipeline labels, metadata - compact data contexts |
Spacing
4pt base scale, step-named so a redesign never requires token renames. Use gap for siblings, padding for internal breathing room.
Elevation
Shadows are warm-tinted, never cold gray. Raised surfaces use xs/sm; floating panels use md; drawers and modals use lg.
Class reference
| Token | Use |
|---|---|
| --shadow-xs | Cards, chip hover states |
| --shadow-sm | Playable cards, detail panels |
| --shadow-md | Cmd-K, floating filters, popover |
| --shadow-lg | Drawers, overlays, deep panels |