{
  "id": "grid-bureau-find",
  "name": "Component Search",
  "theme": "grid-bureau",
  "category": "Search & Browse",
  "description": "A component search whose results state the baseline cost of each component, so a designer can see what adding it does to the vertical rhythm before adopting it.",
  "layout": "A hairline query row over a ruled result list where each row gives the component, its height in baselines, and where it is already used.",
  "modules": [
    {
      "key": "query",
      "name": "Query row",
      "html": "\n<header class=\"qr\"><h1>Components</h1><label class=\"f\"><input type=\"search\" value=\"table\"></label><span class=\"ct n\">9 of 41 components</span></header>"
    },
    {
      "key": "facets",
      "name": "Facet row",
      "html": "\n<nav class=\"fc\"><span class=\"k\">Height</span><ul><li><a href=\"#\">2 baselines</a></li><li><a href=\"#\">3</a></li><li class=\"on\"><a href=\"#\">4 or more</a></li><li><a href=\"#\">Any</a></li></ul><label class=\"only\"><input type=\"checkbox\" checked> In production only</label></nav>"
    },
    {
      "key": "results",
      "name": "Result rows",
      "html": "\n<ol class=\"rs\">\n  <li><div><h2>Data table row</h2><p>Fixed 40px rows with hairline separators and a 2px rule under the head.</p></div><span class=\"bl n\">5 baselines</span><span class=\"us n\">12 pages</span></li>\n  <li><div><h2>Specimen row</h2><p>Token, example, computed value. The example cell can be any height; the row rounds up.</p></div><span class=\"bl n\">variable</span><span class=\"us n\">4 pages</span></li>\n  <li><div><h2>Comparison table</h2><p>Two to five columns with a fixed 48px head and 40px body rows.</p></div><span class=\"bl n\">6 + 5n</span><span class=\"us n\">3 pages</span></li>\n  <li><div><h2>Schedule table</h2><p>Ruled on all four sides of every cell. Rows are 32px because the content is always one line.</p></div><span class=\"bl n\">4 baselines</span><span class=\"us n\">2 pages</span></li>\n  <li class=\"off\"><div><h2>Sortable grid</h2><p>Third-party. Ships 36px rows and cannot be configured to 40 without patching.</p></div><span class=\"bl n\">4.5 baselines</span><span class=\"us n\">not adopted</span></li>\n</ol>\n<p class=\"fn\">The last row is the reason this column exists. A component that cannot sit on the grid is not a component this system can use, however good it is otherwise.</p>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "grid-bureau-find",
    "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-find.json",
  "structure": "A hairline query row over a ruled result list where each row gives the component, its height in baselines, and where it is already used.",
  "html": "<div class=\"dz dz-grid-bureau-find\" data-design=\"grid-bureau-find\" data-theme=\"grid-bureau\">\n<section class=\"dz-mod\" data-mod=\"query\" aria-label=\"Query row\">\n<header class=\"qr\"><h1>Components</h1><label class=\"f\"><input type=\"search\" value=\"table\"></label><span class=\"ct n\">9 of 41 components</span></header></section>\n<section class=\"dz-mod\" data-mod=\"facets\" aria-label=\"Facet row\">\n<nav class=\"fc\"><span class=\"k\">Height</span><ul><li><a href=\"#\">2 baselines</a></li><li><a href=\"#\">3</a></li><li class=\"on\"><a href=\"#\">4 or more</a></li><li><a href=\"#\">Any</a></li></ul><label class=\"only\"><input type=\"checkbox\" checked> In production only</label></nav></section>\n<section class=\"dz-mod\" data-mod=\"results\" aria-label=\"Result rows\">\n<ol class=\"rs\">\n  <li><div><h2>Data table row</h2><p>Fixed 40px rows with hairline separators and a 2px rule under the head.</p></div><span class=\"bl n\">5 baselines</span><span class=\"us n\">12 pages</span></li>\n  <li><div><h2>Specimen row</h2><p>Token, example, computed value. The example cell can be any height; the row rounds up.</p></div><span class=\"bl n\">variable</span><span class=\"us n\">4 pages</span></li>\n  <li><div><h2>Comparison table</h2><p>Two to five columns with a fixed 48px head and 40px body rows.</p></div><span class=\"bl n\">6 + 5n</span><span class=\"us n\">3 pages</span></li>\n  <li><div><h2>Schedule table</h2><p>Ruled on all four sides of every cell. Rows are 32px because the content is always one line.</p></div><span class=\"bl n\">4 baselines</span><span class=\"us n\">2 pages</span></li>\n  <li class=\"off\"><div><h2>Sortable grid</h2><p>Third-party. Ships 36px rows and cannot be configured to 40 without patching.</p></div><span class=\"bl n\">4.5 baselines</span><span class=\"us n\">not adopted</span></li>\n</ol>\n<p class=\"fn\">The last row is the reason this column exists. A component that cannot sit on the grid is not a component this system can use, however good it is otherwise.</p></section>\n</div>",
  "css": "\n.dz-grid-bureau-find { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 32px; max-width: 960px; margin: 0 auto; }\n.dz-grid-bureau-find .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-find .n { font-family: var(--pv-mono); font-size: 12px; line-height: 16px; }\n.dz-grid-bureau-find .qr { display: flex; align-items: baseline; gap: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }\n.dz-grid-bureau-find h1 { font-family: var(--pv-display); font-size: 32px; line-height: 40px; font-weight: 500; margin: 0; letter-spacing: -.015em; }\n.dz-grid-bureau-find .f { flex: 1; }\n.dz-grid-bureau-find input[type=search] { width: 100%; font: inherit; font-size: 16px; line-height: 28px; padding: 8px 12px; background: var(--card); border: 1px solid var(--input); border-radius: 0; color: var(--foreground); }\n.dz-grid-bureau-find .ct { color: var(--muted-foreground); }\n.dz-grid-bureau-find .fc { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border); }\n.dz-grid-bureau-find .fc ul { list-style: none; display: flex; gap: 16px; margin: 0; padding: 0; }\n.dz-grid-bureau-find .fc a { font-size: 14px; line-height: 24px; color: var(--muted-foreground); text-decoration: none; }\n.dz-grid-bureau-find .fc li.on a { color: var(--foreground); border-bottom: 2px solid var(--accent); padding-bottom: 2px; }\n.dz-grid-bureau-find .only { margin-left: auto; text-transform: uppercase; letter-spacing: .16em; font-size: 10px; font-weight: 600; line-height: 16px; color: var(--muted-foreground); display: flex; gap: 8px; align-items: center; }\n.dz-grid-bureau-find .rs { list-style: none; margin: 0; padding: 0; }\n.dz-grid-bureau-find .rs li { display: grid; grid-template-columns: 1fr 120px 100px; gap: 24px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--border); }\n.dz-grid-bureau-find h2 { font-size: 20px; line-height: 28px; font-weight: 500; margin: 0 0 4px; }\n.dz-grid-bureau-find .rs p { margin: 0; font-size: 14px; line-height: 24px; color: var(--muted-foreground); }\n.dz-grid-bureau-find .bl { color: var(--foreground); }\n.dz-grid-bureau-find .us { color: var(--muted-foreground); text-align: right; }\n.dz-grid-bureau-find .off .bl { color: var(--accent); }\n.dz-grid-bureau-find .fn { margin: 16px 0 0; font-size: 12px; line-height: 20px; color: var(--muted-foreground); max-width: 68ch; }\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"
}