{
  "id": "craft-zine-subscribe-flow",
  "name": "Subscribe Flow",
  "theme": "craft-zine",
  "category": "Auth & Onboarding",
  "description": "A three-step subscription where the progress indicator is a printed rule that fills, not a row of pills.",
  "layout": "Narrow centred card on a tinted ground; the step rule spans the card top and fills in the accent, and the two plan options are ruled rows rather than boxes.",
  "modules": [
    {
      "key": "steps",
      "name": "Step rule",
      "html": "\n<div class=\"steps\"><div class=\"steps-fill\"></div><ol><li class=\"done\">Plan</li><li class=\"now\">Details</li><li>Payment</li></ol></div>"
    },
    {
      "key": "plans",
      "name": "Plan rows",
      "html": "\n<fieldset class=\"plans\">\n  <legend>Choose a run</legend>\n  <label class=\"plan on\"><input type=\"radio\" name=\"cz-plan\" checked><span class=\"plan-b\"><b>Four issues</b><em>One year, posted second class</em></span><span class=\"plan-p\">£34</span></label>\n  <label class=\"plan\"><input type=\"radio\" name=\"cz-plan\"><span class=\"plan-b\"><b>Eight issues</b><em>Two years, plus the back-catalogue PDF</em></span><span class=\"plan-p\">£60</span></label>\n</fieldset>"
    },
    {
      "key": "fields",
      "name": "Detail fields",
      "html": "\n<div class=\"fields\">\n  <div class=\"f\"><label for=\"cz-sf-name\">Name for the label</label><input id=\"cz-sf-name\" type=\"text\" autocomplete=\"name\"></div>\n  <div class=\"f\"><label for=\"cz-sf-addr\">Postal address</label><textarea id=\"cz-sf-addr\" rows=\"3\" autocomplete=\"street-address\"></textarea></div>\n  <p class=\"fine\">We keep addresses on paper in a drawer and delete the digital copy after each mailing.</p>\n</div>"
    },
    {
      "key": "actions",
      "name": "Actions",
      "html": "\n<div class=\"acts\"><button type=\"button\" class=\"back\">Back</button><button type=\"button\" class=\"next\">Continue to payment</button></div>"
    }
  ],
  "moduleCount": 4,
  "reorderable": false,
  "meta": {
    "id": "craft-zine-subscribe-flow",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-08-29T18:14:56+09:00",
    "updatedAt": "2026-08-29T18:14:56+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/craft-zine-subscribe-flow.json",
  "structure": "Narrow centred card on a tinted ground; the step rule spans the card top and fills in the accent, and the two plan options are ruled rows rather than boxes.",
  "html": "<div class=\"dz dz-craft-zine-subscribe-flow\" data-design=\"craft-zine-subscribe-flow\" data-theme=\"craft-zine\">\n<div class=\"card\"><section class=\"dz-mod\" data-mod=\"steps\" aria-label=\"Step rule\">\n<div class=\"steps\"><div class=\"steps-fill\"></div><ol><li class=\"done\">Plan</li><li class=\"now\">Details</li><li>Payment</li></ol></div></section><section class=\"dz-mod\" data-mod=\"plans\" aria-label=\"Plan rows\">\n<fieldset class=\"plans\">\n  <legend>Choose a run</legend>\n  <label class=\"plan on\"><input type=\"radio\" name=\"cz-plan\" checked><span class=\"plan-b\"><b>Four issues</b><em>One year, posted second class</em></span><span class=\"plan-p\">£34</span></label>\n  <label class=\"plan\"><input type=\"radio\" name=\"cz-plan\"><span class=\"plan-b\"><b>Eight issues</b><em>Two years, plus the back-catalogue PDF</em></span><span class=\"plan-p\">£60</span></label>\n</fieldset></section><section class=\"dz-mod\" data-mod=\"fields\" aria-label=\"Detail fields\">\n<div class=\"fields\">\n  <div class=\"f\"><label for=\"cz-sf-name\">Name for the label</label><input id=\"cz-sf-name\" type=\"text\" autocomplete=\"name\"></div>\n  <div class=\"f\"><label for=\"cz-sf-addr\">Postal address</label><textarea id=\"cz-sf-addr\" rows=\"3\" autocomplete=\"street-address\"></textarea></div>\n  <p class=\"fine\">We keep addresses on paper in a drawer and delete the digital copy after each mailing.</p>\n</div></section><section class=\"dz-mod\" data-mod=\"actions\" aria-label=\"Actions\">\n<div class=\"acts\"><button type=\"button\" class=\"back\">Back</button><button type=\"button\" class=\"next\">Continue to payment</button></div></section></div>\n</div>",
  "css": "\n.dz-craft-zine-subscribe-flow { background: var(--muted); color: var(--foreground); font-family: var(--pv-body); padding: 40px 20px; }\n.dz-craft-zine-subscribe-flow .card { max-width: 30rem; margin: 0 auto; background: var(--card); border: var(--pv-bw) solid var(--border); padding: 0 30px 26px; }\n.dz-craft-zine-subscribe-flow .steps { margin: 0 -30px 24px; position: relative; }\n.dz-craft-zine-subscribe-flow .steps-fill { height: 4px; background: var(--primary); width: 62%; }\n.dz-craft-zine-subscribe-flow .steps ol { list-style: none; display: flex; margin: 0; padding: 10px 30px 0; gap: 26px; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-foreground); }\n.dz-craft-zine-subscribe-flow .steps .done { color: var(--foreground); }\n.dz-craft-zine-subscribe-flow .steps .now { color: var(--primary); }\n.dz-craft-zine-subscribe-flow .plans { border: 0; margin: 0 0 22px; padding: 0; }\n.dz-craft-zine-subscribe-flow .plans legend { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-foreground); padding: 0 0 8px; }\n.dz-craft-zine-subscribe-flow .plan { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: var(--pv-bw) solid var(--border); cursor: pointer; }\n.dz-craft-zine-subscribe-flow .plan:last-child { border-bottom: var(--pv-bw) solid var(--border); }\n.dz-craft-zine-subscribe-flow .plan input { accent-color: var(--primary); width: 15px; height: 15px; }\n.dz-craft-zine-subscribe-flow .plan-b { display: flex; flex-direction: column; gap: 2px; }\n.dz-craft-zine-subscribe-flow .plan-b b { font-family: var(--pv-display); font-size: 15.5px; }\n.dz-craft-zine-subscribe-flow .plan-b em { font-style: normal; font-size: 12.5px; color: var(--muted-foreground); }\n.dz-craft-zine-subscribe-flow .plan-p { margin-left: auto; font-family: var(--pv-mono); font-size: 19px; }\n.dz-craft-zine-subscribe-flow .plan.on .plan-p { color: var(--primary); }\n.dz-craft-zine-subscribe-flow .fields { display: flex; flex-direction: column; gap: 14px; }\n.dz-craft-zine-subscribe-flow .f { display: flex; flex-direction: column; gap: 6px; }\n.dz-craft-zine-subscribe-flow .f label { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-foreground); }\n.dz-craft-zine-subscribe-flow .f input, .dz-craft-zine-subscribe-flow .f textarea { font: inherit; font-size: 15px; padding: 10px 12px; border: var(--pv-bw) solid var(--input); border-radius: var(--pv-radius-sm); background: var(--background); color: var(--foreground); resize: vertical; }\n.dz-craft-zine-subscribe-flow .f input:focus-visible, .dz-craft-zine-subscribe-flow .f textarea:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }\n.dz-craft-zine-subscribe-flow .fine { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted-foreground); }\n.dz-craft-zine-subscribe-flow .acts { display: flex; gap: 12px; margin-top: 22px; padding-top: 16px; border-top: 3px solid var(--foreground); }\n.dz-craft-zine-subscribe-flow .acts button { font: inherit; font-size: 14px; font-weight: 600; padding: 11px 20px; border-radius: var(--pv-radius-sm); cursor: pointer; }\n.dz-craft-zine-subscribe-flow .back { background: none; border: var(--pv-bw) solid var(--border); color: var(--foreground); }\n.dz-craft-zine-subscribe-flow .next { margin-left: auto; background: var(--primary); border: var(--pv-bw) solid var(--primary); color: var(--primary-foreground); transition: background var(--dur) var(--ease); }\n.dz-craft-zine-subscribe-flow .next:hover { background: var(--foreground); border-color: var(--foreground); }\n@media (prefers-reduced-motion: reduce) { .dz-craft-zine-subscribe-flow *, .dz-craft-zine-subscribe-flow *::before, .dz-craft-zine-subscribe-flow *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/craft-zine.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;500;600;700&family=Public+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap"
}