{
  "id": "curtain-call-join",
  "name": "Membership Join",
  "theme": "curtain-call",
  "category": "Auth & Onboarding",
  "description": "A membership sign-up that shows the tier ladder and the form on one screen, so choosing and committing are not two separate acts of faith.",
  "layout": "A centred 920px card split 1fr/1fr, tiers stacked on the left as selectable rows and the form on the right, over a full-bleed duotone backdrop.",
  "modules": [
    {
      "key": "tiers",
      "name": "Tier ladder",
      "html": "\n<section class=\"tl\"><h1>Join the Playhouse</h1><p class=\"sub\">Priority booking on everything, for the price of about two tickets a year.</p>\n<ul>\n  <li><label><input type=\"radio\" name=\"t\"><span class=\"tn\">Supporter</span><span class=\"tp\">£45<i>/year</i></span><span class=\"td\">Two weeks of priority booking. Exchanges twice a season.</span></label></li>\n  <li class=\"on\"><label><input type=\"radio\" name=\"t\" checked><span class=\"tn\">Associate</span><span class=\"tp\">£120<i>/year</i></span><span class=\"td\">Everything above, plus centre stalls held to the Friday before opening, and two guest tickets.</span></label></li>\n  <li><label><input type=\"radio\" name=\"t\"><span class=\"tn\">Patron</span><span class=\"tp\">£450<i>/year</i></span><span class=\"td\">Everything above, plus your name in every programme and an invitation to the first rehearsal of each production.</span></label></li>\n</ul></section>"
    },
    {
      "key": "form",
      "name": "Join form",
      "html": "\n<form class=\"jf\">\n  <h2>Your details</h2>\n  <label>Full name<input type=\"text\" value=\"Priya Raghunathan\"></label>\n  <label>Email<input type=\"email\" value=\"p.raghunathan@example.org\"></label>\n  <div class=\"two\"><label>Postcode<input type=\"text\" value=\"M4 5JN\"></label><label>Start<select><option>January 2027</option><option>Immediately</option></select></label></div>\n  <label class=\"chk\"><input type=\"checkbox\" checked> Send me the season announcement and nothing else.</label>\n  <button type=\"button\">Join as Associate — £120</button>\n  <p class=\"fine\">Renews annually. Cancel any time before renewal and the remaining months stay active.</p>\n</form>"
    },
    {
      "key": "aside",
      "name": "Backdrop note",
      "html": "\n<aside class=\"bn\"><img src=\"{{ART lamp}}\" alt=\"{{ARTALT lamp}}\"><p>The ghost light stays on when the building is empty. It has been on every night since 1948 except three.</p></aside>"
    }
  ],
  "moduleCount": 3,
  "reorderable": false,
  "meta": {
    "id": "curtain-call-join",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-01T23:32:27+09:00",
    "updatedAt": "2026-09-01T23:32:27+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/curtain-call-join.json",
  "structure": "A centred 920px card split 1fr/1fr, tiers stacked on the left as selectable rows and the form on the right, over a full-bleed duotone backdrop.",
  "html": "<div class=\"dz dz-curtain-call-join\" data-design=\"curtain-call-join\" data-theme=\"curtain-call\">\n<section class=\"dz-mod\" data-mod=\"aside\" aria-label=\"Backdrop note\">\n<aside class=\"bn\"><img src=\"https://designlookbook.dev/assets/img/curtain-call-lamp.webp\" alt=\"A single ghost light standing on a bare stage\"><p>The ghost light stays on when the building is empty. It has been on every night since 1948 except three.</p></aside></section><div class=\"panel\"><section class=\"dz-mod\" data-mod=\"tiers\" aria-label=\"Tier ladder\">\n<section class=\"tl\"><h1>Join the Playhouse</h1><p class=\"sub\">Priority booking on everything, for the price of about two tickets a year.</p>\n<ul>\n  <li><label><input type=\"radio\" name=\"t\"><span class=\"tn\">Supporter</span><span class=\"tp\">£45<i>/year</i></span><span class=\"td\">Two weeks of priority booking. Exchanges twice a season.</span></label></li>\n  <li class=\"on\"><label><input type=\"radio\" name=\"t\" checked><span class=\"tn\">Associate</span><span class=\"tp\">£120<i>/year</i></span><span class=\"td\">Everything above, plus centre stalls held to the Friday before opening, and two guest tickets.</span></label></li>\n  <li><label><input type=\"radio\" name=\"t\"><span class=\"tn\">Patron</span><span class=\"tp\">£450<i>/year</i></span><span class=\"td\">Everything above, plus your name in every programme and an invitation to the first rehearsal of each production.</span></label></li>\n</ul></section></section><section class=\"dz-mod\" data-mod=\"form\" aria-label=\"Join form\">\n<form class=\"jf\">\n  <h2>Your details</h2>\n  <label>Full name<input type=\"text\" value=\"Priya Raghunathan\"></label>\n  <label>Email<input type=\"email\" value=\"p.raghunathan@example.org\"></label>\n  <div class=\"two\"><label>Postcode<input type=\"text\" value=\"M4 5JN\"></label><label>Start<select><option>January 2027</option><option>Immediately</option></select></label></div>\n  <label class=\"chk\"><input type=\"checkbox\" checked> Send me the season announcement and nothing else.</label>\n  <button type=\"button\">Join as Associate — £120</button>\n  <p class=\"fine\">Renews annually. Cancel any time before renewal and the remaining months stay active.</p>\n</form></section></div>\n</div>",
  "css": "\n.dz-curtain-call-join { background: var(--background); color: var(--foreground); font-family: var(--pv-body); position: relative; padding: 40px 30px; display: grid; }\n.dz-curtain-call-join .bn { position: relative; margin-bottom: -180px; }\n.dz-curtain-call-join .bn img { width: 100%; height: 320px; object-fit: cover; display: block; filter: var(--img-filter); border-radius: var(--pv-radius); }\n.dz-curtain-call-join .bn p { position: absolute; left: 26px; bottom: 26px; margin: 0; max-width: 40ch; font-size: 13px; color: var(--primary-foreground); background: color-mix(in oklab, var(--primary) 88%, transparent); padding: 12px 14px; border-radius: var(--pv-radius-sm); }\n.dz-curtain-call-join .panel { position: relative; background: var(--card); border-radius: var(--pv-radius); display: grid; grid-template-columns: 1fr 1fr; gap: 36px; padding: 34px; max-width: 920px; margin: 0 auto; width: 100%; }\n.dz-curtain-call-join h1 { font-family: var(--pv-display); font-weight: 400; letter-spacing: -.015em; font-size: 40px; margin: 0 0 8px; }\n.dz-curtain-call-join .sub { margin: 0 0 22px; color: var(--muted-foreground); font-size: 14px; }\n.dz-curtain-call-join .tl ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }\n.dz-curtain-call-join .tl li { border: 1px solid var(--border); border-radius: var(--pv-radius-sm); }\n.dz-curtain-call-join .tl li.on { border-color: var(--primary); background: color-mix(in oklab, var(--primary) 10%, transparent); }\n.dz-curtain-call-join .tl label { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; padding: 15px; cursor: pointer; align-items: baseline; }\n.dz-curtain-call-join .tn { font-weight: 600; }\n.dz-curtain-call-join .tp { font-family: var(--pv-mono); font-size: 15px; }\n.dz-curtain-call-join .tp i { font-style: normal; color: var(--muted-foreground); font-size: 12px; }\n.dz-curtain-call-join .td { grid-column: 2 / -1; font-size: 12px; color: var(--muted-foreground); }\n.dz-curtain-call-join .jf h2 { font-family: var(--pv-display); font-weight: 400; letter-spacing: -.015em; font-size: 23px; margin: 0 0 18px; }\n.dz-curtain-call-join .jf label { display: block; font-size: 13px; color: var(--muted-foreground); margin-bottom: 14px; }\n.dz-curtain-call-join input[type=text], .dz-curtain-call-join input[type=email], .dz-curtain-call-join select { display: block; width: 100%; margin-top: 5px; padding: 11px; background: var(--background); border: 1px solid var(--input); border-radius: var(--pv-radius-sm); color: var(--foreground); font: inherit; font-size: 14px; }\n.dz-curtain-call-join .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }\n.dz-curtain-call-join .chk { display: flex; gap: 9px; align-items: center; }\n.dz-curtain-call-join .jf button { width: 100%; background: var(--primary); color: var(--primary-foreground); border: 0; padding: 14px; border-radius: var(--pv-radius-sm); font: inherit; font-weight: 600; cursor: pointer; margin-top: 6px; }\n.dz-curtain-call-join .fine { font-size: 12px; color: var(--muted-foreground); margin: 12px 0 0; }\n",
  "requiredTheme": "/api/v1/themes/curtain-call.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Gloock:wght@400;500;600;700&family=Cabin:wght@400;500;600;700&family=Cutive+Mono:wght@400;500;600;700&display=swap"
}