# Cadence Design System — llms-full.txt · v1.2 # The entire system, prompt-ready. Canonical URL: https://design.cadencework.ai/ # Tokens: /tokens.css /tokens.json /tokens.swift /tokens.kt · Logo kit: /assets/logo/ · Index: /llms.txt # Cadence Design System — overview Cadence is a workforce-orchestration platform. Its design system is warm and editorial — closer to the New Yorker than to Salesforce. ## The system in one paragraph Warm paper (#F7F4ED) and deep warm ink (#1A1612). Three typefaces with strict jobs: Fraunces for headlines, metrics and italic brand moments (never body); Inter for everything readable; JetBrains Mono for times, money, counts, eyebrows and status tags. Jade (#2F8F68) is the only brand color — live states, confirmed coverage, and the one committing action per surface. Purple (#6B4FE0) belongs to the AI alone: if it's purple, Cadence did it. Semantic colors (blue info, amber warning, red urgent, plum premium) are categorical, never decorative. 8-pt spacing grid; radii 8/14/20/999; motion 140–240 ms ease-out, nothing moves unless it means something. A dark theme (warm brown-black, never blue-black) remaps every token. ## Sections - Foundations: color tokens (25 roles, light+dark), typography, icons, layout, motion, numbers - Components: buttons, forms, chips, cards, progress, data display, feedback, overlay, charts, media - Patterns: AI surfaces (chat + canvas), dark theme, app shell and navigation - Brand: wordmark, jade, imagery - Voice: calm, direct, names over roles; sentence case; no emoji; no exclamation points Machine-readable: /llms.txt (index), /llms-full.txt (entire system), /tokens.json, /tokens.css --- # Cadence Design System — Foundations ## Color 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. - Brand jade: #2F8F68 (hover #267655, soft #E0F1EA, soft border #BFE0D2). An evergreen, not a go-button: live states, confirmed coverage, the one committing action per surface. Was #209F5B. - AI purple: #6B4FE0 (dark #4A2FB0, soft #EEE9FB, border #D8CCF5). Only where the agent acts. If it's purple, Cadence did it. - Semantic: blue #2C5BB0 informational / amber #9A6717 warning, drift / red #B0392A urgent, unfilled / plum #5B3F7A premium, EOR. ## Tokens (light / dark) bg #F7F4ED/#16130F · bg-card #FFFFFF/#1E1A15 · bg-tint #F1EDE3/#28231B · ink-1 #1A1612/#F3EFE6 · ink-2 #46413A/#B8B1A2 · ink-3 #6B655C/#8B857A · ink-4 #B8B1A2/#6B655C · line #E6E1D4/#2E2921 · line-2 #EFEAE0/#3A342B · brand #2F8F68/#48B389 · brand-hover #267655/#5FC49B · brand-text #267655/#7FD4AE · brand-soft #E0F1EA/#1E4534 · ai #6B4FE0/#9B85F2 · ai-dark #4A2FB0/#C9BBF7 · ai-soft #EEE9FB/#2B2347 · ai-border #D8CCF5/#453A6E · info #2C5BB0/#7FA8E8 · info-soft #E5EBF5/#1C2740 · warn #9A6717/#D9A96A · warn-soft #F4EEDC/#3A2D14 · danger #B0392A/#F2917F · danger-soft #F4E4DF/#47201B · plum #5B3F7A/#B79BD6 · plum-soft #EFE9F5/#322244 ## Typography — three voices, strict jobs - Fraunces: display 56/400, H1 34/500, H2 24/500, italic brand moments. Never body. - Inter: body 15/1.6, weights 400/500/600. Everything readable. - JetBrains Mono: eyebrows 11 caps ls .14em, times, money, counts, status tags. Space: 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. ## Icons No icon library. Inline SVG, 1.8 stroke, round caps, currentColor. 16px rows/buttons, 20px headers. The four-point spark is reserved for the agent (renders in --ai). ## Layout Dark ink shell bar 52px, active tab jade underline. Content max 1160px, 40px gutters, 48–64px section gaps. Dividers: --line between sections, --line-2 inside cards. ## Motion 140ms ease-out hover/press/chips · 180ms toggles · 240ms drawer/popover/modal enter · 2s pulse loop (live dots only, jade or purple) · 1.4s indeterminate sweep. Hard rules: hover changes color, never position or scale. No bounce, spring, confetti. Entrances fade + 8px rise; exits fade. One perpetual motion per view. Respect prefers-reduced-motion by dropping all loops. ## Numbers Money: $24.50/hr, $47.2k — cents on rates, k above $10k, never "per hour". Time: 4:00 PM, 4:00–11:00 — no leading zero, en-dash ranges, AM/PM caps. Dates: TUE · MAY 19 mono caps in chrome; "Tuesday, May 19" in prose. Ratios: 39/42 · 93% — ratio first, never percent alone when the count fits. Big metrics: Fraunces for hero/stat numbers only, one per tile. ## Accessibility Approved pairs (light theme): ink-1/ink-2/ink-3 on bg and bg-card pass AA; semantic text on its own soft (brand-text/brand-soft, ai-dark/ai-soft, info/info-soft, danger/danger-soft, plum/plum-soft) passes AA for text. Exception: warn (#9A6717) on warn-soft is ~4.2:1 — large text and UI parts only; use ink-2 for body-size sentences on warn surfaces. brand on bg passes the 3:1 UI rule. Never invent pairs — check contrast (4.5:1 body, 3:1 large/UI) in both themes. Focus: 2px jade ring, 2px offset, never removed; focus order = reading order. Never color alone: status is a chip with a word, charts carry labels and counts. Touch targets 44px minimum; rows 44–48px. prefers-reduced-motion drops every loop. --- # Cadence Design System — Components ## Buttons — ink leads, jade commits Primary = dark ink fill (calm, frequent). Brand = jade fill, ONE per surface — commits, approves, goes live. Ghost = white chassis, line border. AI = purple soft, always says what it does ("Auto-fill with Cadence"). Danger = quiet until hovered; "remove", never "delete" for people. Disabled = line-2 fill + ink-4 text, no opacity tricks. Sizes 48/40/32. Hover deepens color; nothing moves or scales. Focus: 2px jade ring, 2px offset, never removed. ## Forms — everything answers on the first tap Labels 12.5/500. Helper text answers before you ask ("Matches market — fills 2.3× faster at this rate"). Errors say what happened, then what to do ("Shifts can't start in the past. Pick today or later."). Optional fields say "· optional". Toggles jade when on. Segmented controls for Week/Month views. ## Chips — status is a chip, never a bare dot Mono tags, uppercase, pill radius: LIVE (jade soft, pulsing dot), UNFILLED (red soft), OPEN·FRI (amber), WORKING (purple soft, pulsing dot), TIER 2·EOR (plum), FULL-TIME (neutral). Filter chips: white, line border; active = ink fill. Open gaps: red dashed "Fill me · 2". ## Cards — one chassis, three moments Standard: bg-card, line border, radius 14, shadow-1, 18–22px padding. AI-marked: same chassis + 3px purple left rail — the agent wrote this. Dark moment: ink fill, one per page, for the claim that matters. ## Progress — always say what's filling Bars 6px, radius 999, tint track. Jade for coverage/health, purple only when the agent works. A number or label always rides along — never a naked bar. Spinners 28 page / 22 panel / 16 inline. Full-surface working state: Fraunces title + one plain sentence. ## Data display — dense, never cramped Stat tiles: mono caps label, Fraunces number (one per tile), sans context line. Tables: header mono caps 9.5px; rows 44–48px; hover tint; whole row clickable; numbers right-ragged in mono; status always a chip in the last column. ## Feedback — say what happened, then get out of the way Toasts: dark ink, bottom-left, 4s, one action max. Alerts inline: soft fill, matching border, darker text. Empty states: Fraunces title, one plain sentence, two ways forward, never apologetic. No exclamation points anywhere. ## Overlay — scrim, card, one commit Modal: destructive/blocking decisions only. Popover: white, radius 10, shadow-2, 3 items max. Tooltip: ink fill, 11.5px, facts only, never instructions. Drawer: 420px from right, full height, no scrim, page stays live. ## Charts — jade first, ink second, nothing 3-D Categorical: jade → blue → amber → plum, max 4. Comparison color is --line, never a second saturated hue. Bars radius 4 top; grid --line-2; axis mono 10px caps. Purple NEVER appears in charts — it would read as agent activity. ## Media — people get faces, or warm initials Avatars 24/32/40/48; fill rotates jade → blue → amber → plum by name hash. Stacks overlap 9px with 2px paper ring. Presence dot bottom-right: jade on shift, stone off. Imagery real and warm; never stock handshakes, illustration, or AI-generated faces. --- # Cadence Design System — Patterns ## AI surfaces — the agent works in the open Chat on the right, canvas in the center. The agent narrates in chat; everything reviewable lands on the canvas as a real artifact with ONE committing action (always jade, always the user's). Tool calls are visible rows with counts — never anonymous spinners. Rows the agent proposed keep a purple left rail until confirmed. One disclaimer line, small, under the composer: "Cadence can make mistakes. Review the plan before confirming." - Ask bar: top of every screen; placeholder always shows two real examples; ⌘K. - Live activity pill: what the agent is doing right now ("Calling Maya T. · 0:24") with a pulsing dot; plus the one purple round launcher. - AI buttons always say what they do: "Auto-fill with Cadence", never "Use AI". ## Dark theme — same system, lights off For event-day floors and late-night close-outs. Warm brown-black, never blue-black: bg #16130F, card #1E1A15, tint #28231B, ink #F3EFE6, lines #2E2921→#3A342B. Jade lifts to #48B389 (text-jade #7FD4AE), purple lifts to #9B85F2. Primary buttons go cream (ink text on cream fill), not white. Semantic softs become deep tints. Type, radii, spacing, and voice are unchanged. Implemented as [data-theme="dark"] token remapping. ## Outcomes and numbers The agent says what it did, names who it helped, and shows the number. "Filled dishwasher gap — Friday banquet. J. Okafor confirmed. 12 min from open to filled." Outcome claims always carry a ratio or count — never an adjective doing a number's job. --- # Cadence Design System — Native (iOS / Android) Same tokens as web, generated from tokens.json into tokens.swift (SwiftUI, trait-resolved light/dark) and tokens.kt (Compose, CadenceLight/CadenceDark objects). Three platforms, one source — change a hex once. ## What changes on mobile Touch targets 44pt/dp minimum; table rows 52. Display 34, H1 26, body stays 15. Drawers become bottom sheets. Shell bar becomes a tab bar. Hover becomes press tint (140ms). The FAB is the one jade commit per screen. ## What never changes The tokens. Three typefaces and their jobs (Fraunces moments / Inter body / Mono facts). One jade commit per surface. Purple only when the agent acts. Status is a chip. Numbers in mono. Sentence case, no emoji, no exclamation points. Dark theme is warm brown-black. ## Crew — the neutral-branded worker app Serif greeting ("Good afternoon, Maya"). Availability card up front with LIVE chip. Segmented Current / Upcoming / Past. Shift card: mono time range + mono rate (4:00 PM–11:00 PM · $22/hr), sans role, ink-3 venue. Clock-in: primary ink button, 44pt, full width ("Scan to clock in at Rooftop"). Tab bar: Schedule / Clock / Offers / Pay / Me; jade FAB commits (pick up a shift). --- # Cadence Design System — Brand Warm. Editorial. Generous. Confident. Closer to the New Yorker than to Salesforce. Cadence is a standalone brand. ## Logo — the downbeat Four counts; the downbeat lands on three. Two forms of one mark: the MEASURE (four dots in a row, third dot larger and jade) for wide containers — nav, doc top-left, email/deck footers; the STAMP (2×2 fold, downbeat bottom-right) for squares only — app icon, favicon, avatar. The UNDERBEAT (measure stretched to the word's width, stacked under it) is for hero moments only. Wordmark: lowercase "cadence", Fraunces 500, letter-spacing −0.02em, ink. Downbeat is carried by SIZE, not color — every variant survives pure black and white; in mono never enlarge the other dots. Clear space = one downbeat diameter. Never recolor dots outside ink/paper/jade. Never squeeze the measure into a square; never set the stamp inline in text. Motion: the count (dots pulse 1-2-THREE-4, loading/agent-thinking), the fold (measure ⇄ stamp, app boot), the heartbeat (only the downbeat breathes, 2.4s — the one animation allowed in product chrome). All respect prefers-reduced-motion. Assets: /assets/logo/ — measure, stamp, favicon, 512px app icons (color + currentColor mono), animated fold, README with the wordmark recipe. ## Why jade (#2F8F68) The green study tested candidates in real work — commit buttons, live chips, coverage bars. Jade won: calm enough for resting surfaces, alive enough for live ones. An evergreen, not a go-button. Legacy green #209F5B retired (brighter, cooler, reads "go-button"). Spruce #2E6749 runner-up (disappeared on dark). Jade lifts to #48B389 in the dark theme. ## Imagery — real and warm Venues, plated food, people mid-shift, warm available light. 16:9, radius 10; placeholders dashed stone on tint. Never: stock handshakes, illustration systems, mascots, 3-D blobs, or AI-generated faces. ## Assets tokens.css (both themes) · tokens.json (W3C format) · llms-full.txt (whole system, prompt-ready) --- # Cadence Design System — Voice Calm. Direct. Names over roles. Active over passive. The agent says what it did, names who it helped, and shows the number. ## Mechanics Sentence case everywhere. No emoji. No exclamation points. Active voice. Names over roles ("Maya", not "a worker"). Numbers over adjectives ("14 of 17", not "most"). Say "workers", never "resources". Say "remove", never "delete", for people. Declarative; a compliance failure on our shift is our problem — say so plainly. ## Write like this - "Auto-matched 14 of 17 shifts overnight." - "Maya hits her 2-year on Sunday." - "Drafted by Cadence · ready for your review." - "Three things need you today." - "Coverage is solid this week — 39 of 42 shifts confirmed." ## Never this - "🎉 Great news!! Your shifts are filled!" - "A worker has reached an employment milestone." - "Powered by our advanced AI system." - "You have multiple pending action items." ## Three voices, strict jobs Fraunces speaks in moments (headlines, hero numbers, italic brand line). Inter does the explaining (body, labels, helper text). JetBrains Mono states the facts (times, money, counts, statuses). --- # Cadence Design System — Getting started Two files, no build step. Custom CSS on custom tokens — no Tailwind, shadcn, Material, Chakra, or Radix; no icon library (inline SVG 1.8 stroke, currentColor); no animation library (CSS only, 140–240ms ease-out). ## Install Link tokens.css and the three fonts (Fraunces, Inter, JetBrains Mono). Components read roles, never hex: background:var(--brand); color:var(--on-brand). Dark theme is — zero component changes. ## Machine-readable - /llms.txt — index - /llms-full.txt — entire system, prompt-ready - /tokens.json — W3C design tokens (source of truth, generates CSS/Swift/Kotlin) - /CLAUDE.md — drop into a repo so coding agents build on-system - Every page: "Copy for LLM" button (page / tokens / entire system) ## Ground rules One jade committing action per surface. Purple only when the agent acts, never in charts. Status is a chip, never a bare dot. A number or label always rides along with progress. Sentence case, no emoji, no exclamation points. --- # Cadence Design System — Changelog ## v1.2 · Jul 2, 2026 — The downbeat New logo: four counts, downbeat on three. Measure/stamp/underbeat forms, motion (count, fold, heartbeat), lowercase Fraunces wordmark, full SVG asset kit at /assets/logo/. New lockup in every header; nav measure plays the count on scroll. ## v1.1 · Jul 2, 2026 — Dev-ready Native section (Crew app patterns, mobile rules, tokens.swift + tokens.kt generated from tokens.json). Accessibility in Foundations: live contrast table + pairing tool, both themes. Code snippets on every component section. Icon click-to-copy SVG. Light default theme. Changelog page. ## v1.0 · Jul 2, 2026 — First publication Live at design.cadencework.ai. Jade #2F8F68 as the only brand color (legacy #209F5B retired). 25 token roles, light + dark. Six movements. Specimen frames with theme/breakpoint switching. ⌘K. Copy for LLM everywhere; llms.txt, llms-full.txt, CLAUDE.md. ---