> For the complete documentation index, see [llms.txt](https://jordan-7.gitbook.io/jordan-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jordan-7.gitbook.io/jordan-docs/internal/l1.md). # L1 references: Arcade / Street Lens L1 in one line: bigness, hype, moments. It has to show in the hero, in the second a MegaChat lands, in the CTAs and on the bounty board. A page can lead with L1 but still has to pass the L2 (engineered) and L3 (Nerve) sniff tests. Shape filter applied: a marketing landing that leads into an in-product app, for a consumer / creator / entertainment product. Candidates that are only a box-product launch page (landing to store SKU) or only an app (no landing) were dropped, with reasons at the bottom. Captured 2026-09-02 with a local Playwright script (`390x844` with a mobile UA, `768x1024`, `1440x900`, plus a full-page scroll at 1440). Consent banners were declined or hidden, never accepted. All paths below are under `C:/Users/jorda/mc-ui-overhaul/docs/ui-overhaul/references/L1/`; each site folder also has a `meta.json` with the extracted text and the URLs the CTAs resolved to. ## Picks ### 1. Underdog Sports: One line: the Chargers retro palette running a real consumer app: powder blue field, yellow tiles, navy type, one enormous headline, and every product gets its own poster. Principle it serves: bigness through one giant condensed headline per section, and the product itself as the CTA (the two odds cards ARE the hero action). Every game (KEEP YOUR MILLION, CRASH, STREAKS, RIPS) is a full-bleed tile with its own huge type, which is exactly how a bounty board should read. Verbatim copy (desktop render): * Ticker: `KEEP YOUR $1,000,000! TERMS APPLY.` * Headline: `UNLEASH YOUR DOG` (rendered as a graphic, not DOM text) * Subhead: `SPREADS, TOTALS, MONEYLINES AND PARLAYS` (DOM text is lowercase and uppercased by CSS at desktop; mobile shows it lowercase) * Primary CTA: `SIGN UP` (black pill in the nav, to app.underdogsports.com/register). Secondary: `EXPLORE` (yellow pill), `LOG IN` (outline). The hero itself has no button. * Below the fold: `ALL ON UNDERDOG LIVE NATIONWIDE` / `Keep Your $1,000,000` / `MONEYLINES. SPREADS. TOTALS.` / `CARD PACKS IN APP NOW` What to take for MegaChat: * The accent pairing. Powder blue (about #3fb6f0) + yellow (about #fff200) + navy (about #0d1b3e) is the anchor pair from the brief, proven on a live money product. On MegaChat keep the black base and use blue/yellow as the duo; the navy chip with a yellow inner card is a ready-made two-tone card for bounty tiles. * The top ticker as the "moment" surface: a live strip of MegaChats landing and bounties paid, in the same 20px all-caps weight. * Poster tiles for the bounty board: one bounty, one giant word, one number, one action. The radius on their tiles is the upper bound for "soften without going bubbly" (about 28 to 32px on 400px tiles). * Sniff test: L2 mostly fails here (the whole page shouts, there is no quiet surface), which is the caution. Copy the hero and board energy, not the site-wide volume. Note on the in-product shot: app.underdogsports.com (register, login and explore routes) threw chunk-load errors ("Woof! Loading chunk failed") in both the bundled Chromium and real Chrome under automation, and a plain retry hit a Cloudflare block. `app-1440.png` is therefore the in-product UI as embedded on the landing (the phone mock section), not the live app. Screenshots: * `underdog/landing-390.png` * `underdog/landing-768.png` * `underdog/landing-1440.png` * `underdog/landing-1440-full.png` * `underdog/app-1440.png` (in-product UI as shown on the landing; see note) ### 2. Betr: One line: black base, violet accent, 88px condensed headline with 3D props overlapping the type, a proof-number marquee, one pill CTA. It is the most direct picture of what "purple replaces orange on black" looks like at scale. Principle it serves: the hype headline as a two-colour stack (accent word, then white words) plus a marquee of numbers (`10,000X PAYOUTS`, `$1B+ PAID OUT ON BETR`) that sells bigness without a paragraph. One primary action per view, ghost secondary, and it leads into a real consumer app. Verbatim copy: * Marquee: `10,000X PAYOUTS` / `$1B+ PAID OUT ON BETR` * Eyebrow: `Picks New User Offer` * Headline: `NO SWEAT ENTRIES UP TO $200` (DOM: `No Sweat` + `Entries Up to $200`, uppercased by CSS) * Subhead: `Get your No Sweat entries and join players who've already been paid out over $1B on Betr.` * Primary CTA: `Claim Offer` (violet pill). Secondary: `Learn more` with a down arrow (ghost pill). Nav: `Sign up` (violet pill), `Log in`. * Lower H1: `THE WORLD'S FIRST REAL MONEY GAMING SUPER APP`. Closer: `PLAY BETR TODAY` / `Sign up now`. What to take for MegaChat: * The type scale, not the palette: 88px headline, 20px subhead, 18px CTA label, eyebrow in an outlined pill. This is the "grab attention without turning into a Red Bull ad" scale. * The accent-word technique: colour only the word that carries the moment (`NO SWEAT` in violet, the rest white). For MegaChat: `MEGA` in the gradient, everything else white, which is already how the logo works. * The marquee as proof: replace their payout numbers with MegaChat seconds sold, bounties paid, biggest MegaChat this week. * The gripe, demonstrated: the full page is violet + white + black and it reads monochrome by the third screen (the phone mocks, the product rows and the footer all look the same). This is the evidence that a single replacement accent will not fix "too black, one accent"; MegaChat needs the secondary and data colours on top. * Desktop sign-up dead-ends on a QR code (`betr.app/qr-code`). MegaChat has a web app; do not lose the momentum at the same point. Screenshots: * `betr/landing-390.png` * `betr/landing-768.png` * `betr/landing-1440.png` * `betr/landing-1440-full.png` * `betr/app-1440.png` (where `Claim Offer` lands on desktop: the QR download page; `picks.betr.app`, the web app, never got past its violet splash loader in 20s even with geolocation granted) ### 3. Rocket League: One line: the living descendant of NBA Street: arcade sport, video hero, skewed season badge with a gold keyline, and a dark base that carries orange, yellow and electric blue at once without looking like a rainbow. Principle it serves: an accent SYSTEM on a dark base. Orange is the hero CTA, yellow is the persistent nav CTA, grey is secondary, cyan/blue is environmental light in the video and the sign-in button. That is the fix the brief asks for: several accents with jobs, black-navy underneath. It also embeds the in-product hooks (`ROCKET RUNDOWN`, `PLAYER PROFILE`) in the marketing page, each ending in a sign-in. Verbatim copy: * Headline: wordmark lockup `ROCKET LEAGUE` + `SEASON 23` badge (graphic; DOM h1 is `Rocket League ®`) * Subhead: `Hit the Pitch for the World Cup in Rocket League Season 23!` (second carousel slide: `New Era. New Engine. This is Rocket League.`; the 768 capture landed on that slide) * Primary CTA (hero): `LEARN MORE` (orange). Secondary: `WATCH TRAILER` (grey). Global nav: `Play Now!` (yellow), `Sign In`. * Section: `THIS IS ROCKET LEAGUE!` / `Welcome to the high-powered hybrid of arcade-style soccer and vehicular mayhem!` * Sign-in screen (Epic): `Sign in to Epic Games` / `Continue` / `New here? Create an account` What to take for MegaChat: * The season badge: a skewed all-caps label with a thin metallic keyline, sitting under the wordmark. Same DNA as the chrome keyline on the MegaChat bubble; use it for LIVE, BOUNTY and SEASON tags. * The accent roles. Give each MegaChat accent a job the way this page does (primary CTA, persistent CTA, secondary, live/ambient) and the "one accent" gripe disappears without adding noise. * In-product hooks on the landing: `ROCKET RUNDOWN` (your highlights) and `PLAYER PROFILE` each show the actual product UI and end in one `SIGN IN`. MegaChat analog: "your MegaChat highlights" and the streamer profile card. * The Epic sign-in as the L2 template on a black base: one field, one cyan button, tiles for the other providers, nothing else. That is the login MegaChat should have. * Caution: the hero CTA is `LEARN MORE`, which is weak; the L1 move is `Play Now!` in the hero, not just the nav. The news cards below are generic. Screenshots: * `rocketleague/landing-390.png` * `rocketleague/landing-768.png` * `rocketleague/landing-1440.png` * `rocketleague/landing-1440-full.png` * `rocketleague/app-1440.png` (`Sign In` to the Epic Games sign-in, the first in-product screen) ### 4. Marvel Rivals: One line: the angular language. Skewed yellow CTA with cut corners, an angled yellow `DOWNLOAD` block in the nav, a wordmark that owns the fold, and modals that keep the geometry. Principle it serves: the moment as geometry. Everything that asks for a click is a slanted yellow shape on black, the subhead is two tiers (white fact, yellow hook), and the platform picker and login modal reuse the same cut-corner vocabulary, so the hype survives into the utility screens. Verbatim copy: * Headline: wordmark `MARVEL RIVALS` (graphic) * Subhead: `THE SUPER HERO TEAM-BASED PVP SHOOTER` (white) / `ALL HEROES ARE FREE TO PLAY!` (yellow) * Primary CTA: `PLAY NOW` (skewed yellow). Nav: `DOWNLOAD` (angled yellow block), `LOG IN`. * Platform picker (after `PLAY NOW`): `THE SUPER HERO TEAM-BASED PVP SHOOTER` / `ALL HEROES UNLOCKED AND FREE-TO-PLAY AT LAUNCH AND BEYOND!` * Login modal: `PLEASE LOG IN TO YOUR ACCOUNT` (Steam, Epic Store, Xbox, PS5, NetEase tiles) What to take for MegaChat: * Angular CTAs that match the angular speech-bubble logo: a slanted primary button with one cut corner is the on-brand shape; rounded pills are not. * Yellow on black instead of red-orange on black: yellow has far more luminance, so it hits harder with less vibration. This is the direct answer to "orange on black is harsh". * The two-tier subhead: one line of fact, one line of hook in the accent. For the hero: "Skip the chat. Be the stream." stays; the hook line under it is where the yellow goes. * Modal discipline: the platform picker is a dark-navy field with thin geometric lines and yellow tiles; the login modal has a skewed black header strip. Join Room and the record-and-send sheet can stay this on-brand without becoming a Snapchat rip. * Cautions: no tablet layout (768 shows the desktop layout overflowing; mobile is a separate `/m/` site), and the page switches to a light base below the fold with lazy sections that stay blank in a full-page capture. Do not change base colour mid-page. Screenshots: * `marvelrivals/landing-390.png` (served from `/m/`) * `marvelrivals/landing-768.png` (desktop layout overflowing at 768; that is the site's real behaviour) * `marvelrivals/landing-1440.png` * `marvelrivals/landing-1440-full.png` * `marvelrivals/app-1440.png` (`PLAY NOW` opens the platform picker) * `marvelrivals/app2-1440.png` (`LOG IN` opens the account modal) ## Cross-pick notes for the token work * Bigness is one giant condensed headline per view, never two (all four picks). * Accent with a job: primary CTA colour, persistent nav CTA colour, a proof/ticker colour, and ambient light. Rocket League does it with orange / yellow / grey / cyan. Betr shows what happens with one accent only. * Yellow is the reliable hype accent on black (Marvel Rivals, Rocket League nav, Underdog tiles). Powder blue is the calm partner (Underdog, Epic sign-in button). That pairing on black is the L1 palette lead. * Keyline plus skew is the shared shape language with the logo (Rocket League badge, Marvel Rivals CTAs, Underdog card chips). Use it for tags and primary actions; keep inputs and settings square-ish with a modest radius. * Keep the in-product hook on the landing (Rocket League) and never dead-end desktop sign-up on a QR (Betr). ## Dropped * Kick: no marketing landing, the root is the browse board (pure dive-in, useful as the in-product reference elsewhere, not for this shape), and it is the exact green-on-black single accent MegaChat is trying to leave. * Fortnite: Epic's Cloudflare "One more step" security check gated every load, headed and headless; CAPTCHAs are not something I bypass, and its CTA is a launcher download rather than a web app anyway. * EA Sports FC 26: the energy is the licensed cover art; the UI is EA's generic template (green pill `Buy now`) and it lands on a store SKU, not an app. Same for skate. (yellow `PLAY FREE* NOW`, same template). EA also refuses headless clients. * NBA 2K27: the purest hype hero on the list, and single-lens: `PRE-ORDER NOW` twice, nothing below but tiles. It is the Flash-site failure the brief warns about, and it leads to a store, not an app. * Valorant: capable hero, but the CTA is red on black (the harsh pairing) and Marvel Rivals covers the angular game-hero pattern better in yellow. * PrizePicks: hero flows into a live product board (good shape) but the dark + purple treatment is restrained L2/L3; a candidate for the L3 set, not L1. * Sleeper: root is a scores board, no landing; calm navy + cyan is a "chill" feeling reference, not arcade. * Whop: light-theme isometric L2 marketing with no arcade energy; wrong lens. * Whatnot: yellow flood and a QR download; retail pop, not street, and the CTA is a download. * Parti: serif + mono prediction-market terminal on black; Polymarket-class L2, no hype. * Street Fighter 6: maximalist key-art collage on a light hero; nothing systematic to borrow. * Twitch brand site: brand-assets page, not a product landing. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://jordan-7.gitbook.io/jordan-docs/internal/l1.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.