{
  "id": "reading-lamp-controls",
  "name": "Two Controls",
  "theme": "reading-lamp",
  "category": "Settings & Forms",
  "description": "The entire settings screen: size shown as five rules of increasing length with no numbers, and warmth as a continuous slider that keeps contrast constant.",
  "layout": "A 66ch column holding two controls and a live sample paragraph beneath them, with an explicit list of what has been decided rather than exposed.",
  "modules": [
    {
      "key": "head",
      "name": "Settings head",
      "html": "\n<header class=\"col ch\"><h1>Size and warmth</h1><p class=\"sub\">That is the whole settings screen. Everything else about how this reads has been decided, and the decisions are listed at the foot of this page so you can see what they were.</p></header>"
    },
    {
      "key": "size",
      "name": "Size control",
      "html": "\n<section class=\"col ct\"><p class=\"lb\">Size</p><div class=\"sz\"><i style=\"width:14px\"></i><i style=\"width:20px\"></i><i class=\"on\" style=\"width:26px\"></i><i style=\"width:32px\"></i><i style=\"width:38px\"></i></div><p class=\"hint\">Five steps, shown as five rules. There are no point sizes because a point size is a fact about a font file and not about how far away your eyes are.</p></section>"
    },
    {
      "key": "warmth",
      "name": "Warmth control",
      "html": "\n<section class=\"col ct\"><p class=\"lb\">Warmth</p><div class=\"wm\"><span class=\"tk\"><span class=\"fill\" style=\"width:62%\"></span><span class=\"pip\" style=\"left:62%\"></span></span></div><p class=\"hint\">Moves the ground and the text together so the contrast ratio does not change. In dark mode the ground stops at a warm dim rather than going to black, because white text on near-black haloes for a great many readers.</p></section>"
    },
    {
      "key": "sample",
      "name": "Live sample",
      "html": "\n<section class=\"col sm\"><p class=\"first\">She had come for a fortnight and had stayed for the winter. This was not a decision anyone had made, and by the time the frost came the question had become the sort that is rude to ask.</p><p class=\"dec\">Decided and not offered: the measure, at 66ch; the typeface, Crimson Pro; justification, off; hyphenation, on; paragraph indent, one em; space between paragraphs, none; page turns, instant.</p></section>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "reading-lamp-controls",
    "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-controls.json",
  "structure": "A 66ch column holding two controls and a live sample paragraph beneath them, with an explicit list of what has been decided rather than exposed.",
  "html": "<div class=\"dz dz-reading-lamp-controls\" data-design=\"reading-lamp-controls\" data-theme=\"reading-lamp\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Settings head\">\n<header class=\"col ch\"><h1>Size and warmth</h1><p class=\"sub\">That is the whole settings screen. Everything else about how this reads has been decided, and the decisions are listed at the foot of this page so you can see what they were.</p></header></section>\n<section class=\"dz-mod\" data-mod=\"size\" aria-label=\"Size control\">\n<section class=\"col ct\"><p class=\"lb\">Size</p><div class=\"sz\"><i style=\"width:14px\"></i><i style=\"width:20px\"></i><i class=\"on\" style=\"width:26px\"></i><i style=\"width:32px\"></i><i style=\"width:38px\"></i></div><p class=\"hint\">Five steps, shown as five rules. There are no point sizes because a point size is a fact about a font file and not about how far away your eyes are.</p></section></section>\n<section class=\"dz-mod\" data-mod=\"warmth\" aria-label=\"Warmth control\">\n<section class=\"col ct\"><p class=\"lb\">Warmth</p><div class=\"wm\"><span class=\"tk\"><span class=\"fill\" style=\"width:62%\"></span><span class=\"pip\" style=\"left:62%\"></span></span></div><p class=\"hint\">Moves the ground and the text together so the contrast ratio does not change. In dark mode the ground stops at a warm dim rather than going to black, because white text on near-black haloes for a great many readers.</p></section></section>\n<section class=\"dz-mod\" data-mod=\"sample\" aria-label=\"Live sample\">\n<section class=\"col sm\"><p class=\"first\">She had come for a fortnight and had stayed for the winter. This was not a decision anyone had made, and by the time the frost came the question had become the sort that is rude to ask.</p><p class=\"dec\">Decided and not offered: the measure, at 66ch; the typeface, Crimson Pro; justification, off; hyphenation, on; paragraph indent, one em; space between paragraphs, none; page turns, instant.</p></section></section>\n</div>",
  "css": "\n.dz-reading-lamp-controls { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 72px 0; }\n\n.dz-reading-lamp-controls .col { max-width: 66ch; margin: 0 auto; padding: 0 40px; }\n.dz-reading-lamp-controls .col p { font-size: 19px; line-height: 1.78; margin: 0; text-indent: 1em; }\n.dz-reading-lamp-controls .col p.first { text-indent: 0; }\n.dz-reading-lamp-controls .col a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--accent); }\n.dz-reading-lamp-controls h1 { font-family: var(--pv-display); font-weight: 600; font-size: 48px; line-height: 1.14; letter-spacing: -.015em; margin: 0 0 16px; }\n.dz-reading-lamp-controls .sub { font-size: 18px; line-height: 1.76; text-indent: 0; margin: 0 0 52px; color: var(--muted-foreground); }\n.dz-reading-lamp-controls .ct { margin-bottom: 52px; }\n.dz-reading-lamp-controls .lb { font-family: var(--pv-display); font-weight: 600; font-size: 21px; text-indent: 0; margin: 0 0 16px; }\n.dz-reading-lamp-controls .sz { display: flex; align-items: flex-end; gap: 12px; height: 30px; margin-bottom: 14px; }\n.dz-reading-lamp-controls .sz i { height: 2px; background: var(--muted-foreground); display: block; }\n.dz-reading-lamp-controls .sz i.on { background: var(--primary); height: 4px; }\n.dz-reading-lamp-controls .wm .tk { display: block; width: 100%; height: 3px; background: var(--border); position: relative; margin-bottom: 20px; }\n.dz-reading-lamp-controls .wm .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); display: block; }\n.dz-reading-lamp-controls .wm .pip { position: absolute; top: -6px; width: 15px; height: 15px; border-radius: 9999px; background: var(--primary); }\n.dz-reading-lamp-controls .hint { font-size: 15px; line-height: 1.6; text-indent: 0; color: var(--muted-foreground); }\n.dz-reading-lamp-controls .sm { padding-top: 24px; border-top: 1px solid var(--border); }\n.dz-reading-lamp-controls .dec { font-size: 15px; line-height: 1.6; text-indent: 0; color: var(--muted-foreground); margin-top: 24px; }\n@media (prefers-reduced-motion: reduce) { .dz-reading-lamp-controls *, .dz-reading-lamp-controls *::before, .dz-reading-lamp-controls *::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"
}