{
  "id": "ultra-civic-claim",
  "name": "Claim Form",
  "theme": "ultra-civic",
  "category": "Settings & Forms",
  "description": "A public-service form built one question to a row, where an error is marked with a rule and a sentence rather than with red, because red is not in this palette.",
  "layout": "A strict 5:7 question-to-answer split with a 2px rule beneath every row, a persistent progress strip across the top, and a save-and-exit block that is part of the same ruled stack.",
  "modules": [
    {
      "key": "progress",
      "name": "Progress strip",
      "html": "\n<header class=\"pg\"><span class=\"k\">Section 3 of 7 · About your household</span><div class=\"tr\"><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i></i><i></i><i></i><i></i></div><a href=\"#\">Save and exit</a></header>"
    },
    {
      "key": "title",
      "name": "Section title",
      "html": "\n<div class=\"ti\"><h1>About your household</h1><p>We ask about everyone who lives with you because the amount you receive depends on it. If you are not sure, give your best estimate — you can correct it later without penalty.</p></div>"
    },
    {
      "key": "rows",
      "name": "Question rows",
      "html": "\n<form class=\"fm\">\n  <div class=\"rw\"><label for=\"uc-adults\">How many adults live at this address?</label><div><input id=\"uc-adults\" type=\"text\" value=\"2\"><span class=\"hp\">Include yourself. An adult is anyone aged 18 or over.</span></div></div>\n  <div class=\"rw\"><label for=\"uc-children\">How many children live at this address?</label><div><input id=\"uc-children\" type=\"text\" value=\"1\"><span class=\"hp\">Include children who stay with you part of the week.</span></div></div>\n  <div class=\"rw err\"><label for=\"uc-income\">What is the total monthly household income, before tax?</label><div><input id=\"uc-income\" type=\"text\" value=\"\"><span class=\"hp\">Enter an amount in pounds. This cannot be left blank.</span></div></div>\n  <div class=\"rw\"><label>Does anyone at this address receive a disability benefit?</label><div class=\"rd\"><label class=\"op\"><input type=\"radio\" name=\"uc-dis\" checked><span>Yes</span></label><label class=\"op\"><input type=\"radio\" name=\"uc-dis\"><span>No</span></label><label class=\"op\"><input type=\"radio\" name=\"uc-dis\"><span>I do not know</span></label></div></div>\n  <div class=\"rw\"><label for=\"uc-tenure\">Do you rent or own this address?</label><div><select id=\"uc-tenure\"><option>Rent from a private landlord</option><option>Rent from a council or housing association</option><option>Own with a mortgage</option><option>Own outright</option></select></div></div>\n</form>"
    },
    {
      "key": "nav",
      "name": "Navigation block",
      "html": "\n<footer class=\"nv\"><button type=\"button\" class=\"go\">Continue</button><button type=\"button\" class=\"bk\">Back</button><span class=\"m\">Your answers are saved as you type. Nothing is submitted until section 7.</span></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "ultra-civic-claim",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-01T20:01:13+09:00",
    "updatedAt": "2026-09-01T20:01:13+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/ultra-civic-claim.json",
  "structure": "A strict 5:7 question-to-answer split with a 2px rule beneath every row, a persistent progress strip across the top, and a save-and-exit block that is part of the same ruled stack.",
  "html": "<div class=\"dz dz-ultra-civic-claim\" data-design=\"ultra-civic-claim\" data-theme=\"ultra-civic\">\n<section class=\"dz-mod\" data-mod=\"progress\" aria-label=\"Progress strip\">\n<header class=\"pg\"><span class=\"k\">Section 3 of 7 · About your household</span><div class=\"tr\"><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i></i><i></i><i></i><i></i></div><a href=\"#\">Save and exit</a></header></section>\n<section class=\"dz-mod\" data-mod=\"title\" aria-label=\"Section title\">\n<div class=\"ti\"><h1>About your household</h1><p>We ask about everyone who lives with you because the amount you receive depends on it. If you are not sure, give your best estimate — you can correct it later without penalty.</p></div></section>\n<section class=\"dz-mod\" data-mod=\"rows\" aria-label=\"Question rows\">\n<form class=\"fm\">\n  <div class=\"rw\"><label for=\"uc-adults\">How many adults live at this address?</label><div><input id=\"uc-adults\" type=\"text\" value=\"2\"><span class=\"hp\">Include yourself. An adult is anyone aged 18 or over.</span></div></div>\n  <div class=\"rw\"><label for=\"uc-children\">How many children live at this address?</label><div><input id=\"uc-children\" type=\"text\" value=\"1\"><span class=\"hp\">Include children who stay with you part of the week.</span></div></div>\n  <div class=\"rw err\"><label for=\"uc-income\">What is the total monthly household income, before tax?</label><div><input id=\"uc-income\" type=\"text\" value=\"\"><span class=\"hp\">Enter an amount in pounds. This cannot be left blank.</span></div></div>\n  <div class=\"rw\"><label>Does anyone at this address receive a disability benefit?</label><div class=\"rd\"><label class=\"op\"><input type=\"radio\" name=\"uc-dis\" checked><span>Yes</span></label><label class=\"op\"><input type=\"radio\" name=\"uc-dis\"><span>No</span></label><label class=\"op\"><input type=\"radio\" name=\"uc-dis\"><span>I do not know</span></label></div></div>\n  <div class=\"rw\"><label for=\"uc-tenure\">Do you rent or own this address?</label><div><select id=\"uc-tenure\"><option>Rent from a private landlord</option><option>Rent from a council or housing association</option><option>Own with a mortgage</option><option>Own outright</option></select></div></div>\n</form></section>\n<section class=\"dz-mod\" data-mod=\"nav\" aria-label=\"Navigation block\">\n<footer class=\"nv\"><button type=\"button\" class=\"go\">Continue</button><button type=\"button\" class=\"bk\">Back</button><span class=\"m\">Your answers are saved as you type. Nothing is submitted until section 7.</span></footer></section>\n</div>",
  "css": "\n.dz-ultra-civic-claim { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 0 28px 30px; }\n.dz-ultra-civic-claim .pg { display: flex; align-items: center; gap: 20px; padding: 16px 0; border-bottom: 2px solid var(--foreground); }\n.dz-ultra-civic-claim .k { font-size: 13px; }\n.dz-ultra-civic-claim .tr { display: flex; gap: 5px; margin-left: auto; }\n.dz-ultra-civic-claim .tr i { width: 34px; height: 6px; background: var(--muted); display: block; }\n.dz-ultra-civic-claim .tr .on { background: var(--primary); }\n.dz-ultra-civic-claim .pg a { font-size: 13px; color: var(--primary); }\n.dz-ultra-civic-claim .ti { padding: 30px 0 24px; max-width: 66ch; }\n.dz-ultra-civic-claim .ti h1 { font-family: var(--pv-display); text-transform: uppercase; font-weight: 700; letter-spacing: -.02em; font-size: 46px; margin: 0 0 12px; }\n.dz-ultra-civic-claim .ti p { font-size: 15.5px; line-height: 1.6; margin: 0; }\n.dz-ultra-civic-claim .fm { border-top: 2px solid var(--foreground); }\n.dz-ultra-civic-claim .rw { display: grid; grid-template-columns: 5fr 7fr; gap: 24px; padding: 20px 0; border-bottom: 2px solid var(--foreground); }\n.dz-ultra-civic-claim .rw > label { font-size: 17px; font-weight: 500; line-height: 1.4; }\n.dz-ultra-civic-claim .err { position: relative; padding-left: 18px; }\n.dz-ultra-civic-claim .err::before { content: \"\"; position: absolute; left: 0; top: 20px; bottom: 20px; width: 6px; background: var(--primary); }\n.dz-ultra-civic-claim .err .hp { color: var(--primary); font-weight: 600; }\n.dz-ultra-civic-claim input[type=\"text\"], .dz-ultra-civic-claim select { font: inherit; font-size: 16px; border: 2px solid var(--foreground); border-radius: 0; background: var(--card); color: var(--foreground); padding: 11px 13px; width: 100%; max-width: 340px; }\n.dz-ultra-civic-claim input[type=\"text\"]:focus-visible, .dz-ultra-civic-claim select:focus-visible { outline: 4px solid var(--ring); outline-offset: 2px; }\n.dz-ultra-civic-claim .hp { display: block; font-size: 13.5px; padding-top: 8px; }\n.dz-ultra-civic-claim .rd { display: flex; gap: 12px; }\n.dz-ultra-civic-claim .op { display: inline-flex; align-items: center; gap: 9px; border: 2px solid var(--foreground); border-radius: 0; padding: 11px 18px; font-size: 15px; cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }\n.dz-ultra-civic-claim .op:hover { background: var(--accent); color: var(--accent-foreground); }\n.dz-ultra-civic-claim .op input { width: 18px; height: 18px; accent-color: var(--primary); }\n.dz-ultra-civic-claim .nv { display: flex; align-items: center; gap: 14px; padding-top: 24px; }\n.dz-ultra-civic-claim .go { font: inherit; font-family: var(--pv-display); text-transform: uppercase; font-weight: 700; letter-spacing: -.02em; font-size: 18px; background: var(--primary); color: var(--primary-foreground); border: 2px solid var(--primary); border-radius: 0; padding: 13px 34px; cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }\n.dz-ultra-civic-claim .go:hover { background: var(--background); color: var(--primary); }\n.dz-ultra-civic-claim .bk { font: inherit; font-family: var(--pv-display); text-transform: uppercase; font-weight: 700; letter-spacing: -.02em; font-size: 18px; background: transparent; color: var(--foreground); border: 2px solid var(--foreground); border-radius: 0; padding: 13px 28px; cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }\n.dz-ultra-civic-claim .bk:hover { background: var(--foreground); color: var(--background); }\n.dz-ultra-civic-claim .m { font-size: 13px; margin-left: auto; }\n@media (prefers-reduced-motion: reduce) { .dz-ultra-civic-claim *, .dz-ultra-civic-claim *::before, .dz-ultra-civic-claim *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/ultra-civic.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Azeret+Mono:wght@400;500;600;700&display=swap"
}