cadence Design · v1.2
Ask the system — try “jade hex”⌘K
01 · Foundations

Warm paper, deep ink.

Neutrals do the work. Jade is the only brand color — live, healthy, primary. Semantic colors are categorical, never decorative. Purple belongs to the AI alone.

Color

Five families, strict jobs.

Every swatch below is painted with its token, so this page re-proves itself in both themes. Click any hex to copy it.

Foundation · surfaces & ink
--bgpage canvas
--bg-cardcards, inputs
--bg-tinthover, wells
--ink-1primary
--ink-3secondary
--linedividers
Brand — jade

An evergreen, not a go-button. Live states, confirmed coverage, the one committing action per surface. was #209F5B

--brand --brand-hover --brand-soft soft border
AI accent — the agent's color

Only where the agent acts: briefings, drafts, the ask bar, the canvas. If it's purple, Cadence did it.

--ai --ai-dark --ai-soft --ai-border
Blue · informational

Internal-staff blocks, neutral notices. #2C5BB0

Amber · warning

Drift, thresholds, needs your eyes. #9A6717

Red · urgent

Unfilled, blockers, compliance trips. #B0392A

Plum · premium

EOR, long-term placements, tiers. #5B3F7A

Color tokens

Every color, named, both themes.

Components reference roles, never hex — dark mode is a remapping, not a second system. Click a hex to copy; the whole table lives in tokens.json.

TokenRoleLightDark
Typography

Three voices, strict jobs.

Type scale
Display · Fraunces 400 · 56
Here's where things stand.
H1 · page · Fraunces 500 · 34

Schedule · Orchestration

H2 · section · Fraunces 500 · 24

Coverage this week

Body · Inter 400 · 15/1.6

Auto-match handled 14 of 17 shifts overnight. 3 Friday bartender posts hit your approval threshold — Lisa released them at 7:58am.

Eyebrow · data · Mono 500 · 11 caps
TUE · MAY 194:00 PM$47.2kUNFILLED
Brand moment · Fraunces italic · 16

Your operation, in rhythm.

Fraunces — headlines, metrics, italic brand moments. Never body. · Inter — everything readable, 400/500/600. · JetBrains Mono — times, money, counts, eyebrows, status tags.
Space · radius · shadow

8-pt grid (4 / 8 / 12 / 16 / 24 / 32 / 48 / 64) · radii 8 buttons · 14 cards · 20 large · 999 pills · shadows 0 1px 2px ·04 cards / 0 8px 24px ·10 drawers / 0 20px 48px ·16 modals

Iconography

Inline, stroked, quiet.

No icon library. Inline SVG, 1.8 stroke, round caps, currentColor. 16px in rows and buttons, 20px in headers. The four-point spark belongs to the agent.

Core set
The spark (agent · reserved) renders in --ai only. Every other icon inherits text color.
Layout & navigation

One dark bar, everything under it.

App shell — responsive
cadence Today Schedule Workforce Pay DR
Schedule Downtown Grill Friday banquet
Coverage Roster Timeline
Showing 1–20 of 112 shifts 1236
Shell — dark ink bar, 52px; active tab gets a jade underline. · Content — max 1160px, 40px gutters, 48–64px section gaps. · Dividers--line between sections, --line-2 inside cards.
Motion

Nothing moves unless it means something.

140ms · ease-out

hover, press, chip changes

180ms · ease-out

toggles, segmented control

240ms · ease-out

drawer, popover, modal enter

2s · pulse loop

live dots only — jade or purple LIVE

1.4s · sweep

indeterminate progress

Hard rules

Hover changes color, never position or scale. No bounce, no spring, no confetti — an operator doesn't want a high-five for filling a shift. Entrances fade + 8px rise; exits just fade. One perpetual motion per view. prefers-reduced-motion drops all loops.

Numbers

Mono for data, Fraunces for drama.

KindFormatRule
Money$24.50/hr · $47.2kCents on rates, k-abbreviation above $10k. Never “$24.50 per hour”.
Time4:00 PM · 4:00–11:00No leading zero on hours; en-dash ranges; AM/PM caps.
DatesTUE · MAY 19Mono caps in chrome and eyebrows; “Tuesday, May 19” in prose.
Ratios39/42 · 93%Ratio first, percent second. Never percent alone when the raw count fits.
Big metrics42M+ · 97%Fraunces for hero and stat-tile numbers only — the drama voice, one per tile.
Accessibility

Calm is also legible.

Every approved text/background pair, with its contrast ratio computed live from the tokens — flip the theme and the table re-proves itself. Use the pairing tool before inventing a new combination.

Pairing tool


Maya hits her 2-year on Sunday.
39/42 · 93% · 4:00–11:00
AA requires 4.5:1 for body text, 3:1 for large text (Fraunces ≥ 24px) and UI parts. Ratios recompute for the active theme.
PairUseRatioVerdict
FOCUS

2px jade ring, 2px offset, on every interactive element. Never removed, never opacity-faded. Focus order follows reading order.

NEVER COLOR ALONE

Status is a chip with a word, not a bare dot. Charts carry labels and counts. Red without the word “unfilled” is a bug.

TARGETS & MOTION

Touch targets 44px minimum; table rows 44–48px are the target. prefers-reduced-motion drops every loop — pulses, sweeps, spinners become static.