{
  "id": "ultra-civic-verify",
  "name": "Identity Check",
  "theme": "ultra-civic",
  "category": "Auth & Onboarding",
  "description": "An identity step that tells you what will happen before it asks for anything, with the document options as three equal outlined blocks and no default.",
  "layout": "A centred 640px column where the three document choices are equal-width boxes in a single row rather than a stacked radio list, above a plain what-happens-next list.",
  "modules": [
    {
      "key": "head",
      "name": "Header",
      "html": "\n<header class=\"hd\"><span class=\"k\">Step 2 of 4</span><h1>Prove who you are</h1><p>We check the document against the issuing register. We do not keep a copy, and the check takes about ninety seconds.</p></header>"
    },
    {
      "key": "choices",
      "name": "Document choices",
      "html": "\n<div class=\"ch\">\n  <button type=\"button\"><span class=\"n\">A</span><b>Passport</b><span class=\"m\">Any country. Must be in date.</span></button>\n  <button type=\"button\" class=\"on\"><span class=\"n\">B</span><b>Driving licence</b><span class=\"m\">UK photocard only.</span></button>\n  <button type=\"button\"><span class=\"n\">C</span><b>Residence permit</b><span class=\"m\">BRP or eVisa share code.</span></button>\n</div>"
    },
    {
      "key": "steps",
      "name": "What happens next",
      "html": "\n<section class=\"wh\"><span class=\"k\">What happens next</span>\n<ol>\n  <li>You photograph the front and back of the licence.</li>\n  <li>We read the document number and check it against the DVLA register.</li>\n  <li>You take one short video so we can match the photograph.</li>\n  <li>We tell you the result on this page. If it fails, you can try once more or use a different document.</li>\n</ol></section>"
    },
    {
      "key": "act",
      "name": "Action block",
      "html": "\n<footer class=\"ac\"><button type=\"button\" class=\"go\">Start the check</button><a href=\"#\">I do not have any of these</a><span class=\"m\">You can also complete this in person at the Civic Centre without an appointment.</span></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "ultra-civic-verify",
    "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-verify.json",
  "structure": "A centred 640px column where the three document choices are equal-width boxes in a single row rather than a stacked radio list, above a plain what-happens-next list.",
  "html": "<div class=\"dz dz-ultra-civic-verify\" data-design=\"ultra-civic-verify\" data-theme=\"ultra-civic\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Header\">\n<header class=\"hd\"><span class=\"k\">Step 2 of 4</span><h1>Prove who you are</h1><p>We check the document against the issuing register. We do not keep a copy, and the check takes about ninety seconds.</p></header></section>\n<section class=\"dz-mod\" data-mod=\"choices\" aria-label=\"Document choices\">\n<div class=\"ch\">\n  <button type=\"button\"><span class=\"n\">A</span><b>Passport</b><span class=\"m\">Any country. Must be in date.</span></button>\n  <button type=\"button\" class=\"on\"><span class=\"n\">B</span><b>Driving licence</b><span class=\"m\">UK photocard only.</span></button>\n  <button type=\"button\"><span class=\"n\">C</span><b>Residence permit</b><span class=\"m\">BRP or eVisa share code.</span></button>\n</div></section>\n<section class=\"dz-mod\" data-mod=\"steps\" aria-label=\"What happens next\">\n<section class=\"wh\"><span class=\"k\">What happens next</span>\n<ol>\n  <li>You photograph the front and back of the licence.</li>\n  <li>We read the document number and check it against the DVLA register.</li>\n  <li>You take one short video so we can match the photograph.</li>\n  <li>We tell you the result on this page. If it fails, you can try once more or use a different document.</li>\n</ol></section></section>\n<section class=\"dz-mod\" data-mod=\"act\" aria-label=\"Action block\">\n<footer class=\"ac\"><button type=\"button\" class=\"go\">Start the check</button><a href=\"#\">I do not have any of these</a><span class=\"m\">You can also complete this in person at the Civic Centre without an appointment.</span></footer></section>\n</div>",
  "css": "\n.dz-ultra-civic-verify { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: minmax(0, 640px); justify-content: center; padding: 36px 28px 34px; row-gap: 26px; align-content: start; }\n.dz-ultra-civic-verify .k { font-size: 12.5px; display: block; }\n.dz-ultra-civic-verify .hd h1 { font-family: var(--pv-display); text-transform: uppercase; font-weight: 700; letter-spacing: -.02em; font-size: 52px; margin: 8px 0 12px; }\n.dz-ultra-civic-verify .hd p { font-size: 16px; line-height: 1.58; margin: 0; }\n.dz-ultra-civic-verify .ch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }\n.dz-ultra-civic-verify .ch button { font: inherit; text-align: left; border: 2px solid var(--foreground); border-radius: 0; background: var(--card); color: var(--foreground); padding: 16px 16px 18px; cursor: pointer; display: flex; flex-direction: column; gap: 5px; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }\n.dz-ultra-civic-verify .ch button:hover { background: var(--accent); color: var(--accent-foreground); }\n.dz-ultra-civic-verify .ch .on { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }\n.dz-ultra-civic-verify .n { font-family: var(--pv-mono); font-size: 12px; }\n.dz-ultra-civic-verify .ch b { font-family: var(--pv-display); text-transform: uppercase; font-weight: 700; letter-spacing: -.02em; font-size: 20px; }\n.dz-ultra-civic-verify .m { font-size: 13px; }\n.dz-ultra-civic-verify .wh ol { margin: 12px 0 0; padding: 0; list-style: none; counter-reset: s; border-top: 2px solid var(--foreground); }\n.dz-ultra-civic-verify .wh li { counter-increment: s; position: relative; padding: 13px 0 13px 42px; border-bottom: 2px solid var(--foreground); font-size: 15.5px; line-height: 1.5; }\n.dz-ultra-civic-verify .wh li::before { content: counter(s); position: absolute; left: 0; top: 13px; font-family: var(--pv-mono); font-size: 13px; color: var(--primary); font-weight: 700; }\n.dz-ultra-civic-verify .ac { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }\n.dz-ultra-civic-verify .go { font: inherit; font-family: var(--pv-display); text-transform: uppercase; font-weight: 700; letter-spacing: -.02em; font-size: 20px; background: var(--primary); color: var(--primary-foreground); border: 2px solid var(--primary); border-radius: 0; padding: 14px 36px; cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }\n.dz-ultra-civic-verify .go:hover { background: var(--background); color: var(--primary); }\n.dz-ultra-civic-verify .ac a { font-size: 14px; color: var(--primary); }\n.dz-ultra-civic-verify .ac .m { width: 100%; }\n@media (prefers-reduced-motion: reduce) { .dz-ultra-civic-verify *, .dz-ultra-civic-verify *::before, .dz-ultra-civic-verify *::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"
}