{
  "id": "ultra-civic-service",
  "name": "Service Front",
  "theme": "ultra-civic",
  "category": "Landing",
  "description": "A service homepage that is a list of tasks rather than a brochure, with the most-used task set at signage scale at the top of the list.",
  "layout": "A full-bleed ultramarine banner of one sentence, then a two-column task list where the first item spans both columns and is four times the height of the rest.",
  "modules": [
    {
      "key": "bar",
      "name": "Service bar",
      "html": "\n<header class=\"sb\"><span class=\"br\">Northfield</span><span class=\"dept\">Housing &amp; Council Tax</span><nav><a href=\"#\">Sign in</a><a href=\"#\">Languages</a><a href=\"#\">Accessibility</a></nav></header>"
    },
    {
      "key": "banner",
      "name": "Banner",
      "html": "\n<div class=\"bn\"><h1>Apply for housing support</h1><p>Most applications are decided in eleven working days.</p></div>"
    },
    {
      "key": "tasks",
      "name": "Task list",
      "html": "\n<section class=\"tk\">\n  <a class=\"big\" href=\"#\"><span class=\"n\">01</span><b>Start a new application</b><span class=\"m\">Fifteen to twenty minutes. You can save and come back.</span></a>\n  <a href=\"#\"><b>Continue an application</b><span class=\"m\">You will need your reference number.</span></a>\n  <a href=\"#\"><b>Report a change of circumstances</b><span class=\"m\">Do this within one month.</span></a>\n  <a href=\"#\"><b>Check a payment date</b><span class=\"m\">Sign in required.</span></a>\n  <a href=\"#\"><b>Appeal a decision</b><span class=\"m\">Within one month of the decision letter.</span></a>\n  <a href=\"#\"><b>Ask for the decision to be explained</b><span class=\"m\">No time limit.</span></a>\n</section>"
    },
    {
      "key": "notice",
      "name": "Notice",
      "html": "\n<aside class=\"nt\"><span class=\"k\">Notice</span><p>Phone lines are closed on 15 September for maintenance. Online applications are unaffected.</p></aside>"
    },
    {
      "key": "plate",
      "name": "Concourse plate",
      "html": "\n<figure class=\"pl\"><img src=\"{{ART hero}}\" alt=\"{{ARTALT hero}}\"><figcaption>Northfield Civic Centre, open Monday to Thursday, 09:00 to 16:30.</figcaption></figure>"
    }
  ],
  "moduleCount": 5,
  "reorderable": true,
  "meta": {
    "id": "ultra-civic-service",
    "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-service.json",
  "structure": "A full-bleed ultramarine banner of one sentence, then a two-column task list where the first item spans both columns and is four times the height of the rest.",
  "html": "<div class=\"dz dz-ultra-civic-service\" data-design=\"ultra-civic-service\" data-theme=\"ultra-civic\">\n<section class=\"dz-mod\" data-mod=\"bar\" aria-label=\"Service bar\">\n<header class=\"sb\"><span class=\"br\">Northfield</span><span class=\"dept\">Housing &amp; Council Tax</span><nav><a href=\"#\">Sign in</a><a href=\"#\">Languages</a><a href=\"#\">Accessibility</a></nav></header></section>\n<section class=\"dz-mod\" data-mod=\"banner\" aria-label=\"Banner\">\n<div class=\"bn\"><h1>Apply for housing support</h1><p>Most applications are decided in eleven working days.</p></div></section>\n<section class=\"dz-mod\" data-mod=\"tasks\" aria-label=\"Task list\">\n<section class=\"tk\">\n  <a class=\"big\" href=\"#\"><span class=\"n\">01</span><b>Start a new application</b><span class=\"m\">Fifteen to twenty minutes. You can save and come back.</span></a>\n  <a href=\"#\"><b>Continue an application</b><span class=\"m\">You will need your reference number.</span></a>\n  <a href=\"#\"><b>Report a change of circumstances</b><span class=\"m\">Do this within one month.</span></a>\n  <a href=\"#\"><b>Check a payment date</b><span class=\"m\">Sign in required.</span></a>\n  <a href=\"#\"><b>Appeal a decision</b><span class=\"m\">Within one month of the decision letter.</span></a>\n  <a href=\"#\"><b>Ask for the decision to be explained</b><span class=\"m\">No time limit.</span></a>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"notice\" aria-label=\"Notice\">\n<aside class=\"nt\"><span class=\"k\">Notice</span><p>Phone lines are closed on 15 September for maintenance. Online applications are unaffected.</p></aside></section>\n<section class=\"dz-mod\" data-mod=\"plate\" aria-label=\"Concourse plate\">\n<figure class=\"pl\"><img src=\"https://designlookbook.dev/assets/img/ultra-civic-hero.webp\" alt=\"A large ultramarine wayfinding panel on a pale concourse wall\"><figcaption>Northfield Civic Centre, open Monday to Thursday, 09:00 to 16:30.</figcaption></figure></section>\n</div>",
  "css": "\n.dz-ultra-civic-service { background: var(--background); color: var(--foreground); font-family: var(--pv-body); }\n.dz-ultra-civic-service .sb { display: flex; align-items: baseline; gap: 18px; padding: 14px 28px; border-bottom: 2px solid var(--foreground); }\n.dz-ultra-civic-service .br { font-family: var(--pv-display); text-transform: uppercase; font-weight: 700; letter-spacing: -.02em; font-size: 26px; color: var(--primary); }\n.dz-ultra-civic-service .dept { font-size: 14px; }\n.dz-ultra-civic-service .sb nav { display: flex; gap: 20px; margin-left: auto; }\n.dz-ultra-civic-service .sb a { font-size: 13px; color: var(--primary); text-decoration: none; }\n.dz-ultra-civic-service .sb a:hover { text-decoration: underline; }\n.dz-ultra-civic-service .bn { background: var(--primary); color: var(--primary-foreground); padding: 40px 28px; }\n.dz-ultra-civic-service .bn h1 { font-family: var(--pv-display); text-transform: uppercase; font-weight: 700; letter-spacing: -.02em; font-size: 72px; line-height: .96; margin: 0 0 10px; }\n.dz-ultra-civic-service .bn p { font-size: 17px; margin: 0; }\n.dz-ultra-civic-service .tk { display: grid; grid-template-columns: 1fr 1fr; }\n.dz-ultra-civic-service .tk a { border: 2px solid var(--foreground); border-radius: 0; border-width: 0 2px 2px 0; padding: 20px 24px; text-decoration: none; color: var(--foreground); display: flex; flex-direction: column; gap: 5px; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }\n.dz-ultra-civic-service .tk a:nth-child(2n) { border-right: 0; }\n.dz-ultra-civic-service .big { grid-column: 1 / -1; padding: 34px 24px 36px; border-right: 0 !important; }\n.dz-ultra-civic-service .n { font-family: var(--pv-mono); font-size: 13px; color: var(--primary); }\n.dz-ultra-civic-service .tk b { font-family: var(--pv-display); text-transform: uppercase; font-weight: 700; letter-spacing: -.02em; font-size: 26px; }\n.dz-ultra-civic-service .big b { font-size: 48px; }\n.dz-ultra-civic-service .m { font-size: 14px; }\n.dz-ultra-civic-service .tk a:hover { background: var(--accent); color: var(--accent-foreground); }\n.dz-ultra-civic-service .nt { border: 2px solid var(--primary); border-radius: 0; border-width: 0 0 0 8px; margin: 26px 28px; padding: 16px 20px; }\n.dz-ultra-civic-service .k { font-size: 12.5px; }\n.dz-ultra-civic-service .nt p { font-size: 15.5px; margin: 5px 0 0; }\n.dz-ultra-civic-service .pl { margin: 0; border-top: 2px solid var(--foreground); }\n.dz-ultra-civic-service .pl img { width: 100%; height: 200px; object-fit: cover; display: block; filter: var(--img-filter); }\n.dz-ultra-civic-service .pl figcaption { font-size: 13px; padding: 10px 28px 24px; }\n@media (prefers-reduced-motion: reduce) { .dz-ultra-civic-service *, .dz-ultra-civic-service *::before, .dz-ultra-civic-service *::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"
}