[design] Brand tokens: PRISM spectrum palette + type scale + spacing + radii + shadows

[ozpool]

Context

Design foundation every UI artifact references. The PRD defines a 'prismatic spectrum' (rose, amber, yellow, mint, indigo, violet); this issue formalizes it into tokens.

Ref: PRISM_PRD_v1.0.html §intro / :root variables.

Scope

In scope:

• Figma design-system page: color tokens (spectrum + neutrals + semantic)
• Type scale (display, h1–h6, body, caption, code)
• Spacing scale (4-pt base)
• Radii (sm/md/lg/xl/full)
• Shadow tokens (card/modal/hover)
• Tailwind config / CSS variables → apps/web/src/styles/tokens.css

Out of scope:

• Component designs ([design] Component library (shadcn-aligned): buttons, inputs, cards, modals, toasts #4)
• Page designs ([design] Marketing landing page: hero + refraction narrative + features + CTA + footer #5–[design] Deposit + withdraw flow: all tx states (idle/pending/success/error/wrong-network) #8)

Acceptance Criteria

• Spectrum accents match PRD exactly
• Tokens round-trip between Figma and code
• Figma file shared with edit access
• All defined states covered (empty, loading, success, error, pending, disconnected)
• Mobile + desktop frames (320 / 768 / 1280)
• Dark mode only; WCAG AA contrast
• Handoff doc: tokens, spacing, type scale

Dependencies

• Blocks: [design] Dark-mode palette usage guide + WCAG AA contrast audit #2, [design] Icon set: tick-range, position, strategy shape, refraction, wallet-state #3, [design] Component library (shadcn-aligned): buttons, inputs, cards, modals, toasts #4, [design] Marketing landing page: hero + refraction narrative + features + CTA + footer #5, [design] Vault list page layout + card states (empty/loading/error/active) #6, [design] Vault detail + PrismVisual: tick-range distribution visualization #7, [design] Deposit + withdraw flow: all tx states (idle/pending/success/error/wrong-network) #8
• Blocked by: —

References

• :root CSS variables in PRISM_PRD_v1.0.html

Estimate

M

[ozpool]

Closing — Slack notification test complete.