[design] Vault detail + PrismVisual: tick-range distribution visualization

[ozpool]

Context

Core differentiator UI — shows N tick-range positions with weights. Key visual PRISM story.

Ref: PRISM_PRD_v1.0.html §Day 3, §Day 5 (visualization).

Scope

In scope:

• Page layout: header, metrics (TVL/APR/share price), positions table, actions
• PrismVisual: tick-range chart with weight heights
• Handles 1 to MAX_POSITIONS positions
• Hover states on individual positions

Out of scope:

• Historical performance charts (post-MVP)

Acceptance Criteria

• Visual matches bell-shape for Bell strategy
• Responsive scales to mobile
• 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: [frontend] Vault detail page layout: header + TVL/APR/share-price metrics + positions table #50, [frontend] PrismVisual: d3 component rendering tick-range distribution with weight heights #51
• Blocked by: [design] Brand tokens: PRISM spectrum palette + type scale + spacing + radii + shadows #1, [design] Component library (shadcn-aligned): buttons, inputs, cards, modals, toasts #4

References

• BellStrategy description in PRD §Day 3

Estimate

L