{
  "id": "neon-arcade-board",
  "name": "Leaderboard",
  "theme": "neon-arcade",
  "category": "Profile & Social",
  "description": "A ranking where the top three are physically bigger than everyone else and the rest is a dense mono list, because ranks four to fifty are a table.",
  "layout": "A three-up podium of unequal heights across the top with the first-place card 40px taller and rotated, then a plain ruled list where nothing is a card at all.",
  "modules": [
    {
      "key": "head",
      "name": "Header",
      "html": "\n<header class=\"hd\"><h1>Vector Run</h1><div class=\"tabs\"><button type=\"button\" class=\"on\">All time</button><button type=\"button\">This season</button><button type=\"button\">Tonight</button></div></header>"
    },
    {
      "key": "podium",
      "name": "Podium",
      "html": "\n<section class=\"pd\">\n  <article class=\"p2\"><span class=\"r\">2</span><b>NIGHTJAR</b><span class=\"sc\">184,220</span><span class=\"m\">Priya A-B · 12 Aug</span></article>\n  <article class=\"p1\"><span class=\"r\">1</span><b>OKONKWO</b><span class=\"sc\">241,880</span><span class=\"m\">Chidi O. · 28 Aug</span></article>\n  <article class=\"p3\"><span class=\"r\">3</span><b>HALFLIGHT</b><span class=\"sc\">171,040</span><span class=\"m\">Sam V-O · 2 Sep</span></article>\n</section>"
    },
    {
      "key": "rest",
      "name": "Rest of the board",
      "html": "\n<ol class=\"ls\">\n  <li><span class=\"rk\">04</span><b>DUSTKID</b><span class=\"sc\">168,900</span><span class=\"m\">4 Sep</span></li>\n  <li><span class=\"rk\">05</span><b>MERRIWEATHER</b><span class=\"sc\">162,410</span><span class=\"m\">1 Sep</span></li>\n  <li><span class=\"rk\">06</span><b>TWO_COINS</b><span class=\"sc\">158,220</span><span class=\"m\">30 Aug</span></li>\n  <li class=\"you\"><span class=\"rk\">07</span><b>YOU</b><span class=\"sc\">154,880</span><span class=\"m\">tonight</span></li>\n  <li><span class=\"rk\">08</span><b>GLASSJAW</b><span class=\"sc\">151,004</span><span class=\"m\">29 Aug</span></li>\n  <li><span class=\"rk\">09</span><b>ASHWORTH</b><span class=\"sc\">148,720</span><span class=\"m\">26 Aug</span></li>\n  <li><span class=\"rk\">10</span><b>PALE_HORSE</b><span class=\"sc\">144,180</span><span class=\"m\">24 Aug</span></li>\n</ol>"
    },
    {
      "key": "clip",
      "name": "Run clip",
      "html": "\n<aside class=\"cp\"><figure><img src=\"{{ART crowd}}\" alt=\"{{ARTALT crowd}}\"></figure><span class=\"k\">Top run, 28 Aug</span><b>241,880</b><span class=\"m\">No deaths after wave 14. Watch the last three minutes.</span><button type=\"button\" class=\"go\">Play the run</button></aside>"
    }
  ],
  "moduleCount": 4,
  "reorderable": false,
  "meta": {
    "id": "neon-arcade-board",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-01T19:56:24+09:00",
    "updatedAt": "2026-09-01T19:56:24+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/neon-arcade-board.json",
  "structure": "A three-up podium of unequal heights across the top with the first-place card 40px taller and rotated, then a plain ruled list where nothing is a card at all.",
  "html": "<div class=\"dz dz-neon-arcade-board\" data-design=\"neon-arcade-board\" data-theme=\"neon-arcade\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Header\">\n<header class=\"hd\"><h1>Vector Run</h1><div class=\"tabs\"><button type=\"button\" class=\"on\">All time</button><button type=\"button\">This season</button><button type=\"button\">Tonight</button></div></header></section><section class=\"dz-mod\" data-mod=\"podium\" aria-label=\"Podium\">\n<section class=\"pd\">\n  <article class=\"p2\"><span class=\"r\">2</span><b>NIGHTJAR</b><span class=\"sc\">184,220</span><span class=\"m\">Priya A-B · 12 Aug</span></article>\n  <article class=\"p1\"><span class=\"r\">1</span><b>OKONKWO</b><span class=\"sc\">241,880</span><span class=\"m\">Chidi O. · 28 Aug</span></article>\n  <article class=\"p3\"><span class=\"r\">3</span><b>HALFLIGHT</b><span class=\"sc\">171,040</span><span class=\"m\">Sam V-O · 2 Sep</span></article>\n</section></section><section class=\"dz-mod\" data-mod=\"rest\" aria-label=\"Rest of the board\">\n<ol class=\"ls\">\n  <li><span class=\"rk\">04</span><b>DUSTKID</b><span class=\"sc\">168,900</span><span class=\"m\">4 Sep</span></li>\n  <li><span class=\"rk\">05</span><b>MERRIWEATHER</b><span class=\"sc\">162,410</span><span class=\"m\">1 Sep</span></li>\n  <li><span class=\"rk\">06</span><b>TWO_COINS</b><span class=\"sc\">158,220</span><span class=\"m\">30 Aug</span></li>\n  <li class=\"you\"><span class=\"rk\">07</span><b>YOU</b><span class=\"sc\">154,880</span><span class=\"m\">tonight</span></li>\n  <li><span class=\"rk\">08</span><b>GLASSJAW</b><span class=\"sc\">151,004</span><span class=\"m\">29 Aug</span></li>\n  <li><span class=\"rk\">09</span><b>ASHWORTH</b><span class=\"sc\">148,720</span><span class=\"m\">26 Aug</span></li>\n  <li><span class=\"rk\">10</span><b>PALE_HORSE</b><span class=\"sc\">144,180</span><span class=\"m\">24 Aug</span></li>\n</ol></section><section class=\"dz-mod\" data-mod=\"clip\" aria-label=\"Run clip\">\n<aside class=\"cp\"><figure><img src=\"https://designlookbook.dev/assets/img/neon-arcade-crowd.webp\" alt=\"Silhouetted hands raised under magenta and cyan stage light\"></figure><span class=\"k\">Top run, 28 Aug</span><b>241,880</b><span class=\"m\">No deaths after wave 14. Watch the last three minutes.</span><button type=\"button\" class=\"go\">Play the run</button></aside></section>\n</div>",
  "css": "\n.dz-neon-arcade-board { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: minmax(0, 1fr) 260px; column-gap: 26px; padding: 0 26px 30px; align-content: start; }\n.dz-neon-arcade-board .hd { grid-column: 1 / -1; display: flex; align-items: center; gap: 20px; padding: 22px 0 24px; }\n.dz-neon-arcade-board .hd h1 { font-family: var(--pv-display); font-size: 46px; font-weight: 700; text-transform: uppercase; letter-spacing: -.04em; margin: 0; }\n.dz-neon-arcade-board .tabs { display: flex; gap: 8px; margin-left: auto; }\n.dz-neon-arcade-board .tabs button { font: inherit; font-size: 12.5px; background: transparent; color: var(--muted-foreground); border: 2px solid var(--border); border-radius: var(--pv-radius-md); padding: 7px 14px; cursor: pointer; }\n.dz-neon-arcade-board .tabs .on { color: var(--foreground); border-color: var(--accent); }\n.dz-neon-arcade-board .pd { grid-column: 1 / 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: end; margin-bottom: 26px; }\n.dz-neon-arcade-board .pd article { border: 2px solid var(--foreground); border-radius: var(--pv-radius); box-shadow: 5px 5px 0 var(--chart-2); transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); background: var(--card); padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 4px; }\n.dz-neon-arcade-board .p1 { padding-top: 34px; padding-bottom: 30px; transform: rotate(-1.6deg); box-shadow: 5px 5px 0 var(--primary); }\n.dz-neon-arcade-board .p3 { box-shadow: 5px 5px 0 var(--chart-4); }\n.dz-neon-arcade-board .r { font-family: var(--pv-mono); font-size: 13px; color: var(--accent); }\n.dz-neon-arcade-board .p1 .r { color: var(--primary); }\n.dz-neon-arcade-board .pd b { font-family: var(--pv-display); font-size: 24px; font-weight: 700; text-transform: uppercase; letter-spacing: -.02em; }\n.dz-neon-arcade-board .p1 b { font-size: 32px; }\n.dz-neon-arcade-board .sc { font-family: var(--pv-mono); font-size: 26px; font-weight: 700; font-feature-settings: \"tnum\" 1; }\n.dz-neon-arcade-board .p1 .sc { font-size: 38px; color: var(--primary); }\n.dz-neon-arcade-board .m { font-size: 11.5px; color: var(--muted-foreground); }\n.dz-neon-arcade-board .ls { grid-column: 1 / 2; list-style: none; margin: 0; padding: 0; }\n.dz-neon-arcade-board .ls li { display: grid; grid-template-columns: 40px minmax(0, 1fr) 130px 80px; align-items: baseline; gap: 14px; padding: 11px 8px; border-bottom: 2px solid var(--border); }\n.dz-neon-arcade-board .ls li:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); }\n.dz-neon-arcade-board .rk { font-family: var(--pv-mono); font-size: 13px; color: var(--muted-foreground); }\n.dz-neon-arcade-board .ls b { font-family: var(--pv-display); font-size: 17px; font-weight: 700; text-transform: uppercase; }\n.dz-neon-arcade-board .ls .sc { font-size: 17px; text-align: right; }\n.dz-neon-arcade-board .ls .m { text-align: right; }\n.dz-neon-arcade-board .you { background: color-mix(in srgb, var(--accent) 16%, transparent); }\n.dz-neon-arcade-board .you b, .dz-neon-arcade-board .you .sc { color: var(--accent); }\n.dz-neon-arcade-board .cp { grid-column: 2 / 3; grid-row: 2 / 4; border: 2px solid var(--foreground); border-radius: var(--pv-radius); box-shadow: 5px 5px 0 var(--chart-5); background: var(--card); padding: 0 0 18px; align-self: start; overflow: hidden; }\n.dz-neon-arcade-board .cp figure { margin: 0 0 14px; }\n.dz-neon-arcade-board .cp img { width: 100%; height: 140px; object-fit: cover; display: block; filter: var(--img-filter); }\n.dz-neon-arcade-board .k { display: block; font-size: 11.5px; color: var(--accent); padding: 0 18px; }\n.dz-neon-arcade-board .cp b { display: block; font-family: var(--pv-mono); font-size: 32px; font-weight: 700; padding: 4px 18px 6px; }\n.dz-neon-arcade-board .cp .m { display: block; padding: 0 18px 14px; line-height: 1.5; }\n.dz-neon-arcade-board .go { font: inherit; font-size: 13px; margin: 0 18px; width: calc(100% - 36px); background: var(--primary); color: var(--primary-foreground); border: 2px solid var(--foreground); border-radius: var(--pv-radius-md); padding: 10px; cursor: pointer; }\n@media (prefers-reduced-motion: reduce) { .dz-neon-arcade-board *, .dz-neon-arcade-board *::before, .dz-neon-arcade-board *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/neon-arcade.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;500;600;700&display=swap"
}