# GOV.UK — Marketing/Homepage Design Spec

> Source: gov.uk (live DOM, computed styles), 2026-08-01 (desktop 1512px). GOV.UK Frontend v5.14.0.
> Coverage: homepage + header/search + cookie banner. Palette cross-checked against the published GOV.UK Design System colour palette (authoritative token source). No login surface — a public information portal.
> Reality check: hint accurate — this is the archetypal accessibility-first civic utilitarian system. Confirmed: bespoke GDS Transport typeface, a full-bleed GOV.UK-blue #1d70b8 hero band, green #00703c "start"/action buttons with a solid 2px bottom edge, the signature #ffdd00 yellow focus state, and ZERO border-radius and ZERO CSS motion anywhere (both genuine findings, not gaps). No :root colour tokens (the palette is compiled from Sass), so §2 comes from computed styles + the published palette.

## 1. Visual Theme & Atmosphere

The most utilitarian, function-first surface a national government can ship: clarity, legibility and accessibility over any decoration. A single full-bleed GOV.UK-blue band carries the bold white headline, everything else is near-black text on white with generous line-height and a wide measure. Every corner is square (0px radius everywhere), colour is strictly functional (blue = links/brand, green = actions, red = errors, yellow = focus), and nothing moves — there are no transitions, no keyframes and no animation library on the entire page. Structure is drawn entirely with hairline and coloured borders, never soft shadows; the only "shadow" is the solid dark-green slab under a button that gives it a physical, pressable edge. Feels: authoritative, plain, accessible, unhurried.

## 2. Color Palette & Roles

### Text
| Token | Hex | Role / usage |
|---|---|---|
| black | `#0b0c0c` | Primary text, headings (near-black, not pure #000) |
| dark-grey | `#505a5f` | Secondary text, captions, metadata |
| white | `#ffffff` | Text on blue/green bands |

### Links & accent
| Token | Hex | Role / usage |
|---|---|---|
| link | `#1d70b8` | Links + the GOV.UK-blue hero band / header |
| link-hover | `#003078` | Link hover (darker blue, thicker underline) |
| link-visited | `#4c2c92` | Visited links (published GDS purple) |
| green | `#00703c` | Primary action / "Start now" button fill |
| green-hover | `#005a30` | Button hover fill |
| green-shadow | `#002d18` | Solid 2px button bottom edge (box-shadow) |
| yellow | `#ffdd00` | Focus highlight (with a black underline) |
| red | `#d4351c` | Errors, warning-notice 5px left border |

### Surfaces & borders
| Token | Hex | Role / usage |
|---|---|---|
| canvas | `#ffffff` | Page background, cards, inputs |
| light-grey | `#f3f2f1` | Section tint, inset panels (published GDS light-grey) |
| blue-tint | `#f4f8fb` | Homepage panel tint above the blue band |
| light-blue | `#d2e2f1` | Search-button fill on the blue header |
| mid-grey | `#b1b4b6` | 1px hairline borders (most-used border, 21×) |

Rule: colour is functional only — blue for links/brand, green for actions, red for errors, yellow for focus. No decorative colour.
Rule: borders do the structural work; the only shadow is the solid button edge.

## 3. Typography Rules

- Font stack: `"GDS Transport", Arial, sans-serif` — GDS Transport is a bespoke Crown-copyright face (New Transport lineage) usable only on gov.uk; Arial is the shipped fallback. **Preview substitutes Arial/Helvetica (the site's own fallback)** — no open equivalent matches GDS Transport's proportions, and no webfont link is used.
- Body: 19px / 25px / 400 / `#0b0c0c` (GDS default desktop body is 19px, not 16px). Weight is binary: 400 body, 700 for every heading/label — nothing between. Tracking is `normal` at every size.

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display (h1, hero) | 64 / 76.8 | 700 | normal |
| Section (h2) | 24 / 30 | 700 | normal |
| Sub (h3) | 19 / 25 | 700 | normal |
| Body (p) | 19 / 25 | 400 | normal |
| Logo / wordmark | 30 / 30 | 400 | normal |
| Button | 19 | 400 | normal |
| Nav / menu label | 16 | 700 | normal |

Pattern: no display font — one family everywhere. Hierarchy from the GDS type scale (16/19/24/27/36/48/64/80) + weight, never from tracking or colour.

## 4. Component Stylings

### Buttons
- **Primary / Start (green)**: bg `#00703c`, text `#ffffff`, radius `0px`, h ~40-48px, padding `8px 10px 7px`, 19px/400, border `2px solid transparent`, and a signature solid bottom edge `box-shadow: 0 2px 0 #002d18`. Hover: bg `#005a30`. Active: button nudges down (edge shortens). Focus: see below.
- **Secondary "Start now"**: same green with a trailing arrow icon on service-start pages.

### Focus (the GDS signature, applies to ALL interactive elements)
- `outline: 3px solid transparent` + `box-shadow` / `outline: 3px solid #ffdd00` — a bright yellow highlight, plus for text/links a `0 4px 0 #0b0c0c` black underline. This yellow-on-black focus is deliberately unmissable and identical across buttons, links and inputs.

| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Green button | `#00703c` / white, 2px `#002d18` edge | bg `#005a30` | 3px `#ffdd00` + black underline | nudges down | not used on marketing |
| Link | `#1d70b8` underlined | `#003078`, thicker underline | 3px `#ffdd00` bg + `#0b0c0c` underline | `#0b0c0c` | — |
| Search input | white, 2px `#0b0c0c` border | — | 3px `#ffdd00` outline + inset black shadow | — | — |

### Inputs
- Search/text input: bg `#ffffff`, border `2px solid #0b0c0c`, radius `0px`, h ~40-50px, padding `6px`, 19px. Focus: 3px `#ffdd00` outline + `0 0 0 2px inset` black shadow.

### Cards / panels
- No card chrome in the GDS sense — content sits on white with `1px #b1b4b6` hairline dividers. Task/notice panels use a coloured left border (`5px #d4351c` warning, `4px #1d70b8` info) instead of a box.

### Nav / header
- Full-width `#1d70b8` blue bar, white GOV.UK crown wordmark left (30px), "Menu" (16/700) + search icon right. No radius, no shadow.

## 5. Layout Principles

- Max content width `960px` (the GDS wide container), left-aligned within a centred wrapper; hero copy left-aligned.
- Spacing: GDS 5px-based scale (5/10/15/20/30/40/50/60). Section rhythm generous; wide line-length for readability.
- Header: blue bar with wordmark + Menu + search. Below it a full-bleed blue hero band holding the 64px white headline and a white search field with a `#d2e2f1` search button.
- Below the fold: white background, grey `#b1b4b6` hairline dividers, columned link lists (services / topics).

## 6. Depth & Elevation

- **Radius: `0px` on every element** — the census returned no border-radius at all. Square corners are a hard brand rule.
- **No soft shadows.** The only box-shadows are solid slabs used as physical edges: `0 2px 0 #002d18` (green button), `0 3px 0 #0b0c0c` (black button variant).
- Structure = borders: `1px #b1b4b6` hairlines (dominant), `1px/2px #0b0c0c`, `4px #1d70b8` and `5px #d4351c` coloured left-rules for info/warning panels.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| — | none | — | — |

- **None: no transitions, no `@keyframes`, no animation library anywhere on the page.** The transition census returned zero, the keyframe list is empty, and no GSAP/Lenis/Framer/Rive/Lottie was detected. This is a deliberate, accessibility-first finding — motion is simply not part of the system. (Machine `prefers-reduced-motion` was off during capture; the point stands regardless since nothing animates.)

## 8. Backgrounds, Effects & WebGL

- None observed — flat solid surfaces. No gradients, no `backdrop-filter`, no canvas/WebGL, no background video, no grain. The blue hero is a flat `#1d70b8` fill.

## 9. Do's and Don'ts

### Do
- Set body copy at 19px/25px in GDS Transport (Arial fallback), weight 400; use 700 for every heading and label.
- Keep every corner square — radius `0px` everywhere.
- Reserve colour for function: `#1d70b8` links/brand, `#00703c` action buttons, `#d4351c` errors, `#ffdd00` focus.
- Give action buttons the solid `0 2px 0 #002d18` bottom edge and hover to `#005a30`.
- Make focus a bright yellow `#ffdd00` highlight with a `#0b0c0c` underline on every interactive element — never a subtle ring.
- Draw structure with `1px #b1b4b6` hairlines and coloured left-borders, not boxes or shadows.

### Don't
- Don't round corners, add soft shadows, or use gradients/canvas.
- Don't animate anything — no transitions, no scroll effects, no motion library.
- Don't add a second type family or a weight between 400 and 700.
- Don't use colour decoratively or introduce a brand accent beyond the functional set.
- Don't replace the yellow focus state with `outline: auto` or a faint ring — the yellow highlight is the accessibility contract.

## 10. Responsive Behavior

- Breakpoints (from stylesheet @media): `20em` (mobile), `40.0625em` (tablet), `48.0625em` (desktop), plus `1020px` and `1281px` refinements and their max-width pairs. 6 container queries.
- Mobile: header collapses to a "Menu" toggle; single-column stacking; type scale steps down (64px hero → smaller on mobile per the GDS scale).
- No dark theme (`darkSchemeBlocks: 0`, no toggle) — single light theme by design.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#ffffff` · Text `#0b0c0c` · Muted `#505a5f` · Border `#b1b4b6` · Accent `#1d70b8` (links) / `#00703c` (actions)
- Font: `"GDS Transport", Arial, sans-serif` · Body: 19px/25px · Radius: 0px everywhere · Control height: ~40-48px
- Focus: 3px `#ffdd00` highlight + `#0b0c0c` underline (all elements) · Button hover: `#005a30` · Link hover: `#003078`

<gov-uk_design_language>
Use the GOV.UK design language: an accessibility-first civic utilitarian system. White #ffffff canvas, near-black text #0b0c0c, secondary grey #505a5f, in bespoke GDS Transport (Arial fallback) at 19px/25px body — weight is binary, 400 body and 700 for every heading, nothing between, tracking always normal. One full-bleed GOV.UK-blue #1d70b8 band carries a bold 64px white headline. Colour is strictly functional: blue #1d70b8 links (hover #003078), green #00703c action buttons (hover #005a30) with a solid 2px bottom edge #002d18, red #d4351c errors, and an unmissable yellow #ffdd00 focus highlight with a #0b0c0c underline on every interactive element. Every corner is square — radius 0px everywhere. No soft shadows (only the solid button edge), no gradients, no canvas, and no motion at all: zero transitions, zero keyframes, no animation library. Structure is drawn with 1px #b1b4b6 hairlines and coloured left-borders. Feels: authoritative, plain, accessible, unhurried. Avoid: rounded corners, soft shadows, gradients, any animation, a second type family or weight, decorative colour, and faint focus rings — the yellow focus state is the accessibility contract.
</gov-uk_design_language>