[design] Component library (shadcn-aligned): buttons, inputs, cards, modals, toasts

[ozpool]

Context

Figma mirror of shadcn/ui primitives, themed with PRISM tokens. Every page reuses these.

Scope

In scope:

• Button (primary/secondary/ghost/destructive, sm/md/lg, loading/disabled)
• Input (text, number, amount-with-currency, error state)
• Card (elevated, bordered, interactive)
• Modal (deposit/confirm/error shapes)
• Toast (success, error, info, pending)

Out of scope:

• One-off components ([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

• Matches shadcn/ui API surface
• All states from layer AC covered
• 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] 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: [design] Brand tokens: PRISM spectrum palette + type scale + spacing + radii + shadows #1, [design] Dark-mode palette usage guide + WCAG AA contrast audit #2, [design] Icon set: tick-range, position, strategy shape, refraction, wallet-state #3

References

• shadcn/ui

Estimate

L