{
  "id": "quiet-clinic-booking",
  "name": "Appointment Booking",
  "theme": "quiet-clinic",
  "category": "Settings & Forms",
  "description": "A booking flow that shows real named slots rather than a calendar grid, because a grid asks you to hunt and a list asks you to choose.",
  "layout": "Day headings with a vertical list of full-width 56px slot buttons underneath; the accessibility and interpreter needs sit above the slots, not buried in a later step.",
  "modules": [
    {
      "key": "head",
      "name": "Booking header",
      "html": "\n<header class=\"bh\"><h1>Book an appointment</h1><p>Respiratory clinic · Dr Priya Sandhu · about 20 minutes</p></header>"
    },
    {
      "key": "needs",
      "name": "Access needs",
      "html": "\n<section class=\"nd\"><h2>Before you choose a time</h2><label class=\"ck\"><input type=\"checkbox\"><span><b>I need step-free access</b><em>We will only show rooms on the ground floor or with lift access.</em></span></label><label class=\"ck\"><input type=\"checkbox\"><span><b>I need an interpreter</b><em>Adds about a week, and we will call to confirm the language.</em></span></label><label class=\"ck\"><input type=\"checkbox\" checked><span><b>A longer appointment would help</b><em>Doubles the slot to 40 minutes. No explanation needed.</em></span></label></section>"
    },
    {
      "key": "slots",
      "name": "Slot list",
      "html": "\n<section class=\"sl\">\n  <h2>Available times</h2>\n  <h3>Thursday 24 July</h3>\n  <div class=\"ss\"><button type=\"button\" class=\"on\">10:20 <span>Ground floor, room 4</span></button><button type=\"button\">11:40 <span>First floor, room 12 · lift</span></button><button type=\"button\">15:00 <span>Ground floor, room 4</span></button></div>\n  <h3>Friday 25 July</h3>\n  <div class=\"ss\"><button type=\"button\">09:00 <span>Ground floor, room 2</span></button><button type=\"button\">14:20 <span>First floor, room 12 · lift</span></button></div>\n  <h3>Monday 28 July</h3>\n  <div class=\"ss\"><button type=\"button\">11:00 <span>Ground floor, room 4</span></button><button type=\"button\">16:40 <span>Last appointment of the day</span></button></div>\n</section>"
    },
    {
      "key": "confirm",
      "name": "Confirm bar",
      "html": "\n<footer class=\"cf\"><div><b>Thursday 24 July, 10:20</b><span>40 minutes · ground floor, room 4</span></div><button type=\"button\" class=\"go\">Confirm this time</button></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "quiet-clinic-booking",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-08-29T18:59:53+09:00",
    "updatedAt": "2026-08-29T18:59:53+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/quiet-clinic-booking.json",
  "structure": "Day headings with a vertical list of full-width 56px slot buttons underneath; the accessibility and interpreter needs sit above the slots, not buried in a later step.",
  "html": "<div class=\"dz dz-quiet-clinic-booking\" data-design=\"quiet-clinic-booking\" data-theme=\"quiet-clinic\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Booking header\">\n<header class=\"bh\"><h1>Book an appointment</h1><p>Respiratory clinic · Dr Priya Sandhu · about 20 minutes</p></header></section>\n<section class=\"dz-mod\" data-mod=\"needs\" aria-label=\"Access needs\">\n<section class=\"nd\"><h2>Before you choose a time</h2><label class=\"ck\"><input type=\"checkbox\"><span><b>I need step-free access</b><em>We will only show rooms on the ground floor or with lift access.</em></span></label><label class=\"ck\"><input type=\"checkbox\"><span><b>I need an interpreter</b><em>Adds about a week, and we will call to confirm the language.</em></span></label><label class=\"ck\"><input type=\"checkbox\" checked><span><b>A longer appointment would help</b><em>Doubles the slot to 40 minutes. No explanation needed.</em></span></label></section></section>\n<section class=\"dz-mod\" data-mod=\"slots\" aria-label=\"Slot list\">\n<section class=\"sl\">\n  <h2>Available times</h2>\n  <h3>Thursday 24 July</h3>\n  <div class=\"ss\"><button type=\"button\" class=\"on\">10:20 <span>Ground floor, room 4</span></button><button type=\"button\">11:40 <span>First floor, room 12 · lift</span></button><button type=\"button\">15:00 <span>Ground floor, room 4</span></button></div>\n  <h3>Friday 25 July</h3>\n  <div class=\"ss\"><button type=\"button\">09:00 <span>Ground floor, room 2</span></button><button type=\"button\">14:20 <span>First floor, room 12 · lift</span></button></div>\n  <h3>Monday 28 July</h3>\n  <div class=\"ss\"><button type=\"button\">11:00 <span>Ground floor, room 4</span></button><button type=\"button\">16:40 <span>Last appointment of the day</span></button></div>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"confirm\" aria-label=\"Confirm bar\">\n<footer class=\"cf\"><div><b>Thursday 24 July, 10:20</b><span>40 minutes · ground floor, room 4</span></div><button type=\"button\" class=\"go\">Confirm this time</button></footer></section>\n</div>",
  "css": "\n.dz-quiet-clinic-booking { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 26px 30px 0; display: flex; flex-direction: column; min-height: 540px; }\n.dz-quiet-clinic-booking .bh { max-width: 44rem; }\n.dz-quiet-clinic-booking .bh h1 { font-size: 32px; font-weight: 700; margin: 0 0 6px; }\n.dz-quiet-clinic-booking .bh p { margin: 0 0 24px; font-size: 17px; color: var(--muted-foreground); }\n.dz-quiet-clinic-booking h2 { font-size: 19px; font-weight: 700; margin: 0 0 14px; }\n.dz-quiet-clinic-booking .nd { max-width: 44rem; background: var(--card); border-radius: var(--pv-radius); padding: 22px 24px; margin-bottom: 26px; box-shadow: 0 2px 10px color-mix(in srgb, var(--foreground) 6%, transparent); }\n.dz-quiet-clinic-booking .ck { display: flex; align-items: flex-start; gap: 14px; min-height: 48px; padding: 10px 0; cursor: pointer; }\n.dz-quiet-clinic-booking .ck input { accent-color: var(--primary); width: 22px; height: 22px; margin-top: 3px; flex: none; }\n.dz-quiet-clinic-booking .ck b { display: block; font-size: 17px; font-weight: 600; }\n.dz-quiet-clinic-booking .ck em { display: block; font-style: normal; margin-top: 3px; font-size: 15px; line-height: 1.55; color: var(--muted-foreground); }\n.dz-quiet-clinic-booking .sl { max-width: 44rem; }\n.dz-quiet-clinic-booking .sl h3 { font-size: 16px; font-weight: 700; color: var(--primary); margin: 20px 0 10px; }\n.dz-quiet-clinic-booking .ss { display: flex; flex-direction: column; gap: 10px; }\n.dz-quiet-clinic-booking .ss button { display: flex; align-items: baseline; gap: 16px; font: inherit; font-size: 19px; font-weight: 600; text-align: left; min-height: 56px; padding: 0 22px; border: 2px solid var(--border); border-radius: var(--pv-radius); background: var(--card); color: var(--foreground); cursor: pointer; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }\n.dz-quiet-clinic-booking .ss button:hover { background: var(--secondary); }\n.dz-quiet-clinic-booking .ss button.on { border-color: var(--primary); background: var(--accent); color: var(--accent-foreground); }\n.dz-quiet-clinic-booking .ss span { font-size: 15px; font-weight: 400; color: var(--muted-foreground); }\n.dz-quiet-clinic-booking .ss button.on span { color: var(--accent-foreground); opacity: .85; }\n.dz-quiet-clinic-booking .cf { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 26px -30px 0; padding: 18px 30px; background: var(--card); border-top: var(--pv-bw) solid var(--border); }\n.dz-quiet-clinic-booking .cf b { display: block; font-size: 18px; font-weight: 700; }\n.dz-quiet-clinic-booking .cf span { font-size: 15px; color: var(--muted-foreground); }\n.dz-quiet-clinic-booking .go { font: inherit; font-size: 17px; font-weight: 600; min-height: 52px; padding: 0 30px; border: 0; border-radius: var(--pv-radius); background: var(--primary); color: var(--primary-foreground); cursor: pointer; transition: opacity var(--dur) var(--ease); }\n.dz-quiet-clinic-booking .go:hover { opacity: .9; }\n@media (prefers-reduced-motion: reduce) { .dz-quiet-clinic-booking *, .dz-quiet-clinic-booking *::before, .dz-quiet-clinic-booking *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/quiet-clinic.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap"
}