{
  "id": "grid-bureau-tokens",
  "name": "Token Editor",
  "theme": "grid-bureau",
  "category": "Settings & Forms",
  "description": "A token editor that rejects any value not on the baseline at the point of entry, showing the nearest two legal values rather than an error after the fact.",
  "layout": "A ruled form at 900px where each numeric field carries an inline legal-value hint, and an illegal entry marks the row rather than opening a dialog.",
  "modules": [
    {
      "key": "head",
      "name": "Editor head",
      "html": "\n<header class=\"eh\"><span class=\"k\">Foundations · type scale</span><h1>Edit tokens</h1><p>Values must be whole multiples of 8px. Anything else is rejected here rather than caught by the audit later.</p></header>"
    },
    {
      "key": "fields",
      "name": "Token fields",
      "html": "\n<form class=\"tf\">\n  <div class=\"row\"><label class=\"tk\">body-sm</label><div class=\"in\"><input type=\"text\" value=\"12\"><span class=\"u\">px</span></div><div class=\"in\"><input type=\"text\" value=\"20\"><span class=\"u\">px</span></div><span class=\"ok\">2.5 baselines</span></div>\n  <div class=\"row\"><label class=\"tk\">body-md</label><div class=\"in\"><input type=\"text\" value=\"14\"><span class=\"u\">px</span></div><div class=\"in\"><input type=\"text\" value=\"24\"><span class=\"u\">px</span></div><span class=\"ok\">3 baselines</span></div>\n  <div class=\"row bad\"><label class=\"tk\">body-lg</label><div class=\"in\"><input type=\"text\" value=\"16\"><span class=\"u\">px</span></div><div class=\"in err\"><input type=\"text\" value=\"26\"><span class=\"u\">px</span></div><span class=\"no\">Not on the grid — use 24 or 32</span></div>\n  <div class=\"row\"><label class=\"tk\">headline-md</label><div class=\"in\"><input type=\"text\" value=\"20\"><span class=\"u\">px</span></div><div class=\"in\"><input type=\"text\" value=\"28\"><span class=\"u\">px</span></div><span class=\"ok\">3.5 baselines</span></div>\n  <div class=\"row\"><label class=\"tk\">headline-lg</label><div class=\"in\"><input type=\"text\" value=\"32\"><span class=\"u\">px</span></div><div class=\"in\"><input type=\"text\" value=\"40\"><span class=\"u\">px</span></div><span class=\"ok\">5 baselines</span></div>\n  <div class=\"row\"><label class=\"tk\">display-lg</label><div class=\"in\"><input type=\"text\" value=\"64\"><span class=\"u\">px</span></div><div class=\"in\"><input type=\"text\" value=\"64\"><span class=\"u\">px</span></div><span class=\"ok\">8 baselines</span></div>\n</form>"
    },
    {
      "key": "preview",
      "name": "Live preview",
      "html": "\n<aside class=\"pv\"><span class=\"k\">Preview with the overlay on</span>\n<div class=\"pb\"><p class=\"es\">Body small, twelve on twenty.</p><p class=\"em\">Body medium, fourteen on twenty-four, which is the workhorse.</p><p class=\"el bad2\">Body large at twenty-six sits between two lines and drags everything under it out of register.</p><p class=\"hm\">Headline medium</p></div>\n<p class=\"fn\">The third paragraph is the illegal one. Notice that the paragraph after it is also wrong, which is how one bad value becomes a page-wide problem.</p></aside>"
    },
    {
      "key": "act",
      "name": "Actions",
      "html": "\n<footer class=\"ac\"><button type=\"button\" class=\"pri\" disabled>Save 6 tokens</button><button type=\"button\" class=\"sec\">Snap all to nearest</button><span class=\"fn\">One value is off the grid. Saving is blocked until it is fixed or snapped.</span></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": false,
  "meta": {
    "id": "grid-bureau-tokens",
    "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-tokens.json",
  "structure": "A ruled form at 900px where each numeric field carries an inline legal-value hint, and an illegal entry marks the row rather than opening a dialog.",
  "html": "<div class=\"dz dz-grid-bureau-tokens\" data-design=\"grid-bureau-tokens\" data-theme=\"grid-bureau\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Editor head\">\n<header class=\"eh\"><span class=\"k\">Foundations · type scale</span><h1>Edit tokens</h1><p>Values must be whole multiples of 8px. Anything else is rejected here rather than caught by the audit later.</p></header></section><div class=\"cols\"><section class=\"dz-mod\" data-mod=\"fields\" aria-label=\"Token fields\">\n<form class=\"tf\">\n  <div class=\"row\"><label class=\"tk\">body-sm</label><div class=\"in\"><input type=\"text\" value=\"12\"><span class=\"u\">px</span></div><div class=\"in\"><input type=\"text\" value=\"20\"><span class=\"u\">px</span></div><span class=\"ok\">2.5 baselines</span></div>\n  <div class=\"row\"><label class=\"tk\">body-md</label><div class=\"in\"><input type=\"text\" value=\"14\"><span class=\"u\">px</span></div><div class=\"in\"><input type=\"text\" value=\"24\"><span class=\"u\">px</span></div><span class=\"ok\">3 baselines</span></div>\n  <div class=\"row bad\"><label class=\"tk\">body-lg</label><div class=\"in\"><input type=\"text\" value=\"16\"><span class=\"u\">px</span></div><div class=\"in err\"><input type=\"text\" value=\"26\"><span class=\"u\">px</span></div><span class=\"no\">Not on the grid — use 24 or 32</span></div>\n  <div class=\"row\"><label class=\"tk\">headline-md</label><div class=\"in\"><input type=\"text\" value=\"20\"><span class=\"u\">px</span></div><div class=\"in\"><input type=\"text\" value=\"28\"><span class=\"u\">px</span></div><span class=\"ok\">3.5 baselines</span></div>\n  <div class=\"row\"><label class=\"tk\">headline-lg</label><div class=\"in\"><input type=\"text\" value=\"32\"><span class=\"u\">px</span></div><div class=\"in\"><input type=\"text\" value=\"40\"><span class=\"u\">px</span></div><span class=\"ok\">5 baselines</span></div>\n  <div class=\"row\"><label class=\"tk\">display-lg</label><div class=\"in\"><input type=\"text\" value=\"64\"><span class=\"u\">px</span></div><div class=\"in\"><input type=\"text\" value=\"64\"><span class=\"u\">px</span></div><span class=\"ok\">8 baselines</span></div>\n</form></section><section class=\"dz-mod\" data-mod=\"preview\" aria-label=\"Live preview\">\n<aside class=\"pv\"><span class=\"k\">Preview with the overlay on</span>\n<div class=\"pb\"><p class=\"es\">Body small, twelve on twenty.</p><p class=\"em\">Body medium, fourteen on twenty-four, which is the workhorse.</p><p class=\"el bad2\">Body large at twenty-six sits between two lines and drags everything under it out of register.</p><p class=\"hm\">Headline medium</p></div>\n<p class=\"fn\">The third paragraph is the illegal one. Notice that the paragraph after it is also wrong, which is how one bad value becomes a page-wide problem.</p></aside></section></div><section class=\"dz-mod\" data-mod=\"act\" aria-label=\"Actions\">\n<footer class=\"ac\"><button type=\"button\" class=\"pri\" disabled>Save 6 tokens</button><button type=\"button\" class=\"sec\">Snap all to nearest</button><span class=\"fn\">One value is off the grid. Saving is blocked until it is fixed or snapped.</span></footer></section>\n</div>",
  "css": "\n.dz-grid-bureau-tokens { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 32px; max-width: 1120px; margin: 0 auto; }\n.dz-grid-bureau-tokens .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-tokens .eh { padding-bottom: 24px; border-bottom: 1px solid var(--border); margin-bottom: 24px; }\n.dz-grid-bureau-tokens h1 { font-family: var(--pv-display); font-size: 32px; line-height: 40px; font-weight: 500; margin: 8px 0 8px; letter-spacing: -.015em; }\n.dz-grid-bureau-tokens .eh p { margin: 0; font-size: 14px; line-height: 24px; color: var(--muted-foreground); max-width: 68ch; }\n.dz-grid-bureau-tokens .cols { display: grid; grid-template-columns: 1fr 360px; gap: 32px; align-items: start; }\n.dz-grid-bureau-tokens .row { display: grid; grid-template-columns: 120px 96px 96px 1fr; gap: 16px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }\n.dz-grid-bureau-tokens .tk { font-family: var(--pv-mono); font-size: 12px; line-height: 16px; color: var(--muted-foreground); }\n.dz-grid-bureau-tokens .in { position: relative; }\n.dz-grid-bureau-tokens input { width: 100%; font: inherit; font-family: var(--pv-mono); font-size: 12px; line-height: 16px; padding: 8px 24px 8px 8px; background: var(--card); border: 1px solid var(--input); border-radius: 0; color: var(--foreground); }\n.dz-grid-bureau-tokens .in.err input { border-color: var(--accent); border-width: 2px; }\n.dz-grid-bureau-tokens .u { position: absolute; right: 8px; top: 8px; font-family: var(--pv-mono); font-size: 12px; line-height: 16px; color: var(--muted-foreground); }\n.dz-grid-bureau-tokens .ok { font-family: var(--pv-mono); font-size: 12px; line-height: 16px; color: var(--muted-foreground); }\n.dz-grid-bureau-tokens .no { font-family: var(--pv-mono); font-size: 12px; line-height: 16px; color: var(--accent); }\n.dz-grid-bureau-tokens .pv { border-left: 1px solid var(--border); padding-left: 24px; }\n.dz-grid-bureau-tokens .pb { background-image: repeating-linear-gradient(to bottom, color-mix(in oklab, var(--accent) 16%, transparent) 0 1px, transparent 1px 8px); margin: 8px 0 16px; }\n.dz-grid-bureau-tokens .pb p { margin: 0 0 16px; }\n.dz-grid-bureau-tokens .es { font-size: 12px; line-height: 20px; }\n.dz-grid-bureau-tokens .em { font-size: 14px; line-height: 24px; }\n.dz-grid-bureau-tokens .el { font-size: 16px; line-height: 26px; }\n.dz-grid-bureau-tokens .hm { font-size: 20px; line-height: 28px; font-weight: 500; }\n.dz-grid-bureau-tokens .bad2 { outline: 2px solid var(--accent); outline-offset: 2px; }\n.dz-grid-bureau-tokens .fn { font-size: 12px; line-height: 20px; color: var(--muted-foreground); margin: 0; }\n.dz-grid-bureau-tokens .ac { display: flex; gap: 16px; align-items: center; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); }\n.dz-grid-bureau-tokens button { font: inherit; font-size: 14px; line-height: 24px; padding: 8px 24px; border-radius: 0; cursor: pointer; }\n.dz-grid-bureau-tokens .pri { background: var(--primary); color: var(--primary-foreground); border: 0; }\n.dz-grid-bureau-tokens .pri[disabled] { opacity: .4; cursor: not-allowed; }\n.dz-grid-bureau-tokens .sec { background: transparent; color: var(--foreground); border: 1px solid var(--border); }\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"
}