# Cade / Pumpcade v2 — independent design handoff

This ZIP is the existing frontend-v1 design language packaged for George and the design team to produce v2 Figma concepts, wireframes and component extensions without repository access. Start with **START-HERE.html** and **docs/V2-DESIGN-BRIEF.md**.

## Explore the interactive catalogue

1. Extract the entire ZIP; keep its folders together.
2. In this folder run **`python3 serve.py`** (Python 3.9+) or **`node serve.mjs`** (Node 18+). No package installation is needed. Windows Python users can run `py -3 serve.py`.
3. Open **http://localhost:6006/**, then choose **Open component catalogue**.
4. Stop the local server with Ctrl+C when finished.

Mac and Windows convenience launchers are included. If the OS prevents launching a downloaded script, use the terminal command above. Port already in use? Use `python3 serve.py --port 6007` or `node serve.mjs 6007`, then open that port.

Storybook needs HTTP because its modules and mock service worker cannot run from a `file://` URL. The overview, tokens, SVG/PNG artwork and captured reference images can be opened directly without a server. The Python and Node servers serve only this extracted folder and bind to loopback.

No login, API key, wallet, sports feed, backend, GitHub access or production environment is needed. The catalogue is a frozen static build with fixture data. Its account and prediction actions are mock examples. Some existing stories intentionally represent loading, error, disabled or simulation states; use the curated references first. The Development section contains diagnostics/prototypes, not approved design-system components.

## What is here

| Folder / file | Use |
| --- | --- |
| `START-HERE.html` / `index.html` | Visual entry point and searchable asset browser |
| `storybook/` | Prebuilt interactive component and page catalogue |
| `tokens/` | Source-faithful token JSON, CSV, CSS, source snapshots and offline catalogue |
| `assets/public/` | Original public SVG/PNG/video artwork, including current Cade brand and sports field artwork |
| `assets/source-artwork/` | Additional original SVG/image artwork imported by application components |
| `source/frontend-v1/` | Original component, story, CSS, token and shape source with repository paths retained |
| `catalog/` | Complete scoped component inventory, stories, shapes and asset index |
| `references/screenshots/` | Selected browser renders at desktop and phone widths |
| `docs/` | v2 brief, design-system authority guide, Figma workflow and reference map |
| `fonts/` | Barlow Condensed, Inter and JetBrains Mono with their OFL licences |
| `brand-kit-legacy/` | Historical Pumpcade brand kit, explicitly secondary to current Cade references |
| `tooling/` | Token exporter, asset-index generator, synthetic soccer story and integrity checker |
| `MANIFEST.json` | File paths, sizes and SHA-256 checksums |

## The v2 assignment

- Extend the homepage to clearly identify **Memecoins, Sports and Stocks**, preserving its arcade/comic identity.
- Design sports market pages in the current market-page language, with more immersive field presentations for **American football and baseball**.
- Show football ball movement across a long run; for a baseball double show pitch location, ball trajectory and runner advancement.
- Stocks reuse the existing memecoin market-page structure. No separate stock-market page redesign is requested.
- Start with analysis and wireframes, then provide editable Figma components, responsive states and annotated motion. Details and suggested state coverage are in the brief.

## Authority and scope

Use current **Cade** marks and the current `pc*` campaign tokens. The older Pumpcade kit and compatibility token sets have deliberate historical differences. Do not merge palettes by name or replace current values with the legacy kit.

All 55 existing design-system TSX implementation modules are included, alongside supporting UI/page presentation source. The source is a reference collection, not an installable component SDK or a standalone Next.js app. Its imports may point to non-included application hooks and services; Storybook is the ready-to-run visual reference.

This is not a native `.fig` export. SVG artwork is editable on import; React components need to be reconstructed as Figma components. The JSON tokens use a documented plain schema, not a claimed one-click Figma/Tokens Studio importer. Existing Figma links are provenance and may require separate file permission; nothing in this ZIP depends on that permission.

Screenshots use the included fallback typography and synthetic data. They are not new production captures or approved v2 designs. Existing Meme Madness and Cade Cup copy is historical context. Generated per-token CDN character plates are outside this source snapshot; existing Storybook mocks render gray placeholders or letter medallions. Original authored character art is included, and references/README.md explains the distinction. The soccer showcase demonstrates existing components; new American football/baseball animation designs still need to be created.

## Snapshot

Prepared 2026-09-29 from `frontend-v1` commit `713c16b86313069f8ebb0f26a0c946c35b4e4f99` and the current working tree. The existing local `apps/storybook/.storybook/fonts.css` modification was preserved in the repository; portable font loading is adapted only in the build snapshot. No original repository files were edited.

See `VALIDATION.md` for checks and limits, `LICENSE-NOTES.md` for font/asset details, and `tooling/BUILD-NOTES.md` for catalogue-only adaptations.