---
version: alpha
name: GOV.UK Service Interface
description: "A public-service transactional design system derived from mature government service patterns. It uses a white canvas, black readable typography, blue links, green primary actions, red validation states, yellow focus treatment, square geometry, and task-first layouts. The system is for forms, eligibility checks, step-by-step flows, confirmation pages, public records, and admin service portals where clarity, recovery, accessibility, and trust matter more than brand spectacle."

colors:
  primary: "#00703c"
  primary-hover: "#005a30"
  on-primary: "#ffffff"
  link: "#1d70b8"
  link-hover: "#003078"
  focus: "#ffdd00"
  focus-shadow: "#0b0c0c"
  ink: "#0b0c0c"
  body: "#0b0c0c"
  muted: "#505a5f"
  canvas: "#ffffff"
  surface-card: "#ffffff"
  surface-subtle: "#f3f2f1"
  surface-section: "#f8f8f8"
  hairline: "#b1b4b6"
  hairline-strong: "#0b0c0c"
  error: "#d4351c"
  warning: "#f47738"
  success: "#00703c"
  info: "#1d70b8"
  inverse-canvas: "#101820"
  inverse-surface: "#182530"
  inverse-ink: "#f3f2f1"

typography:
  display-xl:
    fontFamily: "Arial, system-ui, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.04
    letterSpacing: 0
  display-lg:
    fontFamily: "Arial, system-ui, sans-serif"
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.11
    letterSpacing: 0
  heading-md:
    fontFamily: "Arial, system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: 0
  heading-sm:
    fontFamily: "Arial, system-ui, sans-serif"
    fontSize: 19px
    fontWeight: 700
    lineHeight: 1.32
    letterSpacing: 0
  body-lg:
    fontFamily: "Arial, system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0
  body:
    fontFamily: "Arial, system-ui, sans-serif"
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.32
    letterSpacing: 0
  body-sm:
    fontFamily: "Arial, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0
  mono:
    fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.35
    letterSpacing: 0

rounded:
  none: 0px
  sm: 0px
  md: 0px
  lg: 0px
  pill: 0px

spacing:
  base: 5px
  unit-1: 5px
  unit-2: 10px
  unit-3: 15px
  unit-4: 20px
  unit-5: 25px
  unit-6: 30px
  unit-7: 40px
  unit-8: 50px
  unit-9: 60px
  section: 80px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 8px 12px 7px
  button-secondary:
    backgroundColor: "{colors.surface-subtle}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 8px 12px 7px
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 5px 8px
  error-summary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 20px
  task-list:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 0
  confirmation-panel:
    backgroundColor: "{colors.success}"
    textColor: "{colors.on-primary}"
    typography: "{typography.display-lg}"
    rounded: "{rounded.none}"
    padding: 30px

layout:
  content-width: "960px maximum, with the primary reading column often constrained to 640px."
  grid: "Two-thirds reading column plus one-third supporting rail on desktop; single column below tablet."
  rhythm: "5px-based spacing scale. Large gaps are functional section breaks, not decorative whitespace."
  surfaces: "Default to flat white canvas. Use grey panels only for secondary guidance, status, or grouped metadata."

guidance:
  do:
    - "Write the user task as the page title and put one question per form step."
    - "Use blue only for links, green for primary continue/submit actions, red for validation, and yellow for focus."
    - "Keep inputs, buttons, tables, and summary rows square and visibly clickable."
    - "Preserve the user's submitted values when showing errors."
    - "Move focus to the error summary and link each error to the related field."
  dont:
    - "Do not make public-service pages look like marketing landing pages."
    - "Do not use colour for decoration or assign new meanings to functional colours."
    - "Do not validate on blur unless user research proves it helps more than it harms."
    - "Do not replace concrete labels and hints with placeholder text."
    - "Do not soften the focus style into a subtle brand outline."

caseStudy:
  source: "GOV.UK Design System styles, components, and validation patterns"
  urls:
    - "https://design-system.service.gov.uk/styles/"
    - "https://design-system.service.gov.uk/components/error-summary/"
    - "https://design-system.service.gov.uk/patterns/validation/"
  analysis: "The source system prioritizes accessible public transactions: stable typography, functional colours, square components, clear error summaries, and validation patterns that help users recover without re-entering information. This resource extracts those reusable rules for non-UK public-service and high-trust transactional products."
---

# GOV.UK Service Interface

Use this design system for public services, regulated applications, civic data portals, benefits or eligibility flows, permit applications, forms, audit dashboards, and any interface where users must understand a requirement, provide information, recover from errors, and receive confirmation.

The system is deliberately plain. Its strength is not visual novelty; it is visible affordance, readable copy, task order, and recovery. A page should feel honest, inspectable, and hard to misunderstand.

## Overview

The core idea is service clarity. The interface uses a white canvas, black typography, strong links, square controls, and functional colours. Every page should answer:

1. What service or task am I doing?
2. What information is needed from me?
3. What happens if I make a mistake?
4. How do I continue, pause, or recover?

Do not add decorative gradients, glass, or brand illustrations unless they help explain the task. Most product value appears through wording, form structure, summaries, and status panels.

## Colors

### Brand & Accent

- `primary` (#00703c) is for the primary continue, save, or submit action.
- `link` (#1d70b8) is for navigational text links. Keep links underlined or visibly link-like.
- `focus` (#ffdd00) is reserved for keyboard focus and must remain strong.

### Surface

- `canvas` (#ffffff) is the default page floor.
- `surface-subtle` (#f3f2f1) groups guidance, metadata, and supporting panels.
- `hairline` (#b1b4b6) separates fields, summary rows, and table rules.

### Text

- `ink` (#0b0c0c) is the primary reading colour.
- `muted` (#505a5f) is for hints, secondary metadata, and captions.

### Semantic

- `error` (#d4351c) marks validation failures and error borders.
- `success` (#00703c) marks confirmation panels and successful completion.
- `warning` (#f47738) is for warning text or urgent action, never decoration.

## Typography

### Font Family

Use a robust public-service sans stack: `Arial, system-ui, sans-serif`. If a project has access to a licensed official transport-style face, map it to the same size and line-height rules.

### Hierarchy

- Page title: 48px/50px on desktop, 32px/35px on small screens.
- Section heading: 36px/40px or 24px/30px depending on depth.
- Body: 19px/25px as the default reading size.
- Small body: 16px/20px for metadata, captions, and dense tables only.

### Principles

The type scale uses line heights that land on a 5px rhythm. Do not invent intermediate text sizes for decoration. If a component needs emphasis, first adjust placement, weight, and copy before introducing a new type token.

### Note on Font Substitutes

Public Sans can work well for US civic products. For GOV.UK-like service pages, keep the metrics close to Arial/system UI and test zoom and mobile legibility.

## Layout

### Spacing System

Use a 5px-based spacing scale: 5, 10, 15, 20, 25, 30, 40, 50, and 60. Larger page gaps should still align with this rhythm.

### Grid & Container

Default to a maximum 960px container. Most forms and guidance pages should use a 640px reading column with optional supporting content in a one-third rail.

### Whitespace Philosophy

Whitespace is functional. It separates questions, groups related fields, and gives users enough room to scan error messages. It should not create editorial drama.

## Elevation & Depth

This system is flat. Use borders, section breaks, inset panels, and strong headings instead of shadows. If a panel needs priority, use border weight, placement, and copy.

## Shapes

Square geometry is the rule. Inputs, buttons, error panels, tables, and task rows should use `0px` radius. Roundness weakens the public-service affordance and makes controls feel less official.

## Components

### Buttons

Primary buttons are green, square, and text-led. Use one primary action per step. Secondary actions should be links or lower-emphasis grey buttons.

### Cards & Containers

Avoid decorative cards. Use panels only when grouping guidance, warning text, task status, or confirmation information. A confirmation panel can use green fill with white text.

### Inputs & Forms

Each question needs a visible label, optional hint, and stable input width. Do not rely on placeholder text. Date and code inputs should use segmented widths that match the expected answer.

### Navigation

Use skip links, breadcrumbs, back links, service navigation, and step indicators. Navigation should help users recover position in a service, not promote unrelated content.

### Signature Components

- Error summary at the top of the page.
- Error message next to each invalid field.
- Summary list for check-answers pages.
- Task list for multi-step services.
- Confirmation panel for completion.

## Do's and Don'ts

### Do

- Put the user task in the H1.
- Keep one question per page or per visible step when the task is high-stakes.
- Preserve user input after errors.
- Link error summary items to fields.
- Keep focus state highly visible.

### Don't

- Do not use subtle focus rings.
- Do not validate as the user leaves a field by default.
- Do not hide labels inside placeholders.
- Do not use red for anything except error or urgent risk.
- Do not add marketing hero patterns to transactional service pages.

## Responsive Behavior

### Breakpoints

At tablet and below, collapse to one column. Keep the H1, hint, error summary, and primary action in a predictable vertical order.

### Touch Targets

Buttons and links must remain easy to tap. Inline links inside dense paragraphs need enough line-height and should not sit too close to neighbouring controls.

### Collapsing Strategy

Summary lists, task lists, and tables should preserve row labels. On small screens, stack key/value rows instead of squeezing columns.

### Image Behavior

Images are rare. If used, they must explain a real document, identity proof, map, or process step. Decorative illustration is not part of the core system.

## Iteration Guide

1. Start by writing the service question and expected user answer.
2. Choose the smallest component set that can complete the task.
3. Add validation only after defining what is missing, ambiguous, or impossible.
4. Test with keyboard, screen reader, zoom, mobile width, and slow input.
5. Keep any local brand layer outside the functional colour meanings.

## Known Gaps

- Exact proprietary GOV.UK fonts are not included; this resource uses public/system substitutes.
- This resource abstracts reusable public-service rules and does not grant rights to use protected government branding.
- Dark mode is provided only as an intentional operational variant for internal dashboards, not as a source-system claim.