{
  "id": "grid-bureau-specimen",
  "name": "Token Specimen",
  "theme": "grid-bureau",
  "category": "Editorial",
  "description": "The signature page: a specimen row per token — name, rendered example, computed value — with the baseline grid drawn behind it so the claim can be checked.",
  "layout": "Three columns at 1280px (3/6/3) separated by hairlines that fall exactly on baselines, with an 8px grid overlay behind the whole specimen block.",
  "modules": [
    {
      "key": "head",
      "name": "Specimen head",
      "html": "\n<header class=\"sh\"><span class=\"k\">Type scale · v4.2</span><h1>Every line height multiplies to eight</h1><p>Not approximately. 14px at 1.7143 is exactly 24px; 16px at 1.75 is exactly 28px. The grid below is the real one, at the real spacing, and every row on this page sits on it.</p></header>"
    },
    {
      "key": "rows",
      "name": "Specimen rows",
      "html": "\n<section class=\"sp\">\n  <div class=\"row\"><span class=\"tk\">body-sm</span><p class=\"ex es\">The quick brown fox jumps over the lazy dog</p><span class=\"cv\">12 / 20 · 2.5 baselines</span></div>\n  <div class=\"row\"><span class=\"tk\">body-md</span><p class=\"ex em\">The quick brown fox jumps over the lazy dog</p><span class=\"cv\">14 / 24 · 3 baselines</span></div>\n  <div class=\"row\"><span class=\"tk\">body-lg</span><p class=\"ex el\">The quick brown fox jumps over the lazy dog</p><span class=\"cv\">16 / 28 · 3.5 baselines</span></div>\n  <div class=\"row\"><span class=\"tk\">headline-md</span><p class=\"ex hm\">The quick brown fox</p><span class=\"cv\">20 / 28 · 3.5 baselines</span></div>\n  <div class=\"row\"><span class=\"tk\">headline-lg</span><p class=\"ex hl\">The quick brown fox</p><span class=\"cv\">32 / 40 · 5 baselines</span></div>\n  <div class=\"row\"><span class=\"tk\">display-lg</span><p class=\"ex dl\">Grid Bureau</p><span class=\"cv\">64 / 64 · 8 baselines</span></div>\n</section>"
    },
    {
      "key": "note",
      "name": "Method note",
      "html": "\n<aside class=\"mn\"><h2>Why this is worth the trouble</h2><p>A grid that is nearly right is worse than no grid, because it produces drift that accumulates down a long page and that nobody can point at. Two paragraphs set at 1.7 rather than 1.7143 fall out of register by a pixel each, and by the tenth heading the page is visibly wrong in a way no one can name.</p><p>Constraining the scale to whole multiples of eight removes the judgement call. It also removes some sizes you might have wanted, which is the cost.</p><p><a href=\"#\">Toggle the baseline overlay</a> to check any layout in this system.</p></aside>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "grid-bureau-specimen",
    "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-specimen.json",
  "structure": "Three columns at 1280px (3/6/3) separated by hairlines that fall exactly on baselines, with an 8px grid overlay behind the whole specimen block.",
  "html": "<div class=\"dz dz-grid-bureau-specimen\" data-design=\"grid-bureau-specimen\" data-theme=\"grid-bureau\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Specimen head\">\n<header class=\"sh\"><span class=\"k\">Type scale · v4.2</span><h1>Every line height multiplies to eight</h1><p>Not approximately. 14px at 1.7143 is exactly 24px; 16px at 1.75 is exactly 28px. The grid below is the real one, at the real spacing, and every row on this page sits on it.</p></header></section>\n<section class=\"dz-mod\" data-mod=\"rows\" aria-label=\"Specimen rows\">\n<section class=\"sp\">\n  <div class=\"row\"><span class=\"tk\">body-sm</span><p class=\"ex es\">The quick brown fox jumps over the lazy dog</p><span class=\"cv\">12 / 20 · 2.5 baselines</span></div>\n  <div class=\"row\"><span class=\"tk\">body-md</span><p class=\"ex em\">The quick brown fox jumps over the lazy dog</p><span class=\"cv\">14 / 24 · 3 baselines</span></div>\n  <div class=\"row\"><span class=\"tk\">body-lg</span><p class=\"ex el\">The quick brown fox jumps over the lazy dog</p><span class=\"cv\">16 / 28 · 3.5 baselines</span></div>\n  <div class=\"row\"><span class=\"tk\">headline-md</span><p class=\"ex hm\">The quick brown fox</p><span class=\"cv\">20 / 28 · 3.5 baselines</span></div>\n  <div class=\"row\"><span class=\"tk\">headline-lg</span><p class=\"ex hl\">The quick brown fox</p><span class=\"cv\">32 / 40 · 5 baselines</span></div>\n  <div class=\"row\"><span class=\"tk\">display-lg</span><p class=\"ex dl\">Grid Bureau</p><span class=\"cv\">64 / 64 · 8 baselines</span></div>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"note\" aria-label=\"Method note\">\n<aside class=\"mn\"><h2>Why this is worth the trouble</h2><p>A grid that is nearly right is worse than no grid, because it produces drift that accumulates down a long page and that nobody can point at. Two paragraphs set at 1.7 rather than 1.7143 fall out of register by a pixel each, and by the tenth heading the page is visibly wrong in a way no one can name.</p><p>Constraining the scale to whole multiples of eight removes the judgement call. It also removes some sizes you might have wanted, which is the cost.</p><p><a href=\"#\">Toggle the baseline overlay</a> to check any layout in this system.</p></aside></section>\n</div>",
  "css": "\n.dz-grid-bureau-specimen { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 32px; max-width: 1280px; margin: 0 auto; }\n.dz-grid-bureau-specimen .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-specimen h1 { font-family: var(--pv-display); font-size: 32px; line-height: 40px; font-weight: 500; margin: 0 0 8px; letter-spacing: -.015em; }\n.dz-grid-bureau-specimen .sh { padding-bottom: 24px; border-bottom: 1px solid var(--border); margin-bottom: 24px; }\n.dz-grid-bureau-specimen .sh p { margin: 0; font-size: 16px; line-height: 28px; max-width: 68ch; color: var(--muted-foreground); }\n.dz-grid-bureau-specimen .sp { background-image: repeating-linear-gradient(to bottom, color-mix(in oklab, var(--accent) 16%, transparent) 0 1px, transparent 1px 8px); }\n.dz-grid-bureau-specimen .row { display: grid; grid-template-columns: 3fr 6fr 3fr; gap: 24px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--border); }\n.dz-grid-bureau-specimen .tk { font-family: var(--pv-mono); font-size: 12px; line-height: 16px; color: var(--muted-foreground); }\n.dz-grid-bureau-specimen .cv { font-family: var(--pv-mono); font-size: 12px; line-height: 16px; color: var(--muted-foreground); text-align: right; }\n.dz-grid-bureau-specimen .ex { margin: 0; }\n.dz-grid-bureau-specimen .es { font-size: 12px; line-height: 20px; }\n.dz-grid-bureau-specimen .em { font-size: 14px; line-height: 24px; }\n.dz-grid-bureau-specimen .el { font-size: 16px; line-height: 28px; }\n.dz-grid-bureau-specimen .hm { font-size: 20px; line-height: 28px; font-weight: 500; }\n.dz-grid-bureau-specimen .hl { font-size: 32px; line-height: 40px; font-weight: 500; letter-spacing: -.015em; }\n.dz-grid-bureau-specimen .dl { font-size: 64px; line-height: 64px; font-weight: 500; letter-spacing: -.03em; }\n.dz-grid-bureau-specimen .mn { margin-top: 32px; max-width: 68ch; }\n.dz-grid-bureau-specimen h2 { font-size: 20px; line-height: 28px; font-weight: 500; margin: 0 0 8px; }\n.dz-grid-bureau-specimen .mn p { margin: 0 0 16px; font-size: 14px; line-height: 24px; }\n.dz-grid-bureau-specimen a { color: var(--foreground); text-decoration: none; border-bottom: 2px solid var(--accent); padding-bottom: 2px; }\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"
}