{
  "id": "ultra-civic-lookup",
  "name": "Address Lookup",
  "theme": "ultra-civic",
  "category": "Search & Browse",
  "description": "An address search where the result list is the whole page and each result inverts on hover, the way a pressed sign does, with no hover shadow anywhere.",
  "layout": "A single centred 720px column with the search box at signage scale and results as full-width outlined rows that invert entirely rather than tinting.",
  "modules": [
    {
      "key": "head",
      "name": "Header",
      "html": "\n<header class=\"hd\"><span class=\"k\">Council Tax</span><h1>Find your address</h1><p>Enter a postcode. If your address is not listed, you can enter it by hand on the next page.</p></header>"
    },
    {
      "key": "search",
      "name": "Search box",
      "html": "\n<div class=\"sb\"><label for=\"uc-pc\">Postcode</label><div class=\"in\"><input id=\"uc-pc\" type=\"text\" value=\"NF4 2QH\"><button type=\"button\">Find</button></div></div>"
    },
    {
      "key": "results",
      "name": "Results",
      "html": "\n<ol class=\"rs\"><li class=\"ct\">14 addresses found for NF4 2QH</li>\n  <li><a href=\"#\"><b>1 Marsh Lane</b><span class=\"m\">Band C · Northfield</span></a></li>\n  <li><a href=\"#\"><b>2 Marsh Lane</b><span class=\"m\">Band C · Northfield</span></a></li>\n  <li><a href=\"#\"><b>3 Marsh Lane</b><span class=\"m\">Band D · Northfield</span></a></li>\n  <li><a href=\"#\"><b>Flat 1, 4 Marsh Lane</b><span class=\"m\">Band A · Northfield</span></a></li>\n  <li><a href=\"#\"><b>Flat 2, 4 Marsh Lane</b><span class=\"m\">Band A · Northfield</span></a></li>\n  <li><a href=\"#\"><b>5 Marsh Lane</b><span class=\"m\">Band D · Northfield</span></a></li>\n  <li><a href=\"#\"><b>6 Marsh Lane</b><span class=\"m\">Band D · Northfield</span></a></li>\n</ol>"
    },
    {
      "key": "alt",
      "name": "Alternative",
      "html": "\n<footer class=\"al\"><p>Cannot find it? <a href=\"#\">Enter the address by hand</a> or <a href=\"#\">telephone 020 7000 0000</a>, Monday to Thursday, 09:00 to 16:30.</p></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "ultra-civic-lookup",
    "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-lookup.json",
  "structure": "A single centred 720px column with the search box at signage scale and results as full-width outlined rows that invert entirely rather than tinting.",
  "html": "<div class=\"dz dz-ultra-civic-lookup\" data-design=\"ultra-civic-lookup\" data-theme=\"ultra-civic\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Header\">\n<header class=\"hd\"><span class=\"k\">Council Tax</span><h1>Find your address</h1><p>Enter a postcode. If your address is not listed, you can enter it by hand on the next page.</p></header></section>\n<section class=\"dz-mod\" data-mod=\"search\" aria-label=\"Search box\">\n<div class=\"sb\"><label for=\"uc-pc\">Postcode</label><div class=\"in\"><input id=\"uc-pc\" type=\"text\" value=\"NF4 2QH\"><button type=\"button\">Find</button></div></div></section>\n<section class=\"dz-mod\" data-mod=\"results\" aria-label=\"Results\">\n<ol class=\"rs\"><li class=\"ct\">14 addresses found for NF4 2QH</li>\n  <li><a href=\"#\"><b>1 Marsh Lane</b><span class=\"m\">Band C · Northfield</span></a></li>\n  <li><a href=\"#\"><b>2 Marsh Lane</b><span class=\"m\">Band C · Northfield</span></a></li>\n  <li><a href=\"#\"><b>3 Marsh Lane</b><span class=\"m\">Band D · Northfield</span></a></li>\n  <li><a href=\"#\"><b>Flat 1, 4 Marsh Lane</b><span class=\"m\">Band A · Northfield</span></a></li>\n  <li><a href=\"#\"><b>Flat 2, 4 Marsh Lane</b><span class=\"m\">Band A · Northfield</span></a></li>\n  <li><a href=\"#\"><b>5 Marsh Lane</b><span class=\"m\">Band D · Northfield</span></a></li>\n  <li><a href=\"#\"><b>6 Marsh Lane</b><span class=\"m\">Band D · Northfield</span></a></li>\n</ol></section>\n<section class=\"dz-mod\" data-mod=\"alt\" aria-label=\"Alternative\">\n<footer class=\"al\"><p>Cannot find it? <a href=\"#\">Enter the address by hand</a> or <a href=\"#\">telephone 020 7000 0000</a>, Monday to Thursday, 09:00 to 16:30.</p></footer></section>\n</div>",
  "css": "\n.dz-ultra-civic-lookup { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: minmax(0, 720px); justify-content: center; padding: 34px 28px 34px; row-gap: 24px; align-content: start; }\n.dz-ultra-civic-lookup .k { font-size: 12.5px; }\n.dz-ultra-civic-lookup .hd h1 { font-family: var(--pv-display); text-transform: uppercase; font-weight: 700; letter-spacing: -.02em; font-size: 56px; margin: 8px 0 12px; }\n.dz-ultra-civic-lookup .hd p { font-size: 16px; line-height: 1.55; margin: 0; }\n.dz-ultra-civic-lookup .sb label { display: block; font-size: 15px; font-weight: 500; margin-bottom: 8px; }\n.dz-ultra-civic-lookup .in { display: flex; gap: 12px; }\n.dz-ultra-civic-lookup .in input { flex: 1; font: inherit; font-family: var(--pv-mono); font-size: 24px; border: 2px solid var(--foreground); border-radius: 0; background: var(--card); color: var(--foreground); padding: 12px 16px; letter-spacing: .08em; }\n.dz-ultra-civic-lookup .in input:focus-visible { outline: 4px solid var(--ring); outline-offset: 2px; }\n.dz-ultra-civic-lookup .in button { 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: 0 34px; cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }\n.dz-ultra-civic-lookup .in button:hover { background: var(--background); color: var(--primary); }\n.dz-ultra-civic-lookup .rs { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--foreground); }\n.dz-ultra-civic-lookup .ct { font-size: 13px; padding: 12px 0; border-bottom: 2px solid var(--foreground); }\n.dz-ultra-civic-lookup .rs a { display: flex; align-items: baseline; gap: 16px; padding: 15px 18px; text-decoration: none; color: var(--foreground); border-bottom: 2px solid var(--foreground); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }\n.dz-ultra-civic-lookup .rs b { font-family: var(--pv-display); text-transform: uppercase; font-weight: 700; letter-spacing: -.02em; font-size: 21px; }\n.dz-ultra-civic-lookup .m { font-size: 14px; margin-left: auto; }\n.dz-ultra-civic-lookup .rs a:hover { background: var(--primary); color: var(--primary-foreground); }\n.dz-ultra-civic-lookup .al p { font-size: 15px; line-height: 1.6; margin: 0; }\n.dz-ultra-civic-lookup .al a { color: var(--primary); }\n@media (prefers-reduced-motion: reduce) { .dz-ultra-civic-lookup *, .dz-ultra-civic-lookup *::before, .dz-ultra-civic-lookup *::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"
}