{ "schema": "brand-kit@2", "palette": { "paper": "#FFFFFF", "surface": "#F4F8FB", "ink": "#0B0C0C", "ink_muted": "#484949", "accent": "#1D70B8", "on_accent": "#FFFFFF", "accent_secondary": "#00FFE0", "link": "#1A65A6", "border": "#CECECE", "highlight": "#FFDD00", "positive": "#0F7A52", "night": "#1D70B8", "on_night": "#FFFFFF", "accent_on_night": "#00FFE0", "prov": "published", "source": "https://brand.design-system.service.gov.uk/colour/web/", "note": "Roles follow the GOV.UK functional colours: text #0B0C0C, secondary text #484949, link #1A65A6, border #CECECE, template/surface background #F4F8FB, brand #1D70B8, focus #FFDD00, success #0F7A52. There is no dark night ground: the only reversed ground is Primary blue. Accent teal is for the dot and brand moments, never text on white.", "extras": [ { "name": "Primary blue", "hex": "#1D70B8", "role": "Core brand colour; header, hero, section rules, footer top border, brand functional colour", "prov": "published", "source": "https://brand.design-system.service.gov.uk/colour/govuk-blue/" }, { "name": "Accent teal", "hex": "#00FFE0", "role": "Core brand colour beside Primary blue; the dot in the wordmark on blue grounds", "prov": "published", "source": "https://brand.design-system.service.gov.uk/colour/govuk-blue/" }, { "name": "Black", "hex": "#0B0C0C", "role": "Text, focus text, input border; wordmark on light grounds", "prov": "published", "source": "https://brand.design-system.service.gov.uk/colour/web/" }, { "name": "White", "hex": "#FFFFFF", "role": "Body background, inverse text", "prov": "published", "source": "https://brand.design-system.service.gov.uk/colour/web/" }, { "name": "Link", "hex": "#1A65A6", "role": "Functional link colour (Blue shade 10%)", "prov": "published", "source": "https://brand.design-system.service.gov.uk/colour/web/" }, { "name": "Link hover", "hex": "#0F385C", "role": "Functional link-hover (Blue shade 50%)", "prov": "published", "source": "https://brand.design-system.service.gov.uk/colour/web/" }, { "name": "Link visited", "hex": "#54319F", "role": "Functional link-visited (Primary purple)", "prov": "published", "source": "https://brand.design-system.service.gov.uk/colour/web/" }, { "name": "Secondary text", "hex": "#484949", "role": "Functional secondary-text (Black tint 25%)", "prov": "published", "source": "https://brand.design-system.service.gov.uk/colour/web/" }, { "name": "Border", "hex": "#CECECE", "role": "Functional border and hover (Black tint 80%); list dividers on the homepage", "prov": "published", "source": "https://brand.design-system.service.gov.uk/colour/web/" }, { "name": "Template background", "hex": "#F4F8FB", "role": "Functional template-background and surface-background (Blue tint 95%); footer and feedback ground", "prov": "published", "source": "https://brand.design-system.service.gov.uk/colour/web/" }, { "name": "Surface border", "hex": "#8EB8DC", "role": "Functional surface-border (Blue tint 50%); footer heading rules, feedback top rule, footer section break", "prov": "published", "source": "https://brand.design-system.service.gov.uk/colour/web/" }, { "name": "Blue tint 80%", "hex": "#D2E2F1", "role": "Action-link circles and the hero search button fill", "prov": "published", "source": "https://brand.design-system.service.gov.uk/colour/web/" }, { "name": "Focus", "hex": "#FFDD00", "role": "Functional focus (Primary yellow); keyboard focus only", "prov": "published", "source": "https://brand.design-system.service.gov.uk/colour/web/" }, { "name": "Error", "hex": "#CA3535", "role": "Functional error (Primary red)", "prov": "published", "source": "https://brand.design-system.service.gov.uk/colour/web/" }, { "name": "Success", "hex": "#0F7A52", "role": "Functional success (Primary green); start buttons", "prov": "published", "source": "https://brand.design-system.service.gov.uk/colour/web/" }, { "name": "Blue tint 25%", "hex": "#5694CA", "role": "Web palette tint", "prov": "published", "source": "https://brand.design-system.service.gov.uk/colour/web/" }, { "name": "Blue tint 95%", "hex": "#F4F8FB", "role": "Web palette tint (= template background)", "prov": "published", "source": "https://brand.design-system.service.gov.uk/colour/web/" }, { "name": "Blue shade 25%", "hex": "#16548A", "role": "Web palette shade", "prov": "published", "source": "https://brand.design-system.service.gov.uk/colour/web/" }, { "name": "Blue shade 50%", "hex": "#0F385C", "role": "Web palette shade (= link hover)", "prov": "published", "source": "https://brand.design-system.service.gov.uk/colour/web/" }, { "name": "Primary teal", "hex": "#158187", "role": "Web palette primary", "prov": "published", "source": "https://brand.design-system.service.gov.uk/colour/web/" }, { "name": "Teal tint 80%", "hex": "#D0E6E7", "role": "Web palette tint", "prov": "published", "source": "https://brand.design-system.service.gov.uk/colour/web/" }, { "name": "Primary purple", "hex": "#54319F", "role": "Web palette primary (= link visited)", "prov": "published", "source": "https://brand.design-system.service.gov.uk/colour/web/" }, { "name": "Purple tint 80%", "hex": "#DDD6EC", "role": "Web palette tint", "prov": "published", "source": "https://brand.design-system.service.gov.uk/colour/web/" }, { "name": "Primary magenta", "hex": "#CA357C", "role": "Web palette primary", "prov": "published", "source": "https://brand.design-system.service.gov.uk/colour/web/" }, { "name": "Magenta tint 80%", "hex": "#F4D7E5", "role": "Web palette tint", "prov": "published", "source": "https://brand.design-system.service.gov.uk/colour/web/" }, { "name": "Magenta shade 50%", "hex": "#651B3E", "role": "Web palette shade", "prov": "published", "source": "https://brand.design-system.service.gov.uk/colour/web/" }, { "name": "Primary red", "hex": "#CA3535", "role": "Web palette primary (= error)", "prov": "published", "source": "https://brand.design-system.service.gov.uk/colour/web/" }, { "name": "Primary orange", "hex": "#F47738", "role": "Web palette primary", "prov": "published", "source": "https://brand.design-system.service.gov.uk/colour/web/" }, { "name": "Primary yellow", "hex": "#FFDD00", "role": "Web palette primary (= focus)", "prov": "published", "source": "https://brand.design-system.service.gov.uk/colour/web/" }, { "name": "Primary brown", "hex": "#99704A", "role": "Web palette primary", "prov": "published", "source": "https://brand.design-system.service.gov.uk/colour/web/" }, { "name": "Primary green", "hex": "#0F7A52", "role": "Web palette primary (= success)", "prov": "published", "source": "https://brand.design-system.service.gov.uk/colour/web/" }, { "name": "Green tint 80%", "hex": "#CFE4DC", "role": "Web palette tint", "prov": "published", "source": "https://brand.design-system.service.gov.uk/colour/web/" }, { "name": "Green shade 50%", "hex": "#083D29", "role": "Web palette shade", "prov": "published", "source": "https://brand.design-system.service.gov.uk/colour/web/" }, { "name": "Purple shade 25%", "hex": "#3F2577", "role": "Web palette shade", "prov": "published", "source": "https://brand.design-system.service.gov.uk/colour/web/" }, { "name": "Black tint 25%", "hex": "#484949", "role": "Neutral (= secondary text)", "prov": "published", "source": "https://brand.design-system.service.gov.uk/colour/web/" }, { "name": "Black tint 50%", "hex": "#858686", "role": "Neutral", "prov": "published", "source": "https://brand.design-system.service.gov.uk/colour/web/" }, { "name": "Black tint 95%", "hex": "#F3F3F3", "role": "Neutral", "prov": "published", "source": "https://brand.design-system.service.gov.uk/colour/web/" } ] }, "typography": { "display": { "family": "Roboto", "steal_family": "Roboto", "weight": 700, "line_height": 1.07, "tracking": 0, "fallback_stack": "Roboto, arial, sans-serif", "real": "GDS Transport Bold (GOV.UK only; based on Kinneir and Calvert's 1960s road-sign Transport, adapted by GDS in 2012)", "stand_in": true, "prov": "published", "source": "https://brand.design-system.service.gov.uk/typography/", "also": [ "https://design-system.service.gov.uk/styles/typeface/" ], "files": [], "google": "https://fonts.googleapis.com/css2?family=Roboto:wght@300..700&display=swap", "site": { "prov": "observed", "source": "https://www.gov.uk/ (measured 2026-10-31, cookie banner dismissed)", "family": "\"GDS Transport\", arial, sans-serif", "weights": "700 bold (headings, links); 400 maps to the GDS Transport Light file (body)" } }, "body": { "family": "Roboto", "steal_family": "Roboto", "weight": 360, "line_height": 1.316, "tracking": -0.01, "scale": 1, "fallback_stack": "Roboto, arial, sans-serif", "real": "GDS Transport Light (served as font-weight 400 on GOV.UK)", "stand_in": true, "prov": "published", "source": "https://brand.design-system.service.gov.uk/typography/", "also": [ "https://design-system.service.gov.uk/styles/typeface/" ], "files": [], "google": "https://fonts.googleapis.com/css2?family=Roboto:wght@300..700&display=swap", "site": { "prov": "observed", "source": "https://www.gov.uk/ (measured 2026-10-31, cookie banner dismissed)", "family": "\"GDS Transport\", arial, sans-serif", "weights": "400 (Light file) body, 700 headings and links" } }, "mono": { "family": "JetBrains Mono", "steal_family": "JetBrains Mono", "weight": 400, "fallback_stack": "monospace", "real": "No brand mono published", "stand_in": true, "prov": "inferred", "source": "https://brand.design-system.service.gov.uk/typography/" }, "calibration": "Real face GDS Transport (Bold, and Light used as weight 400) may be used only on GOV.UK and service.gov.uk. Stand-in: Roboto (Google Fonts, OFL/Apache, variable 100-900). Calibrated 2026-10-31 by rendering the same strings in GDS Transport (the site's own woff2, local measurement only) and 40 open candidates on canvas. Bold: \"The best place to find government services\" 64px: GDS 1234.6px; Roboto 700 +0.5% width, -0.5% ink, x-height +1%. \"Services and information\" 36px: Roboto 700 +0.8% width, 0% ink. \"Births, deaths, marriages and care\" 19px: Roboto 700 +0.8% width, +0.4% ink. Runners-up Heebo 700 (+0.7%/+0.6%) and Fira Sans 600 (+1%/-0.4%, more humanist). Body: \"Parenting, civil partnerships, divorce and Lasting Power of Attorney\" 19px: GDS Light 546px; Roboto 400 +3.2% width, +11% ink; Roboto 350 +2.2% width, -3.3% ink. Use Roboto at weight 360 with letter-spacing -0.01em (width within 1%, ink within 1%). Rules: headings and links Roboto 700, letter-spacing 0; body Roboto 360, letter-spacing -0.01em; load the variable Roboto (wght 300..700) so 360 renders exactly. GDS Transport and Roboto share the single-storey g, plain l and straight-cut terminals." }, "style": { "button_shape": "square", "button_note": "GOV.UK buttons and inputs have square corners; buttons carry a solid shadow under the bottom edge (feedback buttons 3px #0B0C0C). Primary/start buttons use the success green #0F7A52 with white text.", "corners": "0 on the web (inputs, buttons, cards); the app icon is the only rounded shape on the homepage", "linework": "1px #CECECE dividers; 4px #1D70B8 section rules; 10px #1D70B8 footer top border; 1px #8EB8DC footer rules", "motion": "none on the web homepage; the brand's motion language (the dot) is for app and social", "radius": 0, "border_width": 4, "prov": "observed", "source": "https://www.gov.uk/ (measured 2026-10-31, cookie banner dismissed)", "also": [ "https://brand.design-system.service.gov.uk/brand-in-use/" ] }, "voice": { "tone": [ "Specific", "Informative", "Clear and concise", "Brisk, not terse", "Serious, not pompous" ], "notes": [ "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": [ { "id": "headline-case", "kind": "headline_case", "value": "sentence", "prov": "observed", "source": "https://www.gov.uk/ (measured 2026-10-31, cookie banner dismissed)", "why": "every heading on the homepage and in the guidelines is sentence case" }, { "id": "spelling", "kind": "spelling", "value": "en-GB", "prov": "inferred", "source": "https://guidance.publishing.service.gov.uk/writing-to-gov-uk-standards/style-guides/a-to-z-style-guide/", "why": "UK government; the style guide uses British spellings" }, { "id": "person", "kind": "person", "value": "we_you", "prov": "published", "source": "https://guidance.publishing.service.gov.uk/writing-to-gov-uk-standards/writing-guidelines/right-tone/" }, { "id": "sentence-length", "kind": "max_sentence_words", "value": 25, "prov": "published", "source": "https://guidance.publishing.service.gov.uk/writing-to-gov-uk-standards/writing-guidelines/clear-language/" }, { "id": "exclamations", "kind": "exclamations", "value": "never", "prov": "inferred", "source": "https://guidance.publishing.service.gov.uk/writing-to-gov-uk-standards/writing-guidelines/right-tone/", "why": "serious, emotionless tone; no examples use them" }, { "id": "negative-contractions", "kind": "avoid", "terms": [ "can't", "don't", "won't", "should've", "could've", "would've" ], "instead": "cannot, do not", "why": "many users misread negative contractions", "prov": "published", "source": "https://guidance.publishing.service.gov.uk/writing-to-gov-uk-standards/style-guides/a-to-z-style-guide/" }, { "id": "please", "kind": "avoid", "terms": [ "please", "please note" ], "instead": "give the instruction directly", "prov": "published", "source": "https://guidance.publishing.service.gov.uk/writing-to-gov-uk-standards/writing-guidelines/right-tone/" }, { "id": "ampersand", "kind": "avoid", "terms": [ "&" ], "instead": "and", "prov": "published", "source": "https://guidance.publishing.service.gov.uk/writing-to-gov-uk-standards/style-guides/a-to-z-style-guide/" }, { "id": "buy", "kind": "prefer", "term": "buy", "over": [ "purchase" ], "prov": "published", "source": "https://guidance.publishing.service.gov.uk/writing-to-gov-uk-standards/writing-guidelines/clear-language/" }, { "id": "help", "kind": "prefer", "term": "help", "over": [ "assist" ], "prov": "published", "source": "https://guidance.publishing.service.gov.uk/writing-to-gov-uk-standards/writing-guidelines/clear-language/" }, { "id": "about", "kind": "prefer", "term": "about", "over": [ "approximately" ], "prov": "published", "source": "https://guidance.publishing.service.gov.uk/writing-to-gov-uk-standards/writing-guidelines/clear-language/" }, { "id": "work-with", "kind": "prefer", "term": "work with", "over": [ "collaborate" ], "prov": "published", "source": "https://guidance.publishing.service.gov.uk/writing-to-gov-uk-standards/style-guides/a-to-z-style-guide/" }, { "id": "paragraphs", "kind": "guidance", "text": "No more than 5 sentences per paragraph; split sentences over 25 words", "prov": "published", "source": "https://guidance.publishing.service.gov.uk/writing-to-gov-uk-standards/writing-guidelines/clear-language/" }, { "id": "active", "kind": "guidance", "text": "Active voice: \"You need an electronic travel authorisation\", not \"...is needed\"", "prov": "published", "source": "https://guidance.publishing.service.gov.uk/writing-to-gov-uk-standards/writing-guidelines/clear-language/" }, { "id": "must-need-can", "kind": "guidance", "text": "\"must\" for legal requirements, \"need\" for process steps, \"can\" for options", "prov": "published", "source": "https://guidance.publishing.service.gov.uk/writing-to-gov-uk-standards/writing-guidelines/clear-language/" }, { "id": "no-caps", "kind": "guidance", "text": "No block capitals for large amounts of text; it reads as shouting", "prov": "published", "source": "https://guidance.publishing.service.gov.uk/writing-to-gov-uk-standards/writing-guidelines/right-tone/" }, { "id": "numbers", "kind": "guidance", "text": "Numerals for all numbers (including 2 to 9) except \"one\" and common expressions; commas over 999; % sign", "prov": "published", "source": "https://guidance.publishing.service.gov.uk/writing-to-gov-uk-standards/style-guides/a-to-z-style-guide/" }, { "id": "dates", "kind": "guidance", "text": "Dates as 4 June 2017; ranges with \"to\", not dashes; times as 5:30pm, 10am to 11am", "prov": "published", "source": "https://guidance.publishing.service.gov.uk/writing-to-gov-uk-standards/style-guides/a-to-z-style-guide/" }, { "id": "money", "kind": "guidance", "text": "£75 not £75.00; pence written out", "prov": "published", "source": "https://guidance.publishing.service.gov.uk/writing-to-gov-uk-standards/style-guides/a-to-z-style-guide/" }, { "id": "titles", "kind": "guidance", "text": "Page titles 65 characters or less, front-loaded, no full stop, not questions, no dashes or slashes", "prov": "published", "source": "https://guidance.publishing.service.gov.uk/writing-to-gov-uk-standards/style-guides/a-to-z-style-guide/" }, { "id": "bullets", "kind": "guidance", "text": "Bullets need a lead-in line, start lower case, one sentence each, no full stop after the last", "prov": "published", "source": "https://guidance.publishing.service.gov.uk/writing-to-gov-uk-standards/style-guides/a-to-z-style-guide/" }, { "id": "words-to-avoid", "kind": "guidance", "text": "Avoid buzzwords such as deliver (abstract), empower, facilitate, focus, combat, deploy, agenda", "prov": "published", "source": "https://guidance.publishing.service.gov.uk/writing-to-gov-uk-standards/style-guides/a-to-z-style-guide/" }, { "id": "quotes", "kind": "guidance", "text": "Single quotes for unusual terms and interface labels; double quotes only for direct speech", "prov": "published", "source": "https://guidance.publishing.service.gov.uk/writing-to-gov-uk-standards/style-guides/a-to-z-style-guide/" } ], "approved": { "phrases": [ "find out", "apply for", "check your", "sign in", "get help with" ], "words": [ "you", "buy", "help", "about", "can", "must", "need" ] }, "banned": [ "please / please note", "negative contractions (can't, don't)", "block capitals", "buzzwords: deliver, empower, facilitate, leverage-style jargon", "& (use \"and\")", "exclamation marks" ], "is_not": [ [ "Specific", "Vague" ], [ "Clear and concise", "Wordy" ], [ "Brisk", "Terse" ], [ "Incisive", "Faceless" ], [ "Serious", "Pompous" ] ], "prov": "published", "source": "https://guidance.publishing.service.gov.uk/writing-to-gov-uk-standards/writing-guidelines/right-tone/", "also": [ "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/" ] }, "spec": { "source": "https://brand.design-system.service.gov.uk/", "how": "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.", "provenance": "published + observed", "motion": [ { "name": "Wordmark reveal", "spec": "the dot fades in first, then GOV and UK fade and push in slightly from left and right", "source": "https://brand.design-system.service.gov.uk/logo-system/logo-elements/", "prov": "published" }, { "name": "Crown reveal", "spec": "a circular iris at the bottom of the frame reveals the crown as its dots rise and fan out", "source": "https://brand.design-system.service.gov.uk/logo-system/logo-elements/", "prov": "published" }, { "name": "Splash / end frame", "spec": "the dot leads a trail of coloured dots in a spiral to the centre, becomes the wordmark dot, then the crown irises in", "source": "https://brand.design-system.service.gov.uk/graphic-device/dot-use-examples/", "prov": "published" }, { "name": "Dot behaviours", "spec": "guides (moves between numbered steps), navigates, highlights (becomes a lozenge behind a word), informs (grows with a number), transitions (expands to fill the screen), illustrates (draws an icon)", "source": "https://brand.design-system.service.gov.uk/graphic-device/expression/", "prov": "published" }, { "name": "Web", "spec": "none on the homepage; web sits at the \"inform\" end of the scale. Durations and easing are not published.", "source": "https://brand.design-system.service.gov.uk/introduction/", "prov": "published" } ], "icons": { "grid": "not published", "sizes": [ { "name": "action link", "px": 40 }, { "name": "search", "px": 20 } ], "stroke": "search icon: 3px stroke on a 27px viewBox; arrows filled", "caps_joins": "square", "color": "functional: black arrow on #D2E2F1, white or blue magnifier", "rule": "Avoid icons in most cases; never one icon for two meanings; keep a visible text label", "prov": "published", "source": "https://design-system.service.gov.uk/styles/images/" }, "signature": [ { "name": "The blue block", "where": "top of the homepage", "spec": "header and hero as one uninterrupted #1D70B8 field, white type, the teal dot as the only other colour", "dont": "add a line, photo or gradient between header and hero", "prov": "observed", "source": "https://www.gov.uk/ (measured 2026-10-31, cookie banner dismissed)" }, { "name": "The dot", "where": "wordmark, and as a graphic device in app and social", "spec": "Accent teal #00FFE0 circle, vertically centred between GOV and UK; as a device it guides, highlights, informs, illustrates", "dont": "stroke, distort (in static), crop into abstraction, shadow or gradient it; overuse it", "prov": "published", "source": "https://brand.design-system.service.gov.uk/graphic-device/" }, { "name": "4px blue section rules", "where": "between homepage blocks and above the app promo", "spec": "4px solid #1D70B8 rule across the column, 60px of space below it to the H2 (desktop)", "dont": "use a grey or thin rule there", "prov": "observed", "source": "https://www.gov.uk/ (measured 2026-10-31, cookie banner dismissed)" }, { "name": "Underlined bold blue links", "where": "every link", "spec": "#1A65A6, 1px underline 3px below the baseline, bold for task links", "dont": "remove underlines or use buttons for navigation", "prov": "observed", "source": "https://www.gov.uk/ (measured 2026-10-31, cookie banner dismissed)" } ], "page": { "source": "https://www.gov.uk/ (measured 2026-10-31, cookie banner dismissed)", "date": "2026-10-31", "prov": "observed", "voices": "The homepage voice is the GOV.UK content voice: plain English, task names as headings, one plain description line under each, sentence case, no slogans. The one bold claim is the H1. Landing pages follow this voice.", "no_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": { "width_desktop": 1440, "container": "960px centred (x 240-1200 at 1440); phone content x 24-366 (footer, header logo row and feedback x 15-375)", "page_ground": "#FFFFFF body; the header + hero are one solid #1D70B8 block; the footer and the feedback bar are #F4F8FB", "height": "4598px at 1440; 7332px at 390", "font": "Roboto (stand-in for GDS Transport), text #0B0C0C, links #1A65A6" }, "nav": { "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
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" }, "sections": [ { "name": "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." }, { "name": "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." ] }, { "name": "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." }, { "name": "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" }, "dark_ground": { "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" } }, "bands": [ { "label": "Header", "ground": "#1D70B8", "content": "lock-up left; Menu + search right", "desktop": "1440x61, y 0", "phone": "390x61", "anatomy": [ "no line between header and hero" ] }, { "label": "Hero", "ground": "#1D70B8", "content": "3-line H1, Search label, input + button", "desktop": "1440x425, y 61-486", "phone": "390x334, y 61-395", "anatomy": [ "H1 64px bold white", "search bar 630x50" ] }, { "label": "Popular on GOV.UK", "ground": "#FFFFFF", "content": "H2 + 6 action links, 3x2 grid", "desktop": "y 486-807", "phone": "y 395-867", "anatomy": [ "40px pale blue arrow circles" ] }, { "label": "Services and information + Featured", "ground": "#FFFFFF", "content": "4px blue rule; 16 topic links | 3 image cards + app promo", "desktop": "y 807-2750", "phone": "y 867-3851", "anatomy": [ "two-thirds / one-third", "chevron list with #CECECE dividers" ] }, { "label": "Government activity + More on GOV.UK", "ground": "#FFFFFF", "content": "4px blue rule; 6 topic links | 10 bold links", "desktop": "y 2750-3677", "phone": "y 3851-5423", "anatomy": [ "same topic list" ] }, { "label": "Feedback", "ground": "#F4F8FB", "content": "Is this page useful? Yes / No / Report a problem", "desktop": "960x78, y 3677", "phone": "390x166", "anatomy": [ "1px #8EB8DC top" ] }, { "label": "Footer", "ground": "#F4F8FB", "content": "crown; 2 headed link groups; meta links; OGL; crest", "desktop": "y 3755-4598", "phone": "y 5589-7332", "anatomy": [ "10px #1D70B8 top border" ] } ], "layout": { "page_margin": { "desktop": 240, "phone": 24 }, "container_max": 960, "section_padding": { "desktop": 60, "phone": 28 }, "columns": "two-thirds (610) + one-third (300) with a 30px gutter; thirds 300 + 30 + 300 + 30 + 300", "gutter": 30, "gutter_phone": 15, "card_gap": 30, "nav_height": 61, "nav_height_phone": 61, "breakpoints": "320 / 641 (tablet) / 769 (desktop) / 1281 (hero H1 64px)", "phone_switch": "Phone values below 641px. The Popular grid becomes 3 columns and the two-thirds / one-third columns sit side by side from 769px; the hero H1 is 40px below 641, 50px to 768, 55px to 1280, 64px from 1281.", "prov": "observed", "source": "https://www.gov.uk/ (measured 2026-10-31, cookie banner dismissed)", "also": [ "https://design-system.service.gov.uk/styles/layout/", "https://www.gov.uk/ stylesheet (application.css and views/_homepage.css, read 2026-10-31)" ] }, "type": [ { "face": "Roboto", "prov": "observed", "source": "https://www.gov.uk/ (measured 2026-10-31, cookie banner dismissed)", "role": "Hero headline", "id": "display-hero", "size": { "desktop": 64, "phone": 40 }, "line_height": 1.07, "weight": 700, "color": "#FFFFFF", "lines": { "desktop": 3, "phone": 4 }, "line_px": "68.48px desktop / 42.8px phone", "tracking_px": 0 }, { "face": "Roboto", "prov": "observed", "source": "https://www.gov.uk/ (measured 2026-10-31, cookie banner dismissed)", "role": "Section H2", "id": "heading-l", "size": { "desktop": 36, "phone": 32 }, "line_height": 1.111, "weight": 700, "color": "#0B0C0C", "line_px": "40px desktop / 35.56px phone", "tracking_px": 0, "note": "govuk-heading-l; the homepage overrides the phone size to 32px (the Design System scale says 27px)" }, { "face": "Roboto", "prov": "observed", "source": "https://www.gov.uk/ (measured 2026-10-31, cookie banner dismissed)", "role": "Footer heading", "id": "heading-m", "size": { "desktop": 24, "phone": 21 }, "line_height": 1.25, "weight": 700, "color": "#0B0C0C", "line_px": "30px / 25px", "tracking_px": 0 }, { "face": "Roboto", "prov": "observed", "source": "https://www.gov.uk/ (measured 2026-10-31, cookie banner dismissed)", "role": "Link heading / bold link", "id": "heading-s", "size": { "desktop": 19, "phone": 19 }, "line_height": 1.316, "weight": 700, "color": "#1A65A6 underlined", "line_px": "25px (action links 24.7px)", "tracking_px": 0 }, { "face": "Roboto", "prov": "observed", "source": "https://www.gov.uk/ (measured 2026-10-31, cookie banner dismissed)", "role": "Body", "id": "body", "size": { "desktop": 19, "phone": 19 }, "line_height": 1.316, "weight": 360, "color": "#0B0C0C", "line_px": "25px", "tracking_px": -0.19, "note": "GDS Transport \"Light\" file is the 400 weight on GOV.UK; Roboto at 360 (variable) matches its ink" }, { "face": "Roboto", "prov": "observed", "source": "https://www.gov.uk/ (measured 2026-10-31, cookie banner dismissed)", "role": "Small (feedback bar, Menu)", "id": "body-s", "size": { "desktop": 16, "phone": 19 }, "line_height": 1.25, "weight": 360, "color": "#0B0C0C", "line_px": "20px desktop / 25px phone", "tracking_px": -0.16 }, { "face": "Roboto", "prov": "observed", "source": "https://www.gov.uk/ (measured 2026-10-31, cookie banner dismissed)", "role": "Search label", "id": "label-s", "size": { "desktop": 19, "phone": 19 }, "line_height": 1.316, "weight": 700, "color": "#FFFFFF", "line_px": "25px", "tracking_px": 0 } ], "components": { "action_link": { "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)", "prov": "observed", "source": "https://www.gov.uk/ (measured 2026-10-31, cookie banner dismissed)" }, "topic_list": { "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", "prov": "observed", "source": "https://www.gov.uk/ (measured 2026-10-31, cookie banner dismissed)" }, "image_card": { "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", "prov": "observed", "source": "https://www.gov.uk/ (measured 2026-10-31, cookie banner dismissed)" }, "link_list": { "text": "19px/25px 700 #1A65A6 underlined", "pitch": "45px", "prov": "observed", "source": "https://www.gov.uk/ (measured 2026-10-31, cookie banner dismissed)" }, "feedback_button": { "fill": "transparent", "border": "1px solid #0B0C0C", "shadow": "0 3px 0 #0B0C0C", "radius": 0, "text": "16px/20px 400 #0B0C0C (19px on phone)", "hover": "fill #CECECE", "prov": "published", "source": "https://www.gov.uk/ stylesheet (application.css and views/_homepage.css, read 2026-10-31)" }, "search": { "input": "white, no border, no radius, 50px tall, padding 6px, 19px text", "button": "50x50 #D2E2F1, blue #1D70B8 magnifier 20px", "prov": "observed", "source": "https://www.gov.uk/ (measured 2026-10-31, cookie banner dismissed)" }, "button_primary": { "fill": "#0F7A52", "text": "#FFFFFF", "radius": 0, "shadow": "0 2px 0 #083D29", "note": "not on the homepage; GOV.UK Frontend start/primary button uses the success green with a darker shadow (shade value inferred from the palette)", "prov": "inferred", "source": "https://design-system.service.gov.uk/components/button/", "weight": 400 }, "focus": { "style": "yellow #FFDD00 fill with a 4px #0B0C0C bottom bar (box-shadow 0 -2px #FFDD00, 0 4px #0B0C0C) on focused links; text #0B0C0C", "prov": "published", "source": "https://www.gov.uk/ stylesheet (application.css and views/_homepage.css, read 2026-10-31)" } }, "type_note": "GOV.UK Design System type scale (large screens): 80/80, 48/50, 36/40, 27/30, 24/30, 19/25, 16/20; small screens 53/55, 32/35, 27/30, 21/25, 21/25, 19/25, 16/20. Line heights are multiples of 5px (https://design-system.service.gov.uk/styles/type-scale/)", "breakpoints": { "all": [ 320, 641, 769, 1281 ], "prov": "observed", "source": "https://www.gov.uk/ stylesheet (application.css and views/_homepage.css, read 2026-10-31)" } }, "system": { "fixed": [ "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" ], "flex": "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).", "traits": [ { "is": "Specific", "not": "Vague", "text": "Say exactly what the user can do.", "source": "https://guidance.publishing.service.gov.uk/writing-to-gov-uk-standards/writing-guidelines/right-tone/", "prov": "published" }, { "is": "Brisk", "not": "Terse", "text": "Short, direct, still human.", "source": "https://guidance.publishing.service.gov.uk/writing-to-gov-uk-standards/writing-guidelines/right-tone/", "prov": "published" }, { "is": "Serious", "not": "Pompous", "text": "Authoritative help, no ceremony.", "source": "https://guidance.publishing.service.gov.uk/writing-to-gov-uk-standards/writing-guidelines/right-tone/", "prov": "published" }, { "is": "Approachable", "not": "Cold", "text": "Welcoming for all the people it serves.", "source": "https://brand.design-system.service.gov.uk/introduction/", "prov": "published" } ] }, "formats": [ { "format": "Landing page", "level": 1, "must": "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", "flex": "which task lists and how many links" }, { "format": "Slides", "level": 2, "must": "Primary blue or white grounds, bold sentence-case titles, plain sentences", "flex": "one dot-based highlight per slide" }, { "format": "Social", "level": 4, "must": "Primary blue and Accent teal lead; the dot used purposefully", "flex": "wider palette, circle illustrations, lozenge highlights" }, { "format": "Print / poster", "level": 2, "must": "Blue lead colour, bold titles, AA contrast", "flex": "one dot device" } ], "checks": [ { "name": "Logo hidden", "text": "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." }, { "name": "Plain English", "text": "No sentence over 25 words, no \"please\", no buzzwords, no negative contractions." } ], "examples": [], "make_it_yours": { "note": "Everything above transfers. These are GOV.UK's own and must be replaced with yours: name and logo, purpose, positioning, messaging pillars, proof, taglines and boilerplate.", "replace": [ "identity", "purpose", "positioning", "messaging.pillars", "messaging.proof_points", "messaging.taglines", "messaging.boilerplate" ], "reference": { "purpose": { "mission": { "text": "Help people find what they need from government and complete tasks using government services.", "paraphrase": true, "prov": "published", "source": "https://brand.design-system.service.gov.uk/introduction/" }, "story": { "text": "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.", "paraphrase": true, "prov": "published", "source": "https://brand.design-system.service.gov.uk/introduction/", "also": [ "https://www.gov.uk/government/publications/govuk-brand-guidelines", "https://brand.design-system.service.gov.uk/logo-system/logo-elements/" ] }, "values": [ { "name": "Consistency", "means": "apply core elements the same way everywhere so people know they are in the right place", "prov": "published", "source": "https://brand.design-system.service.gov.uk/brand-in-use/" }, { "name": "Coherence", "means": "let the elements flex to the context without losing the identity", "prov": "published", "source": "https://brand.design-system.service.gov.uk/brand-in-use/" }, { "name": "Inform to inspire", "means": "web informs; app and social can inspire", "prov": "published", "source": "https://brand.design-system.service.gov.uk/introduction/" } ] }, "positioning": { "statement": { "text": "The single, trusted place for UK government services and information, written in plain English for everyone.", "prov": "inferred", "source": "https://brand.design-system.service.gov.uk/introduction/" }, "category": { "text": "Government services and information platform (web, app, wallet)", "prov": "published", "source": "https://brand.design-system.service.gov.uk/introduction/" }, "audience": { "text": "Anyone living in the UK, British citizens abroad, and people abroad who want to do business in or travel to the UK", "prov": "published", "source": "https://guidance.publishing.service.gov.uk/writing-to-gov-uk-standards/writing-guidelines/clear-language/" }, "problem": { "text": "People need to find the right government information and complete tasks without knowing which department runs what.", "prov": "inferred", "source": "https://www.gov.uk/" }, "promise": { "text": "The best place to find government services and information.", "prov": "observed", "source": "https://www.gov.uk/ (measured 2026-10-31, cookie banner dismissed)" }, "differentiators": [ { "text": "One domain for all of government, recognised since 2012.", "prov": "published", "source": "https://brand.design-system.service.gov.uk/introduction/" }, { "text": "Plain English mandatory across every page.", "prov": "published", "source": "https://guidance.publishing.service.gov.uk/writing-to-gov-uk-standards/writing-guidelines/clear-language/" }, { "text": "An accessibility-first palette and type scale tested for readability.", "prov": "published", "source": "https://design-system.service.gov.uk/styles/type-scale/" }, { "text": "Its own typeface descended from UK road signs.", "prov": "published", "source": "https://brand.design-system.service.gov.uk/typography/" } ], "alternatives": [ { "text": "Individual department websites and unofficial third-party sites (GOV.UK replaced the former).", "prov": "inferred", "source": "https://brand.design-system.service.gov.uk/introduction/" } ] }, "messaging": { "taglines": [ { "text": "The best place to find government services and information", "where": "Homepage H1", "prov": "observed", "source": "https://www.gov.uk/ (measured 2026-10-31, cookie banner dismissed)" }, { "text": "Your government services and information, on the go", "where": "GOV.UK app promo on the homepage", "prov": "observed", "source": "https://www.gov.uk/ (measured 2026-10-31, cookie banner dismissed)" } ], "attributes": [ "recognisable", "trusted", "approachable", "welcoming for all", "accessible" ], "key_messages": [], "boilerplate": { "text": "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.", "paraphrase": true, "prov": "published", "source": "https://brand.design-system.service.gov.uk/introduction/", "also": [ "https://www.gov.uk/government/publications/govuk-brand-guidelines" ] }, "pillars": [ { "name": "Trusted and recognisable", "claim": "One of the most recognisable and trusted online destinations in the UK since 2012.", "prov": "published", "source": "https://brand.design-system.service.gov.uk/introduction/", "proof": [ "p-2012" ] }, { "name": "Help people do what they need", "claim": "On every channel the focus is helping people find what they need from government and complete tasks.", "prov": "published", "source": "https://brand.design-system.service.gov.uk/introduction/", "proof": [ "p-tasks" ] }, { "name": "Plain English for everyone", "claim": "Plain English is mandatory so everyone who needs the content can understand it.", "prov": "published", "source": "https://guidance.publishing.service.gov.uk/writing-to-gov-uk-standards/writing-guidelines/clear-language/", "proof": [ "p-literacy", "p-specialists" ] }, { "name": "Accessible by default", "claim": "Every colour pairing must meet WCAG 2.2 AA; meaning is never carried by colour alone.", "prov": "published", "source": "https://brand.design-system.service.gov.uk/colour/", "proof": [ "p-wcag" ] } ], "proof_points": [ { "id": "p-2012", "kind": "other", "text": "GOV.UK launched in 2012.", "prov": "published", "source": "https://brand.design-system.service.gov.uk/introduction/" }, { "id": "p-tasks", "kind": "other", "text": "The homepage opens with six popular tasks and 16 service topics (observed 2026-10-31).", "prov": "observed", "source": "https://www.gov.uk/ (measured 2026-10-31, cookie banner dismissed)" }, { "id": "p-literacy", "kind": "stat", "text": "1 in 6 adults in England have very poor literacy skills (cited in the GOV.UK writing guidelines).", "prov": "published", "source": "https://guidance.publishing.service.gov.uk/writing-to-gov-uk-standards/writing-guidelines/clear-language/" }, { "id": "p-specialists", "kind": "stat", "text": "80% of people preferred sentences written in clear English in research on legal documents (cited by GOV.UK).", "prov": "published", "source": "https://guidance.publishing.service.gov.uk/writing-to-gov-uk-standards/writing-guidelines/clear-language/" }, { "id": "p-wcag", "kind": "other", "text": "Colour contrast must meet WCAG 2.2 success criterion 1.4.3 level AA.", "prov": "published", "source": "https://brand.design-system.service.gov.uk/colour/govuk-blue/" } ], "claim_boundaries": [ { "text": "The crown and royal arms are Crown copyright and restricted; a kit borrower never uses them.", "prov": "published", "source": "https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/" }, { "text": "GDS Transport is for GOV.UK and service.gov.uk only; services elsewhere must use another typeface.", "prov": "published", "source": "https://design-system.service.gov.uk/styles/typeface/" }, { "text": "Never imply government endorsement.", "prov": "inferred", "source": "https://brand.design-system.service.gov.uk/logo-system/" } ] } } } }