{
  "id": "grid-bureau-docs",
  "name": "Documentation Shell",
  "theme": "grid-bureau",
  "category": "App Shell",
  "description": "A documentation frame where the navigation is a ruled list with no fills, and the only coloured pixels on screen are the underline on the current page.",
  "layout": "A 240px ruled sidebar, a 68ch content column and a 200px on-this-page rail, all separated by single hairlines running full height.",
  "modules": [
    {
      "key": "side",
      "name": "Ruled sidebar",
      "html": "\n<nav class=\"sb\"><span class=\"brand\">Grid Bureau</span>\n<span class=\"k\">Foundations</span><ul><li><a href=\"#\">Principles</a></li><li class=\"on\"><a href=\"#\">The baseline</a></li><li><a href=\"#\">Type scale</a></li><li><a href=\"#\">Colour</a></li><li><a href=\"#\">Space</a></li></ul>\n<span class=\"k\">Components</span><ul><li><a href=\"#\">Button</a></li><li><a href=\"#\">Field</a></li><li><a href=\"#\">Table</a></li><li><a href=\"#\">Specimen row</a></li></ul>\n<span class=\"k\">Tools</span><ul><li><a href=\"#\">Overlay</a></li><li><a href=\"#\">Audit script</a></li></ul></nav>"
    },
    {
      "key": "content",
      "name": "Doc content",
      "html": "\n<main class=\"ct\"><span class=\"k\">Foundations</span><h1>The baseline</h1>\n<p class=\"lede\">An 8px baseline, applied to type, to row heights and to vertical space. It is the constraint the rest of this system is derived from, and the only one that cannot be relaxed for a particular case.</p>\n<h2>The rule</h2>\n<p>Every text style declares a line height that is a whole multiple of 8px. Every component declares a height that is a whole multiple of 8px. Every vertical gap is a whole multiple of 8px. There are no exceptions, including for optical adjustment.</p>\n<h2>What this rules out</h2>\n<p>Line heights of 1.5 at 15px, which is a very common default and produces 22.5px. Buttons of 44px, which is a common accessibility minimum and is not a multiple of eight — use 48px. Table rows of 36px, which almost every data grid ships by default.</p>\n<h2>Checking</h2>\n<p>The overlay is not a design tool, it is a test. Any layout in this system is expected to pass it, and a layout that only passes at one viewport width has not passed.</p>\n<pre class=\"cd\">.thing { line-height: 24px }  /* 3 baselines  */\n.thing { height: 48px }       /* 6 baselines  */\n.thing { margin-block: 16px } /* 2 baselines  */</pre></main>"
    },
    {
      "key": "toc",
      "name": "On this page",
      "html": "\n<aside class=\"tc\"><span class=\"k\">On this page</span>\n<ul><li><a class=\"here\" href=\"#\">The rule</a></li><li><a href=\"#\">What this rules out</a></li><li><a href=\"#\">Checking</a></li></ul>\n<span class=\"k\">Related</span>\n<ul><li><a href=\"#\">Type scale</a></li><li><a href=\"#\">Space</a></li><li><a href=\"#\">Audit script</a></li></ul></aside>"
    }
  ],
  "moduleCount": 3,
  "reorderable": false,
  "meta": {
    "id": "grid-bureau-docs",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-02T00:05:46+09:00",
    "updatedAt": "2026-09-02T00:05:46+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/grid-bureau-docs.json",
  "structure": "A 240px ruled sidebar, a 68ch content column and a 200px on-this-page rail, all separated by single hairlines running full height.",
  "html": "<div class=\"dz dz-grid-bureau-docs\" data-design=\"grid-bureau-docs\" data-theme=\"grid-bureau\">\n<section class=\"dz-mod\" data-mod=\"side\" aria-label=\"Ruled sidebar\">\n<nav class=\"sb\"><span class=\"brand\">Grid Bureau</span>\n<span class=\"k\">Foundations</span><ul><li><a href=\"#\">Principles</a></li><li class=\"on\"><a href=\"#\">The baseline</a></li><li><a href=\"#\">Type scale</a></li><li><a href=\"#\">Colour</a></li><li><a href=\"#\">Space</a></li></ul>\n<span class=\"k\">Components</span><ul><li><a href=\"#\">Button</a></li><li><a href=\"#\">Field</a></li><li><a href=\"#\">Table</a></li><li><a href=\"#\">Specimen row</a></li></ul>\n<span class=\"k\">Tools</span><ul><li><a href=\"#\">Overlay</a></li><li><a href=\"#\">Audit script</a></li></ul></nav></section><section class=\"dz-mod\" data-mod=\"content\" aria-label=\"Doc content\">\n<main class=\"ct\"><span class=\"k\">Foundations</span><h1>The baseline</h1>\n<p class=\"lede\">An 8px baseline, applied to type, to row heights and to vertical space. It is the constraint the rest of this system is derived from, and the only one that cannot be relaxed for a particular case.</p>\n<h2>The rule</h2>\n<p>Every text style declares a line height that is a whole multiple of 8px. Every component declares a height that is a whole multiple of 8px. Every vertical gap is a whole multiple of 8px. There are no exceptions, including for optical adjustment.</p>\n<h2>What this rules out</h2>\n<p>Line heights of 1.5 at 15px, which is a very common default and produces 22.5px. Buttons of 44px, which is a common accessibility minimum and is not a multiple of eight — use 48px. Table rows of 36px, which almost every data grid ships by default.</p>\n<h2>Checking</h2>\n<p>The overlay is not a design tool, it is a test. Any layout in this system is expected to pass it, and a layout that only passes at one viewport width has not passed.</p>\n<pre class=\"cd\">.thing { line-height: 24px }  /* 3 baselines  */\n.thing { height: 48px }       /* 6 baselines  */\n.thing { margin-block: 16px } /* 2 baselines  */</pre></main></section><section class=\"dz-mod\" data-mod=\"toc\" aria-label=\"On this page\">\n<aside class=\"tc\"><span class=\"k\">On this page</span>\n<ul><li><a class=\"here\" href=\"#\">The rule</a></li><li><a href=\"#\">What this rules out</a></li><li><a href=\"#\">Checking</a></li></ul>\n<span class=\"k\">Related</span>\n<ul><li><a href=\"#\">Type scale</a></li><li><a href=\"#\">Space</a></li><li><a href=\"#\">Audit script</a></li></ul></aside></section>\n</div>",
  "css": "\n.dz-grid-bureau-docs { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: 240px 1fr 200px; min-height: 640px; }\n.dz-grid-bureau-docs .k { text-transform: uppercase; letter-spacing: .16em; font-size: 10px; font-weight: 600; line-height: 16px; color: var(--muted-foreground); display: block; }\n.dz-grid-bureau-docs .sb { border-right: 1px solid var(--border); padding: 24px 20px; }\n.dz-grid-bureau-docs .brand { font-family: var(--pv-display); font-size: 20px; line-height: 28px; font-weight: 500; display: block; margin-bottom: 24px; }\n.dz-grid-bureau-docs .sb ul { list-style: none; margin: 0 0 24px; padding: 0; }\n.dz-grid-bureau-docs .sb a { display: block; padding: 4px 0; font-size: 14px; line-height: 24px; color: var(--foreground); text-decoration: none; }\n.dz-grid-bureau-docs .sb li.on a { border-bottom: 2px solid var(--accent); }\n.dz-grid-bureau-docs .ct { padding: 24px 32px; max-width: 68ch; }\n.dz-grid-bureau-docs h1 { font-family: var(--pv-display); font-size: 32px; line-height: 40px; font-weight: 500; margin: 0 0 16px; letter-spacing: -.015em; }\n.dz-grid-bureau-docs .lede { font-size: 16px; line-height: 28px; margin: 0 0 24px; }\n.dz-grid-bureau-docs h2 { font-size: 20px; line-height: 28px; font-weight: 500; margin: 24px 0 8px; }\n.dz-grid-bureau-docs .ct p { margin: 0 0 16px; font-size: 14px; line-height: 24px; }\n.dz-grid-bureau-docs .cd { font-family: var(--pv-mono); font-size: 12px; line-height: 16px; background: var(--card); padding: 16px; margin: 16px 0 0; white-space: pre; overflow-x: auto; border-left: 2px solid var(--border); }\n.dz-grid-bureau-docs .tc { border-left: 1px solid var(--border); padding: 24px 20px; }\n.dz-grid-bureau-docs .tc ul { list-style: none; margin: 0 0 24px; padding: 0; }\n.dz-grid-bureau-docs .tc a { display: block; padding: 4px 0; font-size: 12px; line-height: 20px; color: var(--muted-foreground); text-decoration: none; }\n.dz-grid-bureau-docs .tc a.here { color: var(--foreground); border-bottom: 2px solid var(--accent); }\n",
  "requiredTheme": "/api/v1/themes/grid-bureau.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700&family=PT+Mono:wght@400;500;600;700&display=swap"
}