{
  "id": "signal-pop-signup",
  "name": "Sign Up",
  "theme": "signal-pop",
  "category": "Auth & Onboarding",
  "description": "A signup that leads with \"you do not need an account\" and offers the account as an option, with the form on a tilted card over sticker artwork.",
  "layout": "Split with sticker artwork bleeding off the left edge and a 3-degree-tilted form card overlapping it; the skip route sits above the form, not beneath it.",
  "modules": [
    {
      "key": "art",
      "name": "Sticker wall",
      "html": "\n<div class=\"art\"><img src=\"{{ART sticker}}\" alt=\"{{ARTALT sticker}}\"></div>"
    },
    {
      "key": "skip",
      "name": "No-account route",
      "html": "\n<div class=\"np\"><b>You do not need an account.</b><p>Everything works offline without one. Make one only if you want sync or backup.</p><button type=\"button\">Just use the app</button></div>"
    },
    {
      "key": "form",
      "name": "Signup card",
      "html": "\n<form class=\"fm\" onsubmit=\"return false\">\n  <h1>Make an account</h1>\n  <div class=\"f\"><label for=\"sp-su-mail\">Email</label><input id=\"sp-su-mail\" type=\"email\" autocomplete=\"email\" placeholder=\"you@example.com\"></div>\n  <div class=\"f\"><label for=\"sp-su-pass\">Password</label><input id=\"sp-su-pass\" type=\"password\" autocomplete=\"new-password\"><small>At least 10 characters. We check it against known breaches.</small></div>\n  <label class=\"ck\"><input type=\"checkbox\"> Email me when something actually changes. About four times a year.</label>\n  <button type=\"submit\" class=\"go\">Create account</button>\n  <p class=\"alt\">Already have one? <a href=\"#\">Sign in</a></p>\n</form>"
    }
  ],
  "moduleCount": 3,
  "reorderable": false,
  "meta": {
    "id": "signal-pop-signup",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-08-29T18:54:10+09:00",
    "updatedAt": "2026-08-29T18:54:10+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/signal-pop-signup.json",
  "structure": "Split with sticker artwork bleeding off the left edge and a 3-degree-tilted form card overlapping it; the skip route sits above the form, not beneath it.",
  "html": "<div class=\"dz dz-signal-pop-signup\" data-design=\"signal-pop-signup\" data-theme=\"signal-pop\">\n<section class=\"dz-mod\" data-mod=\"art\" aria-label=\"Sticker wall\">\n<div class=\"art\"><img src=\"https://designlookbook.dev/assets/img/signal-pop-sticker.webp\" alt=\"A pile of glossy die-cut stickers in orange and blue\"></div></section><div><section class=\"dz-mod\" data-mod=\"skip\" aria-label=\"No-account route\">\n<div class=\"np\"><b>You do not need an account.</b><p>Everything works offline without one. Make one only if you want sync or backup.</p><button type=\"button\">Just use the app</button></div></section><section class=\"dz-mod\" data-mod=\"form\" aria-label=\"Signup card\">\n<form class=\"fm\" onsubmit=\"return false\">\n  <h1>Make an account</h1>\n  <div class=\"f\"><label for=\"sp-su-mail\">Email</label><input id=\"sp-su-mail\" type=\"email\" autocomplete=\"email\" placeholder=\"you@example.com\"></div>\n  <div class=\"f\"><label for=\"sp-su-pass\">Password</label><input id=\"sp-su-pass\" type=\"password\" autocomplete=\"new-password\"><small>At least 10 characters. We check it against known breaches.</small></div>\n  <label class=\"ck\"><input type=\"checkbox\"> Email me when something actually changes. About four times a year.</label>\n  <button type=\"submit\" class=\"go\">Create account</button>\n  <p class=\"alt\">Already have one? <a href=\"#\">Sign in</a></p>\n</form></section></div>\n</div>",
  "css": "\n.dz-signal-pop-signup { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); align-items: center; gap: 20px; padding: 30px 34px 34px; min-height: 500px; }\n.dz-signal-pop-signup .art { margin-left: -34px; }\n.dz-signal-pop-signup .art img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; border: var(--pv-bw) solid var(--foreground); border-radius: 0 var(--pv-radius-xl) var(--pv-radius-xl) 0; filter: var(--img-filter); }\n.dz-signal-pop-signup .np { border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius); box-shadow: 6px 6px 0 var(--foreground); background: var(--card); background: var(--accent); color: var(--accent-foreground); padding: 18px 20px; margin-bottom: 20px; }\n.dz-signal-pop-signup .np b { display: block; font-family: var(--pv-display); font-size: 20px; text-transform: uppercase; margin-bottom: 6px; }\n.dz-signal-pop-signup .np p { margin: 0 0 14px; font-size: 14px; line-height: 1.55; font-weight: 500; }\n.dz-signal-pop-signup .np button { font: inherit; font-size: 14px; font-weight: 700; padding: 11px 22px; border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius-xl); background: var(--card); color: var(--foreground); cursor: pointer; box-shadow: 4px 4px 0 var(--foreground); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }\n.dz-signal-pop-signup .np button:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--foreground); }\n.dz-signal-pop-signup .fm { border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius); box-shadow: 6px 6px 0 var(--foreground); background: var(--card); padding: 26px 26px 24px; transform: rotate(-1.5deg); }\n.dz-signal-pop-signup .fm h1 { font-family: var(--pv-display); font-size: 30px; text-transform: uppercase; margin: 0 0 18px; }\n.dz-signal-pop-signup .f { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }\n.dz-signal-pop-signup .f label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }\n.dz-signal-pop-signup .f input { font: inherit; font-size: 16px; padding: 13px 15px; border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius); background: var(--background); color: var(--foreground); }\n.dz-signal-pop-signup .f input:focus-visible { outline: 3px solid var(--ring); outline-offset: 1px; }\n.dz-signal-pop-signup .f small { font-size: 12.5px; color: var(--muted-foreground); }\n.dz-signal-pop-signup .ck { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.5; margin-bottom: 20px; cursor: pointer; }\n.dz-signal-pop-signup .ck input { accent-color: var(--primary); width: 18px; height: 18px; margin-top: 1px; }\n.dz-signal-pop-signup .go { width: 100%; font: inherit; font-family: var(--pv-display); font-size: 18px; text-transform: uppercase; padding: 15px; border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius); background: var(--primary); color: var(--primary-foreground); box-shadow: 6px 6px 0 var(--foreground); cursor: pointer; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }\n.dz-signal-pop-signup .go:hover { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--foreground); }\n.dz-signal-pop-signup .alt { margin: 14px 0 0; text-align: center; font-size: 14px; font-weight: 600; }\n.dz-signal-pop-signup .alt a { color: var(--foreground); border-bottom: 3px solid var(--primary); text-decoration: none; }\n@media (prefers-reduced-motion: reduce) { .dz-signal-pop-signup *, .dz-signal-pop-signup *::before, .dz-signal-pop-signup *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/signal-pop.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Archivo+Black:wght@400;500;600;700&family=Archivo:wght@400;500;600;700&family=Space+Mono:wght@400;500;600;700&display=swap"
}