{
  "id": "grid-bureau-hire",
  "name": "Engagement Note",
  "theme": "grid-bureau",
  "category": "Marketing",
  "description": "A services page written as a numbered engagement note rather than a pitch, ending in a rate table with no packages and no anchoring.",
  "layout": "A single 68ch column of numbered sections with the numerals hanging in the margin, closing on a four-row rate table at hairline weight.",
  "modules": [
    {
      "key": "head",
      "name": "Note head",
      "html": "\n<header class=\"nh\"><span class=\"k\">Engagement note · 2027</span><h1>How working with us actually goes</h1><p class=\"lede\">This is the document we would otherwise send you in week one. It is here instead because it is the fastest way for both of us to find out if this is a bad fit.</p></header>"
    },
    {
      "key": "sections",
      "name": "Numbered sections",
      "html": "\n<article class=\"ns\">\n  <section><span class=\"no n\">01</span><div><h2>We start by reading what you have</h2><p>Usually two weeks, always billed. We read the existing specification, the existing code and the last two years of decisions. Practices that skip this step are guessing, and the guess is always that your problem is the one they have solved before.</p></div></section>\n  <section><span class=\"no n\">02</span><div><h2>We write the constraint down before the design</h2><p>One page. For this system it was \"every vertical value is a multiple of 8px, no exceptions\". Yours will be different and it will rule out things you wanted. If it does not rule anything out it is not a constraint.</p></div></section>\n  <section><span class=\"no n\">03</span><div><h2>We build the checker before the components</h2><p>A rule that is not machine-checkable will be violated within a quarter and nobody will notice for a year. The audit script in this system was written before a single component was.</p></div></section>\n  <section><span class=\"no n\">04</span><div><h2>We hand over and leave</h2><p>No retainer, no ongoing licence, no dependency on us. The system belongs to you including the checker, and about half our clients never speak to us again, which is the correct outcome.</p></div></section>\n</article>"
    },
    {
      "key": "rates",
      "name": "Rate table",
      "html": "\n<section class=\"rt\"><h2>Rates</h2>\n<table><tbody>\n<tr><td>Reading, two weeks</td><td class=\"n\">£9,600</td><td>Fixed. Ends in a written assessment whether or not we go on.</td></tr>\n<tr><td>System design</td><td class=\"n\">£1,400 / day</td><td>Typically 20 to 40 days depending on how much already exists.</td></tr>\n<tr><td>Implementation support</td><td class=\"n\">£1,200 / day</td><td>Working inside your codebase alongside your engineers.</td></tr>\n<tr><td>Review, one day</td><td class=\"n\">£1,400</td><td>For systems we did not build. Ends in a written note, not a meeting.</td></tr>\n</tbody></table>\n<p class=\"fn\">No packages, no discount for volume and no anchoring tier we do not expect anyone to buy. Rates are the same for commercial and public sector work.</p></section>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "grid-bureau-hire",
    "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-hire.json",
  "structure": "A single 68ch column of numbered sections with the numerals hanging in the margin, closing on a four-row rate table at hairline weight.",
  "html": "<div class=\"dz dz-grid-bureau-hire\" data-design=\"grid-bureau-hire\" data-theme=\"grid-bureau\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Note head\">\n<header class=\"nh\"><span class=\"k\">Engagement note · 2027</span><h1>How working with us actually goes</h1><p class=\"lede\">This is the document we would otherwise send you in week one. It is here instead because it is the fastest way for both of us to find out if this is a bad fit.</p></header></section>\n<section class=\"dz-mod\" data-mod=\"sections\" aria-label=\"Numbered sections\">\n<article class=\"ns\">\n  <section><span class=\"no n\">01</span><div><h2>We start by reading what you have</h2><p>Usually two weeks, always billed. We read the existing specification, the existing code and the last two years of decisions. Practices that skip this step are guessing, and the guess is always that your problem is the one they have solved before.</p></div></section>\n  <section><span class=\"no n\">02</span><div><h2>We write the constraint down before the design</h2><p>One page. For this system it was \"every vertical value is a multiple of 8px, no exceptions\". Yours will be different and it will rule out things you wanted. If it does not rule anything out it is not a constraint.</p></div></section>\n  <section><span class=\"no n\">03</span><div><h2>We build the checker before the components</h2><p>A rule that is not machine-checkable will be violated within a quarter and nobody will notice for a year. The audit script in this system was written before a single component was.</p></div></section>\n  <section><span class=\"no n\">04</span><div><h2>We hand over and leave</h2><p>No retainer, no ongoing licence, no dependency on us. The system belongs to you including the checker, and about half our clients never speak to us again, which is the correct outcome.</p></div></section>\n</article></section>\n<section class=\"dz-mod\" data-mod=\"rates\" aria-label=\"Rate table\">\n<section class=\"rt\"><h2>Rates</h2>\n<table><tbody>\n<tr><td>Reading, two weeks</td><td class=\"n\">£9,600</td><td>Fixed. Ends in a written assessment whether or not we go on.</td></tr>\n<tr><td>System design</td><td class=\"n\">£1,400 / day</td><td>Typically 20 to 40 days depending on how much already exists.</td></tr>\n<tr><td>Implementation support</td><td class=\"n\">£1,200 / day</td><td>Working inside your codebase alongside your engineers.</td></tr>\n<tr><td>Review, one day</td><td class=\"n\">£1,400</td><td>For systems we did not build. Ends in a written note, not a meeting.</td></tr>\n</tbody></table>\n<p class=\"fn\">No packages, no discount for volume and no anchoring tier we do not expect anyone to buy. Rates are the same for commercial and public sector work.</p></section></section>\n</div>",
  "css": "\n.dz-grid-bureau-hire { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 32px; max-width: 820px; margin: 0 auto; }\n.dz-grid-bureau-hire .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-hire .n { font-family: var(--pv-mono); font-size: 12px; line-height: 16px; }\n.dz-grid-bureau-hire .nh { padding-bottom: 24px; border-bottom: 1px solid var(--border); margin-bottom: 24px; }\n.dz-grid-bureau-hire h1 { font-family: var(--pv-display); font-size: 32px; line-height: 40px; font-weight: 500; margin: 8px 0 16px; letter-spacing: -.015em; }\n.dz-grid-bureau-hire .lede { margin: 0; font-size: 16px; line-height: 28px; max-width: 68ch; }\n.dz-grid-bureau-hire .ns section { display: grid; grid-template-columns: 48px 1fr; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--border); }\n.dz-grid-bureau-hire .no { color: var(--muted-foreground); }\n.dz-grid-bureau-hire h2 { font-size: 20px; line-height: 28px; font-weight: 500; margin: 0 0 8px; }\n.dz-grid-bureau-hire .ns p { margin: 0; font-size: 14px; line-height: 24px; max-width: 68ch; }\n.dz-grid-bureau-hire .rt { margin-top: 32px; }\n.dz-grid-bureau-hire table { width: 100%; border-collapse: collapse; }\n.dz-grid-bureau-hire td { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--border); font-size: 14px; line-height: 24px; vertical-align: baseline; }\n.dz-grid-bureau-hire td:first-child { width: 200px; }\n.dz-grid-bureau-hire td.n { width: 130px; }\n.dz-grid-bureau-hire td:last-child { color: var(--muted-foreground); }\n.dz-grid-bureau-hire .fn { margin: 16px 0 0; font-size: 12px; line-height: 20px; color: var(--muted-foreground); max-width: 68ch; }\n@media (prefers-reduced-motion: reduce) { .dz-grid-bureau-hire *, .dz-grid-bureau-hire *::before, .dz-grid-bureau-hire *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }\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"
}