{
  "id": "grid-bureau-audit",
  "name": "Grid Audit",
  "theme": "grid-bureau",
  "category": "Data & Reports",
  "description": "An audit report listing every element that misses the baseline, with the offending value and the nearest legal one, because a violation is only useful if the fix is in the row.",
  "layout": "A four-count band at hairline weight, then a ruled table of violations with the measured and expected values in mono and a fix column.",
  "modules": [
    {
      "key": "counts",
      "name": "Count band",
      "html": "\n<section class=\"cb\">\n  <div><span class=\"k\">Elements measured</span><b class=\"n\">2,418</b></div>\n  <div><span class=\"k\">Off baseline</span><b class=\"n\">31</b></div>\n  <div><span class=\"k\">Worst drift</span><b class=\"n\">6 px</b></div>\n  <div><span class=\"k\">Pages affected</span><b class=\"n\">4 of 42</b></div>\n</section>"
    },
    {
      "key": "table",
      "name": "Violation table",
      "html": "\n<section class=\"vt\"><h2>Off the baseline</h2>\n<table><thead><tr><th>Selector</th><th>Property</th><th>Measured</th><th>Nearest legal</th><th>Drift</th><th>Page</th></tr></thead>\n<tbody>\n<tr><td class=\"n\">.pricing-card h3</td><td class=\"n\">line-height</td><td class=\"n\">22.5</td><td class=\"n\">24</td><td class=\"n\">1.5</td><td>Pricing</td></tr>\n<tr><td class=\"n\">.nav a</td><td class=\"n\">height</td><td class=\"n\">44</td><td class=\"n\">48</td><td class=\"n\">4</td><td>All</td></tr>\n<tr class=\"worst\"><td class=\"n\">.data-grid tr</td><td class=\"n\">height</td><td class=\"n\">36</td><td class=\"n\">40</td><td class=\"n\">4</td><td>Reports</td></tr>\n<tr class=\"worst\"><td class=\"n\">.hero p</td><td class=\"n\">margin-block-end</td><td class=\"n\">18</td><td class=\"n\">24</td><td class=\"n\">6</td><td>Home</td></tr>\n<tr><td class=\"n\">.footnote</td><td class=\"n\">line-height</td><td class=\"n\">18</td><td class=\"n\">16</td><td class=\"n\">2</td><td>Docs</td></tr>\n<tr><td class=\"n\">.chip</td><td class=\"n\">height</td><td class=\"n\">28</td><td class=\"n\">24</td><td class=\"n\">4</td><td>Search</td></tr>\n</tbody></table>\n<p class=\"fn\">Drift is measured against the nearest legal value, not against zero, because the fix is always to the nearest one. Cumulative drift down a page is reported separately.</p></section>"
    },
    {
      "key": "cumulative",
      "name": "Cumulative drift",
      "html": "\n<aside class=\"cd2\"><h2>Cumulative drift, Home</h2>\n<ol>\n  <li><span class=\"el\">Hero heading</span><span class=\"dr n\">0</span></li>\n  <li><span class=\"el\">Hero paragraph</span><span class=\"dr n\">−6</span></li>\n  <li><span class=\"el\">Feature row 1</span><span class=\"dr n\">−6</span></li>\n  <li><span class=\"el\">Feature row 2</span><span class=\"dr n\">−6</span></li>\n  <li><span class=\"el\">Testimonial</span><span class=\"dr n\">−12</span></li>\n  <li><span class=\"el\">Footer</span><span class=\"dr n\">−12</span></li>\n</ol>\n<p class=\"fn\">Two violations accumulate to 12px by the footer, which is a visible baseline and a half. This is the failure mode the rule exists to prevent.</p></aside>"
    }
  ],
  "moduleCount": 3,
  "reorderable": false,
  "meta": {
    "id": "grid-bureau-audit",
    "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-audit.json",
  "structure": "A four-count band at hairline weight, then a ruled table of violations with the measured and expected values in mono and a fix column.",
  "html": "<div class=\"dz dz-grid-bureau-audit\" data-design=\"grid-bureau-audit\" data-theme=\"grid-bureau\">\n<section class=\"dz-mod\" data-mod=\"counts\" aria-label=\"Count band\">\n<section class=\"cb\">\n  <div><span class=\"k\">Elements measured</span><b class=\"n\">2,418</b></div>\n  <div><span class=\"k\">Off baseline</span><b class=\"n\">31</b></div>\n  <div><span class=\"k\">Worst drift</span><b class=\"n\">6 px</b></div>\n  <div><span class=\"k\">Pages affected</span><b class=\"n\">4 of 42</b></div>\n</section></section><div class=\"split\"><section class=\"dz-mod\" data-mod=\"table\" aria-label=\"Violation table\">\n<section class=\"vt\"><h2>Off the baseline</h2>\n<table><thead><tr><th>Selector</th><th>Property</th><th>Measured</th><th>Nearest legal</th><th>Drift</th><th>Page</th></tr></thead>\n<tbody>\n<tr><td class=\"n\">.pricing-card h3</td><td class=\"n\">line-height</td><td class=\"n\">22.5</td><td class=\"n\">24</td><td class=\"n\">1.5</td><td>Pricing</td></tr>\n<tr><td class=\"n\">.nav a</td><td class=\"n\">height</td><td class=\"n\">44</td><td class=\"n\">48</td><td class=\"n\">4</td><td>All</td></tr>\n<tr class=\"worst\"><td class=\"n\">.data-grid tr</td><td class=\"n\">height</td><td class=\"n\">36</td><td class=\"n\">40</td><td class=\"n\">4</td><td>Reports</td></tr>\n<tr class=\"worst\"><td class=\"n\">.hero p</td><td class=\"n\">margin-block-end</td><td class=\"n\">18</td><td class=\"n\">24</td><td class=\"n\">6</td><td>Home</td></tr>\n<tr><td class=\"n\">.footnote</td><td class=\"n\">line-height</td><td class=\"n\">18</td><td class=\"n\">16</td><td class=\"n\">2</td><td>Docs</td></tr>\n<tr><td class=\"n\">.chip</td><td class=\"n\">height</td><td class=\"n\">28</td><td class=\"n\">24</td><td class=\"n\">4</td><td>Search</td></tr>\n</tbody></table>\n<p class=\"fn\">Drift is measured against the nearest legal value, not against zero, because the fix is always to the nearest one. Cumulative drift down a page is reported separately.</p></section></section><section class=\"dz-mod\" data-mod=\"cumulative\" aria-label=\"Cumulative drift\">\n<aside class=\"cd2\"><h2>Cumulative drift, Home</h2>\n<ol>\n  <li><span class=\"el\">Hero heading</span><span class=\"dr n\">0</span></li>\n  <li><span class=\"el\">Hero paragraph</span><span class=\"dr n\">−6</span></li>\n  <li><span class=\"el\">Feature row 1</span><span class=\"dr n\">−6</span></li>\n  <li><span class=\"el\">Feature row 2</span><span class=\"dr n\">−6</span></li>\n  <li><span class=\"el\">Testimonial</span><span class=\"dr n\">−12</span></li>\n  <li><span class=\"el\">Footer</span><span class=\"dr n\">−12</span></li>\n</ol>\n<p class=\"fn\">Two violations accumulate to 12px by the footer, which is a visible baseline and a half. This is the failure mode the rule exists to prevent.</p></aside></section></div>\n</div>",
  "css": "\n.dz-grid-bureau-audit { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 32px; }\n.dz-grid-bureau-audit .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-audit .n { font-family: var(--pv-mono); font-size: 12px; line-height: 16px; }\n.dz-grid-bureau-audit .cb { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--border); margin-bottom: 24px; }\n.dz-grid-bureau-audit .cb b { display: block; font-family: var(--pv-mono); font-size: 32px; line-height: 40px; font-weight: 400; }\n.dz-grid-bureau-audit .split { display: grid; grid-template-columns: 1fr 280px; gap: 32px; align-items: start; }\n.dz-grid-bureau-audit h2 { font-size: 20px; line-height: 28px; font-weight: 500; margin: 0 0 16px; }\n.dz-grid-bureau-audit table { width: 100%; border-collapse: collapse; }\n.dz-grid-bureau-audit th { text-transform: uppercase; letter-spacing: .16em; font-size: 10px; font-weight: 600; line-height: 16px; color: var(--muted-foreground); text-align: right; padding: 0 16px 8px 0; border-bottom: 1px solid var(--border); }\n.dz-grid-bureau-audit th:first-child, .dz-grid-bureau-audit th:last-child { text-align: left; }\n.dz-grid-bureau-audit td { padding: 12px 16px 12px 0; text-align: right; border-bottom: 1px solid var(--border); font-size: 14px; line-height: 24px; }\n.dz-grid-bureau-audit td:first-child, .dz-grid-bureau-audit td:last-child { text-align: left; }\n.dz-grid-bureau-audit tr.worst td { border-bottom-width: 2px; }\n.dz-grid-bureau-audit .fn { margin: 16px 0 0; font-size: 12px; line-height: 20px; color: var(--muted-foreground); max-width: 68ch; }\n.dz-grid-bureau-audit .cd2 { border-left: 1px solid var(--border); padding-left: 24px; }\n.dz-grid-bureau-audit .cd2 ol { list-style: none; margin: 0 0 16px; padding: 0; }\n.dz-grid-bureau-audit .cd2 li { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid var(--border); font-size: 12px; line-height: 20px; }\n.dz-grid-bureau-audit .dr { color: 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"
}