{
  "id": "violet-hour-checkout",
  "name": "Ticket Checkout",
  "theme": "violet-hour",
  "category": "Commerce",
  "description": "A checkout that states the fee before you commit rather than at the last step, and shows the queue position as a live figure instead of a spinner.",
  "layout": "A 640px hard-shadowed panel with the order at the top, fees itemised in the open, and a queue strip pinned above the pay button.",
  "modules": [
    {
      "key": "queue",
      "name": "Queue strip",
      "html": "\n<div class=\"qs\"><span class=\"tc\">You are in</span><b class=\"qp\">204</b><span class=\"ql\">people ahead of you · about 3 minutes</span><span class=\"k r\">Held for 09:41</span></div>"
    },
    {
      "key": "order",
      "name": "Order panel",
      "html": "\n<section class=\"op\"><h1>Late Room · Thursday</h1><span class=\"tc\">Doors 20:00 · Last entry 00:00</span>\n<ul class=\"ln\"><li><div><b>Standard entry</b><span>All rooms, all night</span></div><div class=\"qty\"><button type=\"button\">−</button><span>2</span><button type=\"button\">+</button></div><span class=\"pr\">£28.00</span></li>\n<li><div><b>Basement Live add-on</b><span>Three bands from 22:15</span></div><div class=\"qty\"><button type=\"button\">−</button><span>2</span><button type=\"button\">+</button></div><span class=\"pr\">£18.00</span></li></ul></section>"
    },
    {
      "key": "fees",
      "name": "Fee breakdown",
      "html": "\n<section class=\"fb\"><h2>What you are actually paying</h2>\n<dl><div><dt>Tickets</dt><dd class=\"n\">£46.00</dd></div>\n<div><dt>Booking fee <i>£1.20 per ticket, ours</i></dt><dd class=\"n\">£4.80</dd></div>\n<div><dt>Card processing <i>passed through at cost</i></dt><dd class=\"n\">£0.94</dd></div>\n<div class=\"tot\"><dt>Total</dt><dd class=\"n\">£51.74</dd></div></dl>\n<p class=\"fine\">There is no fee at the door and no fee on refunds. If the event is cancelled you get all of this back including the booking fee.</p></section>"
    },
    {
      "key": "pay",
      "name": "Pay block",
      "html": "\n<footer class=\"pb\"><button type=\"button\" class=\"pay\">Pay £51.74</button><p class=\"k\">Apple Pay and Google Pay are on the next screen. Nothing is charged until you confirm there.</p></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "violet-hour-checkout",
    "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-checkout.json",
  "structure": "A 640px hard-shadowed panel with the order at the top, fees itemised in the open, and a queue strip pinned above the pay button.",
  "html": "<div class=\"dz dz-violet-hour-checkout\" data-design=\"violet-hour-checkout\" data-theme=\"violet-hour\">\n<section class=\"dz-mod\" data-mod=\"queue\" aria-label=\"Queue strip\">\n<div class=\"qs\"><span class=\"tc\">You are in</span><b class=\"qp\">204</b><span class=\"ql\">people ahead of you · about 3 minutes</span><span class=\"k r\">Held for 09:41</span></div></section>\n<section class=\"dz-mod\" data-mod=\"order\" aria-label=\"Order panel\">\n<section class=\"op\"><h1>Late Room · Thursday</h1><span class=\"tc\">Doors 20:00 · Last entry 00:00</span>\n<ul class=\"ln\"><li><div><b>Standard entry</b><span>All rooms, all night</span></div><div class=\"qty\"><button type=\"button\">−</button><span>2</span><button type=\"button\">+</button></div><span class=\"pr\">£28.00</span></li>\n<li><div><b>Basement Live add-on</b><span>Three bands from 22:15</span></div><div class=\"qty\"><button type=\"button\">−</button><span>2</span><button type=\"button\">+</button></div><span class=\"pr\">£18.00</span></li></ul></section></section>\n<section class=\"dz-mod\" data-mod=\"fees\" aria-label=\"Fee breakdown\">\n<section class=\"fb\"><h2>What you are actually paying</h2>\n<dl><div><dt>Tickets</dt><dd class=\"n\">£46.00</dd></div>\n<div><dt>Booking fee <i>£1.20 per ticket, ours</i></dt><dd class=\"n\">£4.80</dd></div>\n<div><dt>Card processing <i>passed through at cost</i></dt><dd class=\"n\">£0.94</dd></div>\n<div class=\"tot\"><dt>Total</dt><dd class=\"n\">£51.74</dd></div></dl>\n<p class=\"fine\">There is no fee at the door and no fee on refunds. If the event is cancelled you get all of this back including the booking fee.</p></section></section>\n<section class=\"dz-mod\" data-mod=\"pay\" aria-label=\"Pay block\">\n<footer class=\"pb\"><button type=\"button\" class=\"pay\">Pay £51.74</button><p class=\"k\">Apple Pay and Google Pay are on the next screen. Nothing is charged until you confirm there.</p></footer></section>\n</div>",
  "css": "\n.dz-violet-hour-checkout { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 28px; max-width: 640px; margin: 0 auto; }\n.dz-violet-hour-checkout .k { text-transform: uppercase; letter-spacing: .14em; font-size: 11px; font-weight: 700; color: var(--muted-foreground); }\n.dz-violet-hour-checkout .qs { display: flex; align-items: center; gap: 12px; background: var(--card); border-radius: var(--pv-radius-lg); padding: 14px 18px; border: 2px solid var(--foreground); box-shadow: 5px 5px 0 var(--foreground); margin-bottom: 20px; }\n.dz-violet-hour-checkout .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); }\n.dz-violet-hour-checkout .qp { font-family: var(--pv-mono); font-size: 26px; font-weight: 700; }\n.dz-violet-hour-checkout .ql { font-size: 13px; color: var(--muted-foreground); }\n.dz-violet-hour-checkout .r { margin-left: auto; }\n.dz-violet-hour-checkout h1 { font-family: var(--pv-display); text-transform: uppercase; font-weight: 700; letter-spacing: -.02em; font-size: 34px; margin: 0 0 10px; }\n.dz-violet-hour-checkout .ln { list-style: none; margin: 20px 0 0; padding: 0; }\n.dz-violet-hour-checkout .ln li { display: grid; grid-template-columns: 1fr auto auto; gap: 18px; align-items: center; padding: 14px 0; border-bottom: 2px solid var(--border); }\n.dz-violet-hour-checkout .ln b { display: block; font-size: 15px; }\n.dz-violet-hour-checkout .ln span:not(.pr) { font-size: 12.5px; color: var(--muted-foreground); }\n.dz-violet-hour-checkout .qty { display: flex; align-items: center; gap: 4px; }\n.dz-violet-hour-checkout .qty button { width: 28px; height: 28px; font: inherit; font-size: 16px; line-height: 1; background: var(--secondary); color: var(--foreground); border: 2px solid var(--border); border-radius: var(--pv-radius-sm); cursor: pointer; }\n.dz-violet-hour-checkout .qty span { font-family: var(--pv-mono); width: 24px; text-align: center; }\n.dz-violet-hour-checkout .pr { font-family: var(--pv-mono); font-size: 17px; font-weight: 700; }\n.dz-violet-hour-checkout h2 { text-transform: uppercase; letter-spacing: .14em; font-size: 11px; font-weight: 700; margin: 24px 0 10px; }\n.dz-violet-hour-checkout dl { margin: 0 0 12px; }\n.dz-violet-hour-checkout dl div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 14px; }\n.dz-violet-hour-checkout dt { margin: 0; }\n.dz-violet-hour-checkout dt i { font-style: normal; color: var(--muted-foreground); font-size: 12px; margin-left: 6px; }\n.dz-violet-hour-checkout dd { margin: 0; }\n.dz-violet-hour-checkout .n { font-family: var(--pv-mono); }\n.dz-violet-hour-checkout .tot { border-bottom: 0; border-top: 2px solid var(--foreground); font-weight: 700; font-size: 17px; }\n.dz-violet-hour-checkout .fine { font-size: 12.5px; color: var(--muted-foreground); line-height: 1.55; margin: 0 0 22px; }\n.dz-violet-hour-checkout .pay { width: 100%; font-family: var(--pv-display); text-transform: uppercase; font-weight: 700; letter-spacing: -.02em; font-size: 17px; background: var(--primary); color: var(--primary-foreground); border: 0; padding: 18px; border-radius: var(--pv-radius-md); cursor: pointer; border: 2px solid var(--foreground); box-shadow: 5px 5px 0 var(--foreground); }\n.dz-violet-hour-checkout .pb .k { display: block; margin: 12px 0 0; text-align: center; }\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"
}