{
  "id": "lilac-quiet-front",
  "name": "Calm Front",
  "theme": "lilac-quiet",
  "category": "Landing",
  "description": "A landing page for a calm product that behaves calmly: one sentence, one image, one link, and three quarters of the screen left as lilac.",
  "layout": "A 66ch column pinned to the left third with the remaining columns deliberately empty except for one soft image that fades in from the right edge.",
  "modules": [
    {
      "key": "nav",
      "name": "Navigation",
      "html": "\n<header class=\"nv\"><span class=\"br\">quiet</span><nav><a href=\"#\">How it works</a><a href=\"#\">Privacy</a><a href=\"#\">Pricing</a></nav><a class=\"cta\" href=\"#\">Start writing</a></header>"
    },
    {
      "key": "say",
      "name": "The sentence",
      "html": "\n<div class=\"sy\"><h1>A place to put the thought down so you can stop carrying it.</h1>\n<p>One prompt a day. No streaks to protect, no badges, no feed. Everything is encrypted on your device and we could not read it if we wanted to.</p>\n<a class=\"un\" href=\"#\">Start writing — free, no account for seven days</a></div>"
    },
    {
      "key": "plate",
      "name": "Soft plate",
      "html": "\n<figure class=\"pl\"><img src=\"{{ART window}}\" alt=\"{{ARTALT window}}\"></figure>"
    },
    {
      "key": "three",
      "name": "Three notes",
      "html": "\n<section class=\"th\">\n  <div><span class=\"n\">01</span><p>The prompt changes daily and you can ignore it. About a third of entries do.</p></div>\n  <div><span class=\"n\">02</span><p>Nothing is shared, ever. There is no mechanism in the product for sharing an entry.</p></div>\n  <div><span class=\"n\">03</span><p>Export everything as plain text in one tap, including after you cancel.</p></div>\n</section>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "lilac-quiet-front",
    "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-front.json",
  "structure": "A 66ch column pinned to the left third with the remaining columns deliberately empty except for one soft image that fades in from the right edge.",
  "html": "<div class=\"dz dz-lilac-quiet-front\" data-design=\"lilac-quiet-front\" data-theme=\"lilac-quiet\">\n<section class=\"dz-mod\" data-mod=\"nav\" aria-label=\"Navigation\">\n<header class=\"nv\"><span class=\"br\">quiet</span><nav><a href=\"#\">How it works</a><a href=\"#\">Privacy</a><a href=\"#\">Pricing</a></nav><a class=\"cta\" href=\"#\">Start writing</a></header></section>\n<section class=\"dz-mod\" data-mod=\"say\" aria-label=\"The sentence\">\n<div class=\"sy\"><h1>A place to put the thought down so you can stop carrying it.</h1>\n<p>One prompt a day. No streaks to protect, no badges, no feed. Everything is encrypted on your device and we could not read it if we wanted to.</p>\n<a class=\"un\" href=\"#\">Start writing — free, no account for seven days</a></div></section>\n<section class=\"dz-mod\" data-mod=\"plate\" aria-label=\"Soft plate\">\n<figure class=\"pl\"><img src=\"https://designlookbook.dev/assets/img/lilac-quiet-window.webp\" alt=\"Lilac light falling through a window onto a plain wall\"></figure></section>\n<section class=\"dz-mod\" data-mod=\"three\" aria-label=\"Three notes\">\n<section class=\"th\">\n  <div><span class=\"n\">01</span><p>The prompt changes daily and you can ignore it. About a third of entries do.</p></div>\n  <div><span class=\"n\">02</span><p>Nothing is shared, ever. There is no mechanism in the product for sharing an entry.</p></div>\n  <div><span class=\"n\">03</span><p>Export everything as plain text in one tap, including after you cancel.</p></div>\n</section></section>\n</div>",
  "css": "\n.dz-lilac-quiet-front { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; padding-bottom: 40px; }\n.dz-lilac-quiet-front .nv { grid-column: 1 / -1; display: flex; align-items: center; gap: 26px; padding: 22px 34px; }\n.dz-lilac-quiet-front .br { font-family: var(--pv-display); font-size: 21px; font-weight: 600; color: var(--primary); }\n.dz-lilac-quiet-front .nv nav { display: flex; gap: 24px; margin-left: 16px; }\n.dz-lilac-quiet-front .nv a { font-size: 14px; color: var(--muted-foreground); text-decoration: none; }\n.dz-lilac-quiet-front .nv a:hover { color: var(--foreground); }\n.dz-lilac-quiet-front .cta { margin-left: auto; font-size: 14px; background: var(--primary); color: var(--primary-foreground) !important; border-radius: var(--pv-radius-md); padding: 11px 22px; }\n.dz-lilac-quiet-front .sy { grid-column: 1 / 7; align-self: center; padding: 60px 0 60px 34px; max-width: 66ch; }\n.dz-lilac-quiet-front .sy h1 { font-family: var(--pv-display); font-size: 46px; font-weight: 600; line-height: 1.14; letter-spacing: -.025em; margin: 0 0 20px; }\n.dz-lilac-quiet-front .sy p { font-size: 17px; line-height: 1.66; color: var(--muted-foreground); margin: 0 0 26px; }\n.dz-lilac-quiet-front .un { display: inline-block; font-size: 15px; color: var(--foreground); text-decoration: none; padding-bottom: 5px; background-image: linear-gradient(var(--accent), var(--accent)); background-size: 0 2px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size var(--dur-slow) var(--ease); background-size: 30% 2px; }\n.dz-lilac-quiet-front .un:hover { background-size: 100% 2px; }\n.dz-lilac-quiet-front .pl { grid-column: 8 / -1; grid-row: 2; margin: 0; align-self: center; }\n.dz-lilac-quiet-front .pl img { width: 100%; height: 340px; object-fit: cover; display: block; border-radius: var(--pv-radius-xl) 0 0 var(--pv-radius-xl); filter: var(--img-filter); mask-image: linear-gradient(90deg, transparent, var(--foreground) 22%); }\n.dz-lilac-quiet-front .th { grid-column: 1 / 9; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; padding: 0 0 0 34px; }\n.dz-lilac-quiet-front .n { font-family: var(--pv-mono); font-size: 12px; color: var(--accent); }\n.dz-lilac-quiet-front .th p { font-size: 15px; line-height: 1.62; color: var(--muted-foreground); margin: 8px 0 0; }\n@media (prefers-reduced-motion: reduce) { .dz-lilac-quiet-front *, .dz-lilac-quiet-front *::before, .dz-lilac-quiet-front *::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"
}