{
  "id": "lilac-quiet-welcome",
  "name": "First Night",
  "theme": "lilac-quiet",
  "category": "Auth & Onboarding",
  "description": "An onboarding that asks one thing and then gets out of the way, with the account step deliberately postponed to the seventh day.",
  "layout": "A single centred card on an almost empty page with the whole flow shown as four faint words above it, only the current one at full strength.",
  "modules": [
    {
      "key": "steps",
      "name": "Faint stepper",
      "html": "\n<header class=\"sp\"><span class=\"on\">Choose a time</span><span>Write once</span><span>Come back</span><span>Make an account</span></header>"
    },
    {
      "key": "card",
      "name": "Time card",
      "html": "\n<section class=\"cd\"><span class=\"k\">One question</span>\n<h1>When would you like to be asked?</h1>\n<p>We will send one prompt at this time. You can change it whenever, and ignoring it has no consequence.</p>\n<div class=\"times\"><button type=\"button\">07:00</button><button type=\"button\">12:30</button><button type=\"button\" class=\"on\">21:00</button><button type=\"button\">22:30</button><button type=\"button\">Never — I will come to it</button></div>\n<button type=\"button\" class=\"go\">That one</button></section>"
    },
    {
      "key": "reassure",
      "name": "Reassurance",
      "html": "\n<footer class=\"rs\"><p>You will not be asked for an email address for seven days. If you leave before then, nothing was ever stored on our side.</p></footer>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "lilac-quiet-welcome",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-01T20:05:48+09:00",
    "updatedAt": "2026-09-01T20:05:48+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/lilac-quiet-welcome.json",
  "structure": "A single centred card on an almost empty page with the whole flow shown as four faint words above it, only the current one at full strength.",
  "html": "<div class=\"dz dz-lilac-quiet-welcome\" data-design=\"lilac-quiet-welcome\" data-theme=\"lilac-quiet\">\n<section class=\"dz-mod\" data-mod=\"steps\" aria-label=\"Faint stepper\">\n<header class=\"sp\"><span class=\"on\">Choose a time</span><span>Write once</span><span>Come back</span><span>Make an account</span></header></section>\n<section class=\"dz-mod\" data-mod=\"card\" aria-label=\"Time card\">\n<section class=\"cd\"><span class=\"k\">One question</span>\n<h1>When would you like to be asked?</h1>\n<p>We will send one prompt at this time. You can change it whenever, and ignoring it has no consequence.</p>\n<div class=\"times\"><button type=\"button\">07:00</button><button type=\"button\">12:30</button><button type=\"button\" class=\"on\">21:00</button><button type=\"button\">22:30</button><button type=\"button\">Never — I will come to it</button></div>\n<button type=\"button\" class=\"go\">That one</button></section></section>\n<section class=\"dz-mod\" data-mod=\"reassure\" aria-label=\"Reassurance\">\n<footer class=\"rs\"><p>You will not be asked for an email address for seven days. If you leave before then, nothing was ever stored on our side.</p></footer></section>\n</div>",
  "css": "\n.dz-lilac-quiet-welcome { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: minmax(0, 560px); justify-content: center; align-content: center; min-height: 540px; padding: 34px; row-gap: 26px; }\n.dz-lilac-quiet-welcome .sp { display: flex; justify-content: center; gap: 26px; }\n.dz-lilac-quiet-welcome .sp span { font-size: 12.5px; color: color-mix(in srgb, var(--muted-foreground) 55%, transparent); }\n.dz-lilac-quiet-welcome .sp .on { color: var(--primary); }\n.dz-lilac-quiet-welcome .cd { background: var(--card); border-radius: var(--pv-radius); box-shadow: 0 16px 40px -22px color-mix(in srgb, var(--primary) 45%, transparent); padding: 34px 34px 30px; text-align: center; }\n.dz-lilac-quiet-welcome .k { font-size: 11.5px; color: var(--muted-foreground); display: block; }\n.dz-lilac-quiet-welcome .cd h1 { font-family: var(--pv-display); font-size: 34px; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; margin: 10px 0 12px; }\n.dz-lilac-quiet-welcome .cd p { font-size: 15.5px; line-height: 1.6; color: var(--muted-foreground); margin: 0 0 24px; }\n.dz-lilac-quiet-welcome .times { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 26px; }\n.dz-lilac-quiet-welcome .times button { font: inherit; font-size: 15px; font-family: var(--pv-mono); background: transparent; color: var(--muted-foreground); border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius-md); padding: 11px 20px; cursor: pointer; transition: all var(--dur-slow) var(--ease); }\n.dz-lilac-quiet-welcome .times button:hover { color: var(--foreground); border-color: color-mix(in srgb, var(--primary) 45%, transparent); }\n.dz-lilac-quiet-welcome .times .on { background: color-mix(in srgb, var(--primary) 14%, transparent); border-color: var(--primary); color: var(--foreground); }\n.dz-lilac-quiet-welcome .times button:last-child { font-family: var(--pv-body); }\n.dz-lilac-quiet-welcome .go { font: inherit; font-size: 15px; background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: var(--pv-radius-md); padding: 13px 40px; cursor: pointer; }\n.dz-lilac-quiet-welcome .rs p { font-size: 13.5px; line-height: 1.6; color: var(--muted-foreground); text-align: center; margin: 0; }\n@media (prefers-reduced-motion: reduce) { .dz-lilac-quiet-welcome *, .dz-lilac-quiet-welcome *::before, .dz-lilac-quiet-welcome *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/lilac-quiet.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=Fira+Mono:wght@400;500;600;700&display=swap"
}