{
  "id": "lilac-quiet-today",
  "name": "Today",
  "theme": "lilac-quiet",
  "category": "App Shell",
  "description": "A journalling home that opens on a single prompt with the archive folded away, so the first thing on screen is a question rather than a list.",
  "layout": "A 240px rail of quiet nav beside a centred 620px column, with the prompt card floating alone in the upper half and past entries appearing only below the fold.",
  "modules": [
    {
      "key": "rail",
      "name": "Rail",
      "html": "\n<nav class=\"rl\"><span class=\"br\">quiet</span>\n<ul><li class=\"on\">Today</li><li>Entries</li><li>Prompts</li><li>Patterns</li><li>Settings</li></ul>\n<div class=\"st\"><span class=\"k\">This week</span><b>5<i>/7</i></b><span class=\"m\">days written</span></div></nav>"
    },
    {
      "key": "prompt",
      "name": "Prompt card",
      "html": "\n<section class=\"pc\"><span class=\"k\">Thursday 4 September</span>\n<h1>What did you decide today that you had been putting off?</h1>\n<textarea rows=\"5\" placeholder=\"Write as much or as little as you like.\">I finally told the team that the March date is not real. It went better than the four weeks I spent not saying it.</textarea>\n<footer><span class=\"m\">Saved 12 seconds ago</span><button type=\"button\" class=\"go\">Done for today</button></footer></section>"
    },
    {
      "key": "streak",
      "name": "Streak strip",
      "html": "\n<div class=\"sk\"><span class=\"k\">Recent</span><div class=\"dots\"><i class=\"on\"></i><i class=\"on\"></i><i></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"now\"></i></div><span class=\"m\">Five of the last seven. The gaps are fine.</span></div>"
    },
    {
      "key": "past",
      "name": "Past entries",
      "html": "\n<section class=\"ps\"><h2 class=\"k\">Earlier</h2>\n<ol>\n  <li><span class=\"d\">3 Sep</span><b class=\"un\">On being the last one to leave</b><p>Nobody noticed, which was the point, and that is worth sitting with.</p></li>\n  <li><span class=\"d\">2 Sep</span><b class=\"un\">A conversation I rehearsed for a week</b><p>Four minutes. It took four minutes.</p></li>\n  <li><span class=\"d\">31 Aug</span><b class=\"un\">Sunday, and the light was good</b><p>Nothing happened. Writing that down anyway.</p></li>\n</ol></section>"
    }
  ],
  "moduleCount": 4,
  "reorderable": false,
  "meta": {
    "id": "lilac-quiet-today",
    "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-today.json",
  "structure": "A 240px rail of quiet nav beside a centred 620px column, with the prompt card floating alone in the upper half and past entries appearing only below the fold.",
  "html": "<div class=\"dz dz-lilac-quiet-today\" data-design=\"lilac-quiet-today\" data-theme=\"lilac-quiet\">\n<section class=\"dz-mod\" data-mod=\"rail\" aria-label=\"Rail\">\n<nav class=\"rl\"><span class=\"br\">quiet</span>\n<ul><li class=\"on\">Today</li><li>Entries</li><li>Prompts</li><li>Patterns</li><li>Settings</li></ul>\n<div class=\"st\"><span class=\"k\">This week</span><b>5<i>/7</i></b><span class=\"m\">days written</span></div></nav></section><div><section class=\"dz-mod\" data-mod=\"prompt\" aria-label=\"Prompt card\">\n<section class=\"pc\"><span class=\"k\">Thursday 4 September</span>\n<h1>What did you decide today that you had been putting off?</h1>\n<textarea rows=\"5\" placeholder=\"Write as much or as little as you like.\">I finally told the team that the March date is not real. It went better than the four weeks I spent not saying it.</textarea>\n<footer><span class=\"m\">Saved 12 seconds ago</span><button type=\"button\" class=\"go\">Done for today</button></footer></section></section><section class=\"dz-mod\" data-mod=\"streak\" aria-label=\"Streak strip\">\n<div class=\"sk\"><span class=\"k\">Recent</span><div class=\"dots\"><i class=\"on\"></i><i class=\"on\"></i><i></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"now\"></i></div><span class=\"m\">Five of the last seven. The gaps are fine.</span></div></section><section class=\"dz-mod\" data-mod=\"past\" aria-label=\"Past entries\">\n<section class=\"ps\"><h2 class=\"k\">Earlier</h2>\n<ol>\n  <li><span class=\"d\">3 Sep</span><b class=\"un\">On being the last one to leave</b><p>Nobody noticed, which was the point, and that is worth sitting with.</p></li>\n  <li><span class=\"d\">2 Sep</span><b class=\"un\">A conversation I rehearsed for a week</b><p>Four minutes. It took four minutes.</p></li>\n  <li><span class=\"d\">31 Aug</span><b class=\"un\">Sunday, and the light was good</b><p>Nothing happened. Writing that down anyway.</p></li>\n</ol></section></section></div>\n</div>",
  "css": "\n.dz-lilac-quiet-today { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 560px; }\n.dz-lilac-quiet-today .rl { padding: 26px 22px; display: flex; flex-direction: column; gap: 20px; }\n.dz-lilac-quiet-today .br { font-family: var(--pv-display); font-size: 21px; font-weight: 600; color: var(--primary); }\n.dz-lilac-quiet-today .rl ul { list-style: none; margin: 0; padding: 0; }\n.dz-lilac-quiet-today .rl li { font-size: 15px; padding: 10px 14px; border-radius: var(--pv-radius-md); color: var(--muted-foreground); cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }\n.dz-lilac-quiet-today .rl li:hover { background: var(--muted); color: var(--foreground); }\n.dz-lilac-quiet-today .rl .on { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--foreground); }\n.dz-lilac-quiet-today .k { font-size: 11.5px; color: var(--muted-foreground); display: block; }\n.dz-lilac-quiet-today .st { margin-top: auto; background: var(--card); border-radius: var(--pv-radius); box-shadow: 0 16px 40px -22px color-mix(in srgb, var(--primary) 45%, transparent); padding: 16px 18px; }\n.dz-lilac-quiet-today .st b { display: block; font-family: var(--pv-mono); font-size: 32px; margin: 4px 0 2px; }\n.dz-lilac-quiet-today .st b i { font-size: 15px; font-style: normal; color: var(--muted-foreground); }\n.dz-lilac-quiet-today .m { font-size: 11.5px; color: var(--muted-foreground); }\n.dz-lilac-quiet-today .pc { background: var(--card); border-radius: var(--pv-radius); box-shadow: 0 16px 40px -22px color-mix(in srgb, var(--primary) 45%, transparent); width: 620px; margin: 44px auto 0; padding: 30px 32px 24px; }\n.dz-lilac-quiet-today .pc h1 { font-family: var(--pv-display); font-size: 32px; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; margin: 10px 0 20px; }\n.dz-lilac-quiet-today textarea { font: inherit; font-size: 16.5px; line-height: 1.66; width: 100%; background: transparent; color: var(--foreground); border: 0; border-radius: var(--pv-radius-md); padding: 0; resize: vertical; }\n.dz-lilac-quiet-today textarea:focus { outline: none; }\n.dz-lilac-quiet-today .pc footer { display: flex; align-items: center; justify-content: space-between; padding-top: 20px; margin-top: 12px; border-top: var(--pv-bw) solid var(--border); }\n.dz-lilac-quiet-today .go { font: inherit; font-size: 14.5px; background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: var(--pv-radius-md); padding: 11px 24px; cursor: pointer; transition: filter var(--dur-slow) var(--ease); }\n.dz-lilac-quiet-today .go:hover { filter: brightness(1.1); }\n.dz-lilac-quiet-today .sk { width: 620px; margin: 20px auto 0; display: flex; align-items: center; gap: 14px; }\n.dz-lilac-quiet-today .dots { display: flex; gap: 7px; }\n.dz-lilac-quiet-today .dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--muted); display: block; }\n.dz-lilac-quiet-today .dots .on { background: color-mix(in srgb, var(--primary) 55%, transparent); }\n.dz-lilac-quiet-today .dots .now { background: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent); }\n.dz-lilac-quiet-today .ps { width: 620px; margin: 44px auto 40px; }\n.dz-lilac-quiet-today .ps ol { list-style: none; margin: 12px 0 0; padding: 0; }\n.dz-lilac-quiet-today .ps li { padding: 16px 0; border-bottom: var(--pv-bw) solid var(--border); }\n.dz-lilac-quiet-today .d { font-family: var(--pv-mono); font-size: 11.5px; color: var(--muted-foreground); }\n.dz-lilac-quiet-today .un { display: inline-block; font-family: var(--pv-display); font-size: 20px; font-weight: 600; margin: 5px 0 6px; 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); padding-bottom: 3px; }\n.dz-lilac-quiet-today .ps li:hover .un { background-size: 100% 2px; }\n.dz-lilac-quiet-today .ps p { font-size: 15px; line-height: 1.6; color: var(--muted-foreground); margin: 0; }\n@media (prefers-reduced-motion: reduce) { .dz-lilac-quiet-today *, .dz-lilac-quiet-today *::before, .dz-lilac-quiet-today *::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"
}