{
  "id": "signal-pop-settings",
  "name": "Settings",
  "theme": "signal-pop",
  "category": "Settings & Forms",
  "description": "Settings as chunky physical switches with the consequence written next to each one, and the dangerous section visibly walled off.",
  "layout": "Grouped rows inside outlined blocks, each row a switch and a plain-language consequence; the destructive block is separated by a full-width gap and outlined in the destructive token.",
  "modules": [
    {
      "key": "head",
      "name": "Settings header",
      "html": "\n<header class=\"sh\"><h1>Settings</h1><p>Signed in as tunde@example.com · Paid plan, renews 4 March</p></header>"
    },
    {
      "key": "notify",
      "name": "Notification block",
      "html": "\n<section class=\"bk\"><h2>Nudges</h2>\n  <label class=\"rw\"><span class=\"tx\"><b>Daily reminder</b><em>One notification at 09:00. Never more than one.</em></span><span class=\"sw on\"><i></i></span><input type=\"checkbox\" checked class=\"vh\"></label>\n  <label class=\"rw\"><span class=\"tx\"><b>Streak warnings</b><em>Tells you at 21:00 if today is still empty.</em></span><span class=\"sw on\"><i></i></span><input type=\"checkbox\" checked class=\"vh\"></label>\n  <label class=\"rw\"><span class=\"tx\"><b>Weekly summary</b><em>Sunday evening. Numbers only, no encouragement.</em></span><span class=\"sw\"><i></i></span><input type=\"checkbox\" class=\"vh\"></label>\n</section>"
    },
    {
      "key": "privacy",
      "name": "Privacy block",
      "html": "\n<section class=\"bk\"><h2>Privacy</h2>\n  <label class=\"rw\"><span class=\"tx\"><b>Sync across devices</b><em>Encrypted with a key we do not hold. Turning this off leaves the data on this device only.</em></span><span class=\"sw on\"><i></i></span><input type=\"checkbox\" checked class=\"vh\"></label>\n  <label class=\"rw\"><span class=\"tx\"><b>Show me in group counts</b><em>Only ever a number. Your name is never shown to a group.</em></span><span class=\"sw\"><i></i></span><input type=\"checkbox\" class=\"vh\"></label>\n  <div class=\"rw\"><span class=\"tx\"><b>Export everything</b><em>CSV and JSON, downloaded immediately, no email step.</em></span><button type=\"button\" class=\"bt\">Export</button></div>\n</section>"
    },
    {
      "key": "danger",
      "name": "Danger block",
      "html": "\n<section class=\"bk dg\"><h2>Careful</h2>\n  <div class=\"rw\"><span class=\"tx\"><b>Reset all streaks</b><em>History is kept, counters go to zero. Cannot be undone.</em></span><button type=\"button\" class=\"bt warn\">Reset</button></div>\n  <div class=\"rw\"><span class=\"tx\"><b>Delete account</b><em>Everything, immediately, including backups. Export first.</em></span><button type=\"button\" class=\"bt warn\">Delete</button></div>\n</section>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "signal-pop-settings",
    "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-settings.json",
  "structure": "Grouped rows inside outlined blocks, each row a switch and a plain-language consequence; the destructive block is separated by a full-width gap and outlined in the destructive token.",
  "html": "<div class=\"dz dz-signal-pop-settings\" data-design=\"signal-pop-settings\" data-theme=\"signal-pop\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Settings header\">\n<header class=\"sh\"><h1>Settings</h1><p>Signed in as tunde@example.com · Paid plan, renews 4 March</p></header></section>\n<section class=\"dz-mod\" data-mod=\"notify\" aria-label=\"Notification block\">\n<section class=\"bk\"><h2>Nudges</h2>\n  <label class=\"rw\"><span class=\"tx\"><b>Daily reminder</b><em>One notification at 09:00. Never more than one.</em></span><span class=\"sw on\"><i></i></span><input type=\"checkbox\" checked class=\"vh\"></label>\n  <label class=\"rw\"><span class=\"tx\"><b>Streak warnings</b><em>Tells you at 21:00 if today is still empty.</em></span><span class=\"sw on\"><i></i></span><input type=\"checkbox\" checked class=\"vh\"></label>\n  <label class=\"rw\"><span class=\"tx\"><b>Weekly summary</b><em>Sunday evening. Numbers only, no encouragement.</em></span><span class=\"sw\"><i></i></span><input type=\"checkbox\" class=\"vh\"></label>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"privacy\" aria-label=\"Privacy block\">\n<section class=\"bk\"><h2>Privacy</h2>\n  <label class=\"rw\"><span class=\"tx\"><b>Sync across devices</b><em>Encrypted with a key we do not hold. Turning this off leaves the data on this device only.</em></span><span class=\"sw on\"><i></i></span><input type=\"checkbox\" checked class=\"vh\"></label>\n  <label class=\"rw\"><span class=\"tx\"><b>Show me in group counts</b><em>Only ever a number. Your name is never shown to a group.</em></span><span class=\"sw\"><i></i></span><input type=\"checkbox\" class=\"vh\"></label>\n  <div class=\"rw\"><span class=\"tx\"><b>Export everything</b><em>CSV and JSON, downloaded immediately, no email step.</em></span><button type=\"button\" class=\"bt\">Export</button></div>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"danger\" aria-label=\"Danger block\">\n<section class=\"bk dg\"><h2>Careful</h2>\n  <div class=\"rw\"><span class=\"tx\"><b>Reset all streaks</b><em>History is kept, counters go to zero. Cannot be undone.</em></span><button type=\"button\" class=\"bt warn\">Reset</button></div>\n  <div class=\"rw\"><span class=\"tx\"><b>Delete account</b><em>Everything, immediately, including backups. Export first.</em></span><button type=\"button\" class=\"bt warn\">Delete</button></div>\n</section></section>\n</div>",
  "css": "\n.dz-signal-pop-settings { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 28px 30px 30px; max-width: 46rem; margin: 0 auto; }\n.dz-signal-pop-settings .sh { margin-bottom: 22px; }\n.dz-signal-pop-settings .sh h1 { font-family: var(--pv-display); font-size: 38px; text-transform: uppercase; margin: 0 0 5px; }\n.dz-signal-pop-settings .sh p { margin: 0; font-size: 13.5px; color: var(--muted-foreground); }\n.dz-signal-pop-settings .bk { border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius); box-shadow: 6px 6px 0 var(--foreground); background: var(--card); padding: 6px 20px 8px; margin-bottom: 18px; }\n.dz-signal-pop-settings .bk h2 { font-family: var(--pv-display); font-size: 15px; text-transform: uppercase; letter-spacing: .08em; margin: 16px 0 4px; }\n.dz-signal-pop-settings .rw { display: flex; align-items: center; gap: 20px; padding: 14px 0; border-top: var(--pv-bw) solid var(--foreground); cursor: pointer; }\n.dz-signal-pop-settings .bk h2 + .rw { border-top: 0; }\n.dz-signal-pop-settings .tx b { display: block; font-size: 15.5px; }\n.dz-signal-pop-settings .tx em { display: block; font-style: normal; margin-top: 3px; font-size: 13px; line-height: 1.5; color: var(--muted-foreground); max-width: 52ch; }\n.dz-signal-pop-settings .sw { flex: none; margin-left: auto; width: 62px; height: 34px; border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius-xl); background: var(--muted); display: flex; align-items: center; padding: 0 3px; transition: background var(--dur) var(--ease); }\n.dz-signal-pop-settings .sw i { display: block; width: 26px; height: 26px; border: var(--pv-bw) solid var(--foreground); border-radius: 50%; background: var(--card); transition: transform var(--dur) var(--ease); }\n.dz-signal-pop-settings .sw.on { background: var(--primary); }\n.dz-signal-pop-settings .sw.on i { transform: translateX(28px); }\n.dz-signal-pop-settings .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n.dz-signal-pop-settings .vh:focus-visible + .sw, .dz-signal-pop-settings .rw:focus-within .sw { outline: 3px solid var(--ring); outline-offset: 2px; }\n.dz-signal-pop-settings .bt { flex: none; margin-left: auto; font: inherit; font-family: var(--pv-display); font-size: 13px; text-transform: uppercase; padding: 10px 20px; border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius-sm); 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-settings .bt:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--foreground); }\n.dz-signal-pop-settings .dg { border-color: var(--destructive); box-shadow: 6px 6px 0 var(--destructive); margin-top: 30px; }\n.dz-signal-pop-settings .dg h2 { color: var(--destructive); }\n.dz-signal-pop-settings .dg .rw { border-top-color: var(--destructive); }\n.dz-signal-pop-settings .bt.warn { border-color: var(--destructive); color: var(--destructive); box-shadow: 4px 4px 0 var(--destructive); }\n.dz-signal-pop-settings .bt.warn:hover { box-shadow: 2px 2px 0 var(--destructive); }\n@media (prefers-reduced-motion: reduce) { .dz-signal-pop-settings *, .dz-signal-pop-settings *::before, .dz-signal-pop-settings *::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"
}