# Cade v2 — design brief

Snapshot: 29 September 2026. Prepared from frontend-v1 and the v2 brief supplied by Scott. “Pumpcade” remains in repository and file names; the current product mark is **Cade**.

## The assignment

Extend the existing visual system after Meme Madness to support three market categories: **memecoins, sports, and stocks**. Keep the recognisable homepage style while making category identity immediately understandable. Produce an analysis of what can be reused, then proposed directions, wireframes, and editable Figma designs.

| Surface | Existing reference | Requested v2 change |
|---|---|---|
| Homepage | Cade landing, hero, All Stars market rows, prediction activity, header and footer | Make all three market categories legible and discoverable; evolve the campaign-specific composition for the next product phase. |
| Memecoin market | Current Higher/Lower market detail, chart, prediction ticket, activity and results | Reuse its visual and interaction language. |
| Stock market | Same market detail pattern as memecoins | Reuse that page pattern with stock identity and content; a separate stock market-page redesign is outside this brief. |
| Sports market | Cade Cup and the soccer event centre: live field, scoreboard, event log and prediction markets | Add baseball and **American football**, with more immersive depth and a 3D feel. Preserve continuity with existing market pages. |

## Homepage exploration

Show a clear category choice, category identity on mixed listings, and a useful selected-category view on desktop and phone. Explore how existing slats, tabs, icons, labels and market rows can do this work. A category must remain recognisable without relying on colour alone; existing Higher/Lower outcome colours already have meaning.

The bundle does **not** define approved new category colours, icons, navigation labels beyond the three category names, or a chosen layout. Propose those decisions explicitly. Meme Madness artwork is a style and component reference; event-specific copy, battle schedules and voting mechanics are not requirements for v2.

## Sports: the two required motion examples

**American football — long run.** Show the ball moving from the start to the end position on the field. Provide a small storyboard or prototype that makes the field orientation, start position, travel, and resulting position understandable. Explore perspective and depth without obscuring the ball or the market controls. X's game display is the supplied inspiration; no particular X screenshot or design has been included in the brief.

**Baseball — double.** Show the pitch location in the batter's-box/strike-zone view, the hit ball's path on the field, and runners advancing around the bases. Make the temporal order clear. Include a stable final state that identifies runner positions after the play. Treat the precise camera treatment and transition between pitch and field views as design questions.

For both examples, annotate which details require event data, which are illustration, and what appears when a location or trajectory is unavailable. A drawn trajectory is a concept until the available feed can support it. Include a reduced-motion version conveying the same event through position, labels and final state.

## What already exists, and what does not

The existing **soccer** implementation has a moving ball, a short motion trail, transient event effects, scoreboard, match log and sound controls. It is a reusable reference for hierarchy, timing and state communication. The bundle includes a synthetic soccer demonstration with fictional teams, scores and ball positions; use its Advance demo ball control to inspect the existing motion. Audio is disabled and sports sound files are omitted. The repository also has static gridiron and diamond SVGs. Neither those SVGs nor the soccer renderer constitute the new football/baseball animation experience, and the bundle does not claim they do.

This handoff includes rendered and source references. It does not contain a newly authored native Figma library, an approved v2 design, a stock-specific page implementation, or newly supplied production reference photography. Font substitutions in the portable gallery are documented in the root README.

## Suggested delivery sequence

1. A brief inventory of reusable components and the gaps for three categories and two sports.
2. Homepage directions with category treatment, followed by desktop and mobile wireframes.
3. Sports-page directions showing field depth, the surrounding market UI, and both required play sequences.
4. Editable Figma frames, reusable component variants, token bindings, and annotated interaction states.

At review, make loading, empty, unavailable/stale, scheduled, live, paused/closed, and resolved states explicit wherever they apply. Show long team/ticker labels and compact phone layouts. Financial values and outcome labels must stay readable when decorative artwork or animation is present. Use “predict” and “prediction” in product copy.

Useful context still to add to the design file: any reference shots Scott supplies, selected X examples, and product decisions about category default/order and the sports data available. These are open inputs, not assumptions embedded in this bundle.