Cade

Cade · v9 · October 2026

Design system.

One kit for every Cade page.

The kit.

Tokens, shapes, parts. Every page is built on it.

Colour tokens
23
V8 functions
30
Pages
30
Every page on the kit

Core.

the components every page is made of. lock these first.

01

Core components.

    Colour.

    yellow commits, orange navigates, green and red are data only.

    02

    The grounds

    Ink, shadow, line

    The voices

    Data only

    Type.

    four voices. shout, call, read, data. nothing under 11px.

    03

    Aa

    --shoutBarlow Condensed 800 italic. Headlines, plates, tabs.

    Aa

    --callFutura PT Cond Medium. Nav, links, labels.

    Aa

    --readFutura PT Book. Body, ledes, legal.

    Aa

    --dataJetBrains Mono. Numbers, clocks, chips.

    Shout scale

    Up or down.

    --fs-heroStage headline · max 132px

    The live board.

    --fs-h2Section heading · 44 to 92px

    Memecoins.

    --fs-bandBand heading · 44 to 68px

    No market matches.

    --fs-h3Empty state · 34 to 56px

    Up next.

    --fs-h4Panel heading · 34 to 48px

    Will $DOGE be above $0.18420 when this round ends?

    --fs-qRound question · 24 to 36px

    Your ticket.

    --fs-tktTicket heading · 32px

    Will $WIF close higher?

    --fs-card-qCard question · 24 to 28px

    KC at DET · Yes

    --fs-plateRows, plates, tabs · 22px

    Call, read, data

    Amount

    .tkt-lblCall · 22px

    The sports floor

    .moreCall · 18px, underlined

    every round on a clock. pick a side before the bell.

    .ledeRead · 17 to 21px

    No market matches that search. Clear it to see the whole board.

    .empty-pRead · 18px

    Pick Higher or Lower. Picks close 10 seconds before the round ends.

    .tkt-msgRead · 16px

    $0.18420

    .round-pxData 800 · 28 to 42px

    00:451 min round

    .ribbonData 800 · 28px

    Mcap $24.6BPool $140K

    .card-dData 700 · 12px

    Memecoin

    .chipData 800 · 11px, the floor

    Size tokens

    The 11px floor.

    Nothing renders under 11px. Octagons stay 42px or more.

    Shapes.

    torn panels, hard shadows. only the shapes the kit already has.

    04

    The torn panel

    Dark.

    The default face, --bg2.

    Dark.pnlThe default panel.

    Cream.

    Paper face, ink text.

    Cream.pnl.creamPaper face, ink type.

    Violet.

    Halftone on a violet glow.

    Violet.pnl.violetHalftone on a violet glow.

    Clip tokens

    Panel--clip-panelPanels, cards, stage, field.
    Field--clip-fieldAmount, search, sort.
    Chip--clip-chipChip buttons.
    Burst--burstBig wins, the yards gained.

    Higher.

    Keyline--ink4Landing only.
    01:12

    Sports

    Ribbon + tab.ribbon.tabThe clock and the tab polygon.

    Hard shadows

    Actions.

    their CTA plate in three colours. one yellow plate per view.

    05

    CTA plates

    YellowV8.plateCommits: Sign In, Save, Predict.
    Orangefill:'orange'Navigates: See every market.
    Violetfill:'violet'The third voice.

    States

    PartDefaultHoverFocusPressedDisabled
    .plate
    .side.up
    .side.down
    .btn-o
    .ib
    .ghost
    .more
    .tab

    States.is-hover.is-focus.is-pressLift on hover, orange focus ring, sink on press.

    The sides

    Price sides.side.up.side.downHigher / Lower.
    Game sides.side emYes / No with the price.

    Small keys

    Ghost.ghostPause, replay.
    Icon key.ibV8.toastCopy, share, edit.
    Outline.btn-oSecondary action.
    Memecoins
    Text link.moreWith an arrow.

    Data.

    cards, clocks, scores, logs. numbers always in mono.

    07

    The market card

      Market cardV8.cardThe v8 board. v9 uses the on air card.
        Board.grid4 up, 2 under 1100, 1 on a phone.

        Clocks, tags, chips

        00:451 min round
        Clock.ribbonThe round clock.
        00:08Picks closing
        Late.ribbon.lateThe last seconds.
        06:412nd quarter
        Scoreboard.ribbon.bigGame clock.
        02:10On cream
        On cream.ribbon.inkDark caption.

        NFL round

        Tag.tagCategory chip.

        Live

        Live.on-airThe dot blinks.

        Live

        Live, red.on-air.red

        $0.0002 above

        $0.31 below

        Delta.deltaUp, down.

        The scoreline

        LALLakers

        48

        Live

        06:412nd quarter

        52

        BOSCeltics

        Scoreline.sclHome, clock, away.

        Game numbers

        337Total yards268

        19Passing / rushing15

        Duel bar.duel-barStat comparison.
        Team stats
        KCStatDET
        214Passing yds182
        123Rushing yds86
        5/93rd down4/8
        1Turnovers2
        Box scoretable.box
          Drive log.plogNewest first.

          Game cards

            Game cardV8.gameCardLive, break, delayed, final.

            Lists

            Up next.

            3 games

              List row.irowTime, teams, action.

              Biggest calls.

              Today

                Call row.irow-vTeams, call, value.

                The live ticker

                TickerV8.tickerPauses on hover.

                Rounds.

                a price round on the chart, a game round on the field. never a chart for sports.

                08

                The price round

                Will $DOGE be above $0.18420 when this round ends?

                00:221 min round

                Price$0.18436

                $0.00016 above

                Your ticket.

                Sample balance $100.00

                Higher pays
                $46.10
                Lower pays
                $53.40

                Pick Higher or Lower. Picks close 10 seconds before the round ends.

                Sample round. No real money is used.

                Price round.round.tktChart left, ticket right.

                The game round

                Will KC beat DET?

                1:24Q4 game clock

                KC16DET201st & 10 · DET 41

                Your ticket.

                Stake

                You picked Yes with $50.00. Follow the game to the final whistle.

                Picks are closed for this round.

                Sample round. No real money is used.

                Field round.round.fieldNo chart on a game.

                Yes winsFinal · KC 23 DET 20

                Won.stampThe settle stamp.

                No winsFinal · DET 20 KC 16

                Lost.stamp

                Sports live field: skycam

                SkycamV8SkycamTheir live field render.

                Forms.

                cream fields for what you type, dark fields for what you pick.

                09

                Text field.inp
                Amount.amt
                Select + input.lfield
                Search + sort.srch.sort

                No market matches.

                Nothing on the board matches that search. Clear it to see every live round.

                Empty.pnl.emptyNothing to show.
                Up
                +$420.00
                Down
                -$911.00
                Flat
                $0.00
                P&L.pnltGreen, red, paper.

                Sample balance $100.00

                That is more than the sample balance of $100.00.

                Hint + error.tkt-hint

                Demo page: simulated markets, pools and odds. Nothing is placed and no money moves.

                Demo line.fine

                Stage + art.

                one loud panel per page. the art is the decoration.

                10

                The hero: stage + tabs

                Memecoins: up or down, every minute.
                Stage.stage16:9, square on a phone.

                Stage aspects

                Wide.stage.wide21:9.
                Strip.stage.stripThe field stays the hero.

                The art library

                  Art loopsV8.loopsA loop over every still.

                  Motion.

                  punch in, slam, stamp. readable without any of it.

                  11

                  Stage motionV8.introV8.swapOff under reduced motion.
                  00:30V8.every
                  TickV8.everyOnce a second, only on screen.

                  Yes winsFinal · KC 23 DET 20

                  Stamp--t-stampLands from 1.6x.

                  Motion tokens

                  Reduced motion.

                  Under reduced motion everything stands still and still reads the same.

                  Rules.

                  the owner's standing rules. short, and never bent.

                  12

                  1. No em dash. Anywhere. Use a comma or a full stop.
                  2. No invented shapes. Only the shapes in the kit. Missing one? Ask.
                  3. Never cut the wordmark. CADE is always the whole asset, no glyph cut out of it.
                  4. 11px floor. Nothing renders smaller, charts and SVG fields included.
                  5. Sign In, not Join. Product pages: Sign In. The landing only: Join the waitlist.
                  6. Sports rounds never chart. A game round shows the field, a price round the chart.
                  7. One decoration per band. One loud shape per section, never over data.
                  8. Colour is data only. Green and red mean up and down. Yellow commits, orange navigates.
                  9. Phone rhythm. 32 to 40px between parts inside a section, 56 to 68px between sections.
                  10. Octagons 42px or more. Their three letters then read at 11px.
                  11. Reserved names. ds.css is global. Prefix page classes.
                  12. One shadow per plate. Hard, black, zero blur, 2 to 9px.

                  Index.

                  every page built on the kit.

                  13

                  The v9 pages.

                  21 views

                    The v8 pages.

                    9 pages

                      Gaps.

                      what is still open. listed, not invented.

                      14

                      1. Two market cards. V8.card (v8) or the on air card (v9). Lock one.
                      2. Page-only parts. Lobby, balance, profile, share, court. They join the kit when a second page needs them.
                      3. One-off greys. Eleven single-use hex values, not worth a token yet.
                      4. The landing. Runs on its own palette.

                      Broadcast arena (v9).

                      the v9 layer. every product page ships on it.

                      15

                      The header + the footer

                      Product headerV8B.headerDoors, balance, avatar.
                      Tournament headerV8B.headerCredits instead of balance.
                      FooterV8B.footer

                      On air

                        On air cardV8B.airsA game round, a price round.
                        Clocks + chipsV8B.ringV8B.bugV8B.chipYellow under 10s.
                          Up nextV8B.nextTile
                            ResultV8B.resultTile
                            Next round barV8B.nextBarUnder a stage.

                            The round

                            Stat raceV8B.race

                            Round live

                            More passing than rushing yards this drive?

                            Locks in0:12

                            Amount

                            Estimates move until entries lock. An entry stays in until the round settles.

                            Round panel.b-rndPot, estimates, amount, sides.
                              Your positionsV8B.posNo cancel, no cash out.
                                Live activityV8B.act
                                ResolvedV8B.resolvedSource, start, end, winner.

                                The tournament

                                Day statsV8B.stats
                                StandingsV8B.standingsYou in violet.
                                Daily titlesV8B.titles
                                ScheduleV8B.scheduleDone, live, next, locked.
                                  Game cardsV8B.gameCardsIn credits.
                                    Podium.b-podium2 · 1 · 3.
                                    Tournament bitsV8B.prizeV8B.livetag

                                    Content

                                    FAQV8B.faqOne answer open at a time.

                                    1. Pick a round

                                      A game moment, a token or a stock.

                                    2. Pick a side

                                      Yes or no, higher or lower. Everyone's entry joins one pot.

                                    3. Winners split it

                                      The winning side splits the pot after the fee.

                                    Steps.b-steps

                                    1. Share your link

                                      Send it to friends who like a fast call.

                                    2. Friends play

                                      They join and play rounds. Fees apply as usual.

                                    3. You earn a cut

                                      A share of eligible fees from people you invite.

                                    Colour steps.b-steps.tallText on top, art at the foot.

                                    Just now

                                      Feed.b-feed

                                      Round receipt

                                      Your side
                                      Your amount
                                      $25.00
                                      Pot at the bell
                                      $12,480.32
                                      Start value
                                      Price $0.18400
                                      End value
                                      Price $0.18431
                                      Paid to balance
                                      $43.25
                                      Receipt drawer.b-drawerA bottom sheet on a phone.

                                      Page parts

                                      Section headV8B.hd
                                      Promo bannerV8B.promoCloses a page.
                                      Promo pairV8B.duo
                                      Sport stripV8B.strip
                                      Broadcast stageV8B.stage
                                        Next roundsV8B.nextRound
                                          Play-by-playV8B.pbp
                                          Side plateV8B.sidePlate
                                          Credits loadedV8B.loaded
                                          ControlsV8B.swV8B.segV8B.sparkTry them.