# Cadence Design System — agent instructions You are building UI for Cadence. Follow this system exactly. Full reference: https://design.cadencework.ai/llms-full.txt · tokens: /tokens.css, /tokens.json Native: /tokens.swift (SwiftUI, trait-resolved) and /tokens.kt (Compose) are generated from tokens.json — never hand-write a Cadence color on any platform. Mobile: touch targets 44pt/dp minimum, rows 52, display 34/H1 26/body 15, drawers become bottom sheets, the FAB is the one jade commit per screen. ## Non-negotiables - Reference tokens, never hex: `var(--brand)`, not `#2F8F68`. Dark theme is `` and must work with zero component changes. - No Tailwind, shadcn, Material, Chakra, Radix. No icon libraries (inline SVG, 1.8 stroke, round caps, currentColor). No animation libraries (CSS only). - ONE jade (`--brand`) committing action per surface. Everything else is ink, ghost, or quiet. - Purple (`--ai`) only where the agent acts: briefings, drafts, ask bar, working states. Never in charts. AI-drafted content keeps a purple left rail until the user confirms. - Hover deepens color; nothing moves or scales. Motion 140/180/240ms ease-out. Only perpetual motion: live pulse dots and indeterminate sweeps, one per view. Respect prefers-reduced-motion by dropping all loops. ## Type — three voices, strict jobs - Fraunces: display 56/400, H1 34/500, H2 24/500, italic brand moments, hero numbers. Never body. - Inter: body 15/1.6. Everything readable. - JetBrains Mono: eyebrows (11px caps, ls .14em), times, money, counts, status tags. ## Layout 8-pt grid (4/8/12/16/24/32/48/64). Radii: 8 controls, 14 cards, 20 large, 999 pills. Content max 1160px, 40px gutters. Dark ink shell bar 52px, active tab jade underline. ## Components in brief Buttons: primary=ink fill, brand=jade (one per surface), ghost=white+line border, AI=purple soft + says what it does, danger=quiet until hover, disabled=line-2 fill (no opacity). Focus: 2px jade ring, 2px offset, never removed. Status is a chip (mono caps, pill), never a bare dot. Progress bars 6px with a number or label always riding along. Tables: mono caps headers 9.5px, rows 44-48px, whole row clickable, numbers right-ragged mono, status chip last column. Toasts: dark ink, bottom-left, 4s, one action max. Modal only for destructive/blocking; drawers 420px, no scrim. Charts: jade → blue → amber → plum, max 4; comparison color is --line. Avatars: warm initials, fill rotates jade → blue → amber → plum by name hash. ## Voice Sentence case. No emoji. No exclamation points. Active voice. Names over roles ("Maya", not "a worker"). Numbers over adjectives ("14 of 17", not "most"). "Workers", never "resources". "Remove", never "delete", for people. The agent says what it did, names who it helped, and shows the number. One disclaimer line under AI composers: "Cadence can make mistakes. Review the plan before confirming." ## Numbers $24.50/hr, $47.2k (k above $10k). 4:00 PM, 4:00–11:00 (no leading zero, en-dash). TUE · MAY 19 in chrome. Ratios first: 39/42 · 93%, never percent alone when the count fits. Fraunces for hero numbers only.