{
  "id": "neon-arcade-drop",
  "name": "Drop Page",
  "theme": "neon-arcade",
  "category": "Landing",
  "description": "A launch page for a thing that goes live at a specific minute, built around a countdown big enough to read from across a room.",
  "layout": "A 72px headline stacked over a four-cell mono countdown that spans the full width, with a rotated ticket card overlapping the boundary between them.",
  "modules": [
    {
      "key": "nav",
      "name": "Navigation",
      "html": "\n<header class=\"nv\"><span class=\"br\">ARCADE</span><nav><a href=\"#\">Games</a><a href=\"#\">Events</a><a href=\"#\">Leaderboard</a><a href=\"#\">Shop</a></nav><a class=\"cta\" href=\"#\">Sign in</a></header>"
    },
    {
      "key": "hero",
      "name": "Hero",
      "html": "\n<div class=\"hr\"><span class=\"k\">Season 04 drops Friday</span><h1>Nine new cabinets. One night. Bring a friend or lose alone.</h1></div>"
    },
    {
      "key": "clock",
      "name": "Countdown",
      "html": "\n<section class=\"ck\">\n  <div class=\"c1\"><b>02</b><span>days</span></div>\n  <div class=\"c2\"><b>14</b><span>hours</span></div>\n  <div class=\"c3\"><b>38</b><span>minutes</span></div>\n  <div class=\"c4\"><b>11</b><span>seconds</span></div>\n</section>"
    },
    {
      "key": "ticket",
      "name": "Ticket card",
      "html": "\n<aside class=\"tk\"><span class=\"k\">Early entry</span><b>£12</b><span class=\"m\">Doors 19:00 · 200 tickets · no queue</span><button type=\"button\" class=\"go\">Get a ticket</button></aside>"
    },
    {
      "key": "lineup",
      "name": "Lineup",
      "html": "\n<section class=\"lu\"><h2 class=\"sh\">On the floor</h2>\n<div class=\"gr\">\n  <article class=\"g1\"><span class=\"n\">01</span><b>Vector Run</b><span class=\"m\">2 players · 1982 reissue</span></article>\n  <article class=\"g2\"><span class=\"n\">02</span><b>Neon Judge</b><span class=\"m\">4 players · new</span></article>\n  <article class=\"g3\"><span class=\"n\">03</span><b>Grid Wolf</b><span class=\"m\">1 player · new</span></article>\n  <article class=\"g4\"><span class=\"n\">04</span><b>Split Second</b><span class=\"m\">2 players · tournament</span></article>\n  <article class=\"g5\"><span class=\"n\">05</span><b>Cassette Hell</b><span class=\"m\">4 players · new</span></article>\n  <article class=\"g1\"><span class=\"n\">06</span><b>Doubloon</b><span class=\"m\">1 player · 1987</span></article>\n</div></section>"
    }
  ],
  "moduleCount": 5,
  "reorderable": false,
  "meta": {
    "id": "neon-arcade-drop",
    "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-drop.json",
  "structure": "A 72px headline stacked over a four-cell mono countdown that spans the full width, with a rotated ticket card overlapping the boundary between them.",
  "html": "<div class=\"dz dz-neon-arcade-drop\" data-design=\"neon-arcade-drop\" data-theme=\"neon-arcade\">\n<section class=\"dz-mod\" data-mod=\"nav\" aria-label=\"Navigation\">\n<header class=\"nv\"><span class=\"br\">ARCADE</span><nav><a href=\"#\">Games</a><a href=\"#\">Events</a><a href=\"#\">Leaderboard</a><a href=\"#\">Shop</a></nav><a class=\"cta\" href=\"#\">Sign in</a></header></section><section class=\"dz-mod\" data-mod=\"hero\" aria-label=\"Hero\">\n<div class=\"hr\"><span class=\"k\">Season 04 drops Friday</span><h1>Nine new cabinets. One night. Bring a friend or lose alone.</h1></div></section><section class=\"dz-mod\" data-mod=\"ticket\" aria-label=\"Ticket card\">\n<aside class=\"tk\"><span class=\"k\">Early entry</span><b>£12</b><span class=\"m\">Doors 19:00 · 200 tickets · no queue</span><button type=\"button\" class=\"go\">Get a ticket</button></aside></section><section class=\"dz-mod\" data-mod=\"clock\" aria-label=\"Countdown\">\n<section class=\"ck\">\n  <div class=\"c1\"><b>02</b><span>days</span></div>\n  <div class=\"c2\"><b>14</b><span>hours</span></div>\n  <div class=\"c3\"><b>38</b><span>minutes</span></div>\n  <div class=\"c4\"><b>11</b><span>seconds</span></div>\n</section></section><section class=\"dz-mod\" data-mod=\"lineup\" aria-label=\"Lineup\">\n<section class=\"lu\"><h2 class=\"sh\">On the floor</h2>\n<div class=\"gr\">\n  <article class=\"g1\"><span class=\"n\">01</span><b>Vector Run</b><span class=\"m\">2 players · 1982 reissue</span></article>\n  <article class=\"g2\"><span class=\"n\">02</span><b>Neon Judge</b><span class=\"m\">4 players · new</span></article>\n  <article class=\"g3\"><span class=\"n\">03</span><b>Grid Wolf</b><span class=\"m\">1 player · new</span></article>\n  <article class=\"g4\"><span class=\"n\">04</span><b>Split Second</b><span class=\"m\">2 players · tournament</span></article>\n  <article class=\"g5\"><span class=\"n\">05</span><b>Cassette Hell</b><span class=\"m\">4 players · new</span></article>\n  <article class=\"g1\"><span class=\"n\">06</span><b>Doubloon</b><span class=\"m\">1 player · 1987</span></article>\n</div></section></section>\n</div>",
  "css": "\n.dz-neon-arcade-drop { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 0 26px 30px; position: relative; }\n.dz-neon-arcade-drop .nv { display: flex; align-items: center; gap: 24px; padding: 18px 0 26px; }\n.dz-neon-arcade-drop .br { font-family: var(--pv-display); font-size: 24px; font-weight: 700; letter-spacing: -.03em; text-transform: uppercase; color: var(--primary); }\n.dz-neon-arcade-drop .nv nav { display: flex; gap: 20px; margin-left: 14px; }\n.dz-neon-arcade-drop .nv a { font-size: 13.5px; color: var(--muted-foreground); text-decoration: none; }\n.dz-neon-arcade-drop .nv a:hover { color: var(--accent); }\n.dz-neon-arcade-drop .cta { margin-left: auto; font-size: 12.5px; color: var(--foreground) !important; border: 2px solid var(--foreground); border-radius: var(--pv-radius); box-shadow: 5px 5px 0 var(--accent); padding: 7px 15px; }\n.dz-neon-arcade-drop .k { font-size: 12.5px; color: var(--accent); }\n.dz-neon-arcade-drop .hr { max-width: 22ch; margin-bottom: 30px; }\n.dz-neon-arcade-drop .hr h1 { font-family: var(--pv-display); font-size: 72px; font-weight: 700; line-height: .96; letter-spacing: -.04em; text-transform: uppercase; margin: 12px 0 0; }\n.dz-neon-arcade-drop .ck { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }\n.dz-neon-arcade-drop .ck div { border: 2px solid var(--foreground); border-radius: var(--pv-radius); box-shadow: 5px 5px 0 var(--chart-1); transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; background: var(--card); }\n.dz-neon-arcade-drop .c2 { box-shadow: 5px 5px 0 var(--chart-2); }\n.dz-neon-arcade-drop .c3 { box-shadow: 5px 5px 0 var(--chart-3); }\n.dz-neon-arcade-drop .c4 { box-shadow: 5px 5px 0 var(--chart-4); }\n.dz-neon-arcade-drop .ck b { font-family: var(--pv-mono); font-size: 56px; font-weight: 700; line-height: 1; letter-spacing: -.04em; }\n.dz-neon-arcade-drop .ck span { font-size: 12px; color: var(--muted-foreground); }\n.dz-neon-arcade-drop .tk { position: absolute; right: 30px; top: 96px; width: 220px; transform: rotate(-2.4deg); border: 2px solid var(--foreground); border-radius: var(--pv-radius); box-shadow: 5px 5px 0 var(--accent); transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); background: var(--card); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }\n.dz-neon-arcade-drop .tk:hover { transform: rotate(-2.4deg) translate(2px, 2px); box-shadow: 3px 3px 0 var(--accent); }\n.dz-neon-arcade-drop .tk b { font-family: var(--pv-mono); font-size: 40px; font-weight: 700; line-height: 1; }\n.dz-neon-arcade-drop .m { font-size: 11.5px; color: var(--muted-foreground); }\n.dz-neon-arcade-drop .go { font: inherit; font-size: 13px; margin-top: 6px; background: var(--primary); color: var(--primary-foreground); border: 2px solid var(--foreground); border-radius: var(--pv-radius-md); padding: 9px; cursor: pointer; }\n.dz-neon-arcade-drop .sh { font-family: var(--pv-display); font-size: 34px; font-weight: 700; text-transform: uppercase; letter-spacing: -.03em; margin: 40px 0 18px; }\n.dz-neon-arcade-drop .gr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }\n.dz-neon-arcade-drop .gr article { border: 2px solid var(--foreground); border-radius: var(--pv-radius); box-shadow: 5px 5px 0 var(--chart-1); transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); background: var(--card); padding: 16px 18px; display: flex; flex-direction: column; gap: 5px; cursor: pointer; }\n.dz-neon-arcade-drop .g2 { box-shadow: 5px 5px 0 var(--chart-2); } .dz-neon-arcade-drop .g3 { box-shadow: 5px 5px 0 var(--chart-3); }\n.dz-neon-arcade-drop .g4 { box-shadow: 5px 5px 0 var(--chart-4); } .dz-neon-arcade-drop .g5 { box-shadow: 5px 5px 0 var(--chart-5); }\n.dz-neon-arcade-drop .gr article:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--primary); }\n.dz-neon-arcade-drop .n { font-family: var(--pv-mono); font-size: 12px; color: var(--accent); }\n.dz-neon-arcade-drop .gr b { font-family: var(--pv-display); font-size: 24px; font-weight: 700; text-transform: uppercase; letter-spacing: -.02em; }\n@media (prefers-reduced-motion: reduce) { .dz-neon-arcade-drop *, .dz-neon-arcade-drop *::before, .dz-neon-arcade-drop *::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"
}