Augusta National at dusk. Quiet, premium, monospaced numerics, generous breathing room. This page is the handoff: every token, every component, with the values Claude Code (or any engineer) can lift directly.
No blue. No purple. No gradients (except one optional radial behind the matchup score block). Status is always conveyed by icon + text + color — never color alone.
One family. Four weights (400/500/600/700). All numerics use font-variant-numeric: tabular-nums so columns of scores, prices, points and PHR align visually.
4px base unit. Use the named scale below — don't invent half-steps. Mobile container padding is 16px horizontal, never less.
| Minimum | 44 × 44 | Any interactive element. |
| Pick / swap | 56 tall | Lineup rows, swap-drawer rows. |
| Roster row | 64 tall | Standings row, golfer row. |
| Header | 56 tall | App bar. |
| Bottom nav | 56 + safe-area | Plus env(safe-area-inset-bottom). |
Anatomy snapshots. The full live prototype is on the sister page — these are reference renders for handoff.
Source of truth. Engineers can paste this into tailwind.config.js or feed it to Style Dictionary.
// design-tokens.json { "color": { "bg": "#0a0a0a", "surface": "#141414", "surface-2": "#1c1c1c", "hairline": "#262626", "text": "#f5f5f4", "text-2": "#a3a3a3", "text-3": "#525252", "emerald": "#1f8a5b", "emerald-mute": "#0c3d28", "amber": "#f59e0b", "red": "#ef4444" }, "font": { "sans": "Inter, -apple-system, system-ui, sans-serif", "feature": "'tnum' 1" // applied via .tnum utility on all numerics }, "text": { "display": { "size": "32px", "line": "36px", "weight": "700", "tracking": "-0.01em" }, "h1": { "size": "24px", "line": "32px", "weight": "600", "tracking": "-0.01em" }, "h2": { "size": "18px", "line": "24px", "weight": "600" }, "body": { "size": "16px", "line": "24px", "weight": "400" }, "label": { "size": "13px", "line": "18px", "weight": "500", "transform": "uppercase", "tracking": "0.04em" }, "meta": { "size": "13px", "line": "18px", "weight": "400" }, "caption": { "size": "11px", "line": "16px", "weight": "500", "tracking": "0.04em" } }, "space": { "1": "4px", "2": "8px", "3": "12px", "4": "16px", "5": "20px", "6": "24px", "8": "32px", "12": "48px", "16": "64px" }, "radius": { "card": "12px", "btn": "8px", "pill": "999px" }, "touch": { "min": "44px", "pick": "56px", "roster": "64px" }, "motion": { "tap": "scale(0.97) 100ms", "page": "fade 200ms ease-out", "skeleton": "shimmer 800ms cycle, cap 2s", "live-update": "emerald → text, 600ms fade", "live-pulse": "2s ease-in-out infinite, opacity 1→0.4", "reduce-motion": "fades only, no scale" }, "focus": { "ring": "2px solid #1f8a5b", "offset": "2px" } }
--bg → --surface → --surface-2..tnum. No exceptions for scores, prices, points, PHR, ranks.100dvh, never 100vh. Pad bottom with env(safe-area-inset-bottom).