{
  "id": "lilac-quiet-letter",
  "name": "Long Letter",
  "theme": "lilac-quiet",
  "category": "Editorial",
  "description": "A long piece set at a narrow measure with the pull quotes breaking into the right margin, so the reading column itself never changes width.",
  "layout": "A 62ch column sitting left of centre with a 240px right margin used only for pull quotes and a reading-progress rule that fills as you scroll.",
  "modules": [
    {
      "key": "head",
      "name": "Title",
      "html": "\n<header class=\"hd\"><span class=\"k\">Letter · No. 41</span><h1>On the difference between resting and stopping</h1><span class=\"by\">Rowan Ashworth-Blake · 12 minutes</span></header>"
    },
    {
      "key": "progress",
      "name": "Progress rule",
      "html": "\n<div class=\"pg\"><i style=\"--p:34%\"></i><span class=\"m\">34%</span></div>"
    },
    {
      "key": "body",
      "name": "Letter body",
      "html": "\n<article class=\"bd\">\n  <p class=\"lede\">There is a version of rest that is really just stopping, and it does not work, and most of us have been doing it for years.</p>\n  <p>Stopping is the absence of the thing. You close the laptop, the meeting ends, the week finishes. Nothing replaces what you were doing, so the shape of it stays — you are still holding the same problem, just without the tools.</p>\n  <p>Resting is different in one specific way: something else takes up the space. Not a distraction, which is stopping with noise on top, but an activity with enough structure that the previous thing cannot follow you into it.</p>\n  <p>This is why people who claim that walking helps are usually right and usually unable to explain why. A walk has a route. It occupies the part of you that was trying to hold the problem.</p>\n  <p>The practical version of this is smaller than it sounds. It is not a retreat or a sabbatical. It is noticing, on a Thursday evening, that you have stopped rather than rested, and doing one thing with a shape to it.</p>\n</article>"
    },
    {
      "key": "quotes",
      "name": "Margin quotes",
      "html": "\n<aside class=\"qt\">\n  <blockquote>Stopping is the absence of the thing. Resting is something else taking up the space.</blockquote>\n  <blockquote>A distraction is stopping with noise on top.</blockquote>\n</aside>"
    },
    {
      "key": "foot",
      "name": "Footer",
      "html": "\n<footer class=\"ft\"><span class=\"k\">Next letter</span><a class=\"un\" href=\"#\">No. 42 — On other people's deadlines</a><span class=\"m\">Sent every other Thursday. No archive, no search, on purpose.</span></footer>"
    }
  ],
  "moduleCount": 5,
  "reorderable": false,
  "meta": {
    "id": "lilac-quiet-letter",
    "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-letter.json",
  "structure": "A 62ch column sitting left of centre with a 240px right margin used only for pull quotes and a reading-progress rule that fills as you scroll.",
  "html": "<div class=\"dz dz-lilac-quiet-letter\" data-design=\"lilac-quiet-letter\" data-theme=\"lilac-quiet\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Title\">\n<header class=\"hd\"><span class=\"k\">Letter · No. 41</span><h1>On the difference between resting and stopping</h1><span class=\"by\">Rowan Ashworth-Blake · 12 minutes</span></header></section><section class=\"dz-mod\" data-mod=\"progress\" aria-label=\"Progress rule\">\n<div class=\"pg\"><i style=\"--p:34%\"></i><span class=\"m\">34%</span></div></section><section class=\"dz-mod\" data-mod=\"body\" aria-label=\"Letter body\">\n<article class=\"bd\">\n  <p class=\"lede\">There is a version of rest that is really just stopping, and it does not work, and most of us have been doing it for years.</p>\n  <p>Stopping is the absence of the thing. You close the laptop, the meeting ends, the week finishes. Nothing replaces what you were doing, so the shape of it stays — you are still holding the same problem, just without the tools.</p>\n  <p>Resting is different in one specific way: something else takes up the space. Not a distraction, which is stopping with noise on top, but an activity with enough structure that the previous thing cannot follow you into it.</p>\n  <p>This is why people who claim that walking helps are usually right and usually unable to explain why. A walk has a route. It occupies the part of you that was trying to hold the problem.</p>\n  <p>The practical version of this is smaller than it sounds. It is not a retreat or a sabbatical. It is noticing, on a Thursday evening, that you have stopped rather than rested, and doing one thing with a shape to it.</p>\n</article></section><section class=\"dz-mod\" data-mod=\"quotes\" aria-label=\"Margin quotes\">\n<aside class=\"qt\">\n  <blockquote>Stopping is the absence of the thing. Resting is something else taking up the space.</blockquote>\n  <blockquote>A distraction is stopping with noise on top.</blockquote>\n</aside></section><section class=\"dz-mod\" data-mod=\"foot\" aria-label=\"Footer\">\n<footer class=\"ft\"><span class=\"k\">Next letter</span><a class=\"un\" href=\"#\">No. 42 — On other people's deadlines</a><span class=\"m\">Sent every other Thursday. No archive, no search, on purpose.</span></footer></section>\n</div>",
  "css": "\n.dz-lilac-quiet-letter { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: minmax(0, 62ch) 240px; justify-content: center; column-gap: 44px; padding: 0 34px 40px; align-content: start; }\n.dz-lilac-quiet-letter .hd { grid-column: 1 / 2; padding: 44px 0 22px; }\n.dz-lilac-quiet-letter .k { font-size: 11.5px; color: var(--muted-foreground); display: block; }\n.dz-lilac-quiet-letter .hd h1 { font-family: var(--pv-display); font-size: 42px; font-weight: 600; line-height: 1.14; letter-spacing: -.025em; margin: 10px 0 10px; }\n.dz-lilac-quiet-letter .by { font-family: var(--pv-mono); font-size: 12px; color: var(--muted-foreground); }\n.dz-lilac-quiet-letter .pg { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding-bottom: 26px; }\n.dz-lilac-quiet-letter .pg i { height: 2px; width: var(--p); background: var(--accent); border-radius: 2px; }\n.dz-lilac-quiet-letter .pg::after { content: \"\"; flex: 1; height: 2px; background: var(--muted); border-radius: 2px; }\n.dz-lilac-quiet-letter .m { font-size: 11.5px; color: var(--muted-foreground); }\n.dz-lilac-quiet-letter .bd { grid-column: 1 / 2; }\n.dz-lilac-quiet-letter .lede { font-family: var(--pv-display); font-size: 24px; line-height: 1.46; margin: 0 0 22px; }\n.dz-lilac-quiet-letter .bd p { font-size: 17px; line-height: 1.72; color: var(--muted-foreground); margin: 0 0 18px; }\n.dz-lilac-quiet-letter .qt { grid-column: 2 / 3; grid-row: 3 / 4; align-self: start; padding-top: 90px; display: flex; flex-direction: column; gap: 40px; }\n.dz-lilac-quiet-letter blockquote { margin: 0; font-family: var(--pv-display); font-size: 19px; line-height: 1.4; color: var(--foreground); padding-left: 16px; border-left: 2px solid var(--accent); }\n.dz-lilac-quiet-letter .ft { grid-column: 1 / 2; padding-top: 26px; border-top: var(--pv-bw) solid var(--border); }\n.dz-lilac-quiet-letter .un { display: inline-block; font-family: var(--pv-display); font-size: 22px; font-weight: 600; color: var(--foreground); text-decoration: none; margin: 6px 0 10px; padding-bottom: 4px; 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: 24% 2px; }\n.dz-lilac-quiet-letter .un:hover { background-size: 100% 2px; }\n.dz-lilac-quiet-letter .ft .m { display: block; }\n@media (prefers-reduced-motion: reduce) { .dz-lilac-quiet-letter *, .dz-lilac-quiet-letter *::before, .dz-lilac-quiet-letter *::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"
}