{
  "id": "bloom-lab-prefs",
  "name": "Notification Preferences",
  "theme": "bloom-lab",
  "category": "Settings & Forms",
  "description": "Settings written as sentences with the controls sitting inside them, so what you are turning on is legible without reading a label twice.",
  "layout": "A single 620px column of pill-shaped rows where each row is one sentence with an inline toggle at the end, grouped by three plain headings and nothing else.",
  "modules": [
    {
      "key": "head",
      "name": "Header",
      "html": "\n<header class=\"hd\"><h1>Notifications</h1><p>Everything is off until you turn it on. We never message you about anything we are selling.</p></header>"
    },
    {
      "key": "results",
      "name": "Results group",
      "html": "\n<section class=\"gp\"><h2>Results</h2>\n  <label class=\"rw\"><span>Tell me as soon as a panel is <b>ready to read</b>.</span><input type=\"checkbox\" checked class=\"tg\"></label>\n  <label class=\"rw\"><span>Tell me if a marker moves <b>out of range</b> between panels.</span><input type=\"checkbox\" checked class=\"tg\"></label>\n  <label class=\"rw\"><span>Tell me when a marker has moved by more than <b>20%</b>, in either direction.</span><input type=\"checkbox\" class=\"tg\"></label>\n</section>"
    },
    {
      "key": "appts",
      "name": "Appointments group",
      "html": "\n<section class=\"gp\"><h2>Appointments</h2>\n  <label class=\"rw\"><span>Remind me <b>the day before</b> a draw.</span><input type=\"checkbox\" checked class=\"tg\"></label>\n  <label class=\"rw\"><span>Remind me <b>two hours before</b>, with the clinic address.</span><input type=\"checkbox\" checked class=\"tg\"></label>\n  <label class=\"rw\"><span>Tell me when a <b>closer clinic</b> opens a slot.</span><input type=\"checkbox\" class=\"tg\"></label>\n</section>"
    },
    {
      "key": "channel",
      "name": "Channel group",
      "html": "\n<section class=\"gp\"><h2>How</h2>\n  <div class=\"ch\"><span>Send these by</span><div class=\"opts\"><button type=\"button\" class=\"on\">Email</button><button type=\"button\">SMS</button><button type=\"button\">Push</button></div></div>\n  <label class=\"rw\"><span>Never message me between <b>21:00 and 08:00</b>, even for out-of-range results.</span><input type=\"checkbox\" checked class=\"tg\"></label>\n</section>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "bloom-lab-prefs",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-01T19:48:21+09:00",
    "updatedAt": "2026-09-01T19:48:21+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/bloom-lab-prefs.json",
  "structure": "A single 620px column of pill-shaped rows where each row is one sentence with an inline toggle at the end, grouped by three plain headings and nothing else.",
  "html": "<div class=\"dz dz-bloom-lab-prefs\" data-design=\"bloom-lab-prefs\" data-theme=\"bloom-lab\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Header\">\n<header class=\"hd\"><h1>Notifications</h1><p>Everything is off until you turn it on. We never message you about anything we are selling.</p></header></section>\n<section class=\"dz-mod\" data-mod=\"results\" aria-label=\"Results group\">\n<section class=\"gp\"><h2>Results</h2>\n  <label class=\"rw\"><span>Tell me as soon as a panel is <b>ready to read</b>.</span><input type=\"checkbox\" checked class=\"tg\"></label>\n  <label class=\"rw\"><span>Tell me if a marker moves <b>out of range</b> between panels.</span><input type=\"checkbox\" checked class=\"tg\"></label>\n  <label class=\"rw\"><span>Tell me when a marker has moved by more than <b>20%</b>, in either direction.</span><input type=\"checkbox\" class=\"tg\"></label>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"appts\" aria-label=\"Appointments group\">\n<section class=\"gp\"><h2>Appointments</h2>\n  <label class=\"rw\"><span>Remind me <b>the day before</b> a draw.</span><input type=\"checkbox\" checked class=\"tg\"></label>\n  <label class=\"rw\"><span>Remind me <b>two hours before</b>, with the clinic address.</span><input type=\"checkbox\" checked class=\"tg\"></label>\n  <label class=\"rw\"><span>Tell me when a <b>closer clinic</b> opens a slot.</span><input type=\"checkbox\" class=\"tg\"></label>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"channel\" aria-label=\"Channel group\">\n<section class=\"gp\"><h2>How</h2>\n  <div class=\"ch\"><span>Send these by</span><div class=\"opts\"><button type=\"button\" class=\"on\">Email</button><button type=\"button\">SMS</button><button type=\"button\">Push</button></div></div>\n  <label class=\"rw\"><span>Never message me between <b>21:00 and 08:00</b>, even for out-of-range results.</span><input type=\"checkbox\" checked class=\"tg\"></label>\n</section></section>\n</div>",
  "css": "\n.dz-bloom-lab-prefs { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: minmax(0, 620px); justify-content: center; padding: 30px 30px 40px; row-gap: 26px; align-content: start; }\n.dz-bloom-lab-prefs .hd h1 { font-family: var(--pv-display); font-size: 38px; font-weight: 600; letter-spacing: -.025em; margin: 0 0 8px; }\n.dz-bloom-lab-prefs .hd p { font-size: 15.5px; color: var(--muted-foreground); margin: 0; }\n.dz-bloom-lab-prefs .gp h2 { font-size: 13px; font-weight: 600; color: var(--muted-foreground); margin: 0 0 12px; }\n.dz-bloom-lab-prefs .rw { background: var(--card); border-radius: var(--pv-radius); box-shadow: 0 14px 34px -18px color-mix(in srgb, var(--primary) 55%, transparent), 0 2px 6px -3px color-mix(in srgb, var(--foreground) 12%, transparent); display: flex; align-items: center; gap: 18px; padding: 16px 22px; margin-bottom: 12px; border-radius: 999px; cursor: pointer; transition: transform var(--dur) var(--ease); }\n.dz-bloom-lab-prefs .rw:hover { transform: translateX(3px); }\n.dz-bloom-lab-prefs .rw span { flex: 1; font-size: 15.5px; line-height: 1.45; color: var(--muted-foreground); }\n.dz-bloom-lab-prefs .rw b { color: var(--foreground); font-weight: 600; }\n.dz-bloom-lab-prefs .tg { appearance: none; width: 46px; height: 26px; border-radius: 999px; background: var(--muted); border: 0; position: relative; cursor: pointer; flex: none; transition: background var(--dur) var(--ease); }\n.dz-bloom-lab-prefs .tg::after { content: \"\"; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 999px; background: var(--card); box-shadow: 0 2px 5px -1px color-mix(in srgb, var(--foreground) 30%, transparent); transition: transform var(--dur) cubic-bezier(0.34, 1.4, 0.64, 1); }\n.dz-bloom-lab-prefs .tg:checked { background: var(--primary); }\n.dz-bloom-lab-prefs .tg:checked::after { transform: translateX(20px); }\n.dz-bloom-lab-prefs .tg:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }\n.dz-bloom-lab-prefs .ch { background: var(--card); border-radius: var(--pv-radius); box-shadow: 0 14px 34px -18px color-mix(in srgb, var(--primary) 55%, transparent), 0 2px 6px -3px color-mix(in srgb, var(--foreground) 12%, transparent); display: flex; align-items: center; gap: 18px; padding: 14px 22px; margin-bottom: 12px; border-radius: 999px; }\n.dz-bloom-lab-prefs .ch > span { flex: 1; font-size: 15.5px; color: var(--muted-foreground); }\n.dz-bloom-lab-prefs .opts { display: flex; gap: 8px; }\n.dz-bloom-lab-prefs .opts button { font: inherit; font-size: 13.5px; background: transparent; color: var(--muted-foreground); border: var(--pv-bw) solid var(--border); border-radius: 999px; padding: 8px 16px; cursor: pointer; transition: all var(--dur) var(--ease); }\n.dz-bloom-lab-prefs .opts button:hover { border-color: var(--primary); color: var(--foreground); }\n.dz-bloom-lab-prefs .opts .on { background: color-mix(in srgb, var(--primary) 15%, transparent); border-color: var(--primary); color: var(--foreground); font-weight: 600; }\n@media (prefers-reduced-motion: reduce) { .dz-bloom-lab-prefs *, .dz-bloom-lab-prefs *::before, .dz-bloom-lab-prefs *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/bloom-lab.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=DM+Mono:wght@400;500;600;700&display=swap"
}