Their hero shortcut plate (HERO_CTA) as a tablist: selected fills with the tile tone; ink is dark on orange and yellow, white on violet (as their violet CTA). Wide on desktop, compact on the phone (a 44px hit band there). Arrow keys, Home and End move between tabs; o.controls sets aria-controls. /lib/category.js tile().

Their SportsTab (.ntab) with the category's name and the count of markets the board shows for that tab (All is a mix of 8). No glyph on the filter: at tab size it read as a smudge (owner 2026-10-02); the label names the category. Each tab is named "Memecoins, 8 markets" for assistive tech (visually hidden text); o.controls points it at its board. Default All, then Memecoins, Sports, Stocks. /lib/category.js filter().

Search and sort for a board (/markets): their SearchField and DropdownSelect (sort) silhouettes in the dark look, face #161514, the card's keyline, a hard black shadow; the keyline turns orange on focus and the 3px orange ring sits outside the plate. Real <input type=search> and <select>; the caret is their caret-down icon, no magnifier (none in their icon set). Then LOAD MORE: their landing CTA, orange because orange loads more, the label centred, no chevron; lift on hover, press sits on the shadow. /lib/category.js search(), sort(), more().

Their CadeLandingTicker, mixing the three categories; each row carries its glyph. A labelled region with a visible PAUSE / PLAY control (WCAG 2.2.2, a text button, no drawn icon); it also pauses while off screen and stops under reduced motion. /lib/category.js ticker(), tickerToggle(), wireTicker().

The ticker in its band, as a page places it: their CadeLandingFeed (FEED_FACE / FEED_SHADOW stretched to the box), the bolt badge, the [ LIVE PREDICTIONS ] kicker, the pause control. Under 720 it takes their phone band and drops the kicker. Used by /markets; /home draws the same band in its frame. /lib/category.js feed().

Their only skeleton motion is Tailwind's animate-pulse: 2s, cubic-bezier(.4,0,.6,1), opacity 1 to .5 and back (the profile's page ticket pulses at 1.2s ease-in-out to .6). Reduced motion and ?static stop it: the ghost stays, still. All ink is the frame's paper #EFE9D8 at low alpha on the production ground #0E0D0C, black at .12 to .2 on a paper or coloured plate.

SkeletonLine (a bar), SkeletonBlock (a plate, square here: theirs rounds 8px, the house does not), a ghost value on a paper plate, and the Foundation / Skeleton rule: no separate drawing, the plate's own silhouette flattened (CadeSkeleton.flatten(el), filter grayscale(1) brightness(0) invert(1) opacity(.14), children hidden).

AllStarCardGhost on the homepage card's own box (400/310, 9cqw padding, the 24cqw identity band, the 720 branch), so a seat never reflows when its market lands: the medallion (octagon, as our medallion family), the clock chip, the question, the meta line, the split and the bolt. A board announces itself ONCE (one role=status); the seats are aria-hidden.

CadeLandingHeroSkeleton in flow: the panel is known, so it is drawn; copy that is static prints for real (pass it as kicker / lines); the LIVE lockup, the duel seats (their PANEL_INNER clips), the two stats and the three shortcut plates (the real HERO_CTA silhouette, stroked #4A4A4A) are ghosts. Under 720 the plates are not drawn, as their phone hero.

MarketLiveChart while its history loads: the real plate (DS_PANEL_CLIP, #111111 over a #0B0B0B 6/6 shadow) with their read, "Loading market history", the price rail and the time axis as bars. The live predictions band (FEED_FACE / their phone FEED_BAND) with the label and three runs as bars.

SoccerSkeletonRows (42 / 1fr / 48) for any list; ProfileTicketSkeleton for a prediction stub: its torn plate, the hex coin and three lines at white .10, the grey pending flap.

AsyncStatus: loading and refreshing in the quiet tone, stale in orange, error in red, with a last-updated stamp and one action. For a read that is slow but already has something on screen.

Three different claims, drawn differently. Loading: we do not know yet (a pulse). Empty: we know, and there is nothing (the dashed box, their .emptyBoard). Unavailable: we could not read it, which is not zero (the red read notice, role=alert, with Try again; the profile's red-titled plate). Values that failed to read stay as STILL ghosts, never a 0 or an em dash.

• Leaderboard · loading
• Leaderboard · empty
• Leaderboard · unavailable
• Profile · loading
• Profile · empty
• Profile · unavailable

A page opts in with <html data-sk> and loads /lib/skeleton.css + /lib/skeleton.js in its head, so the first paint already shows the ghosts. Each region has two twins: [data-sk-ghost] (the ghost) and [data-sk-real] (the content). The page builds its content, then calls CadeSkeleton.gate().ready(dataPromise): the ghost holds until the data, the fonts and every image in the real content are in (capped at 8s). Past 300ms the content fades in over 180ms; under, it swaps at once. Review: ?loading=1 holds the ghost, ?loading=2500 holds it 2.5s, ?state=empty / ?state=unavailable draw the other states.

<!-- head -->
<html lang="en" data-sk> … <link rel="stylesheet" href="/lib/skeleton.css"><script src="/lib/skeleton.js"></script>

<!-- a board: the ghost twin first, the real one after -->
<div id="boardG" data-sk-ghost></div><div id="board" class="your-grid" data-sk-real></div>

// JS: paint the ghosts first, then the page, then open the gate
const SK = window.CadeSkeleton;
boardG.innerHTML = SK.boardGhost(8, { cols: 4, label: 'Loading the markets board.' });
heroG.innerHTML  = SK.heroGhost({ kicker: 'Live now', lines: ['Call it.', 'Get paid.'] });
chartG.innerHTML = SK.chartGhost({ height: 380 });
feedG.innerHTML  = SK.tickerGhost();
oneSeat.innerHTML = SK.cardGhost();            // one card's seat, e.g. while a single market refreshes
SK.gate().ready(fetchMarkets());               // or .ready() when the data is local
if (SK.query.state === 'empty') board.innerHTML = SK.empty({ title: 'Nothing live', copy: '…' });

Their MemeMadnessAllStarCard silhouette, chip, split and bolt, in the default look (dark). Ours: ONE identity slot, the medallion family (coin art, the brand mark on the brand's face, two team octagons), more air (padding 9cqw; on /home 36 between cards, 44 between rows), no category tag (the chip already says it; the tag now speaks only for a state), POOL instead of POOL SIZE. One fixed identity band, so questions in a row share a line. The pool is compact ($64.2K). The whole card is the link, the bolt is its own control (named "Quick predict: get early access", a paper focus ring on the dark faces, black on cream), the split is not a side picker. Hover: their translateY(-4px), and the keyline steps up one tone. /lib/category.js card(), mark().

One card, three looks, set by data-look on the card, the board or any ancestor (on /home: ?look=dark | cream | edge). Dark (default): the hero panel's face #1A1816, a #2E2A26 keyline, paper type; the yellow clock and the green / red split are the only colour, so the board blends with the page. Cream: their paper cleaned to #F3EEE1 with ink #141414 and a real black keyline. Edge: the arena panels' material (#161514) with the keyline in the category tone at rest 55%, full on hover. Hover shown on the second card of each look.

Loading never shows invented numbers; unavailable is not zero. Long names ellipsize on one line.

Their homepage section heading: the orange star, the SHOUT title in paper, a quiet mono count. One part for every board page (/markets uses it as its h1, sized by --ch-fs). /lib/category.js heading().

A memecoin or stock market opened in place (the preview has no market page): a modal dialog on a dimmed ground with no panel of its own, so the live chart's plate is the one box. The medallion, the question, the yellow clock chip and two metrics, their live chart (/lib/live-chart.js), the split, the two round picks; a pick opens early access. Escape, the backdrop and Close dismiss it; focus returns to the card. Shown here inline and still. /lib/category.js sheet().

Their CadeLandingCoinPlate on hero-plate-orange / violet: a coin medallion, a team badge or a ticker badge, with their odds chips. Desktop, arena and phone geometry. /lib/category.js duel().

The top of a category's board, one part per filter (/lib/category.js hero(), styles in category.css): memecoins and stocks carry the shout, the line, the stats, their head to head (DOGE vs PEPE, bulls vs bears on $NVDA) and the category's live round; sports is compact, the door to /sports/ beside the featured game; All opens the three categories by their tiles with the live counts. Swapped with the board filter on /markets with one slam. Shown here in ?static.

Demo · DOGE · 1-minute round

Real-time predictions,
only on cade.market

One live round, one implementation (/lib/category.js round()) for /home, the category heroes and the /sports featured market: our chart (/lib/replay-chart.js, price:true: the smooth line, the dashed yellow LINE, lime above and red below, the live value at the tip, the vs-line readout, the clock), the two round picks that drop the YOU chip, what each side pays under its pick, the note, Pool / Closes / Settles on; the shutter and CLOSED at the cut, the outcome stamp on the picks at the bell. Wide from 760: the copy and picks left, the chart right. The first runs live; the phone one is still.

Their CadeLandingFeed band around the ticker. The pause is inside the band, before its arrow-cut end: no plate (it sat box in box on the cut, owner 2026-10-02), the band's own type in the quiet ink after a hairline, the word saying the action (PAUSE / PLAY), the hit area 44px tall. /home, /markets and /sports share it.

The single market page's parts (/market/?m=DOGE), ported from their duel-frame (MarketDuelPanel, MarketPredictTicket, MarketActivityPanel, MarketTermsPanel, the coin-empty panel): the torn plate and rail card (DS_PANEL_CLIP, compact tear under 1080), the chrome row with the lane tabs (the shared .cfilter / .ntab), the header with the round clock, the MARKET CAP / PRICE reading and its delta plate, the volumes, MARKET ACTIVITY, the ticket (their QuickPredictControls, .qp-*), YOUR POSITIONS, MARKET TERMS, the no-live-market panel. Ours: no FOMO link, fixed stake chips ($10 / $50 / $100, their fixed-usd preset), "--" where theirs prints an em dash. /lib/duel-frame.js + .css.

The game's two teams as medallions (the NFL in the house helmets, the art of the sports duel; the NBA as team octagons, colour and abbreviation), the score in DATA, the period on the card's yellow clock chip. No plate of its own (/lib/category.js scoreboard(), clock()). The /sports hero and the sports hero on /markets use it.

K.productNav(host) on every page except the landing: K.navLive with the five items from CadeSitemap.NAV (Home · Memecoins · Sports · Stocks · Leaderboard), no gift, Sign In on the right. The current item (CadeSitemap.current(location), never set by hand) wears their cream plate: #F0EAD9 face, 2px ink keyline, ink label, aria-current="page". Transparent at the top of a page, the black band and dot field once it scrolls (.stuck). 961 to 1180 the row tightens to 26px type, 26px gaps. Below 961 the phone bar and the tab bar take over (next). Click Sign In: the real modal.

Below 961: K.tabBar(), mounted by K.productNav on <body>. Their MobileAppBottomNav: 61px, #000 ground, a 2px rgb(52 52 52) top rule; Home · Memecoins · the raised C-mark centre (the live board) · Sports · MORE, glyphs only (the label is the aria-label). Current slot: #FFA800 glyph + a 2px #FFA800 top rule; the centre turns #FFA800 with an ink C. MORE opens their MobileNavMoreSheet: the torn top edge, grabber, KEEP EXPLORING / MORE FROM CADE, rows for Stocks, Leaderboard, Profile, How it works, Terms, Privacy Policy, and the Sign In slat pinned at the foot. Focus trap, Escape, backdrop and the close square shut it; focus returns to MORE. The top bar keeps the mark and Sign In, no hamburger. Here both are drawn inside a phone frame.

lib/signin.js + lib/signin.css, a 1:1 port of their app/login AuthPage: the warm-paper ticket (#F0EAD9) with its torn clip and side dot fields, the red close square, the black CADE mark, SIGN IN over CONNECT WITH EMAIL OR GOOGLE, the orange email slat and the cream Google slat, New to Cade? Create account (early access), the dotted rule, POWERED BY PRIVY. Desktop (961 and up) opens it as a modal in place over rgba(0,0,0,.58): focus trap, Escape, a click outside closes, focus returns to the opener. A phone goes to /login/?returnTo=<path>: the same ticket as a page, no clip, --auth-unit 1.25px. Both are live: walk the email path.

The states, each drawn by CadeSignIn.render() and stepped by its own controls (at --auth-unit .9px to fit the column; live at 1.5px desktop, 1.25px phone). Sign in with email opens the email step; Send link checks the address (an invalid one gets the red keyline and ENTER A VALID EMAIL ADDRESS), the slat goes busy (signin.css [data-busy=true]: grey edge, #d8d6d3 face, the glyph at 42%) while it sends, then CHECK YOUR EMAIL with the green tick, Use a different email and Resend link. This is a preview with no backend: Continue with Google shows their recovery note (a 3px #FF5A1F rule) instead of leaving.

K.cookieBanner(), their AnalyticsConsentBanner: once per visitor, bottom-left, 16px in; #161514 on a 3px #FFA800 keyline, a 7px hard shadow, width min(22rem, 100vw - 2rem). NO and YES are equal in weight, decline first; Customize opens the three categories with their switches (Necessary locked on), Save preferences, Expand details. The choice is kept in localStorage; the footer's Cookie preferences reopens it. On a phone it sits 16px above the tab bar. In this specimen No, Yes and Save are caught so nothing is stored.

lib/system-pages.css (.sp-status), their ArcadeErrorPage: the landing hero's torn panel (shadow, face and outline art in /assets/status/), the conic rays behind the headline, the code chip ([ 404 ] orange, [ 500 ] the soft red #F24B61), the double-printed Barlow 800 italic line, one line of Futura PT, ONE orange slat (Return home on the 404; Try again on the 500, which goes back to the page that failed or reloads). The product header and footer stay on, so there is no second button. The panel scales with its container (100cqw / 960); below 720 it takes the phone sizes. Pages: /404.html, /500/.

lib/system-pages.css (.sp-legal), the construction of their LegalDocument (/official-rules, /terms, /privacy-policy): Back to Cade, one black article on a 1px #27272A keyline, the title in Futura PT Cond over a 2px #FFA800 rule, the date line, the JetBrains Mono table of contents in orange, numbered headings on hairlines, bold lead terms, the zinc table (scrolls inside itself below 620px). Gutters 16 / 24 / 32 at 640 and 1024, the article 20 / 40 / 56. An excerpt here; the page is /rules/.

Ours, owner approved 2026-10-03 ("un frame bun, ceva creativ, ceva cade"): the one piece where a new illustrated object is allowed. A vertical explainer plays as the screen of an illustrated Cade arcade cabinet (Cade, the Prediction Arcade), one implementation: CadeExplainer.mount(figure, VIDEO) in lib/explainer.js, dressed by lib/explainer.css; used by /landing/v3/ How it works. The cabinet is one inline SVG on a 400 x 750 grid (marquee, violet rails, bezel, control deck, a short lower body with their starburst and a small coin door; trimmed from 400 x 850 on 2026-10-03 so it fits one 1280 x 800 screen), ink outlines, a hard shadow. On it, house parts only: the CADE display mark lit on the marquee, a CRT glass over the video, the big PLAY plate (HERO_CTA), the split bar lit on the screen's lip as the progress (lime watched, red to come; a range input over it seeks; chapter notches named on hover / focus), two real arcade buttons (green plays / pauses, red turns the sound on / off, both at least 44px), the MarketCard clock chip stuck on the deck counting the video down, their speech bubble YOU, the kit's coins, their starburst as one soft beat of light behind. States: data-state poster, playing, paused and data-sound on, off; nothing changes size between them. Lazy (loads within 600px of the screen), muted autoplay while half in view, pauses off screen, reduced motion and ?static wait on the poster with the big PLAY plate (it starts with sound). No LIVE tag, no INSERT PICK, no caption plate (owner, 2026-10-03): the caption and note are read out as the video's aria-label. The chapter under the playhead is set as data-chapter on the figure and sent as an xf:chapter event, so a page can light its own steps in sync (/landing/v3/ lights its 1, 2, 3). This specimen plays the landing's own files.