Historical delivery notes. Use the current design system and React workbench for current implementation.
The Cade design system
The working home for Cade’s product references, screen previews and reusable components. Preserve the comic silhouettes, Futura typography and original palette; define the behavior of every control.
The next Cade homepage
Memecoins. Sports. Stocks. Original Cade plates, a clearer featured market and faster browsing on mobile.
Illustrative market data. React integration and the Figma update are pending.
What the client ships today
The client's own reference captures from the handoff bundle (29 Sep 2026, rendered from their storybook in fallback fonts) and the live site as photographed on 30 Sep 2026 in the real faces. Every card names its storybook story or its URL; a click opens the full capture. The Meme Madness campaign these screens run ended on 21 Sep 2026: the shell, the market page and the sports field are what v2 builds on.
Homepage
Coin market
Sports: the Cade Cup soccer field
Foundations, buttons, brand
Live cade.market · 30 Sep 2026
The new screens
Open a screen directly to review the product. The current homepage is responsive at desktop and phone widths. Supporting screens below are earlier v2 explorations; their status is separate from the current homepage.
Homepage CURRENT PREVIEW
Source-based Cade components · responsive desktop and mobile · illustrative data
Homepage components
Actions, category filters, market cards and usage rules, using the preview’s shared components
Live markets
/markets · the in-app generic view: filters and the grid, no hero
Football · game centre
/football · the play on the field, the pick, the drive, five states, motion in their numbers
Profile
/profile · one plate recipe, a real table, results that read three ways
Cade Cup · NFL board
/nfl/v3 · the playoff bracket with a live game on it
States & flows
/states · the card in four books, the money path, the empty screens, the interaction rungs
Archive
/archive · earlier passes and the Meme Madness campaign pages
Tokens, type, shapes, components
The production values, named the way the code names them. Where our earlier value differed the old one is listed, so a diff against a page built before 29 Sep 2026 explains itself. The existing Figma library and the web implementations are linked separately. The current homepage component extension is documented below; its Figma update is pending.
Colour · pcColor
| Token | Value | Job | Before 29 Sep |
|---|---|---|---|
| surfacePage | #0E0D0C | the page ground, a warm near-black | #0A0A0A |
| surfaceRaised | #161514 | panels | #161413 |
| surfaceOverlay | #1A1816 | overlays, sheets | same |
| surfacePaper | #EFE9D8 | the comic plate every card is printed on | same |
| surfaceHeroOrange | #FFA800 | hero, CTA, the up/down ribbon | same |
| surfaceHeroOrangeDeep | #FF7A00 | the orange's shadow side | same |
| surfaceHeroViolet | #9652EF | hero violet, the head-to-head ribbon | same |
| surfaceHeroVioletDeep | #6330D3 | the violet's shadow side | same |
| surfacePanelViolet | #210D49 | violet ink | same |
| accentHighlight | #FAF424 | countdown, plates, the stamp | same |
| accentInfo | #419FE5 | sport, the game-line ribbon, the event slat | same |
| outcomeYes | #91BB4F | up, yes, the winning slat | same |
| outcomeNo | #EA2A46 | down, no, the live dot | same |
| textOnPaper | #141414 | ink on paper and on every accent plate | same |
| textPrimary | #EFE9D8 | text on the dark ground | same |
| textSecondary | #A1A1A1 | meta lines, eyebrows, dates | #9C9C9C |
| textTertiary | #8773AF | the quiet grey-violet | same |
| borderInk | #0B0B0B | the comic keyline; shadows stay #000000 (pcShadow) | #000000 |
| textNegativeSoft | #F24B61 | red at reading weight | not used yet |
| accentPink | #FF8A9E | campaign only: voting and result surfaces | not used |
Three of ours have no token yet and are proposed: lilac #D9C8FF (accentLilac), dim #8C8C8C (textDim), orange deep #D95F00 (surfaceHeroOrangeDeeper). The turf greens on the fields are art, not UI: #91BB4F and #7DA831, from their gridiron artwork.
Type · three faces, three jobs
one weight, upright or oblique
hierarchy from size and case
kicker 18 · floor 14
paragraphs, help, legal · floor 13
values, clocks, ids, never labels · floor 12
Mono Medium 12 to 13
Shadow · hard offset, zero blur, down-right
Silhouettes · the client's shape package
Earlier SVG screens · component index
| Part | Ours (code) | Theirs (frontend-v1) | What it is |
|---|---|---|---|
| MarketCard | CadeCard.draw() | MarketRow · components/market/ | one card for every market: ribbon = mechanic, glyph = category, head = coin / coins / teams / ticker / mark, clock chip, two slats, bolt |
| Nav | K.nav() | NavItem, WalletButton, HamburgerButton | one header for the system; the current item is the white pill |
| CTA | K.cta() | CTASlat, Button (DsButton) | the yellow plate with ink type, no chevron |
| Category rail | catRail() | SportsTab | ALL / Memecoins / Sports / Stocks; selected = paper pill, live dot and count |
| Category glyphnew | CadeCard.catGlyph() | none yet | coin / ball / candles in ink inside the ribbon, so a category reads without colour |
| Scoreboard | scoreboard() | sports-matchscoreboard-*.svg | the yellow torn lockup, team chips, the clock slat |
| Gridiron | gridironP() | sports-playfieldviz-gridiron.svg | broadcast perspective, their two greens, scrimmage in paper, line to gain in yellow |
| The playnew | drawPlay() | SoccerPitchViz (the reference) | run straight, pass arc, kick dotted, the drive underneath; a tracked route when the feed carries x/y |
| Event slat | eventSlat() | SoccerEventPanel | the Cade Cup blue label: clock, text, tail |
| Pick slabs | pickSlab() | SlatButton (wager pair) | YES / NO stamps, tilted two degrees, the price plate on the face |
| Live stripnew | liveStrip() | none yet | the ticker ribbon, the yellow LIVE FEED label, one rolling line |
| States | STATE table · /states | StatusBadge, LiveTag | open / locked / settled / voided on the card; scheduled / live / break / final / feed lost on a field |
The previous catalogue, with the full component browser (every component, its variants and its spec card), is kept at catalogue-2026-09.html.
Icons
Brand kit
How a developer takes a screen
The current homepage uses shared HTML component renderers and the original landing shape paths. Earlier SVG screen explorations use the script workflow below. A web preview alone does not confirm a matching Figma frame or React integration.
Current homepage: site/v2/home-a/page.html, source-shapes.js, source-components.js, market-components.js and home.js. Component usage guide · State review.
site/<route>/<route>-tail.js on the shared head site/nfl/index.html (tokens, shapes, text with the size floor, kicker, live tag, scoreboard, chip, band grouping), with site/lib/cade-shapes.js (the client's polygons, nav, CTA, footer, burst) and site/lib/marketcard.js (the card). scripts/build-pages.sh stitches them.
A page is a stack of bands, declared with B('Live markets') in code and grouped under the same name in Figma. Desktop 1440 and mobile 480 are two stages in the same file; a CSS rung at 1180 shows one at a time.
CadeCard.draw(root, {x, y, scale, market, dark}). A market is {label, tone, cat, head, q, meta, clock, a, b}: the ribbon word and its tone (the mechanic), the category, the head kind, the question in two lines, the meta line, the clock chip, the two outcomes with their percentages.
/data/export/tokens.css, /data/export/tokens.w3c.json, /data/export/tailwind.theme.json. The values are pcColor's; the names carry both sides.
CSS classes on named SVG groups plus one SMIL path for the ball, timed in the production field's numbers (travel 0.67s, trail 0.42s, pop 0.65s). ?nomotion and prefers-reduced-motion render the settled frame.
scripts/figma-import/: export-all, plan, upload, place; one use_figma call per frame; the desktop plugin tools/figma-font-swap moves the type to Futura. Update the frame in place, never add a page per iteration.
const market = {
cat: 'sports', label: 'NFL · SPREAD', tone: C.blue, head: 'teams',
home: { ab: 'KC', c: TEAM.KC }, away: { ab: 'DET', c: TEAM.DET },
q: ['WILL KC COVER', 'THE -3.5 SPREAD?'],
meta: 'Q3 04:12 · KC 21-17 DET · VOL $84.2K',
clock: ['QTR 3', '04:12'], a: { l: 'KC -3.5', v: 61 }, b: { l: 'DET +3.5', v: 39 }
};
CadeCard.draw(stage, { x: 40, y: 792, scale: .864, market, dark: false });
Working with the client's repo
- The design repo of record is
gman-top/pumpcade-design-system: every change lands there first, rebuilt, with the overflow scan green on all routes at both widths. The plan is docs/PLAN.md; the states and widths to cover are docs/SCENARIOS.md. - A pull request into
pumpcade/cade-design-studiois opened only when the owner says so. Nothing is pushed there in passing. - One pull request per screen or component family, and each one carries: the Figma section link; the pcColor tokens it uses, by name; the states it covers, from SCENARIOS.md; screenshots at 1440 and 390; the storybook story ids it maps to.
- Copy: uppercase display, values only in the data face, "predict" and "prediction" in product copy, no em dashes anywhere (commas, colons, the middle dot).
- A screen ships with its states (loading, empty, unavailable, scheduled, live, closed, resolved), its long-label case and its phone layout, or it is not done.
Earlier passes and campaign explorations. Previous homepage concepts: Arcade and Arcade dark. These are superseded references. Other historical work: open the archive.