{
  "id": "violet-hour-listings",
  "name": "City Listings",
  "theme": "violet-hour",
  "category": "Search & Browse",
  "description": "A city-wide listings browser filtered by the time you can actually get there, which is the constraint nobody else builds a filter for.",
  "layout": "A horizontal coral chip strip of arrival times over a two-column grid of hard-shadowed listing cards, with sold-out cards flattened rather than dimmed.",
  "modules": [
    {
      "key": "times",
      "name": "Arrival strip",
      "html": "\n<nav class=\"as\"><span class=\"k\">I can get there by</span><ul><li><a href=\"#\">20:00</a></li><li><a href=\"#\">21:00</a></li><li class=\"on\"><a href=\"#\">22:00</a></li><li><a href=\"#\">23:00</a></li><li><a href=\"#\">00:00</a></li></ul><span class=\"ct\">18 things still worth going to</span></nav>"
    },
    {
      "key": "grid",
      "name": "Listing grid",
      "html": "\n<section class=\"lg\">\n  <article class=\"card\"><img src=\"{{ART neon}}\" alt=\"{{ARTALT neon}}\"><div class=\"cb\"><span class=\"tc\">22:00 — 03:00</span><h2>Nkechi Balogun</h2><p class=\"v\">The Late Room · Main</p><p>Two hours of dub techno on the big rig.</p><span class=\"pr\">£14</span></div></article>\n  <article class=\"card\"><img src=\"{{ART crowd}}\" alt=\"{{ARTALT crowd}}\"><div class=\"cb\"><span class=\"tc\">22:15 — 01:00</span><h2>Basement Live</h2><p class=\"v\">The Late Room · Basement</p><p>Three bands, forty minutes each, no changeover.</p><span class=\"pr\">£9</span></div></article>\n  <article class=\"card\"><img src=\"{{ART haze}}\" alt=\"{{ARTALT haze}}\"><div class=\"cb\"><span class=\"tc\">22:30 — 04:00</span><h2>Sombra Verde</h2><p class=\"v\">Warehouse 6</p><p>All night, one room, no support.</p><span class=\"pr\">£18</span></div></article>\n  <article class=\"card flat\"><img src=\"{{ART speaker}}\" alt=\"{{ARTALT speaker}}\"><div class=\"cb\"><span class=\"tc\">21:00 — 02:00</span><h2>Fell Runner</h2><p class=\"v\">The Rosewell</p><p>Sold out on Tuesday. Returns go on at the door from 21:30.</p><span class=\"so\">Sold out</span></div></article>\n</section>"
    },
    {
      "key": "more",
      "name": "Later rail",
      "html": "\n<section class=\"lr\"><span class=\"k\">Still open after 02:00</span><ul><li><b>Warehouse 6</b><span class=\"tc\">til 06:00</span></li><li><b>Back Bar, The Late Room</b><span class=\"tc\">til 04:00</span></li><li><b>Cellar Forty</b><span class=\"tc\">til 03:30</span></li><li><b>The Rosewell</b><span class=\"tc\">til 02:30</span></li></ul></section>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "violet-hour-listings",
    "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-listings.json",
  "structure": "A horizontal coral chip strip of arrival times over a two-column grid of hard-shadowed listing cards, with sold-out cards flattened rather than dimmed.",
  "html": "<div class=\"dz dz-violet-hour-listings\" data-design=\"violet-hour-listings\" data-theme=\"violet-hour\">\n<section class=\"dz-mod\" data-mod=\"times\" aria-label=\"Arrival strip\">\n<nav class=\"as\"><span class=\"k\">I can get there by</span><ul><li><a href=\"#\">20:00</a></li><li><a href=\"#\">21:00</a></li><li class=\"on\"><a href=\"#\">22:00</a></li><li><a href=\"#\">23:00</a></li><li><a href=\"#\">00:00</a></li></ul><span class=\"ct\">18 things still worth going to</span></nav></section>\n<section class=\"dz-mod\" data-mod=\"grid\" aria-label=\"Listing grid\">\n<section class=\"lg\">\n  <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\"><span class=\"tc\">22:00 — 03:00</span><h2>Nkechi Balogun</h2><p class=\"v\">The Late Room · Main</p><p>Two hours of dub techno on the big rig.</p><span class=\"pr\">£14</span></div></article>\n  <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\"><span class=\"tc\">22:15 — 01:00</span><h2>Basement Live</h2><p class=\"v\">The Late Room · Basement</p><p>Three bands, forty minutes each, no changeover.</p><span class=\"pr\">£9</span></div></article>\n  <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\"><span class=\"tc\">22:30 — 04:00</span><h2>Sombra Verde</h2><p class=\"v\">Warehouse 6</p><p>All night, one room, no support.</p><span class=\"pr\">£18</span></div></article>\n  <article class=\"card flat\"><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\"><span class=\"tc\">21:00 — 02:00</span><h2>Fell Runner</h2><p class=\"v\">The Rosewell</p><p>Sold out on Tuesday. Returns go on at the door from 21:30.</p><span class=\"so\">Sold out</span></div></article>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"more\" aria-label=\"Later rail\">\n<section class=\"lr\"><span class=\"k\">Still open after 02:00</span><ul><li><b>Warehouse 6</b><span class=\"tc\">til 06:00</span></li><li><b>Back Bar, The Late Room</b><span class=\"tc\">til 04:00</span></li><li><b>Cellar Forty</b><span class=\"tc\">til 03:30</span></li><li><b>The Rosewell</b><span class=\"tc\">til 02:30</span></li></ul></section></section>\n</div>",
  "css": "\n.dz-violet-hour-listings { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 26px 28px 30px; }\n.dz-violet-hour-listings .k { text-transform: uppercase; letter-spacing: .14em; font-size: 11px; font-weight: 700; color: var(--muted-foreground); }\n.dz-violet-hour-listings .as { display: flex; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 2px solid var(--border); margin-bottom: 24px; }\n.dz-violet-hour-listings .as ul { list-style: none; display: flex; gap: 8px; margin: 0; padding: 0; }\n.dz-violet-hour-listings .as a { display: block; font-family: var(--pv-mono); font-size: 13px; padding: 7px 14px; border: 2px solid var(--border); border-radius: var(--pv-radius-sm); text-decoration: none; color: var(--foreground); }\n.dz-violet-hour-listings .as li.on a { background: var(--accent); color: var(--accent-foreground); border-color: var(--accent); }\n.dz-violet-hour-listings .ct { margin-left: auto; text-transform: uppercase; letter-spacing: .14em; font-size: 11px; font-weight: 700; color: var(--primary); }\n.dz-violet-hour-listings .lg { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }\n.dz-violet-hour-listings .card { 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-listings .card img { width: 100%; height: 180px; object-fit: cover; display: block; filter: var(--img-filter); }\n.dz-violet-hour-listings .cb { padding: 18px 20px; }\n.dz-violet-hour-listings .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); display: inline-block; }\n.dz-violet-hour-listings .card h2 { font-family: var(--pv-display); text-transform: uppercase; font-weight: 700; letter-spacing: -.02em; font-size: 21px; margin: 10px 0 4px; }\n.dz-violet-hour-listings .v { margin: 0 0 8px; text-transform: uppercase; letter-spacing: .14em; font-size: 11px; font-weight: 700; font-size: 10px; color: var(--muted-foreground); }\n.dz-violet-hour-listings .cb p:not(.v) { margin: 0 0 12px; font-size: 14px; line-height: 1.5; }\n.dz-violet-hour-listings .pr { font-family: var(--pv-mono); font-size: 19px; font-weight: 700; }\n.dz-violet-hour-listings .so { text-transform: uppercase; letter-spacing: .14em; font-size: 11px; font-weight: 700; color: var(--muted-foreground); }\n.dz-violet-hour-listings .flat { box-shadow: none; border-color: var(--border); }\n.dz-violet-hour-listings .flat img { filter: var(--img-filter) grayscale(.7); }\n.dz-violet-hour-listings .lr { margin-top: 28px; padding-top: 20px; border-top: 2px solid var(--border); }\n.dz-violet-hour-listings .lr ul { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 12px 0 0; padding: 0; }\n.dz-violet-hour-listings .lr li { display: grid; gap: 7px; justify-items: start; }\n.dz-violet-hour-listings .lr b { font-size: 14px; }\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"
}