JustHold Design Tokens

Reuse this skill

Copy justhold-design-tokens into your project's .agents/skills/justhold-design-tokens/ (or your Cursor skills folder). The JustHold app source stays private — these playbooks are published so you can reuse our engineering conventions.

Theme is shadcn base-nova + Tailwind v4 (@theme inline in apps/web/app/globals.css). Fonts are registered in apps/web/lib/fonts.ts. Platform-agnostic JS mirrors live in @justhold/tokens (packages/tokens) for Expo / non-CSS consumers. Always use semantic CSS variables/utility classes on web — never hardcode hex/oklch values in components.

Palette (warm low-fatigue)

background / foreground: warm neutrals (#FAFAF8 / #2D2A26 light ↔ near-black #131211 / #EDEBE3 dark) — never pure white or black
primary: light terracotta (#C96442) / dark sky (#79ACCB) — CTAs, active states, links, brand mark only. Never large background tints.
card, secondary, muted, border: layered surfaces (#F2F1EC / #E5E2D9 light ↔ #1C1B19 / #2A2927 dark)
accent (shadcn token): neutral hover surface only — not a second brand color
gain / loss: market-only colors — use for financial data (price changes, tickers), never generic success/error UI
Dark mode is Cursor-like near-black with sky accent — not a saturated brown/orange theme
Avoid maximal contrast; keep text moderate (muted-foreground for secondary copy)

Typography

font-heading (Fraunces) — brand wordmark only (header / footer lockup). Not page titles or section headings.
font-sans (Geist) — body, nav, UI chrome, and marketing headings (default)
font-mono (Geist Mono) — numbers/prices/tickers, uppercase eyebrow labels (tracking-widest)

Radius

Single --radius base (0.5rem) drives sm/md/lg/xl/2xl/3xl/4xl via calc(). Use rounded-md / rounded-lg / rounded-xl / rounded-2xl — don't invent custom radius values.