{
  "id": "craft-zine-newsletter-card",
  "name": "Torn Signup",
  "theme": "craft-zine",
  "category": "Marketing",
  "description": "A signup panel split by a torn paper edge, with the last three issue subjects listed as proof of what actually arrives.",
  "layout": "Two-column card: swatch artwork on the left cut by a jagged clip-path edge, form and archive proof on the right, the whole thing sitting on a tinted page.",
  "modules": [
    {
      "key": "panel",
      "name": "Torn artwork panel",
      "html": "\n<div class=\"panel\"><img src=\"{{ART swatch}}\" alt=\"{{ARTALT swatch}}\"></div>"
    },
    {
      "key": "pitch",
      "name": "Pitch + form",
      "html": "\n<div class=\"pitch\">\n  <span class=\"pitch-tag\">Free · every quarter</span>\n  <h2>One long piece, four short ones, no news.</h2>\n  <form onsubmit=\"return false\">\n    <input type=\"email\" placeholder=\"you@example.com\" aria-label=\"Email address\" autocomplete=\"email\">\n    <button type=\"submit\">Send me issue 12</button>\n  </form>\n  <p class=\"pitch-fine\">2,140 readers. No tracking pixels — we genuinely cannot tell if you opened it.</p>\n</div>"
    },
    {
      "key": "proof",
      "name": "Recent subjects",
      "html": "\n<ul class=\"proof\">\n  <li><span>11</span> Six failed prototypes and what their makers kept</li>\n  <li><span>10</span> On taking the slow route through a problem on purpose</li>\n  <li><span>09</span> What one trade quietly takes from another</li>\n</ul>"
    }
  ],
  "moduleCount": 3,
  "reorderable": false,
  "meta": {
    "id": "craft-zine-newsletter-card",
    "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-newsletter-card.json",
  "structure": "Two-column card: swatch artwork on the left cut by a jagged clip-path edge, form and archive proof on the right, the whole thing sitting on a tinted page.",
  "html": "<div class=\"dz dz-craft-zine-newsletter-card\" data-design=\"craft-zine-newsletter-card\" data-theme=\"craft-zine\">\n<div class=\"card\"><section class=\"dz-mod\" data-mod=\"panel\" aria-label=\"Torn artwork panel\">\n<div class=\"panel\"><img src=\"https://designlookbook.dev/assets/img/craft-zine-swatch.webp\" alt=\"Torn strips of terracotta and moss paper arranged on cream\"></div></section><section class=\"dz-mod\" data-mod=\"pitch\" aria-label=\"Pitch + form\">\n<div class=\"pitch\">\n  <span class=\"pitch-tag\">Free · every quarter</span>\n  <h2>One long piece, four short ones, no news.</h2>\n  <form onsubmit=\"return false\">\n    <input type=\"email\" placeholder=\"you@example.com\" aria-label=\"Email address\" autocomplete=\"email\">\n    <button type=\"submit\">Send me issue 12</button>\n  </form>\n  <p class=\"pitch-fine\">2,140 readers. No tracking pixels — we genuinely cannot tell if you opened it.</p>\n</div></section><section class=\"dz-mod\" data-mod=\"proof\" aria-label=\"Recent subjects\">\n<ul class=\"proof\">\n  <li><span>11</span> Six failed prototypes and what their makers kept</li>\n  <li><span>10</span> On taking the slow route through a problem on purpose</li>\n  <li><span>09</span> What one trade quietly takes from another</li>\n</ul></section></div>\n</div>",
  "css": "\n.dz-craft-zine-newsletter-card { background: var(--muted); padding: 40px; font-family: var(--pv-body); color: var(--foreground); }\n.dz-craft-zine-newsletter-card .card { display: grid; grid-template-columns: 260px minmax(0, 1fr); background: var(--card); border: var(--pv-bw) solid var(--border); overflow: hidden; }\n.dz-craft-zine-newsletter-card .panel { background: var(--secondary); overflow: hidden; }\n.dz-craft-zine-newsletter-card .panel img { width: 100%; height: 100%; object-fit: cover; display: block; filter: var(--img-filter); clip-path: polygon(0 0, 100% 0, 92% 7%, 100% 15%, 91% 24%, 100% 33%, 93% 43%, 100% 52%, 92% 61%, 100% 70%, 93% 80%, 100% 89%, 94% 100%, 0 100%); }\n.dz-craft-zine-newsletter-card .pitch { padding: 32px 34px 8px; }\n.dz-craft-zine-newsletter-card .pitch-tag { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--primary); }\n.dz-craft-zine-newsletter-card .pitch h2 { font-family: var(--pv-display); font-size: 29px; line-height: 1.1; letter-spacing: -.03em; font-weight: 800; margin: 10px 0 20px; max-width: 22ch; }\n.dz-craft-zine-newsletter-card .pitch form { display: flex; gap: 10px; flex-wrap: wrap; }\n.dz-craft-zine-newsletter-card .pitch input { flex: 1; min-width: 190px; font: inherit; font-size: 15px; padding: 11px 13px; border: var(--pv-bw) solid var(--input); border-radius: var(--pv-radius-sm); background: var(--background); color: var(--foreground); }\n.dz-craft-zine-newsletter-card .pitch input:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }\n.dz-craft-zine-newsletter-card .pitch button { font: inherit; font-size: 14px; font-weight: 600; padding: 11px 20px; border: 0; border-radius: var(--pv-radius-sm); background: var(--primary); color: var(--primary-foreground); cursor: pointer; transition: background var(--dur) var(--ease); }\n.dz-craft-zine-newsletter-card .pitch button:hover { background: var(--foreground); }\n.dz-craft-zine-newsletter-card .pitch-fine { margin: 12px 0 0; font-size: 12px; color: var(--muted-foreground); }\n.dz-craft-zine-newsletter-card .proof { grid-column: 2; list-style: none; margin: 0; padding: 18px 34px 30px; }\n.dz-craft-zine-newsletter-card .proof li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-top: var(--pv-bw) solid var(--border); font-size: 13.5px; color: var(--muted-foreground); }\n.dz-craft-zine-newsletter-card .proof span { font-family: var(--pv-mono); color: var(--primary); }\n@media (prefers-reduced-motion: reduce) { .dz-craft-zine-newsletter-card *, .dz-craft-zine-newsletter-card *::before, .dz-craft-zine-newsletter-card *::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"
}