The raw materials — color, type, space, depth. Every component on this page is built from these tokens; never hard-coded values. Use the token; if a value isn't tokenized yet, add a token to :root before shipping.
A restrained palette with one primary action color and feature-specific tokens for status and feedback. Every UI value resolves to a token. The default theme is Light + Blue; mode (light · dim · dark · hc) and accent (blue · indigo · teal · violet · amber · slate) compose independently via data-mode and data-accent.
| Family | Tokens | Role |
|---|---|---|
| Action & brand | --btn-primary, --btn-primary-hover, --btn-danger, --green, --status-new | The primary blue + feature tints for status pills. |
| Text | --text-primary, --text-secondary, --text-help | Three ink levels — never use opacity to dim text. |
| Surfaces | --body-bg, --card-bg, --nav-bg, --row-hover, --row-selected-bg, --border | Layered backgrounds + the hairline border that carries most of the depth. |
Helvetica Neue across the entire app. No monospace in UI, no display fonts. The type scale is fixed: 12 / 14 / 16 / 18 / 22 / 26 / 32. Any value outside this scale is a bug. Pair every numeric column with font-variant-numeric: tabular-nums for vertical alignment.
| Role | Size · weight | Use for |
|---|---|---|
| Heading 1 — page title | 32 / 700 | The h1 on a page header. One per page. |
| Heading 2 — section | 22 / 700 | Major sections inside a page. |
| Heading 3 — subsection | 18 / 600 | Subsections within an h2. |
| Heading 4 — header titles | 16 / 600 | Entity titles in page headers, card titles. |
| Heading 5 — card titles | 15 / 600 | Titles inside cards and side panels. |
| Body | 14 / 400 | Default for almost everything: labels, list rows, dropdown items. |
| Help / meta | 12 / 400 | Only when the row already carries a 14 px primary label. |
A 4-pixel base scale. Every padding, margin, and gap in the system resolves to a step on this scale — no in-between values. Pick the smallest step that gives the surface room to breathe; densification is a feature, not a fault.
| Token | Value | Use for |
|---|---|---|
space.1 | 4 px | Inline icon gap, segmented-control internal gutter. |
space.2 | 8 px | Field row gap, button label gap, dropdown item leading icon. |
space.3 | 12 px | Compact card padding, dense table row vertical padding. |
space.4 | 16 px | Default — most card padding, form field stacks, toolbar gaps. |
space.5 | 20 px | Comfortable card padding, side panel padding. |
space.6 | 24 px | Section gaps within a page, content-well horizontal padding. |
space.8 | 32 px | Page padding, between distinct page regions. |
space.12 | 48 px | Between major page sections (hero → body, section → section). |
space.16 | 64 px | Top-of-page hero margin, modal-to-edge breathing room. |
A persistent two-shell layout — fixed side navigation, frosted top bar, scrolling content well between them. Every app surface composes inside this shell; no full-bleed pages. Side nav is position:fixed (60 px collapsed or 165 px expanded); top bar is position:fixed (48 px tall, anchored from sidebar's right edge to viewport right).
| Breakpoint | Range | Behavior |
|---|---|---|
| Wide | ≥ 1440 px | Side nav expanded, multi-column dashboards, full-width tables. |
| Standard | 1024 – 1440 px | Side nav expanded, single-column body, standard density. |
| Compact | 768 – 1024 px | Side nav auto-collapses to icon-only; content keeps standard density. |
| Below | < 768 px | Out of scope — not a supported breakpoint for the work surface. |
Three shadow levels. Every shadow uses the same color (rgba(9,30,66,...)) at different intensities — never CSS-default black shadows. Hairlines (1 px borders at low opacity) carry most of the depth; shadows just float surfaces above the page. Three radius sizes: sm 6 px (controls, inputs, list rows), md 8 px (cards, dropdowns, modals), lg 12 px (hero surfaces). Pills use 999 px for full half-circle ends.
Motion is functional, not ornamental. It signals "something happened" or "this is what you just clicked" — never decorates. One curve for everything: cubic-bezier(0.4, 0, 0.2, 1). Four durations: 120 ms (hover affordances), 180 ms (toggles + caret rotation), 250 ms (panel slide-in), 300 ms (sidebar collapse).
A unified stroke-based icon set rendered as inline SVG via a single document-level sprite. Icons inherit color through currentColor — never tint them with explicit fill or stroke values in markup. 24×24 viewBox regardless of rendered size. 1.5–2 px stroke with round caps + joins. Four sizes: .sm 12 px, default 16 px, .lg 18 px, .xl 24 px.