{
  "id": "evidence-office-submission-form",
  "name": "Submission Form",
  "theme": "evidence-office",
  "category": "Settings & Forms",
  "description": "A long statutory form broken into numbered fieldsets, with a completion rail that tells you what is still missing rather than how far along you are.",
  "layout": "Numbered fieldsets in a 34rem measure with a sticky 200px right rail listing outstanding items; each field states its constraint before you can get it wrong.",
  "modules": [
    {
      "key": "head",
      "name": "Form header",
      "html": "\n<header class=\"fh\"><span class=\"fh-ref\">Form PL-04</span><h1>Application for planning permission</h1><p>Householder development. All fields marked required must be completed before submission.</p></header>"
    },
    {
      "key": "set1",
      "name": "Fieldset 1 — Site",
      "html": "\n<fieldset class=\"fs\"><legend><span>1</span> Site details</legend>\n  <div class=\"f\"><label for=\"eo-sf-addr\">Site address <em>required</em></label><input id=\"eo-sf-addr\" type=\"text\" value=\"4 Bramley Lane, Leeds\"><small>As shown on the title register, including the postcode.</small></div>\n  <div class=\"f2\">\n    <div class=\"f\"><label for=\"eo-sf-easting\">Easting</label><input id=\"eo-sf-easting\" type=\"text\" inputmode=\"numeric\" value=\"422781\"></div>\n    <div class=\"f\"><label for=\"eo-sf-northing\">Northing</label><input id=\"eo-sf-northing\" type=\"text\" inputmode=\"numeric\" value=\"434906\"></div>\n  </div>\n</fieldset>"
    },
    {
      "key": "set2",
      "name": "Fieldset 2 — Proposal",
      "html": "\n<fieldset class=\"fs\"><legend><span>2</span> The proposal</legend>\n  <div class=\"f\"><label for=\"eo-sf-desc\">Description of works <em>required</em></label><textarea id=\"eo-sf-desc\" rows=\"3\">Retention of 1.8m close-boarded fence forward of the principal elevation.</textarea><small>Describe what is being applied for, not why. 250 characters remaining.</small></div>\n  <div class=\"f\"><label>Has the work already been carried out?</label><div class=\"radios\"><label><input type=\"radio\" name=\"eo-sf-done\" checked> Yes, this is retrospective</label><label><input type=\"radio\" name=\"eo-sf-done\"> No</label></div></div>\n  <div class=\"f err\"><label for=\"eo-sf-height\">Maximum height in metres <em>required</em></label><input id=\"eo-sf-height\" type=\"text\" inputmode=\"decimal\" aria-invalid=\"true\" aria-describedby=\"eo-sf-height-e\"><small id=\"eo-sf-height-e\" class=\"msg\">Enter a number to one decimal place, for example 1.8</small></div>\n</fieldset>"
    },
    {
      "key": "rail",
      "name": "Outstanding rail",
      "html": "\n<aside class=\"orail\">\n  <h3>Before you can submit</h3>\n  <ul>\n    <li class=\"done\">Site address</li>\n    <li class=\"done\">Description of works</li>\n    <li class=\"todo\">Maximum height</li>\n    <li class=\"todo\">Ownership certificate</li>\n    <li class=\"todo\">Site plan, 1:500</li>\n  </ul>\n  <button type=\"button\" disabled>Submit application</button>\n  <p class=\"orail-fine\">3 items outstanding. Your answers are saved as you type.</p>\n</aside>"
    }
  ],
  "moduleCount": 4,
  "reorderable": false,
  "meta": {
    "id": "evidence-office-submission-form",
    "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-submission-form.json",
  "structure": "Numbered fieldsets in a 34rem measure with a sticky 200px right rail listing outstanding items; each field states its constraint before you can get it wrong.",
  "html": "<div class=\"dz dz-evidence-office-submission-form\" data-design=\"evidence-office-submission-form\" data-theme=\"evidence-office\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Form header\">\n<header class=\"fh\"><span class=\"fh-ref\">Form PL-04</span><h1>Application for planning permission</h1><p>Householder development. All fields marked required must be completed before submission.</p></header></section><div class=\"cols\"><div><section class=\"dz-mod\" data-mod=\"set1\" aria-label=\"Fieldset 1 — Site\">\n<fieldset class=\"fs\"><legend><span>1</span> Site details</legend>\n  <div class=\"f\"><label for=\"eo-sf-addr\">Site address <em>required</em></label><input id=\"eo-sf-addr\" type=\"text\" value=\"4 Bramley Lane, Leeds\"><small>As shown on the title register, including the postcode.</small></div>\n  <div class=\"f2\">\n    <div class=\"f\"><label for=\"eo-sf-easting\">Easting</label><input id=\"eo-sf-easting\" type=\"text\" inputmode=\"numeric\" value=\"422781\"></div>\n    <div class=\"f\"><label for=\"eo-sf-northing\">Northing</label><input id=\"eo-sf-northing\" type=\"text\" inputmode=\"numeric\" value=\"434906\"></div>\n  </div>\n</fieldset></section><section class=\"dz-mod\" data-mod=\"set2\" aria-label=\"Fieldset 2 — Proposal\">\n<fieldset class=\"fs\"><legend><span>2</span> The proposal</legend>\n  <div class=\"f\"><label for=\"eo-sf-desc\">Description of works <em>required</em></label><textarea id=\"eo-sf-desc\" rows=\"3\">Retention of 1.8m close-boarded fence forward of the principal elevation.</textarea><small>Describe what is being applied for, not why. 250 characters remaining.</small></div>\n  <div class=\"f\"><label>Has the work already been carried out?</label><div class=\"radios\"><label><input type=\"radio\" name=\"eo-sf-done\" checked> Yes, this is retrospective</label><label><input type=\"radio\" name=\"eo-sf-done\"> No</label></div></div>\n  <div class=\"f err\"><label for=\"eo-sf-height\">Maximum height in metres <em>required</em></label><input id=\"eo-sf-height\" type=\"text\" inputmode=\"decimal\" aria-invalid=\"true\" aria-describedby=\"eo-sf-height-e\"><small id=\"eo-sf-height-e\" class=\"msg\">Enter a number to one decimal place, for example 1.8</small></div>\n</fieldset></section></div><section class=\"dz-mod\" data-mod=\"rail\" aria-label=\"Outstanding rail\">\n<aside class=\"orail\">\n  <h3>Before you can submit</h3>\n  <ul>\n    <li class=\"done\">Site address</li>\n    <li class=\"done\">Description of works</li>\n    <li class=\"todo\">Maximum height</li>\n    <li class=\"todo\">Ownership certificate</li>\n    <li class=\"todo\">Site plan, 1:500</li>\n  </ul>\n  <button type=\"button\" disabled>Submit application</button>\n  <p class=\"orail-fine\">3 items outstanding. Your answers are saved as you type.</p>\n</aside></section></div>\n</div>",
  "css": "\n.dz-evidence-office-submission-form { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 26px 28px 30px; }\n.dz-evidence-office-submission-form .fh { padding-bottom: 14px; border-bottom: var(--pv-bw) solid var(--foreground); margin-bottom: 22px; }\n.dz-evidence-office-submission-form .fh-ref { font-family: var(--pv-mono); font-size: 11px; letter-spacing: .1em; color: var(--primary); }\n.dz-evidence-office-submission-form .fh h1 { font-family: var(--pv-display); font-size: 24px; letter-spacing: -.025em; margin: 6px 0 6px; }\n.dz-evidence-office-submission-form .fh p { margin: 0; font-size: 13px; color: var(--muted-foreground); max-width: 60ch; }\n.dz-evidence-office-submission-form .cols { display: grid; grid-template-columns: minmax(0, 34rem) 210px; gap: 40px; }\n.dz-evidence-office-submission-form .fs { border: 0; border-top: var(--pv-bw) solid var(--border); margin: 0 0 22px; padding: 16px 0 0; }\n.dz-evidence-office-submission-form .fs legend { display: flex; align-items: center; gap: 10px; font-family: var(--pv-display); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; padding: 0; }\n.dz-evidence-office-submission-form .fs legend span { font-family: var(--pv-mono); font-size: 11px; color: var(--primary-foreground); background: var(--primary); width: 20px; height: 20px; display: grid; place-items: center; border-radius: var(--pv-radius-sm); }\n.dz-evidence-office-submission-form .f { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }\n.dz-evidence-office-submission-form .f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }\n.dz-evidence-office-submission-form .f label { font-size: 13px; font-weight: 500; }\n.dz-evidence-office-submission-form .f label em { font-style: normal; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-foreground); margin-left: 7px; }\n.dz-evidence-office-submission-form .f input, .dz-evidence-office-submission-form .f textarea { font: inherit; font-size: 14.5px; padding: 10px 12px; border: var(--pv-bw) solid var(--input); border-radius: var(--pv-radius-sm); background: var(--card); color: var(--foreground); resize: vertical; }\n.dz-evidence-office-submission-form .f input:focus-visible, .dz-evidence-office-submission-form .f textarea:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }\n.dz-evidence-office-submission-form .f small { font-size: 12px; color: var(--muted-foreground); }\n.dz-evidence-office-submission-form .radios { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }\n.dz-evidence-office-submission-form .radios label { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 14px; }\n.dz-evidence-office-submission-form .radios input { accent-color: var(--primary); }\n.dz-evidence-office-submission-form .err input { border-color: var(--destructive); }\n.dz-evidence-office-submission-form .err .msg { color: var(--destructive); }\n.dz-evidence-office-submission-form .orail { position: sticky; top: 0; align-self: start; border-left: var(--pv-bw) solid var(--border); padding-left: 20px; }\n.dz-evidence-office-submission-form .orail h3 { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-foreground); margin: 0 0 10px; }\n.dz-evidence-office-submission-form .orail ul { list-style: none; margin: 0 0 18px; padding: 0; }\n.dz-evidence-office-submission-form .orail li { font-size: 13px; padding: 6px 0 6px 20px; position: relative; border-bottom: var(--pv-bw) solid var(--border); }\n.dz-evidence-office-submission-form .orail li::before { position: absolute; left: 0; font-family: var(--pv-mono); font-size: 12px; }\n.dz-evidence-office-submission-form .orail .done { color: var(--muted-foreground); }\n.dz-evidence-office-submission-form .orail .done::before { content: \"✓\"; color: var(--chart-1); }\n.dz-evidence-office-submission-form .orail .todo::before { content: \"•\"; color: var(--destructive); }\n.dz-evidence-office-submission-form .orail button { width: 100%; font: inherit; font-size: 13.5px; font-weight: 600; padding: 11px; border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius-sm); background: var(--muted); color: var(--muted-foreground); cursor: not-allowed; }\n.dz-evidence-office-submission-form .orail-fine { margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--muted-foreground); }\n@media (prefers-reduced-motion: reduce) { .dz-evidence-office-submission-form *, .dz-evidence-office-submission-form *::before, .dz-evidence-office-submission-form *::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"
}