{
  "id": "reading-lamp-front",
  "name": "A Warm Dim",
  "theme": "reading-lamp",
  "category": "Landing",
  "description": "A landing page written as prose in the same 66ch column the product uses, with one lamplit photograph and no feature grid anywhere.",
  "layout": "The locked column throughout — the page is an essay, not a marketing layout — with a single full-measure photograph and one button at the foot.",
  "modules": [
    {
      "key": "open",
      "name": "Opening",
      "html": "\n<article class=\"col\"><p class=\"no\">Reading Lamp</p><h1>A warm dim, not a black</h1><p class=\"first\">Almost every dark mode goes to near-black and puts white text on it. For a great many readers that produces halation — the letters bloom and smear — and the usual fix is to lower the text, which lowers the contrast, which is worse.</p><p>This one raises the ground instead. The dark mode here sits at a warm dim, roughly the colour of a page under a lamp, and the contrast is unchanged. It looks unfashionable in a screenshot and it is markedly easier to read for an hour.</p></article>"
    },
    {
      "key": "photo",
      "name": "Lamp photograph",
      "html": "\n<figure class=\"col ph\"><img src=\"{{ART hero}}\" alt=\"{{ARTALT hero}}\"><figcaption>An actual lamp, on an actual desk. The dark mode is trying to be this.</figcaption></figure>"
    },
    {
      "key": "refusals",
      "name": "What it refuses",
      "html": "\n<article class=\"col\"><p class=\"first\">The measure is locked at 66 characters and there is no full-width mode. This is the one thing people complain about and we are not going to change it: a width control is a way for a reader to make their own experience worse, and on a 32-inch monitor they will take it.</p><p>There are two controls in the entire application. Size, shown as five rules of increasing length, and warmth, which moves the ground and the text together. No font picker, no theme picker, no justification toggle, no line-height slider. Those are all decisions, and we have made them.</p><p>Links in the text are the same colour as the text with a rule under them. Footnotes expand in place and push the paragraph down, because a footnote in a popover covers the sentence it belongs to.</p></article>"
    },
    {
      "key": "end",
      "name": "Closing",
      "html": "\n<footer class=\"col en\"><p class=\"first\">Fourteen thousand books, no advertising, and a reader that will never suggest what to read next.</p><button class=\"pri\">Start reading</button></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "reading-lamp-front",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-02T01:46:38+09:00",
    "updatedAt": "2026-09-02T01:46:38+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/reading-lamp-front.json",
  "structure": "The locked column throughout — the page is an essay, not a marketing layout — with a single full-measure photograph and one button at the foot.",
  "html": "<div class=\"dz dz-reading-lamp-front\" data-design=\"reading-lamp-front\" data-theme=\"reading-lamp\">\n<section class=\"dz-mod\" data-mod=\"open\" aria-label=\"Opening\">\n<article class=\"col\"><p class=\"no\">Reading Lamp</p><h1>A warm dim, not a black</h1><p class=\"first\">Almost every dark mode goes to near-black and puts white text on it. For a great many readers that produces halation — the letters bloom and smear — and the usual fix is to lower the text, which lowers the contrast, which is worse.</p><p>This one raises the ground instead. The dark mode here sits at a warm dim, roughly the colour of a page under a lamp, and the contrast is unchanged. It looks unfashionable in a screenshot and it is markedly easier to read for an hour.</p></article></section>\n<section class=\"dz-mod\" data-mod=\"photo\" aria-label=\"Lamp photograph\">\n<figure class=\"col ph\"><img src=\"https://designlookbook.dev/assets/img/reading-lamp-hero.webp\" alt=\"A pool of warm lamplight falling across an open book on a desk\"><figcaption>An actual lamp, on an actual desk. The dark mode is trying to be this.</figcaption></figure></section>\n<section class=\"dz-mod\" data-mod=\"refusals\" aria-label=\"What it refuses\">\n<article class=\"col\"><p class=\"first\">The measure is locked at 66 characters and there is no full-width mode. This is the one thing people complain about and we are not going to change it: a width control is a way for a reader to make their own experience worse, and on a 32-inch monitor they will take it.</p><p>There are two controls in the entire application. Size, shown as five rules of increasing length, and warmth, which moves the ground and the text together. No font picker, no theme picker, no justification toggle, no line-height slider. Those are all decisions, and we have made them.</p><p>Links in the text are the same colour as the text with a rule under them. Footnotes expand in place and push the paragraph down, because a footnote in a popover covers the sentence it belongs to.</p></article></section>\n<section class=\"dz-mod\" data-mod=\"end\" aria-label=\"Closing\">\n<footer class=\"col en\"><p class=\"first\">Fourteen thousand books, no advertising, and a reader that will never suggest what to read next.</p><button class=\"pri\">Start reading</button></footer></section>\n</div>",
  "css": "\n.dz-reading-lamp-front { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 72px 0; }\n\n.dz-reading-lamp-front .col { max-width: 66ch; margin: 0 auto; padding: 0 40px; }\n.dz-reading-lamp-front .col p { font-size: 19px; line-height: 1.78; margin: 0; text-indent: 1em; }\n.dz-reading-lamp-front .col p.first { text-indent: 0; }\n.dz-reading-lamp-front .col a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--accent); }\n.dz-reading-lamp-front .no { font-family: var(--pv-mono); font-size: 13.5px; color: var(--muted-foreground); text-indent: 0; margin: 0 0 10px; }\n.dz-reading-lamp-front h1 { font-family: var(--pv-display); font-weight: 600; font-size: 48px; line-height: 1.14; letter-spacing: -.015em; margin: 0 0 32px; }\n.dz-reading-lamp-front .ph { margin: 52px auto; }\n.dz-reading-lamp-front .ph img { width: 100%; height: 320px; object-fit: cover; display: block; filter: var(--img-filter); }\n.dz-reading-lamp-front figcaption { font-family: var(--pv-mono); font-size: 13.5px; font-size: 15px; color: var(--muted-foreground); margin-top: 12px; }\n.dz-reading-lamp-front .col + .col { margin-top: 32px; }\n.dz-reading-lamp-front .en { margin-top: 52px; padding-top: 24px; border-top: 1px solid var(--border); }\n.dz-reading-lamp-front .pri { background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: 2px; padding: 13px 24px; font: inherit; font-size: 17px; cursor: pointer; margin-top: 24px; }\n@media (prefers-reduced-motion: reduce) { .dz-reading-lamp-front *, .dz-reading-lamp-front *::before, .dz-reading-lamp-front *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }\n",
  "requiredTheme": "/api/v1/themes/reading-lamp.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;500;600;700&family=Cutive+Mono:wght@400;500;600;700&display=swap"
}