{
  "id": "violet-hour-tonight",
  "name": "Tonight",
  "theme": "violet-hour",
  "category": "Landing",
  "description": "A venue front page where the whole evening is one vertical rail of coral time chips, so the page reads as a timeline rather than a list of unrelated events.",
  "layout": "Oversized two-word display headline over the night rail: a fixed 96px column of time chips with hard-shadowed listing cards to their right.",
  "modules": [
    {
      "key": "hero",
      "name": "Display hero",
      "html": "\n<header class=\"hh\"><img src=\"{{ART hero}}\" alt=\"{{ARTALT hero}}\"><div class=\"ht\"><span class=\"k\">Thursday 11 June</span><h1>Late<br>Room</h1><p>Four rooms, one ticket, doors at eight. Last entry is midnight and we mean it.</p><a class=\"btn\" href=\"#\">£14 · Buy now</a></div></header>"
    },
    {
      "key": "rail",
      "name": "Night rail",
      "html": "\n<section class=\"nr\">\n  <div class=\"row\"><span class=\"tc\">20:00</span><article class=\"card\"><img src=\"{{ART speaker}}\" alt=\"{{ARTALT speaker}}\"><div class=\"cb\"><h2>Doors · Main Room</h2><p>Warm-up from the residents. Nothing you have to arrive for, but the sound is best when it is empty.</p><span class=\"rm\">Main</span></div></article></div>\n  <div class=\"row\"><span class=\"tc\">21:30</span><article class=\"card\"><img src=\"{{ART neon}}\" alt=\"{{ARTALT neon}}\"><div class=\"cb\"><h2>Nkechi Balogun</h2><p>Two hours of dub techno on the big rig. Her first booking here since the room was rebuilt.</p><span class=\"rm\">Main</span></div></article></div>\n  <div class=\"row\"><span class=\"tc\">22:00</span><article class=\"card\"><img src=\"{{ART crowd}}\" alt=\"{{ARTALT crowd}}\"><div class=\"cb\"><h2>Basement Live</h2><p>Three bands, forty minutes each, no changeover music. Standing only.</p><span class=\"rm\">Basement</span></div></article></div>\n  <div class=\"row\"><span class=\"tc\">23:45</span><article class=\"card\"><img src=\"{{ART haze}}\" alt=\"{{ARTALT haze}}\"><div class=\"cb\"><h2>Til Close</h2><p>Open decks in the back bar. Bring something on USB; the booth takes anything.</p><span class=\"rm\">Back bar</span></div></article></div>\n</section>"
    },
    {
      "key": "foot",
      "name": "Practical foot",
      "html": "\n<footer class=\"pf\"><div><span class=\"k\">Getting in</span><p>Over 18s. Photo ID on every entry regardless of how you look. Card only at the bar.</p></div><div><span class=\"k\">Getting out</span><p>Night buses from the corner until 04:20. The rank is two streets west, not outside.</p></div><div><span class=\"k\">Access</span><p>Step-free to Main and Back Bar. The Basement is down 14 steps with a handrail on the right.</p></div></footer>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "violet-hour-tonight",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-01T23:48:49+09:00",
    "updatedAt": "2026-09-01T23:48:49+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/violet-hour-tonight.json",
  "structure": "Oversized two-word display headline over the night rail: a fixed 96px column of time chips with hard-shadowed listing cards to their right.",
  "html": "<div class=\"dz dz-violet-hour-tonight\" data-design=\"violet-hour-tonight\" data-theme=\"violet-hour\">\n<section class=\"dz-mod\" data-mod=\"hero\" aria-label=\"Display hero\">\n<header class=\"hh\"><img src=\"https://designlookbook.dev/assets/img/violet-hour-hero.webp\" alt=\"A dark club interior washed in violet light\"><div class=\"ht\"><span class=\"k\">Thursday 11 June</span><h1>Late<br>Room</h1><p>Four rooms, one ticket, doors at eight. Last entry is midnight and we mean it.</p><a class=\"btn\" href=\"#\">£14 · Buy now</a></div></header></section>\n<section class=\"dz-mod\" data-mod=\"rail\" aria-label=\"Night rail\">\n<section class=\"nr\">\n  <div class=\"row\"><span class=\"tc\">20:00</span><article class=\"card\"><img src=\"https://designlookbook.dev/assets/img/violet-hour-speaker.webp\" alt=\"A stack of speaker cabinets lit from one side in violet\"><div class=\"cb\"><h2>Doors · Main Room</h2><p>Warm-up from the residents. Nothing you have to arrive for, but the sound is best when it is empty.</p><span class=\"rm\">Main</span></div></article></div>\n  <div class=\"row\"><span class=\"tc\">21:30</span><article class=\"card\"><img src=\"https://designlookbook.dev/assets/img/violet-hour-neon.webp\" alt=\"A blank neon tube glowing hot pink, curving against a dark wall\"><div class=\"cb\"><h2>Nkechi Balogun</h2><p>Two hours of dub techno on the big rig. Her first booking here since the room was rebuilt.</p><span class=\"rm\">Main</span></div></article></div>\n  <div class=\"row\"><span class=\"tc\">22:00</span><article class=\"card\"><img src=\"https://designlookbook.dev/assets/img/violet-hour-crowd.webp\" alt=\"Silhouetted hands raised against violet stage light\"><div class=\"cb\"><h2>Basement Live</h2><p>Three bands, forty minutes each, no changeover music. Standing only.</p><span class=\"rm\">Basement</span></div></article></div>\n  <div class=\"row\"><span class=\"tc\">23:45</span><article class=\"card\"><img src=\"https://designlookbook.dev/assets/img/violet-hour-haze.webp\" alt=\"Violet and coral haze filling an empty frame\"><div class=\"cb\"><h2>Til Close</h2><p>Open decks in the back bar. Bring something on USB; the booth takes anything.</p><span class=\"rm\">Back bar</span></div></article></div>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"foot\" aria-label=\"Practical foot\">\n<footer class=\"pf\"><div><span class=\"k\">Getting in</span><p>Over 18s. Photo ID on every entry regardless of how you look. Card only at the bar.</p></div><div><span class=\"k\">Getting out</span><p>Night buses from the corner until 04:20. The rank is two streets west, not outside.</p></div><div><span class=\"k\">Access</span><p>Step-free to Main and Back Bar. The Basement is down 14 steps with a handrail on the right.</p></div></footer></section>\n</div>",
  "css": "\n.dz-violet-hour-tonight { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 0 0 30px; }\n.dz-violet-hour-tonight .hh { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }\n.dz-violet-hour-tonight .hh img { width: 100%; height: 100%; min-height: 340px; object-fit: cover; display: block; filter: var(--img-filter); }\n.dz-violet-hour-tonight .ht { padding: 34px 28px; align-self: center; }\n.dz-violet-hour-tonight .k { text-transform: uppercase; letter-spacing: .14em; font-size: 11px; font-weight: 700; color: var(--muted-foreground); }\n.dz-violet-hour-tonight h1 { font-family: var(--pv-display); text-transform: uppercase; font-weight: 700; letter-spacing: -.02em; font-size: 70px; line-height: .98; margin: 10px 0 14px; }\n.dz-violet-hour-tonight .ht p { margin: 0 0 20px; font-size: 16.5px; line-height: 1.6; max-width: 40ch; }\n.dz-violet-hour-tonight .btn { display: inline-block; font-family: var(--pv-display); text-transform: uppercase; font-weight: 700; letter-spacing: -.02em; font-size: 15px; background: var(--primary); color: var(--primary-foreground); padding: 14px 26px; border-radius: var(--pv-radius-md); text-decoration: none; border: 2px solid var(--foreground); box-shadow: 5px 5px 0 var(--foreground); }\n.dz-violet-hour-tonight .nr { padding: 34px 28px 0; display: grid; gap: 28px; }\n.dz-violet-hour-tonight .row { display: grid; grid-template-columns: 96px 1fr; gap: 20px; align-items: start; position: relative; }\n.dz-violet-hour-tonight .row::before { content: \"\"; position: absolute; left: 47px; top: 30px; bottom: -28px; width: 2px; background: var(--border); }\n.dz-violet-hour-tonight .row:last-child::before { display: none; }\n.dz-violet-hour-tonight .tc { font-family: var(--pv-mono); font-size: 12.5px; background: var(--accent); color: var(--accent-foreground); padding: 4px 10px; border-radius: var(--pv-radius-sm); justify-self: start; position: relative; z-index: 1; }\n.dz-violet-hour-tonight .card { display: grid; grid-template-columns: 220px 1fr; background: var(--card); border-radius: var(--pv-radius-lg); overflow: hidden; border: 2px solid var(--foreground); box-shadow: 5px 5px 0 var(--foreground); }\n.dz-violet-hour-tonight .card img { width: 100%; height: 100%; min-height: 150px; object-fit: cover; display: block; filter: var(--img-filter); }\n.dz-violet-hour-tonight .cb { padding: 18px 20px; }\n.dz-violet-hour-tonight .card h2 { font-family: var(--pv-display); text-transform: uppercase; font-weight: 700; letter-spacing: -.02em; font-size: 21px; margin: 0 0 8px; }\n.dz-violet-hour-tonight .cb p { margin: 0 0 12px; font-size: 14px; line-height: 1.55; }\n.dz-violet-hour-tonight .rm { text-transform: uppercase; letter-spacing: .14em; font-size: 11px; font-weight: 700; font-size: 10px; background: var(--secondary); color: var(--secondary-foreground); padding: 4px 10px; border-radius: var(--pv-radius-sm); }\n.dz-violet-hour-tonight .pf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; padding: 34px 28px 0; margin-top: 34px; border-top: 2px solid var(--border); }\n.dz-violet-hour-tonight .pf p { margin: 6px 0 0; font-size: 14px; line-height: 1.55; }\n@media (prefers-reduced-motion: reduce) { .dz-violet-hour-tonight *, .dz-violet-hour-tonight *::before, .dz-violet-hour-tonight *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }\n",
  "requiredTheme": "/api/v1/themes/violet-hour.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Unbounded:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700&family=Red+Hat+Mono:wght@400;500;600;700&display=swap"
}