{
  "id": "lilac-quiet-patterns",
  "name": "Patterns",
  "theme": "lilac-quiet",
  "category": "Dashboard",
  "description": "A reflective dashboard that reports on mood and words without scoring anything, because a number out of ten would be the wrong kind of feedback here.",
  "layout": "A two-column card grid where the mood chart is a soft area with no axis labels and the word-count card deliberately shows a range rather than a total.",
  "modules": [
    {
      "key": "head",
      "name": "Header",
      "html": "\n<header class=\"hd\"><h1>Patterns</h1><p>Six months of entries. Nothing here is a score and none of it is shared.</p><div class=\"pk\"><button type=\"button\">1 m</button><button type=\"button\" class=\"on\">6 m</button><button type=\"button\">All</button></div></header>"
    },
    {
      "key": "mood",
      "name": "Mood card",
      "html": "\n<section class=\"cd wide\"><span class=\"k\">How the days felt</span>\n<svg viewBox=\"0 0 620 160\" aria-label=\"Mood over six months\">\n  <defs><linearGradient id=\"lqg\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\"><stop offset=\"0\" class=\"g0\"/><stop offset=\"1\" class=\"g1\"/></linearGradient></defs>\n  <path class=\"ar\" d=\"M0,96 C60,72 120,110 180,88 C240,66 300,104 360,74 C420,50 480,86 540,62 C580,48 600,58 620,52 L620,160 L0,160 Z\"/>\n  <path class=\"ln\" d=\"M0,96 C60,72 120,110 180,88 C240,66 300,104 360,74 C420,50 480,86 540,62 C580,48 600,58 620,52\"/>\n</svg>\n<footer><span class=\"m\">March</span><span class=\"m\">September</span></footer></section>"
    },
    {
      "key": "words",
      "name": "Words card",
      "html": "\n<section class=\"cd\"><span class=\"k\">Words in an entry</span><b>90<i>–</i>410</b><span class=\"m\">Most entries sit in this range. The longest was 1,204 words, in June.</span></section>"
    },
    {
      "key": "when",
      "name": "When card",
      "html": "\n<section class=\"cd\"><span class=\"k\">When you write</span>\n<div class=\"hrs\"><i style=\"--h:6%\"></i><i style=\"--h:9%\"></i><i style=\"--h:4%\"></i><i style=\"--h:12%\"></i><i style=\"--h:22%\"></i><i style=\"--h:18%\"></i><i style=\"--h:34%\"></i><i style=\"--h:62%\"></i><i class=\"pk2\" style=\"--h:100%\"></i><i style=\"--h:74%\"></i><i style=\"--h:31%\"></i><i style=\"--h:12%\"></i></div>\n<span class=\"m\">Almost always after nine. Twice at four in the morning.</span></section>"
    },
    {
      "key": "themes",
      "name": "Recurring words",
      "html": "\n<section class=\"cd wide\"><span class=\"k\">Words that keep coming back</span>\n<div class=\"tg\"><span class=\"s1\">deadline</span><span class=\"s2\">March</span><span class=\"s3\">sleep</span><span class=\"s1\">the team</span><span class=\"s2\">my father</span><span class=\"s3\">walking</span><span class=\"s2\">tired</span><span class=\"s1\">honest</span><span class=\"s3\">Tuesday</span><span class=\"s2\">enough</span></div>\n<span class=\"m\">Counted on your device. This list has never left it.</span></section>"
    }
  ],
  "moduleCount": 5,
  "reorderable": false,
  "meta": {
    "id": "lilac-quiet-patterns",
    "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-patterns.json",
  "structure": "A two-column card grid where the mood chart is a soft area with no axis labels and the word-count card deliberately shows a range rather than a total.",
  "html": "<div class=\"dz dz-lilac-quiet-patterns\" data-design=\"lilac-quiet-patterns\" data-theme=\"lilac-quiet\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Header\">\n<header class=\"hd\"><h1>Patterns</h1><p>Six months of entries. Nothing here is a score and none of it is shared.</p><div class=\"pk\"><button type=\"button\">1 m</button><button type=\"button\" class=\"on\">6 m</button><button type=\"button\">All</button></div></header></section><section class=\"dz-mod\" data-mod=\"mood\" aria-label=\"Mood card\">\n<section class=\"cd wide\"><span class=\"k\">How the days felt</span>\n<svg viewBox=\"0 0 620 160\" aria-label=\"Mood over six months\">\n  <defs><linearGradient id=\"lqg\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\"><stop offset=\"0\" class=\"g0\"/><stop offset=\"1\" class=\"g1\"/></linearGradient></defs>\n  <path class=\"ar\" d=\"M0,96 C60,72 120,110 180,88 C240,66 300,104 360,74 C420,50 480,86 540,62 C580,48 600,58 620,52 L620,160 L0,160 Z\"/>\n  <path class=\"ln\" d=\"M0,96 C60,72 120,110 180,88 C240,66 300,104 360,74 C420,50 480,86 540,62 C580,48 600,58 620,52\"/>\n</svg>\n<footer><span class=\"m\">March</span><span class=\"m\">September</span></footer></section></section><section class=\"dz-mod\" data-mod=\"words\" aria-label=\"Words card\">\n<section class=\"cd\"><span class=\"k\">Words in an entry</span><b>90<i>–</i>410</b><span class=\"m\">Most entries sit in this range. The longest was 1,204 words, in June.</span></section></section><section class=\"dz-mod\" data-mod=\"when\" aria-label=\"When card\">\n<section class=\"cd\"><span class=\"k\">When you write</span>\n<div class=\"hrs\"><i style=\"--h:6%\"></i><i style=\"--h:9%\"></i><i style=\"--h:4%\"></i><i style=\"--h:12%\"></i><i style=\"--h:22%\"></i><i style=\"--h:18%\"></i><i style=\"--h:34%\"></i><i style=\"--h:62%\"></i><i class=\"pk2\" style=\"--h:100%\"></i><i style=\"--h:74%\"></i><i style=\"--h:31%\"></i><i style=\"--h:12%\"></i></div>\n<span class=\"m\">Almost always after nine. Twice at four in the morning.</span></section></section><section class=\"dz-mod\" data-mod=\"themes\" aria-label=\"Recurring words\">\n<section class=\"cd wide\"><span class=\"k\">Words that keep coming back</span>\n<div class=\"tg\"><span class=\"s1\">deadline</span><span class=\"s2\">March</span><span class=\"s3\">sleep</span><span class=\"s1\">the team</span><span class=\"s2\">my father</span><span class=\"s3\">walking</span><span class=\"s2\">tired</span><span class=\"s1\">honest</span><span class=\"s3\">Tuesday</span><span class=\"s2\">enough</span></div>\n<span class=\"m\">Counted on your device. This list has never left it.</span></section></section>\n</div>",
  "css": "\n.dz-lilac-quiet-patterns { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 30px 34px 34px; align-content: start; }\n.dz-lilac-quiet-patterns .hd { grid-column: 1 / -1; display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 4px; }\n.dz-lilac-quiet-patterns .hd h1 { font-family: var(--pv-display); font-size: 38px; font-weight: 600; letter-spacing: -.025em; margin: 0; }\n.dz-lilac-quiet-patterns .hd p { font-size: 15px; color: var(--muted-foreground); margin: 0; }\n.dz-lilac-quiet-patterns .pk { display: flex; gap: 8px; margin-left: auto; }\n.dz-lilac-quiet-patterns .pk button { font: inherit; font-size: 13px; background: transparent; color: var(--muted-foreground); border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius-md); padding: 8px 16px; cursor: pointer; }\n.dz-lilac-quiet-patterns .pk .on { background: color-mix(in srgb, var(--primary) 14%, transparent); border-color: var(--primary); color: var(--foreground); }\n.dz-lilac-quiet-patterns .cd { background: var(--card); border-radius: var(--pv-radius); box-shadow: 0 16px 40px -22px color-mix(in srgb, var(--primary) 45%, transparent); padding: 20px 24px 18px; display: flex; flex-direction: column; gap: 8px; }\n.dz-lilac-quiet-patterns .wide { grid-column: 1 / -1; }\n.dz-lilac-quiet-patterns .k { font-size: 11.5px; color: var(--muted-foreground); }\n.dz-lilac-quiet-patterns .m { font-size: 11.5px; color: var(--muted-foreground); line-height: 1.55; }\n.dz-lilac-quiet-patterns .cd svg { width: 100%; height: 160px; display: block; }\n.dz-lilac-quiet-patterns .g0 { stop-color: var(--primary); stop-opacity: .28; } .dz-lilac-quiet-patterns .g1 { stop-color: var(--primary); stop-opacity: 0; }\n.dz-lilac-quiet-patterns .ar { fill: url(#lqg); }\n.dz-lilac-quiet-patterns .ln { fill: none; stroke: var(--primary); stroke-width: 2.5; stroke-linecap: round; }\n.dz-lilac-quiet-patterns .cd footer { display: flex; justify-content: space-between; }\n.dz-lilac-quiet-patterns .cd b { font-family: var(--pv-mono); font-size: 44px; font-weight: 500; letter-spacing: -.03em; }\n.dz-lilac-quiet-patterns .cd b i { font-style: normal; color: var(--muted-foreground); margin: 0 2px; }\n.dz-lilac-quiet-patterns .hrs { display: flex; align-items: flex-end; gap: 5px; height: 74px; }\n.dz-lilac-quiet-patterns .hrs i { flex: 1; height: var(--h); background: color-mix(in srgb, var(--primary) 32%, transparent); border-radius: 3px 3px 0 0; display: block; }\n.dz-lilac-quiet-patterns .pk2 { background: var(--primary); }\n.dz-lilac-quiet-patterns .tg { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; padding: 4px 0 6px; }\n.dz-lilac-quiet-patterns .tg span { font-family: var(--pv-display); border-radius: var(--pv-radius-sm); }\n.dz-lilac-quiet-patterns .s1 { font-size: 26px; color: var(--foreground); }\n.dz-lilac-quiet-patterns .s2 { font-size: 20px; color: var(--primary); }\n.dz-lilac-quiet-patterns .s3 { font-size: 16px; color: var(--muted-foreground); }\n@media (prefers-reduced-motion: reduce) { .dz-lilac-quiet-patterns *, .dz-lilac-quiet-patterns *::before, .dz-lilac-quiet-patterns *::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"
}