{
  "id": "signal-pop-onboarding",
  "name": "Pick Your Habits",
  "theme": "signal-pop",
  "category": "Auth & Onboarding",
  "description": "The first-run screen, where choosing habits is picking big tappable chips and the continue button counts what you picked.",
  "layout": "Full-bleed step, a 3-of-3 dot indicator, then a wrapping field of oversized selectable chips at 48px tall; the primary action is fixed to the bottom edge and states the count.",
  "modules": [
    {
      "key": "steps",
      "name": "Step dots",
      "html": "\n<div class=\"sd\"><i></i><i></i><i class=\"on\"></i><span>Step 3 of 3</span></div>"
    },
    {
      "key": "ask",
      "name": "The question",
      "html": "\n<div class=\"ask\"><h1>What are you<br>working on?</h1><p>Pick up to five. You can change these any time, and nothing is lost when you do.</p></div>"
    },
    {
      "key": "chips",
      "name": "Habit chips",
      "html": "\n<div class=\"chips\">\n  <button type=\"button\" class=\"ch on\">📚 Read</button>\n  <button type=\"button\" class=\"ch on\">🏃 Move</button>\n  <button type=\"button\" class=\"ch\">💧 Water</button>\n  <button type=\"button\" class=\"ch on\">📵 No phone after 9</button>\n  <button type=\"button\" class=\"ch\">🧘 Sit quietly</button>\n  <button type=\"button\" class=\"ch\">✍️ Write</button>\n  <button type=\"button\" class=\"ch\">🛏 Bed by 11</button>\n  <button type=\"button\" class=\"ch\">🥗 Cook</button>\n  <button type=\"button\" class=\"ch\">🎸 Practise</button>\n  <button type=\"button\" class=\"ch\">☎️ Call someone</button>\n  <button type=\"button\" class=\"ch add\">＋ Something else</button>\n</div>"
    },
    {
      "key": "go",
      "name": "Continue bar",
      "html": "\n<footer class=\"go\"><button type=\"button\" class=\"skip\">Skip for now</button><button type=\"button\" class=\"next\">Start with 3 habits</button></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "signal-pop-onboarding",
    "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-onboarding.json",
  "structure": "Full-bleed step, a 3-of-3 dot indicator, then a wrapping field of oversized selectable chips at 48px tall; the primary action is fixed to the bottom edge and states the count.",
  "html": "<div class=\"dz dz-signal-pop-onboarding\" data-design=\"signal-pop-onboarding\" data-theme=\"signal-pop\">\n<section class=\"dz-mod\" data-mod=\"steps\" aria-label=\"Step dots\">\n<div class=\"sd\"><i></i><i></i><i class=\"on\"></i><span>Step 3 of 3</span></div></section>\n<section class=\"dz-mod\" data-mod=\"ask\" aria-label=\"The question\">\n<div class=\"ask\"><h1>What are you<br>working on?</h1><p>Pick up to five. You can change these any time, and nothing is lost when you do.</p></div></section>\n<section class=\"dz-mod\" data-mod=\"chips\" aria-label=\"Habit chips\">\n<div class=\"chips\">\n  <button type=\"button\" class=\"ch on\">📚 Read</button>\n  <button type=\"button\" class=\"ch on\">🏃 Move</button>\n  <button type=\"button\" class=\"ch\">💧 Water</button>\n  <button type=\"button\" class=\"ch on\">📵 No phone after 9</button>\n  <button type=\"button\" class=\"ch\">🧘 Sit quietly</button>\n  <button type=\"button\" class=\"ch\">✍️ Write</button>\n  <button type=\"button\" class=\"ch\">🛏 Bed by 11</button>\n  <button type=\"button\" class=\"ch\">🥗 Cook</button>\n  <button type=\"button\" class=\"ch\">🎸 Practise</button>\n  <button type=\"button\" class=\"ch\">☎️ Call someone</button>\n  <button type=\"button\" class=\"ch add\">＋ Something else</button>\n</div></section>\n<section class=\"dz-mod\" data-mod=\"go\" aria-label=\"Continue bar\">\n<footer class=\"go\"><button type=\"button\" class=\"skip\">Skip for now</button><button type=\"button\" class=\"next\">Start with 3 habits</button></footer></section>\n</div>",
  "css": "\n.dz-signal-pop-onboarding { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: flex; flex-direction: column; min-height: 520px; padding: 30px 34px 0; }\n.dz-signal-pop-onboarding .sd { display: flex; align-items: center; gap: 8px; margin-bottom: 26px; }\n.dz-signal-pop-onboarding .sd i { width: 30px; height: 10px; border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius-xl); background: var(--card); }\n.dz-signal-pop-onboarding .sd .on { background: var(--primary); }\n.dz-signal-pop-onboarding .sd span { margin-left: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted-foreground); }\n.dz-signal-pop-onboarding .ask h1 { font-family: var(--pv-display); font-size: 48px; line-height: .98; text-transform: uppercase; letter-spacing: -.03em; margin: 0 0 12px; }\n.dz-signal-pop-onboarding .ask p { margin: 0 0 26px; font-size: 16px; font-weight: 500; max-width: 40ch; }\n.dz-signal-pop-onboarding .chips { display: flex; flex-wrap: wrap; gap: 12px; }\n.dz-signal-pop-onboarding .ch { font: inherit; font-size: 16px; font-weight: 700; padding: 14px 22px; min-height: 48px; border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius-xl); background: var(--card); color: var(--foreground); box-shadow: 4px 4px 0 var(--foreground); cursor: pointer; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }\n.dz-signal-pop-onboarding .ch:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--foreground); }\n.dz-signal-pop-onboarding .ch.on { background: var(--primary); color: var(--primary-foreground); }\n.dz-signal-pop-onboarding .ch.add { border-style: dashed; box-shadow: none; color: var(--muted-foreground); }\n.dz-signal-pop-onboarding .go { display: flex; align-items: center; gap: 14px; margin: auto -34px 0; padding: 18px 34px; border-top: var(--pv-bw) solid var(--foreground); background: var(--card); }\n.dz-signal-pop-onboarding .skip { font: inherit; font-size: 14px; font-weight: 700; background: none; border: 0; color: var(--muted-foreground); cursor: pointer; text-decoration: underline; }\n.dz-signal-pop-onboarding .next { margin-left: auto; font: inherit; font-family: var(--pv-display); font-size: 17px; text-transform: uppercase; padding: 15px 32px; 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-onboarding .next:hover { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--foreground); }\n@media (prefers-reduced-motion: reduce) { .dz-signal-pop-onboarding *, .dz-signal-pop-onboarding *::before, .dz-signal-pop-onboarding *::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"
}