{
  "id": "grid-bureau-studio",
  "name": "Studio Front",
  "theme": "grid-bureau",
  "category": "Landing",
  "description": "A studio page with no images and no colour except one underline, arguing that a portfolio of typographic work should be legible as typography.",
  "layout": "A 64px display line over a hairline-ruled three-column work list, with everything on the 8px baseline and no filled surfaces at all.",
  "modules": [
    {
      "key": "head",
      "name": "Studio head",
      "html": "\n<header class=\"sh\"><span class=\"k\">Typographic design bureau · Est. 2011</span><h1>Grid Bureau</h1><p class=\"lede\">We set things. Documentation, specifications, annual reports, wayfinding schedules — the work that is mostly text and where the typography is the product rather than the wrapping.</p></header>"
    },
    {
      "key": "work",
      "name": "Work list",
      "html": "\n<section class=\"wl\"><span class=\"k\">Selected work</span>\n<ol>\n  <li><span class=\"yr\">2026</span><div><h2>National Rail wayfinding schedule</h2><p>1,400 signs across 62 stations, specified as a type system rather than a set of artworks.</p></div><span class=\"dc\">Specification</span></li>\n  <li><span class=\"yr\">2025</span><div><h2>Ministry of Justice annual report</h2><p>312 pages, four tabular figures per spread, set on a 12pt baseline that survived print.</p></div><span class=\"dc\">Editorial</span></li>\n  <li><span class=\"yr\">2025</span><div><h2>Tide Table design system</h2><p>Documentation and component specimens for a reference-data product.</p></div><span class=\"dc\">System</span></li>\n  <li><span class=\"yr\">2024</span><div><h2>Drafting Room technical library</h2><p>1,240 standard details, indexed and set to a single measurement convention.</p></div><span class=\"dc\">Specification</span></li>\n  <li><span class=\"yr\">2023</span><div><h2>Herbarium Plate accession catalogue</h2><p>Eighteen thousand records, printed and online, from one source.</p></div><span class=\"dc\">Editorial</span></li>\n</ol></section>"
    },
    {
      "key": "facts",
      "name": "Practice facts",
      "html": "\n<section class=\"pf\">\n  <div><span class=\"k\">People</span><p class=\"n\">6</p></div>\n  <div><span class=\"k\">Founded</span><p class=\"n\">2011</p></div>\n  <div><span class=\"k\">Baseline</span><p class=\"n\">8 px</p></div>\n  <div><span class=\"k\">Images on this page</span><p class=\"n\">0</p></div>\n</section>"
    },
    {
      "key": "contact",
      "name": "Contact",
      "html": "\n<footer class=\"cf\"><span class=\"k\">Contact</span><p>We take on four projects a year and are usually booked two quarters ahead. <a href=\"#\">work@gridbureau.example</a> reaches everyone; there is no new business address because there is no new business department.</p></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "grid-bureau-studio",
    "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-studio.json",
  "structure": "A 64px display line over a hairline-ruled three-column work list, with everything on the 8px baseline and no filled surfaces at all.",
  "html": "<div class=\"dz dz-grid-bureau-studio\" data-design=\"grid-bureau-studio\" data-theme=\"grid-bureau\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Studio head\">\n<header class=\"sh\"><span class=\"k\">Typographic design bureau · Est. 2011</span><h1>Grid Bureau</h1><p class=\"lede\">We set things. Documentation, specifications, annual reports, wayfinding schedules — the work that is mostly text and where the typography is the product rather than the wrapping.</p></header></section>\n<section class=\"dz-mod\" data-mod=\"work\" aria-label=\"Work list\">\n<section class=\"wl\"><span class=\"k\">Selected work</span>\n<ol>\n  <li><span class=\"yr\">2026</span><div><h2>National Rail wayfinding schedule</h2><p>1,400 signs across 62 stations, specified as a type system rather than a set of artworks.</p></div><span class=\"dc\">Specification</span></li>\n  <li><span class=\"yr\">2025</span><div><h2>Ministry of Justice annual report</h2><p>312 pages, four tabular figures per spread, set on a 12pt baseline that survived print.</p></div><span class=\"dc\">Editorial</span></li>\n  <li><span class=\"yr\">2025</span><div><h2>Tide Table design system</h2><p>Documentation and component specimens for a reference-data product.</p></div><span class=\"dc\">System</span></li>\n  <li><span class=\"yr\">2024</span><div><h2>Drafting Room technical library</h2><p>1,240 standard details, indexed and set to a single measurement convention.</p></div><span class=\"dc\">Specification</span></li>\n  <li><span class=\"yr\">2023</span><div><h2>Herbarium Plate accession catalogue</h2><p>Eighteen thousand records, printed and online, from one source.</p></div><span class=\"dc\">Editorial</span></li>\n</ol></section></section>\n<section class=\"dz-mod\" data-mod=\"facts\" aria-label=\"Practice facts\">\n<section class=\"pf\">\n  <div><span class=\"k\">People</span><p class=\"n\">6</p></div>\n  <div><span class=\"k\">Founded</span><p class=\"n\">2011</p></div>\n  <div><span class=\"k\">Baseline</span><p class=\"n\">8 px</p></div>\n  <div><span class=\"k\">Images on this page</span><p class=\"n\">0</p></div>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"contact\" aria-label=\"Contact\">\n<footer class=\"cf\"><span class=\"k\">Contact</span><p>We take on four projects a year and are usually booked two quarters ahead. <a href=\"#\">work@gridbureau.example</a> reaches everyone; there is no new business address because there is no new business department.</p></footer></section>\n</div>",
  "css": "\n.dz-grid-bureau-studio { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 32px; max-width: 1000px; margin: 0 auto; }\n.dz-grid-bureau-studio .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-studio .n { font-family: var(--pv-mono); font-size: 12px; line-height: 16px; }\n.dz-grid-bureau-studio h1 { font-family: var(--pv-display); font-size: 64px; line-height: 64px; font-weight: 500; letter-spacing: -.03em; margin: 8px 0 16px; }\n.dz-grid-bureau-studio .lede { font-size: 16px; line-height: 28px; margin: 0 0 32px; max-width: 68ch; }\n.dz-grid-bureau-studio .wl ol { list-style: none; margin: 8px 0 32px; padding: 0; }\n.dz-grid-bureau-studio .wl li { display: grid; grid-template-columns: 64px 1fr 140px; gap: 24px; padding: 16px 0; border-top: 1px solid var(--border); align-items: baseline; }\n.dz-grid-bureau-studio .yr { font-family: var(--pv-mono); font-size: 12px; line-height: 16px; color: var(--muted-foreground); }\n.dz-grid-bureau-studio h2 { font-size: 20px; line-height: 28px; font-weight: 500; margin: 0 0 4px; }\n.dz-grid-bureau-studio .wl p { margin: 0; font-size: 14px; line-height: 24px; color: var(--muted-foreground); }\n.dz-grid-bureau-studio .dc { text-transform: uppercase; letter-spacing: .16em; font-size: 10px; font-weight: 600; line-height: 16px; color: var(--muted-foreground); text-align: right; }\n.dz-grid-bureau-studio .pf { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 24px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }\n.dz-grid-bureau-studio .pf p { margin: 0; font-size: 32px; line-height: 40px; }\n.dz-grid-bureau-studio .cf { padding-top: 24px; }\n.dz-grid-bureau-studio .cf p { margin: 8px 0 0; font-size: 14px; line-height: 24px; max-width: 68ch; }\n.dz-grid-bureau-studio 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"
}