# GOV.UK: brand book and build spec

Primary blue, one teal dot, GDS Transport and plain English. GOV.UK is a public utility whose style is restraint: underlined blue links, square corners, no imagery, every word earning its place.

From unfairly.ai/brand-guidelines/govuk, checked 2026-10-31. Unofficial study; not affiliated with GOV.UK.

Every value is labelled with where it came from: **published** (the brand says it), **observed** (measured or seen on its live site, with the date), **our reading** (inferred from the evidence) or **our recipe** (how we apply the system). Files beside this one: tokens.css, tokens.json (DTCG 2025.10), kit.json.

**Thesis (our reading):** The brand is the task list. GOV.UK earns trust by looking the same everywhere and getting out of the way; the 2025 refresh added exactly one expressive element, the dot, and kept it off the working web pages. Based on: The guidelines put web at the "inform" end of the inform-to-inspire scale; the homepage has no photo, only blue, white and lists of tasks.

## Purpose

Mission: Help people find what they need from government and complete tasks using government services. (published; https://brand.design-system.service.gov.uk/introduction/)

Story: Launched in 2012, GOV.UK replaced hundreds of government websites with one. In 2025 the brand evolved: the header turned Primary blue, the dot in the wordmark rose and turned teal, and a motion language around the dot was added for the app and social. (published)

| Value | What it means in the work | Source |
|---|---|---|
| Consistency | apply core elements the same way everywhere so people know they are in the right place | published: https://brand.design-system.service.gov.uk/brand-in-use/ |
| Coherence | let the elements flex to the context without losing the identity | published: https://brand.design-system.service.gov.uk/brand-in-use/ |
| Inform to inspire | web informs; app and social can inspire | published: https://brand.design-system.service.gov.uk/introduction/ |

## Fixed and flexible

Never changes:
- Primary blue #1D70B8 as the lead colour, with Accent teal
- The wordmark and crown lock-up on web
- GDS Transport, light and bold only
- Plain English, sentence case

The one thing that varies: Expression: the wider palette, the dot and motion move along the inform-to-inspire scale by channel (web least, social most) and by subject (muted for sensitive topics, brighter for positive ones).

## Positioning

- **Statement**: The single, trusted place for UK government services and information, written in plain English for everyone. (our reading)
- **Category**: Government services and information platform (web, app, wallet) (published)
- **Audience**: Anyone living in the UK, British citizens abroad, and people abroad who want to do business in or travel to the UK (published)
- **Problem**: People need to find the right government information and complete tasks without knowing which department runs what. (our reading)
- **Promise**: The best place to find government services and information. (observed)
- **Differentiators**: One domain for all of government, recognised since 2012.; Plain English mandatory across every page.; An accessibility-first palette and type scale tested for readability.; Its own typeface descended from UK road signs.
- **Alternatives**: Individual department websites and unofficial third-party sites (GOV.UK replaced the former).

## Messaging

Boilerplate (published): GOV.UK has been the single home of UK government online since 2012. Its brand was refreshed in June 2025 so it can work beyond the website, in the GOV.UK app, GOV.UK Wallet and social media, while keeping its recognisable, trusted foundations.

Taglines:
- The best place to find government services and information (Homepage H1)
- Your government services and information, on the go (GOV.UK app promo on the homepage)

| Pillar | Claim | Proof | Label |
|---|---|---|---|
| Trusted and recognisable | One of the most recognisable and trusted online destinations in the UK since 2012. | GOV.UK launched in 2012. | published |
| Help people do what they need | On every channel the focus is helping people find what they need from government and complete tasks. | The homepage opens with six popular tasks and 16 service topics (observed 2026-10-31). | published |
| Plain English for everyone | Plain English is mandatory so everyone who needs the content can understand it. | 1 in 6 adults in England have very poor literacy skills (cited in the GOV.UK writing guidelines).; 80% of people preferred sentences written in clear English in research on legal documents (cited by GOV.UK). | published |
| Accessible by default | Every colour pairing must meet WCAG 2.2 AA; meaning is never carried by colour alone. | Colour contrast must meet WCAG 2.2 success criterion 1.4.3 level AA. | published |

They never claim:
- The crown and royal arms are Crown copyright and restricted; a kit borrower never uses them.
- GDS Transport is for GOV.UK and service.gov.uk only; services elsewhere must use another typeface.
- Never imply government endorsement.

## Voice

Tone words: Specific, Informative, Clear and concise, Brisk, not terse, Serious, not pompous.

Traits:
- Specific, but not Vague (published)
- Brisk, but not Terse (published)
- Serious, but not Pompous (published)
- Approachable, but not Cold (published)

- The published tone of voice: specific, informative, clear and concise, brisk but not terse, incisive but human, serious but not pompous, emotionless.
- Write conversationally, as if talking one-to-one, with the authority of someone who can actively help.
- Plain English is mandatory for all of GOV.UK, including for specialists.
- Address the user as "you"; use "we" only once the organisation has been named.
- Web is the "inform" end of the brand's inform-to-inspire scale; app and social can be more expressive.

Rules a copy check enforces:
- Sentence case headlines
- British spelling
- Write as "we", to "you"
- Sentences of 25 words or fewer
- No exclamation marks
- Never: can't, don't, won't, should've, could've, would've. Say cannot, do not instead
- Never: please, please note. Say give the instruction directly instead
- Never: &. Say and instead
- Say "buy", not "purchase"
- Say "help", not "assist"
- Say "about", not "approximately"
- Say "work with", not "collaborate"
- No more than 5 sentences per paragraph; split sentences over 25 words
- Active voice: "You need an electronic travel authorisation", not "...is needed"
- "must" for legal requirements, "need" for process steps, "can" for options
- No block capitals for large amounts of text; it reads as shouting
- Numerals for all numbers (including 2 to 9) except "one" and common expressions; commas over 999; % sign
- Dates as 4 June 2017; ranges with "to", not dashes; times as 5:30pm, 10am to 11am
- £75 not £75.00; pence written out
- Page titles 65 characters or less, front-loaded, no full stop, not questions, no dashes or slashes
- Bullets need a lead-in line, start lower case, one sentence each, no full stop after the last
- Avoid buzzwords such as deliver (abstract), empower, facilitate, focus, combat, deploy, agenda
- Single quotes for unusual terms and interface labels; double quotes only for direct speech

Their words: you, buy, help, about, can, must, need.
Never: please / please note, negative contractions (can't, don't), block capitals, buzzwords: deliver, empower, facilitate, leverage-style jargon, & (use "and"), exclamation marks.

## Color

| Name | Hex | Role | Use |
|---|---|---|---|
| Primary blue | #1D70B8 | accent | Header, hero, rules, footer border; the brand colour |
| Accent teal | #00FFE0 | accent_secondary | The dot; brand moments on blue |
| White | #FFFFFF | paper | Page ground |
| Blue tint 95% | #F4F8FB | surface | Footer and feedback ground |
| Black | #0B0C0C | ink | Text |
| Link | #1A65A6 | link | Every link |
| Border | #CECECE | border | List dividers |
| Blue tint 80% | #D2E2F1 | accent tint | Action-link circles, search button |
| Focus yellow | #FFDD00 | highlight | Keyboard focus only |
| Success green | #0F7A52 | positive | Start buttons, success |

## Typography

| Role | Their face | Licence | Open stand-in (Google Fonts) | Fallback |
|---|---|---|---|---|
| display | GDS Transport Bold | Crown; for GOV.UK and service.gov.uk only | Roboto | Roboto, arial, sans-serif |
| body | GDS Transport Light | Crown; GOV.UK only | Roboto | Roboto, arial, sans-serif |
| mono | None published | n/a | JetBrains Mono | monospace |

| Role | Token | Face | Desktop | Phone | Line height | Tracking | Weight |
|---|---|---|---|---|---|---|---|
| Hero headline | --text-display-hero-* | Roboto | 64px | 40px | 1.07 | 0px | 700 |
| Section H2 | --text-heading-l-* | Roboto | 36px | 32px | 1.111 | 0px | 700 |
| Footer heading | --text-heading-m-* | Roboto | 24px | 21px | 1.25 | 0px | 700 |
| Link heading / bold link | --text-heading-s-* | Roboto | 19px | 19px | 1.316 | 0px | 700 |
| Body | --text-body-* | Roboto | 19px | 19px | 1.316 | -0.19px | 360 |
| Small (feedback bar, Menu) | --text-body-s-* | Roboto | 16px | 19px | 1.25 | -0.16px | 360 |
| Search label | --text-label-s-* | Roboto | 19px | 19px | 1.316 | 0px | 700 |

## Layout

Measured on https://brand.design-system.service.gov.uk/: Brand law from the GOV.UK brand guidelines (brand.design-system.service.gov.uk, June 2025 refresh); web application from the GOV.UK Design System; voice from the GOV.UK writing guidelines; page anatomy measured on www.gov.uk on 2026-10-31..

| Measure | Desktop (1440) | Phone (390) |
|---|---|---|
| Page margin | 240px | 24px |
| Section padding | 60px | 28px |
| Container max width | 960px | full |
| Grid columns | two-thirds (610) + one-third (300) with a 30px gutter; thirds 300 + 30 + 300 + 30 + 300 |  |
| Gutter | 30px | 15px |
| Card gap | 30px | 30px |
| Navigation height | 61px | 61px |

Breakpoints from GOV.UK's CSS: 320, 641, 769, 1281px.

Homepage bands, top to bottom (observed):
1. Header
   - Desktop: 1440x61, y 0
   - Phone: 390x61
   - no line between header and hero
2. Hero
   - Desktop: 1440x425, y 61-486
   - Phone: 390x334, y 61-395
   - H1 64px bold white
   - search bar 630x50
3. Popular on GOV.UK
   - Desktop: y 486-807
   - Phone: y 395-867
   - 40px pale blue arrow circles
4. Services and information + Featured
   - Desktop: y 807-2750
   - Phone: y 867-3851
   - two-thirds / one-third
   - chevron list with #CECECE dividers
5. Government activity + More on GOV.UK
   - Desktop: y 2750-3677
   - Phone: y 3851-5423
   - same topic list
6. Feedback
   - Desktop: 960x78, y 3677
   - Phone: 390x166
   - 1px #8EB8DC top
7. Footer
   - Desktop: y 3755-4598
   - Phone: y 5589-7332
   - 10px #1D70B8 top border

## Page anatomy

How GOV.UK's own landing pages are built, part by part (observed; https://www.gov.uk/ (measured 2026-10-31, cookie banner dismissed), 2026-10-31). A homepage pattern, not a brand law: follow it for landing pages.

**Navigation**
- cookie banner: The reference was captured with the cookie banner already dismissed. Do NOT build a cookie banner, a cookie confirmation bar or a GOV.UK app promo banner.
- page frame: Body ground #FFFFFF. Container 960px centred (x 240-1200 at 1440); grid gutter 30px (columns pad 15px each side). Phone: content x 24-366 (15px container margin + 9px section padding), except the header logo row, the feedback bar and the footer which sit at x 15-375. Page height 4598px at 1440 and 7332px at 390. All text Roboto (stand-in for GDS Transport), #0B0C0C unless stated; links #1A65A6.
- summary: One solid Primary blue #1D70B8 bar, 61px tall, full bleed, with no line under it: the crown + GOV.UK wordmark lock-up at the left, "Menu" and a search icon at the right. It flows straight into the blue hero, so the header and hero read as one 486px blue block.
- ground: #1D70B8 full bleed (also a 1px #1D70B8 top border, invisible); no bottom border, no shadow; not sticky
- height: 61px at both widths
- logo: variant White crown + white GOV.UK wordmark with the dot in Accent teal #00FFE0, the dot vertically centred between GOV and UK (asset govuk-logo-white.svg, viewBox 324x60); px 162x30 at x 240, y 13 (desktop); 162x30 at x 24, y 13 (phone); position top left, left edge on the container edge
- actions: Right side, flush to the container right edge (x 1200): a "Menu" button (x 1036-1139, 61px tall) then a search toggle (x 1139-1200, 61x61). Menu: 16px 700 white "Menu", preceded by a down chevron drawn as an 8x8 box with 2px white right and bottom borders rotated 45deg (margin 0 10px 0 2px, nudged up 35%); the label span has padding 5px 15px and a 1px #F4F8FB border-right, which draws a 29px-tall vertical divider (y 16-45) between Menu and the search icon. Search toggle: white magnifier (icon-search-white.svg) drawn 21x20 at x 1159, y 20. No other links, no sign-in.
- links: count 0; note No visible nav links: the topic navigation sits behind the Menu button (closed at rest).
- sticky: false
- phone: what shows Same bar 390x61: logo 162x30 at x 24, y 13; Menu button x 226-329 (chevron + "Menu" + divider) and search toggle x 329-390 (icon at x 349, y 20). The search toggle runs to the screen edge.; menu closed at rest

**Hero**
- summary: The rest of the blue block: a 3-line white bold headline and a labelled search bar. No image, no button, no tagline.
- desktop: band y 61-486, 1440x425, ground #1D70B8, padding 30px 0 60px; text H1 "The best place to find government services and information" 64px/68.48px (line-height 1.07) 700 #FFFFFF, letter-spacing 0, in a box 768px wide (80% of the container) at x 240, y 91; 3 lines exactly: "The best place to find" / "government services" / "and information" (text-wrap: balance on the real site; force these breaks with <br> or a max-width so the stand-in breaks the same). Longest line ends near x 857. Margin below the h1 40px.; search Label "Search" 19px/25px 700 #FFFFFF at x 240, y 336; 15px gap; then the bar at y 376: a white input 580x50 (x 240-820, no border, no radius, padding 6px, font 19px) joined to a square button 50x50 (x 820-870) filled #D2E2F1 with a blue #1D70B8 magnifier 20x20 centred (icon-search-blue.svg). Bar total 630px wide (two-thirds column). Square corners everywhere.; cta none; media none
- phone: band y 61-395, 390x334, padding 15px 9px 28px (content x 24-366); text H1 40px/42.8px 700 white, 4 lines exactly: "The best place to" / "find government" / "services" / "and information" (y 76-247); margin-bottom 30px; search Label "Search" 19px/25px 700 white at y 277; bar at y 317: input 292x50 (x 24-316) + button 50x50 (x 316-366) #D2E2F1
- at rest: static; nothing animates
- type: see spec.type display-hero

**Popular on GOV.UK**
- summary: White band: H2 and six action links (pale blue circle with a black arrow, then a bold underlined blue link) in a 3-column grid of 2 rows.
- ground: #FFFFFF
- desktop: section y 486-807, padding 60px 0 28px; H2 at x 240, y 546 (36px/40px 700 #0B0C0C), margin-bottom 30px; grid of 3 equal columns 300px wide at x 240, 570, 900 (30px gutters), rows aligned centre: row 1 links at y 616, row 2 at y 698 (each item padding-bottom 32px); icons 40x40 at y 621 (row 1) and y 702 (row 2).
- phone: section y 395-867, padding 28px 9px 0; H2 32px/35.56px 700 at y 423; one column: icon 40x40 at x 24, link text from x 80; link tops at y 486, 543, 624, 680, 761, 817 (item padding-bottom 24px; 2-line links take 48px)
- anatomy:
  - Action link: icon-action-arrow.svg 40x40 (a #D2E2F1 circle with a black #000000 right arrow) at the column left edge, vertically centred on the link text; link text starts 56px right of the icon left edge (x 296, 626, 956) and wraps within about 245px
  - Link text 19px/24.7px 700 #1A65A6, underlined (1px thickness, 3px offset); wraps to 2 lines where it must; no description
  - Labels in order (row 1 left to right, then row 2): HMRC account: sign in or set up | eVisas: access and use your online immigration status | Universal Credit account: sign in | Personal tax account: sign in or set up | Childcare account: sign in | Check your State Pension forecast
  - Desktop line breaks: "HMRC account: sign in or / set up", "eVisas: access and use your / online immigration status", "Universal Credit account: / sign in", "Personal tax account: sign in / or set up", "Childcare account: sign in" (1 line, centred on the row), "Check your State Pension / forecast"
- components:
  - action_link
- spacing: Desktop: H2 bottom y 586; first row 30px below; rows 82px apart; section bottom y 807 sits 28px under the last row. Phone: last item has no bottom padding; section ends y 867.

**Services and information + Featured**
- summary: A 4px Primary blue rule across the container, then two columns: left two-thirds a long list of 16 topic links with descriptions and chevrons; right one-third "Featured": three icon cards and an app promo under its own 4px blue rule.
- ground: #FFFFFF
- desktop: Rule: 4px solid #1D70B8 top border from x 240 to 1200 at y 807-811 (no gap above it: it sits directly on the Popular section bottom). Columns start 60px below the rule: left column x 240-850 (610 wide), right column x 900-1200 (300 wide). Both H2s at y 871. Left list ends y 2690; the block ends y 2750 (60px below).
- phone: No full rule: each heading carries its own 4px #1D70B8 top border spanning x 24-366 with padding-top 50px and margin-bottom 30px. "Services and information" rule at y 917, H2 at y 971 in 2 lines ("Services and / information", 32px/35.56px); first topic link y 1078; list items full width 342; last description ends ~y 3122. Then the Featured rule at y 3172, H2 y 3226, cards from y 3292 at a 115px pitch (image x 24, text x 119, 247px wide); app promo rule at y 3682 (4px blue, padding-top 30px), app card at y 3716.
- anatomy:
  - Left H2 "Services and information" 36px/40px 700 #0B0C0C at x 240, y 871
  - Topic list item (one per topic): border-top 1px solid #CECECE (none on the first item); inside, the link heading starts 26px below the item top (first item: no border, link 36px below the H2 bottom); heading = link 19px/25px 700 #1A65A6 underlined (1px, offset 3px); description 10px below the heading line box: 19px/25px 400 #0B0C0C, max 580px wide desktop (30px right margin; 312px on phone); item ends 24px below the description. Item height 109px with a one-line description, 134px with two lines. Chevron: a 7x7 box with 3px #1D70B8 top and right borders rotated 45deg (a ">" about 10px wide), right edge 5px inside the item right edge (x 835-845 desktop, x ~351-361 phone), vertically centred on the whole item. The whole item is clickable.
  - The 16 topics, in order (heading / description): "Benefits" / Includes eligibility, appeals, tax credits and Universal Credit | "Births, deaths, marriages and care" / Parenting, civil partnerships, divorce and Lasting Power of Attorney | "Business and self-employed" / Tools and guidance for businesses | "Childcare and parenting" / Includes giving birth, fostering, adopting, benefits for children, childcare and schools | "Citizenship and living in the UK" / Voting, community participation, life in the UK, international projects | "Crime, justice and the law" / Legal processes, courts and the police | "Disabled people" / Includes carers, your rights, benefits and the Equality Act | "Driving and transport" / Includes vehicle tax, MOT and driving licences | "Education and learning" / Includes student loans, admissions and apprenticeships | "Employing people" / Includes pay, contracts, hiring and redundancies | "Environment and countryside" / Includes flooding, recycling, farming and wildlife | "Housing and local services" / Owning or renting and council services | "Money and tax" / Includes debt and Self Assessment | "Passports, travel and living abroad" / Includes renewing passports and travel advice by country | "Visas and immigration" / Apply to visit, work, study, settle or seek asylum in the UK | "Working, jobs and pensions" / Includes holidays, finding a job and redundancy
  - Desktop description wrapping: only "Childcare and parenting" wraps (after "children,"), all other descriptions fit one line at 580px
  - Right H2 "Featured" 36px/40px 700 at x 900, y 871
  - Featured card (image card): 80x80 square image at the column left (x 900), title link 15px to its right (x 995) aligned with the image top: 19px/25px 700 #1A65A6 underlined; description under it, padding-top 10px, 19px/25px 400 #0B0C0C, 205px wide (3 lines). Cards at y 941, 1081, 1221 (140px pitch). The whole card is clickable. No border, no fill.
  - Featured cards in order: image featured-budget.png, "Budget 2026", "Find out about the changes announced in the Budget." | image featured-find-a-job.png, "Find a job", "Search and apply for jobs in England, Scotland and Wales." | image featured-national-insurance.png, "National Insurance", "Check your record to see if you can add more contributions." (these descriptions end with full stops)
  - App promo: 4px solid #1D70B8 top border across the right column (x 900-1200) at y 1391, padding-top 30px; then the same image-card layout at y 1425: image govuk-app-icon.png 80x80 (blue rounded-square app icon), title "Get the GOV.UK app", description "Your government services and information, on the go." (3 lines at 205px: "Your government / services and / information, on the go.")
- components:
  - topic_list
  - image_card
- spacing: Desktop: rule y 807; H2s y 871 (60px padding below the rule + 4px rule); topic list first link y 947; item pitch 109 / 134; list ends y 2690; next rule y 2750. Featured: H2 bottom 911, first card y 941 (30px), app promo rule y 1391 (margin-top 60px after the last card text ends ~1331).
- copy:
  - Topic headings and descriptions verbatim as listed; descriptions have no full stops.

**Government activity + More on GOV.UK**
- summary: Second 4px blue rule, then two columns again: left "Government activity" with a one-line intro and 6 topic links; right "More on GOV.UK", a plain list of 10 bold links.
- ground: #FFFFFF
- desktop: Rule 4px #1D70B8 x 240-1200 at y 2750-2754. Both H2s at y 2814. Left: intro paragraph "Find out what the government is doing" 19px/25px 400 at y 2864; first topic link y 2925; 6 items (same topic-list item as above, pitch 109); list ends ~y 3553. Right (x 900-1200): 10 links, 19px/25px 700 #1A65A6 underlined, one per line, first at y 2885, 45px pitch (last y 3290).
- phone: Government activity: 4px rule at y 3851 (x 24-366), H2 y 3905, intro y 3950, first link y 4011, items 109/134 tall, ends ~y 4739. More on GOV.UK: 4px rule y 4763, H2 y 4817, links from y 4884 at a 45px pitch, last y 5289.
- anatomy:
  - H2s "Government activity" (x 240) and "More on GOV.UK" (x 900), 36px/40px 700 #0B0C0C
  - Intro under the left H2 (10px gap): "Find out what the government is doing" 19px/25px 400 #0B0C0C
  - Topics (heading / description): "Departments" / Departments, agencies and public bodies | "News" / News stories, speeches, letters and notices | "Guidance and regulation" / Detailed guidance, regulations and rules | "Research and statistics" / Reports, analysis and official statistics | "Policy papers and consultations" / Consultations and strategy | "Transparency documents" / Data, Freedom of Information releases and corporate reports
  - More on GOV.UK links in order: HMRC services: sign in | Check MOT history of a vehicle | Tax your vehicle | Universal Credit | Foreign travel advice | Check your State Pension age | Childcare account: sign in | Student finance: sign in | Self Assessment tax returns | Apply for a passport
- components:
  - topic_list
  - link_list
- spacing: Desktop: rule y 2750, H2 y 2814, intro y 2864, first topic link y 2925 (36px under the intro), list ends ~y 3553; then 124px of white before the feedback bar at y 3677.

**Is this page useful?**
- summary: A pale blue feedback bar inside the container, just above the footer.
- ground: #F4F8FB
- desktop: Bar x 240-1200, y 3677-3755 (78px), fill #F4F8FB, 1px solid #8EB8DC top border, no other border; it sits directly on the footer top border. Question "Is this page useful?" 16px/20px 700 #0B0C0C at x 270, y 3707. Buttons "Yes" (x 426) and "No" (x 546), each 100x37, and "Report a problem with this page" right-aligned (x 930-1170, 240x37), all at y 3698: transparent fill, 1px solid #0B0C0C border, box-shadow 0 3px 0 #0B0C0C (a heavier bottom edge), square corners, text 16px/20px 400 #0B0C0C centred, padding 8px 10px 7px.
- phone: Full width bar x 0-390, y 5423-5589 (166px), padding 15px: question 19px/25px 700 at x 15, y 5452; Yes and No buttons 80x42 at x 187 and 277, y 5444; then a 1px #CECECE line and the "Report a problem with this page" button full width (x 15-375, 42 tall) at y 5527. Buttons text 19px.
- anatomy:
  - Not a section heading: the question is small bold text inline with the buttons
- components:
  - feedback_button

**Footer**
- summary: Pale blue footer with a 10px Primary blue top border: a small black crown, two headed link groups, a hairline, inline meta links, the OGL licence line and the royal crest with "© Crown copyright".
- ground: #F4F8FB; border-top 10px solid #1D70B8
- anatomy:
  - Desktop: y 3755-4598 (843px incl. the 10px border), padding 40px 0 25px
  - Crown footer-crown.svg 32x30 #0B0C0C at x 240, y 3805; 25px below it the headings
  - Two headings at y 3866, 24px/30px 700 #0B0C0C, each with a 1px solid #8EB8DC bottom border (padding-bottom 20px, the rule at y ~3917): "Services and information" spanning x 240-870 (two-thirds) and "Government activity" spanning x 900-1200
  - Links 19px/25px 400 #1A65A6 underlined (1px, offset 3px), one per line at a 45px pitch, first row y 3948. Services and information is two sub-columns at x 240 and x 570, 8 links each; Government activity one column at x 900, 8 links
  - Services column 1: Benefits, "Births, death, marriages and care" (sic, "death" singular), Business and self-employed, Childcare and parenting, Citizenship and living in the UK, Crime, justice and the law, Disabled people, Driving and transport
  - Services column 2: Education and learning, Employing people, Environment and countryside, Housing and local services, Money and tax, Passports, travel and living abroad, Visas and immigration, Working, jobs and pensions
  - Government activity: Departments, News, Guidance and regulation, Research and statistics, Policy papers and consultations, Transparency, How government works, Get involved
  - Section break: 1px solid #8EB8DC full container width (x 240-1200) at y ~4347, 50px below it the meta
  - Meta left, inline links 19px/25px #1A65A6 underlined with about 19px between items: row 1 at y 4399 "Help", "Privacy", "Cookies", "Accessibility statement", "Contact", "Terms and conditions"; row 2 at y 4429 "Rhestr o Wasanaethau Cymraeg", "Government Digital Service"
  - OGL logo ogl-logo.svg 41x17 #0B0C0C at x 240, y 4473; under it at y 4498 "All content is available under the Open Government Licence v3.0, except where otherwise stated" 19px/25px #0B0C0C with "Open Government Licence v3.0" as an underlined #1A65A6 link; it wraps to 2 lines, breaking after "Open Government" (line 1 ends about x 680)
  - Meta right: the royal crest footer-crest.svg drawn 125x102 #0B0C0C centred above "© Crown copyright" (19px/25px #0B0C0C underlined link), the block x 1045-1200, y 4411-4547, bottom-aligned with the licence text
- phone: y 5589-7332, padding 25px 0 15px, content x 15-375: crown at y 5624; headings 21px/25px 700 with a #8EB8DC rule (padding-bottom 10px); "Services and information" y 5685, its 16 links in ONE column from y 5752 at a 40px pitch; "Government activity" y 6416, 8 links from y 6483; meta links wrap: "Help Privacy Cookies" / "Accessibility statement Contact" / "Terms and conditions" / "Rhestr o Wasanaethau Cymraeg" / "Government Digital Service" (rows 30px apart from y 6859); OGL logo y 7023; licence text 3 lines from y 7055; crest + "© Crown copyright" centred (x 117-272) at y 7155-7291

**On dark grounds**
- note: The only dark ground is Primary blue #1D70B8 (header + hero).
- text: #FFFFFF
- logo variant: white crown and wordmark, Accent teal #00FFE0 dot
- search button: #D2E2F1 fill with a #1D70B8 icon

## Components

- **action link** (observed): icon 40x40 circle #D2E2F1 with a black #000000 right arrow (icon-action-arrow.svg), text 19px/24.7px 700 #1A65A6 underlined, gap text starts 56px right of the icon left edge, hover link colour #0F385C, underline 3px (GOV.UK Frontend link hover)
- **topic list** (observed): divider 1px solid #CECECE between items (none above the first), heading 19px/25px 700 #1A65A6 underlined link, body 19px/25px #0B0C0C, max 580px, icon CSS chevron: 7x7, 3px #1D70B8 top+right borders, rotated 45deg, at the item right, vertically centred, padding item content 26px from the top, 24px below the description, hover link #0F385C, thicker underline
- **image card** (observed): image 80x80 square at left, text x 95px from the card left, heading 19px/25px 700 #1A65A6 underlined, body 19px/25px #0B0C0C, padding-top 10px
- **link list** (observed): text 19px/25px 700 #1A65A6 underlined, pitch 45px
- **feedback button** (published): fill transparent, border 1px solid #0B0C0C, shadow 0 3px 0 #0B0C0C, radius 0, text 16px/20px 400 #0B0C0C (19px on phone), hover fill #CECECE
- **search** (observed): input white, no border, no radius, 50px tall, padding 6px, 19px text, button 50x50 #D2E2F1, blue #1D70B8 magnifier 20px
- **button primary** (our reading): fill #0F7A52, text #FFFFFF, radius 0, shadow 0 2px 0 #083D29, weight 400. not on the homepage; GOV.UK Frontend start/primary button uses the success green with a darker shadow (shade value inferred from the palette)
- **focus** (published): style yellow #FFDD00 fill with a 4px #0B0C0C bottom bar (box-shadow 0 -2px #FFDD00, 0 4px #0B0C0C) on focused links; text #0B0C0C

States (hover, focus, pressed, disabled) weren't measured; define them before you build.

## Motion tokens

| Name | Easing | Duration | Use | Label |
|---|---|---|---|---|
| Wordmark reveal |  |  |  | published |
| Crown reveal |  |  |  | published |
| Splash / end frame |  |  |  | published |
| Dot behaviours |  |  |  | published |
| Web |  |  |  | published |

## Icon tokens

Grid not published, stroke search icon: 3px stroke on a 27px viewBox; arrows filled (published).
| Name | Size | Use |
|---|---|---|
| action link | 40px |  |
| search | 20px |  |

## Signature moves

### The blue block

Where: top of the homepage.
Do: header and hero as one uninterrupted #1D70B8 field, white type, the teal dot as the only other colour.
Don't: add a line, photo or gradient between header and hero.

### The dot

Where: wordmark, and as a graphic device in app and social.
Do: Accent teal #00FFE0 circle, vertically centred between GOV and UK; as a device it guides, highlights, informs, illustrates.
Don't: stroke, distort (in static), crop into abstraction, shadow or gradient it; overuse it.

### 4px blue section rules

Where: between homepage blocks and above the app promo.
Do: 4px solid #1D70B8 rule across the column, 60px of space below it to the H2 (desktop).
Don't: use a grey or thin rule there.

### Underlined bold blue links

Where: every link.
Do: #1A65A6, 1px underline 3px below the baseline, bold for task links.
Don't: remove underlines or use buttons for navigation.

## Messaging: rules

No slogans: the homepage leads with one claim ("the best place to find government services and information") and then lists tasks. Every heading is the name of a task or topic; every description is one plain line.

Why it works: Users come to do something; the words are the navigation.

- Lead with the task
- One plain description line per link, no full stop
- Front-load titles with the words users search for
- Don't write marketing straplines
- Don't use buzzwords

Sources: https://www.gov.uk/, https://brand.design-system.service.gov.uk/introduction/, https://guidance.publishing.service.gov.uk/writing-to-gov-uk-standards/style-guides/a-to-z-style-guide/

## Voice: rules

GOV.UK publishes its tone of voice as a short list: specific, informative, clear and concise, brisk but not terse, incisive but human, serious but not pompous, emotionless. Plain English is mandatory, with a large A to Z style guide behind it.

Why it works: Many readers have low literacy or English as a second language; specialists also prefer plain English.

|  |  |
|---|---|
| Tone | specific, informative, brisk, serious |
| Sentence | split over 25 words |
| Paragraph | max 5 sentences |
| Case | sentence case |
| Numbers | numerals, % sign, 9,000 |

- Address the user as "you"
- Active voice
- Up to 25 words a sentence, 5 sentences a paragraph
- No negative contractions
- No "please"
- "must" / "need" / "can" by how binding it is
- Don't use block capitals
- Don't use jargon or buzzwords
- Don't use "&"

Real examples, to look at on GOV.UK's own pages (not for reuse):
- Use the right tone page of the GOV.UK writing guidelines (reference screenshot of a guideline page; not for the build): https://guidance.publishing.service.gov.uk/writing-to-gov-uk-standards/writing-guidelines/right-tone/

Sources: https://guidance.publishing.service.gov.uk/writing-to-gov-uk-standards/writing-guidelines/right-tone/, https://guidance.publishing.service.gov.uk/writing-to-gov-uk-standards/writing-guidelines/clear-language/, https://guidance.publishing.service.gov.uk/writing-to-gov-uk-standards/style-guides/a-to-z-style-guide/

## Logo: rules

Two elements: the wordmark (primary identifier) and the crown (supporting trust mark). On web they are locked up, crown left of the wordmark. The redrawn wordmark raises the dot to the vertical middle and colours it Accent teal on blue.

Why it works: The raised dot reads as a connector between government and the UK rather than a web address.

|  |  |
|---|---|
| Wordmark min | 50px wide |
| Crown min | 16px wide |
| Crown gap | 3 crown dots (7px on web) |
| Dot | 2 crown dots (standard crown) |
| Clear space | 1 wordmark dot |

- Lock-up on web; wordmark leads elsewhere
- Crown 3 crown-dots from the wordmark; wordmark dot = 2 crown dots
- Clear space = the wordmark dot
- Minimum width: wordmark 50px, crown 16px; small crown below that (favicons)
- On Primary blue: white with an Accent teal dot
- On light grounds: black with a Primary blue dot
- Don't alter the colour balance
- Don't distort, stretch, skew, flip or rotate
- Don't add shadows or effects
- Don't place on busy or low-contrast backgrounds

Real examples, to look at on GOV.UK's own pages (not for reuse):
- Web lock-up page of the GOV.UK brand guidelines (reference screenshot of a guideline page; not for the build): https://brand.design-system.service.gov.uk/logo-system/web/

Sources: https://brand.design-system.service.gov.uk/logo-system/, https://brand.design-system.service.gov.uk/logo-system/logo-elements/, https://brand.design-system.service.gov.uk/logo-system/web/, https://brand.design-system.service.gov.uk/logo-system/brand-hierarchy/

## Color: rules

GOV.UK is a blue brand: Primary blue #1D70B8 and Accent teal #00FFE0 lead every channel. A four-tier palette (primary, tints, shades, accents) covers blues, greens, teals, purples, magentas, reds, oranges, yellows, browns and neutrals, plus functional colours (text, links, border, focus, error, success).

Why it works: Using the blue more consistently makes it the visual signature; teal makes the brand feel more modern.

|  |  |
|---|---|
| Primary blue | #1D70B8 · RGB 29 112 184 |
| Accent teal | #00FFE0 |
| Text | #0B0C0C |
| Link | #1A65A6 |
| Focus | #FFDD00 |
| Template bg | #F4F8FB |

- Lead with Primary blue and Accent teal
- Use functional colour names, not hex, in code
- WCAG 2.2 AA contrast for every combination
- Never convey meaning by colour alone
- Focus yellow only for focus
- Don't create new colours
- Don't use too many colours in one application
- Don't mix colours into gradients (single-colour gradients over imagery are allowed)
- Don't alter palette values

Not published: colour proportions.

Real examples, to look at on GOV.UK's own pages (not for reuse):
- Web palette page of the GOV.UK brand guidelines (reference screenshot of a guideline page; not for the build): https://brand.design-system.service.gov.uk/colour/web/

Sources: https://brand.design-system.service.gov.uk/colour/, https://brand.design-system.service.gov.uk/colour/govuk-blue/, https://brand.design-system.service.gov.uk/colour/web/, https://design-system.service.gov.uk/styles/colour/

## Typography: rules

One typeface, GDS Transport, in two weights (light and bold), based on the 1960s Transport road-sign face by Jock Kinneir and Margaret Calvert and adapted by GDS in 2012. The Design System type scale uses line heights in multiples of 5px and enlarges small-screen text from Frontend v6.

Why it works: Designed to be read at speed; it makes GOV.UK easy to recognise and read on any device.

|  |  |
|---|---|
| Real face | GDS Transport Light / Bold |
| Scale (large) | 80/80, 48/50, 36/40, 27/30, 24/30, 19/25, 16/20 |
| Scale (small) | 53/55, 32/35, 27/30, 21/25, 21/25, 19/25, 16/20 |
| Breakpoint | 640px |

- GDS Transport only on service.gov.uk / GOV.UK
- Two weights: light and bold
- Body 19px on all screens
- Line heights on a 5px rhythm
- Sentence case
- Don't use GDS Transport off GOV.UK domains
- Don't add weights or a second family

Real examples, to look at on GOV.UK's own pages (not for reuse):
- Typography page of the GOV.UK brand guidelines (reference screenshot of a guideline page; not for the build): https://brand.design-system.service.gov.uk/typography/
- Type scale page of the GOV.UK Design System (reference screenshot of a guideline page; not for the build): https://design-system.service.gov.uk/styles/type-scale/

Sources: https://brand.design-system.service.gov.uk/typography/, https://brand.design-system.service.gov.uk/typography/web/, https://design-system.service.gov.uk/styles/typeface/, https://design-system.service.gov.uk/styles/type-scale/

## Graphic elements: rules

The dot is the one graphic device: a teal circle that guides, highlights (stretching into a lozenge behind a word), informs (growing with a statistic) and illustrates (drawing circle-based icons). On the web homepage the signature elements are functional: the solid blue block, 4px blue section rules, underlined bold links, pale-blue arrow circles and CSS chevrons.

Why it works: One flexible shape ties every channel together without adding decoration to working pages.

- Use the dot with a clear purpose
- Flat fills only
- Distortion only in motion
- Don't overuse the dot
- Don't use stroke versions
- Don't crop it into abstraction
- Don't add shadows or gradients

Real examples, to look at on GOV.UK's own pages (not for reuse):
- Graphic device page of the GOV.UK brand guidelines (reference screenshot of a guideline page; not for the build): https://brand.design-system.service.gov.uk/graphic-device/

Sources: https://brand.design-system.service.gov.uk/graphic-device/, https://brand.design-system.service.gov.uk/graphic-device/expression/, https://brand.design-system.service.gov.uk/graphic-device/dot-use-examples/

## Iconography: rules

The Design System says avoid icons in most cases; when used, give a visible text label and never let one icon mean two things. The homepage uses only a magnifier, a right arrow in a pale blue circle and a CSS chevron.

Why it works: People read single icons in different ways.

|  |  |
|---|---|
| Action link | 40px #D2E2F1 circle, black arrow |
| Chevron | 7px, 3px #1D70B8 stroke |
| Search | 20px, 3px stroke |

- Text label beside every icon
- One meaning per icon
- Search icon only for search
- Don't use icons as decoration

Sources: https://design-system.service.gov.uk/styles/images/, https://www.gov.uk/

## Illustration: rules

Illustrations simplify something complex (scanning a passport, finding a reference number). Flat blocks of the GOV.UK palette, few elements, consistent line widths and radii; avoid people, and if shown, show diversity. The brand adds circle-built animated illustrations around the dot for app and social.

Why it works: Images are visual aids; the text must carry the information.

- Use as few elements as possible
- GOV.UK palette, tints if needed
- Flat colour, no shadows or gradients
- Build shapes from circles and pieces of circles (app/social)
- Don't depict only one kind of person
- Don't decorate

Sources: https://design-system.service.gov.uk/styles/images/, https://brand.design-system.service.gov.uk/graphic-device/dot-use-examples/

## Photography: rules

Use photography only when a lifelike representation matters (for example a preview of an uploaded document). The homepage has no photography. Social uses real people (an influencer or presenter) in thumbnails.

Why it works: Services work best without relying on images.

- Only for a real user need
- Alt text that conveys meaning
- Avoid images of text
- Don't use photos for abstract concepts or emotions
- Don't use generic stock photography

Sources: https://design-system.service.gov.uk/styles/images/, https://brand.design-system.service.gov.uk/graphic-device/dot-use-examples/

## Motion: rules

Motion belongs to the dot: wordmark and crown reveals, the splash-screen spiral of coloured dots, and dot behaviours (guides, navigates, highlights, informs, transitions, illustrates). Social end frames share the app splash motion. Durations and easing are not published. The web homepage does not animate.

Why it works: Motion adds energy where attention must be won (app, social) and stays out of task pages.

- Motion follows the dot's defined roles
- End frames reuse the splash behaviour
- Distortion allowed only in motion

Sources: https://brand.design-system.service.gov.uk/graphic-device/expression/, https://brand.design-system.service.gov.uk/graphic-device/dot-use-examples/, https://brand.design-system.service.gov.uk/logo-system/logo-elements/

## Interface and layout: rules

Mobile first, single column first; default max page width 1020px in the Design System (the homepage container measures 960px of content inside 15px column padding); two-thirds / one-third grid; responsive and static spacing scales from 5px to 60px.

Why it works: Most users arrive on small screens; a narrow measure keeps lines readable.

|  |  |
|---|---|
| Max width | 1020px (960 content) |
| Gutter | 30px |
| Tablet breakpoint | 640px |
| Radius | 0 |
| Section rule | 4px #1D70B8 |

- Design for small screens first
- Grid columns: full, three-quarters, two-thirds, one-half, one-third, one-quarter
- Spacing scale: 0, 5, 10, 15, 20, 25, 30, 40, 50, 60px on large screens
- Square corners
- Don't make lines of text too long

Real examples, to look at on GOV.UK's own pages (not for reuse):
- Layout page of the GOV.UK Design System (reference screenshot of a guideline page; not for the build): https://design-system.service.gov.uk/styles/layout/

Sources: https://design-system.service.gov.uk/styles/layout/, https://design-system.service.gov.uk/styles/spacing/, https://design-system.service.gov.uk/styles/type-scale/

## Rules: rules

Consistency (core elements applied the same way) plus coherence (elements flex to the channel). Exceptions to colour rules need approval from the brand team.

Why it works: People must know at once that they are on official government ground.

- Lead with Primary blue and Accent teal
- Lock-up on web, wordmark elsewhere
- GDS Transport light and bold only
- WCAG 2.2 AA everywhere
- Plain English, sentence case
- Use the dot purposefully
- Don't create new colours or gradients
- Don't alter, distort or add effects to the logo
- Don't overuse or stroke the dot
- Don't use images of text

Sources: https://brand.design-system.service.gov.uk/brand-in-use/, https://brand.design-system.service.gov.uk/colour/govuk-blue/, https://brand.design-system.service.gov.uk/logo-system/logo-elements/, https://brand.design-system.service.gov.uk/graphic-device/dot-use-examples/

## Applications

| Format | What | Source |
|---|---|---|
| website | gov.uk: Primary blue header and hero, white page, underlined blue links, lock-up top left, crown and crest in the footer. | https://www.gov.uk/ |
| app | Blue header with the wordmark and teal dot; splash screen with the dot spiral; circle-built onboarding illustrations. | https://brand.design-system.service.gov.uk/brand-in-use/app/ |
| social | Full palette and the dot at full volume: circles, lozenge highlights, end frames. | https://brand.design-system.service.gov.uk/brand-in-use/social/ |
| product lock-ups | GOV.UK Pay, Notify, Wallet: wordmark + product name, spaced by the dot width. | https://brand.design-system.service.gov.uk/logo-system/brand-hierarchy/ |

## By format

How our engine applies the GOV.UK system to each format. Our recipe from their rules and their inform-to-inspire scale, not something GOV.UK publishes. Loudness runs 0 (nothing but the essentials) to 5 (the signature moves at full volume).

| Format | Loudness 0–5 | Must appear | What varies |
|---|---|---|---|
| Landing page | 1 | Build it the way gov.uk is built (kit.spec.page): one solid Primary blue header + hero block with a bold white sentence-case H1, white page, 4px blue section rules, bold underlined #1A65A6 links, square corners, Roboto (GDS Transport stand-in) 700/360, pale #F4F8FB footer with a 10px blue top border | which task lists and how many links |
| Slides | 2 | Primary blue or white grounds, bold sentence-case titles, plain sentences | one dot-based highlight per slide |
| Social | 4 | Primary blue and Accent teal lead; the dot used purposefully | wider palette, circle illustrations, lozenge highlights |
| Print / poster | 2 | Blue lead colour, bold titles, AA contrast | one dot device |

## Checks before anything ships

- **Logo hidden**: Cover the logo. It should still read as GOV.UK: a solid #1D70B8 block, bold sentence-case white headline, underlined blue links on white, square corners.
- **Plain English**: No sentence over 25 words, no "please", no buzzwords, no negative contractions.

## Make it your own

Keep the system: color roles and proportions, type, layout, components, the signature moves, the voice traits and rules. Replace everything that is GOV.UK's own: name and logo, positioning, pillars, proof, taglines, boilerplate and any real line quoted above. kit.json lists these under make_it_yours.

## Not published

- Motion durations and easing: not published (behaviours only, as video).
- Colour proportions: not published.
- Icon grid and sizes: not published (icons discouraged).
- GDS Transport files: restricted to GOV.UK and service.gov.uk; stand-in Roboto used.
- The homepage H2 phone size (32px) differs from the Design System scale (27px); the book follows the measured page.
- The Design System says max width 1020px; the homepage content measures 960px inside 15px column padding (1020 minus 2 x 30px page margins). Both stated, scoped.
- Primary button shadow shade is not on the brand site; inferred from the palette.

Logos and reference images belong to GOV.UK. Look at them on GOV.UK's own pages; don't reuse them.