[design] Marketing landing page: hero + refraction narrative + features + CTA + footer

[ozpool]

Context

Public-facing landing. Communicates refraction narrative, features, CTA to dApp.

Scope

In scope:

• Hero (prism visual + one-liner + CTA)
• Refraction narrative section
• Features grid (dynamic fees, MEV capture, atomic rebalance, custody-free)
• Social proof / partners (placeholder)
• Footer (repo, docs, audit, contact)

Out of scope:

• Blog, changelog, docs site

Acceptance Criteria

• Above-the-fold loads in < 1s
• CTA clearly routes to dApp
• 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] Marketing landing page: hero + refraction narrative + features + CTA + footer #48
• 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, [design] Component library (shadcn-aligned): buttons, inputs, cards, modals, toasts #4

References

• PRISM_PRD_v1.0.html §1 design philosophy

Estimate

L