Cade · V2 Design Handoff

Start locally for the interactive catalogue.
Extract the ZIP. Run python3 serve.py or node serve.mjs in this folder, then open http://localhost:6006/. No npm install, account, backend or repository access. This overview, token viewer, artwork and screenshots also open directly from disk.

01 / THE ASSIGNMENT

One visual language. Three market categories.

Homepage

Preserve the current arcade/comic identity while making Memecoins, Sports and Stocks immediately distinguishable.

NavigationDiscoveryMobile

Live sports

Extend the existing soccer field reference toward immersive American football and baseball. Show the play, ball movement and game state clearly.

Long runDouble3D feel

Stocks

Reuse the current memecoin market page structure. New category identity and suitable instrument labels are the focus.

Shared market pageHierarchy

02 / WORKING MATERIAL

Pick your entry point

Design foundations

Source-faithful JSON, CSV and CSS plus a visual token catalogue. Existing token layers remain separate and documented.

Open tokens →

Component anatomy

Browse variants in Storybook and inspect original TSX/CSS in the reference source. The component inventory maps coverage and dependencies.

Component inventory →

Figma workflow

Import SVG artwork, rebuild editable components, map variables and annotate new interaction states. The ZIP is not a native .fig library.

Figma handoff →

Current brand

Cade marks and artwork are in assets/public/design-system/brand. The older Pumpcade brand kit is retained separately as historical reference.

Authority and style guide →

Reference source

Original component, story, CSS, token and shape files, preserving repository paths. These are design references, not an installable frontend SDK.

Read source coverage →

Fonts and rights

The portable catalogue uses bundled Barlow Condensed, Inter and JetBrains Mono. Futura and Colombo binaries are excluded; reference captures use fallback typography.

Read asset notes →

03 / SELECTED CAPTURES

Existing UI references

Fixture renders from this bundle, with fallback fonts. Campaign copy remains historical. More states are available in the catalogue.

04 / EDITABLE ARTWORK

Asset browser

SVG files can be dragged into Figma. Search by name or filter by source family; thumbnails load as you scroll.