{
  "id": "evidence-office-ops-grid",
  "name": "Operations Grid",
  "theme": "evidence-office",
  "category": "Dashboard",
  "description": "Eight service measures in a hairline grid, each with its own sparkline and target line, and nothing else on the page.",
  "layout": "A single 4x2 grid of equal cells divided by hairlines with no gutters, so it reads as one ruled table rather than eight cards; a period selector sits in the header row.",
  "modules": [
    {
      "key": "head",
      "name": "Period header",
      "html": "\n<header class=\"oh\"><h1>Service measures</h1><div class=\"oh-per\"><button type=\"button\">7d</button><button type=\"button\" class=\"on\">30d</button><button type=\"button\">90d</button><button type=\"button\">FY</button></div></header>"
    },
    {
      "key": "grid",
      "name": "Measure grid",
      "html": "\n<div class=\"og\">\n  <div class=\"c\"><span class=\"k\">Determined in time</span><span class=\"v\">86.4<i>%</i></span><svg viewBox=\"0 0 100 28\" preserveAspectRatio=\"none\" aria-hidden=\"true\"><polyline points=\"0,20 14,18 28,21 42,14 56,16 70,10 84,11 100,7\"/><line class=\"tgt\" x1=\"0\" y1=\"12\" x2=\"100\" y2=\"12\"/></svg><span class=\"t\">Target 85%</span></div>\n  <div class=\"c\"><span class=\"k\">Median days</span><span class=\"v\">19</span><svg viewBox=\"0 0 100 28\" preserveAspectRatio=\"none\" aria-hidden=\"true\"><polyline points=\"0,8 14,10 28,9 42,13 56,12 70,16 84,15 100,18\"/><line class=\"tgt\" x1=\"0\" y1=\"14\" x2=\"100\" y2=\"14\"/></svg><span class=\"t\">Target 21</span></div>\n  <div class=\"c\"><span class=\"k\">Backlog</span><span class=\"v\">148</span><svg viewBox=\"0 0 100 28\" preserveAspectRatio=\"none\" aria-hidden=\"true\"><polyline points=\"0,22 14,19 28,20 42,16 56,13 70,14 84,10 100,6\"/><line class=\"tgt\" x1=\"0\" y1=\"11\" x2=\"100\" y2=\"11\"/></svg><span class=\"t\">Ceiling 130</span></div>\n  <div class=\"c\"><span class=\"k\">Appeals upheld</span><span class=\"v\">4</span><svg viewBox=\"0 0 100 28\" preserveAspectRatio=\"none\" aria-hidden=\"true\"><polyline points=\"0,10 14,12 28,11 42,15 56,17 70,16 84,20 100,21\"/><line class=\"tgt\" x1=\"0\" y1=\"16\" x2=\"100\" y2=\"16\"/></svg><span class=\"t\">Target under 6</span></div>\n  <div class=\"c\"><span class=\"k\">Consultee response</span><span class=\"v\">72.1<i>%</i></span><svg viewBox=\"0 0 100 28\" preserveAspectRatio=\"none\" aria-hidden=\"true\"><polyline points=\"0,16 14,15 28,17 42,13 56,14 70,12 84,13 100,11\"/><line class=\"tgt\" x1=\"0\" y1=\"10\" x2=\"100\" y2=\"10\"/></svg><span class=\"t\">Target 80%</span></div>\n  <div class=\"c\"><span class=\"k\">Intake per week</span><span class=\"v\">61</span><svg viewBox=\"0 0 100 28\" preserveAspectRatio=\"none\" aria-hidden=\"true\"><polyline points=\"0,14 14,11 28,15 42,9 56,12 70,8 84,10 100,9\"/><line class=\"tgt\" x1=\"0\" y1=\"13\" x2=\"100\" y2=\"13\"/></svg><span class=\"t\">Plan 55</span></div>\n  <div class=\"c\"><span class=\"k\">Withdrawn</span><span class=\"v\">9</span><svg viewBox=\"0 0 100 28\" preserveAspectRatio=\"none\" aria-hidden=\"true\"><polyline points=\"0,18 14,19 28,17 42,20 56,18 70,21 84,19 100,22\"/><line class=\"tgt\" x1=\"0\" y1=\"19\" x2=\"100\" y2=\"19\"/></svg><span class=\"t\">No target</span></div>\n  <div class=\"c\"><span class=\"k\">Cost per case</span><span class=\"v\">£412</span><svg viewBox=\"0 0 100 28\" preserveAspectRatio=\"none\" aria-hidden=\"true\"><polyline points=\"0,12 14,13 28,12 42,15 56,14 70,17 84,16 100,19\"/><line class=\"tgt\" x1=\"0\" y1=\"15\" x2=\"100\" y2=\"15\"/></svg><span class=\"t\">Budget £430</span></div>\n</div>"
    },
    {
      "key": "note",
      "name": "Source note",
      "html": "\n<footer class=\"on-note\"><span>Source</span> Case management extract, nightly at 02:00. Figures for the current period are provisional until the month closes.</footer>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "evidence-office-ops-grid",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-08-29T18:23:29+09:00",
    "updatedAt": "2026-08-29T18:23:29+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/evidence-office-ops-grid.json",
  "structure": "A single 4x2 grid of equal cells divided by hairlines with no gutters, so it reads as one ruled table rather than eight cards; a period selector sits in the header row.",
  "html": "<div class=\"dz dz-evidence-office-ops-grid\" data-design=\"evidence-office-ops-grid\" data-theme=\"evidence-office\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Period header\">\n<header class=\"oh\"><h1>Service measures</h1><div class=\"oh-per\"><button type=\"button\">7d</button><button type=\"button\" class=\"on\">30d</button><button type=\"button\">90d</button><button type=\"button\">FY</button></div></header></section>\n<section class=\"dz-mod\" data-mod=\"grid\" aria-label=\"Measure grid\">\n<div class=\"og\">\n  <div class=\"c\"><span class=\"k\">Determined in time</span><span class=\"v\">86.4<i>%</i></span><svg viewBox=\"0 0 100 28\" preserveAspectRatio=\"none\" aria-hidden=\"true\"><polyline points=\"0,20 14,18 28,21 42,14 56,16 70,10 84,11 100,7\"/><line class=\"tgt\" x1=\"0\" y1=\"12\" x2=\"100\" y2=\"12\"/></svg><span class=\"t\">Target 85%</span></div>\n  <div class=\"c\"><span class=\"k\">Median days</span><span class=\"v\">19</span><svg viewBox=\"0 0 100 28\" preserveAspectRatio=\"none\" aria-hidden=\"true\"><polyline points=\"0,8 14,10 28,9 42,13 56,12 70,16 84,15 100,18\"/><line class=\"tgt\" x1=\"0\" y1=\"14\" x2=\"100\" y2=\"14\"/></svg><span class=\"t\">Target 21</span></div>\n  <div class=\"c\"><span class=\"k\">Backlog</span><span class=\"v\">148</span><svg viewBox=\"0 0 100 28\" preserveAspectRatio=\"none\" aria-hidden=\"true\"><polyline points=\"0,22 14,19 28,20 42,16 56,13 70,14 84,10 100,6\"/><line class=\"tgt\" x1=\"0\" y1=\"11\" x2=\"100\" y2=\"11\"/></svg><span class=\"t\">Ceiling 130</span></div>\n  <div class=\"c\"><span class=\"k\">Appeals upheld</span><span class=\"v\">4</span><svg viewBox=\"0 0 100 28\" preserveAspectRatio=\"none\" aria-hidden=\"true\"><polyline points=\"0,10 14,12 28,11 42,15 56,17 70,16 84,20 100,21\"/><line class=\"tgt\" x1=\"0\" y1=\"16\" x2=\"100\" y2=\"16\"/></svg><span class=\"t\">Target under 6</span></div>\n  <div class=\"c\"><span class=\"k\">Consultee response</span><span class=\"v\">72.1<i>%</i></span><svg viewBox=\"0 0 100 28\" preserveAspectRatio=\"none\" aria-hidden=\"true\"><polyline points=\"0,16 14,15 28,17 42,13 56,14 70,12 84,13 100,11\"/><line class=\"tgt\" x1=\"0\" y1=\"10\" x2=\"100\" y2=\"10\"/></svg><span class=\"t\">Target 80%</span></div>\n  <div class=\"c\"><span class=\"k\">Intake per week</span><span class=\"v\">61</span><svg viewBox=\"0 0 100 28\" preserveAspectRatio=\"none\" aria-hidden=\"true\"><polyline points=\"0,14 14,11 28,15 42,9 56,12 70,8 84,10 100,9\"/><line class=\"tgt\" x1=\"0\" y1=\"13\" x2=\"100\" y2=\"13\"/></svg><span class=\"t\">Plan 55</span></div>\n  <div class=\"c\"><span class=\"k\">Withdrawn</span><span class=\"v\">9</span><svg viewBox=\"0 0 100 28\" preserveAspectRatio=\"none\" aria-hidden=\"true\"><polyline points=\"0,18 14,19 28,17 42,20 56,18 70,21 84,19 100,22\"/><line class=\"tgt\" x1=\"0\" y1=\"19\" x2=\"100\" y2=\"19\"/></svg><span class=\"t\">No target</span></div>\n  <div class=\"c\"><span class=\"k\">Cost per case</span><span class=\"v\">£412</span><svg viewBox=\"0 0 100 28\" preserveAspectRatio=\"none\" aria-hidden=\"true\"><polyline points=\"0,12 14,13 28,12 42,15 56,14 70,17 84,16 100,19\"/><line class=\"tgt\" x1=\"0\" y1=\"15\" x2=\"100\" y2=\"15\"/></svg><span class=\"t\">Budget £430</span></div>\n</div></section>\n<section class=\"dz-mod\" data-mod=\"note\" aria-label=\"Source note\">\n<footer class=\"on-note\"><span>Source</span> Case management extract, nightly at 02:00. Figures for the current period are provisional until the month closes.</footer></section>\n</div>",
  "css": "\n.dz-evidence-office-ops-grid { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 26px 26px 24px; }\n.dz-evidence-office-ops-grid .oh { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: var(--pv-bw) solid var(--foreground); }\n.dz-evidence-office-ops-grid .oh h1 { font-family: var(--pv-display); font-size: 20px; letter-spacing: -.02em; margin: 0; }\n.dz-evidence-office-ops-grid .oh-per { display: flex; border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius-sm); overflow: hidden; }\n.dz-evidence-office-ops-grid .oh-per button { font: inherit; font-size: 12px; padding: 6px 14px; background: var(--card); color: var(--muted-foreground); border: 0; border-right: var(--pv-bw) solid var(--border); cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }\n.dz-evidence-office-ops-grid .oh-per button:last-child { border-right: 0; }\n.dz-evidence-office-ops-grid .oh-per button.on { background: var(--secondary); color: var(--primary); }\n.dz-evidence-office-ops-grid .og { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-left: var(--pv-bw) solid var(--border); border-top: var(--pv-bw) solid var(--border); margin-top: 20px; }\n.dz-evidence-office-ops-grid .c { border-right: var(--pv-bw) solid var(--border); border-bottom: var(--pv-bw) solid var(--border); padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 5px; transition: background var(--dur) var(--ease); }\n.dz-evidence-office-ops-grid .c:hover { background: var(--secondary); }\n.dz-evidence-office-ops-grid .k { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); }\n.dz-evidence-office-ops-grid .v { font-family: var(--pv-mono); font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; }\n.dz-evidence-office-ops-grid .v i { font-style: normal; font-size: 15px; color: var(--muted-foreground); margin-left: 1px; }\n.dz-evidence-office-ops-grid .c svg { width: 100%; height: 28px; margin-top: 2px; }\n.dz-evidence-office-ops-grid .c polyline { fill: none; stroke: var(--primary); stroke-width: 1.5; vector-effect: non-scaling-stroke; }\n.dz-evidence-office-ops-grid .c .tgt { stroke: var(--muted-foreground); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }\n.dz-evidence-office-ops-grid .t { font-size: 11px; color: var(--muted-foreground); }\n.dz-evidence-office-ops-grid .on-note { margin-top: 16px; font-size: 12px; line-height: 1.5; color: var(--muted-foreground); max-width: 60ch; }\n.dz-evidence-office-ops-grid .on-note span { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--foreground); margin-right: 6px; }\n@media (prefers-reduced-motion: reduce) { .dz-evidence-office-ops-grid *, .dz-evidence-office-ops-grid *::before, .dz-evidence-office-ops-grid *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/evidence-office.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap"
}