{
  "id": "govuk",
  "version": "1.0.0",
  "name": "GOV.UK Design System",
  "description": "GOV.UK is the unified service-delivery surface for UK central government, maintained by the Government Digital Service (GDS). The brand is austere by design: GOV.UK Black (#0B0C0C) ink on a white or pale-blue (#F4F8FB) template, GOV.UK Blue (#1D70B8) for links and the brand stripe, and a signature GOV.UK Yellow (#FFDD00) focus indicator that is a non-negotiable accessibility affordance across every form, button, and link on every central government service. Typography on the live GOV.UK estate is GDS Transport (a proprietary GDS-commissioned typeface descended from the Department for Transport's road-signage face); this atom substitutes Inter as the open-source rendering proxy and documents the substitution.\n",
  "provenance": {
    "source": "https://design-system.service.gov.uk/styles/colour/",
    "license": "MIT (code) / Open Government Licence v3.0 (content)",
    "attribution": "GOV.UK Design System, maintained by the Government Digital Service (Cabinet Office, Crown copyright). govuk-frontend code MIT-licensed; design-system guidance content under the Open Government Licence v3.0. \"GOV.UK,\" the GOV.UK logotype, and GDS Transport are reserved — GDS Transport in particular is a proprietary GDS-commissioned typeface and is NOT publicly redistributable. Use of the GOV.UK name and logotype is restricted to UK central-government services.\n",
    "importedDate": "2026-05-19",
    "notes": "Typography substitution: GDS Transport is proprietary and is not present in this catalogue's fonts/ directory. This brand references inter@1 as the open-source heading/body face and roboto-mono@1 for code. Consumers shipping an actual UK central-government service MUST license and use GDS Transport via govuk-frontend's distribution; this atom serves consumers rendering GOV.UK-styled comparators, mock-ups, or third-party documentation where Transport licensing does not apply.\n"
  },
  "tags": [
    "govuk",
    "gds",
    "government",
    "civic",
    "design-system",
    "light-first",
    "accessibility"
  ],
  "palette": {
    "ref": "govuk@1.0.0",
    "swatches": [
      {
        "id": "text",
        "name": "Text",
        "value": "#0B0C0C",
        "description": "GOV.UK Black — primary text ink on every page.",
        "aliases": []
      },
      {
        "id": "secondary-text",
        "name": "Secondary Text",
        "value": "#484949",
        "description": "Secondary text and hints; quiet metadata.",
        "aliases": []
      },
      {
        "id": "link",
        "name": "Link",
        "value": "#1A65A6",
        "description": "Default link colour on the GOV.UK template background.",
        "aliases": []
      },
      {
        "id": "link-hover",
        "name": "Link Hover",
        "value": "#0F385C",
        "description": "Hover state for links.",
        "aliases": []
      },
      {
        "id": "link-visited",
        "name": "Link Visited",
        "value": "#54319F",
        "description": "Visited link state — sourced from web-palette Purple.",
        "aliases": []
      },
      {
        "id": "link-active",
        "name": "Link Active",
        "value": "#0B0C0C",
        "description": "Active link state — GOV.UK Black for highest emphasis.",
        "aliases": []
      },
      {
        "id": "border",
        "name": "Border",
        "value": "#CECECE",
        "description": "Default border on quiet dividers and cards.",
        "aliases": []
      },
      {
        "id": "input-border",
        "name": "Input Border",
        "value": "#0B0C0C",
        "description": "Form-control border — full-strength GOV.UK Black.",
        "aliases": []
      },
      {
        "id": "hover",
        "name": "Hover",
        "value": "#CECECE",
        "description": "Hover surface for interactive rows and list items.",
        "aliases": []
      },
      {
        "id": "focus",
        "name": "Focus",
        "value": "#FFDD00",
        "description": "GOV.UK Yellow focus indicator — the signature accessibility affordance.",
        "aliases": []
      },
      {
        "id": "focus-text",
        "name": "Focus Text",
        "value": "#0B0C0C",
        "description": "Text ink rendered on the yellow focus background.",
        "aliases": []
      },
      {
        "id": "error",
        "name": "Error",
        "value": "#CA3535",
        "description": "Validation and error messaging colour.",
        "aliases": []
      },
      {
        "id": "success",
        "name": "Success",
        "value": "#0F7A52",
        "description": "Success / confirmation colour.",
        "aliases": []
      },
      {
        "id": "brand",
        "name": "Brand",
        "value": "#1D70B8",
        "description": "GOV.UK Blue — the system's brand link / primary blue.",
        "aliases": []
      },
      {
        "id": "body-background",
        "name": "Body Background",
        "value": "#FFFFFF",
        "description": "Default page background — white.",
        "aliases": []
      },
      {
        "id": "template-background",
        "name": "Template Background",
        "value": "#F4F8FB",
        "description": "The pale-blue GOV.UK template background.",
        "aliases": []
      },
      {
        "id": "surface-background",
        "name": "Surface Background",
        "value": "#F4F8FB",
        "description": "Default surface background for cards and panels.",
        "aliases": []
      },
      {
        "id": "surface-text",
        "name": "Surface Text",
        "value": "#0B0C0C",
        "description": "Default text colour on a surface panel.",
        "aliases": []
      },
      {
        "id": "surface-border",
        "name": "Surface Border",
        "value": "#8EB8DC",
        "description": "Default border colour on a surface panel.",
        "aliases": []
      },
      {
        "id": "web-blue",
        "name": "Web Blue",
        "value": "#1D70B8",
        "description": "Web-palette Blue — identical to brand.",
        "aliases": []
      },
      {
        "id": "web-green",
        "name": "Web Green",
        "value": "#0F7A52",
        "description": "Web-palette Green — identical to success.",
        "aliases": []
      },
      {
        "id": "web-teal",
        "name": "Web Teal",
        "value": "#158187",
        "description": "Web-palette Teal.",
        "aliases": []
      },
      {
        "id": "web-purple",
        "name": "Web Purple",
        "value": "#54319F",
        "description": "Web-palette Purple — identical to link-visited.",
        "aliases": []
      },
      {
        "id": "web-magenta",
        "name": "Web Magenta",
        "value": "#CA357C",
        "description": "Web-palette Magenta.",
        "aliases": []
      },
      {
        "id": "web-red",
        "name": "Web Red",
        "value": "#CA3535",
        "description": "Web-palette Red — identical to error.",
        "aliases": []
      },
      {
        "id": "web-orange",
        "name": "Web Orange",
        "value": "#F47738",
        "description": "Web-palette Orange.",
        "aliases": []
      },
      {
        "id": "web-yellow",
        "name": "Web Yellow",
        "value": "#FFDD00",
        "description": "Web-palette Yellow — identical to focus.",
        "aliases": []
      },
      {
        "id": "web-brown",
        "name": "Web Brown",
        "value": "#99704A",
        "description": "Web-palette Brown.",
        "aliases": []
      },
      {
        "id": "web-black",
        "name": "Web Black",
        "value": "#0B0C0C",
        "description": "Web-palette Black — identical to text.",
        "aliases": []
      },
      {
        "id": "web-white",
        "name": "Web White",
        "value": "#FFFFFF",
        "description": "Web-palette White — identical to body-background.",
        "aliases": []
      }
    ],
    "modes": {
      "light": {
        "roles": {
          "background": "body-background",
          "surface": "template-background",
          "surface-elevated": "body-background",
          "text-primary": "text",
          "text-secondary": "secondary-text",
          "text-tertiary": "secondary-text",
          "primary": "brand",
          "primary-hover": "link-hover",
          "accent": "focus",
          "accent-hover": "focus",
          "warning": "web-orange",
          "warning-hover": "web-orange",
          "error": "error",
          "success": "success",
          "border": "border"
        }
      },
      "dark": {
        "roles": {
          "background": "text",
          "surface": "text",
          "surface-elevated": "secondary-text",
          "text-primary": "body-background",
          "text-secondary": "border",
          "text-tertiary": "border",
          "primary": "web-blue",
          "primary-hover": "web-blue",
          "accent": "focus",
          "accent-hover": "focus",
          "warning": "web-orange",
          "warning-hover": "web-orange",
          "error": "error",
          "success": "success",
          "border": "secondary-text"
        }
      }
    }
  },
  "fonts": [
    {
      "role": "heading",
      "ref": "inter@1.0.0",
      "family": "Inter",
      "classification": "sans-serif",
      "source": {
        "kind": "google-fonts",
        "family": "Inter",
        "url": "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
      },
      "fallbackStack": [
        "-apple-system",
        "BlinkMacSystemFont",
        "Segoe UI",
        "Roboto",
        "Helvetica Neue",
        "Arial",
        "sans-serif"
      ],
      "availableStyles": [
        {
          "weight": 100,
          "style": "normal"
        },
        {
          "weight": 100,
          "style": "italic"
        },
        {
          "weight": 200,
          "style": "normal"
        },
        {
          "weight": 200,
          "style": "italic"
        },
        {
          "weight": 300,
          "style": "normal"
        },
        {
          "weight": 300,
          "style": "italic"
        },
        {
          "weight": 400,
          "style": "normal"
        },
        {
          "weight": 400,
          "style": "italic"
        },
        {
          "weight": 500,
          "style": "normal"
        },
        {
          "weight": 500,
          "style": "italic"
        },
        {
          "weight": 600,
          "style": "normal"
        },
        {
          "weight": 600,
          "style": "italic"
        },
        {
          "weight": 700,
          "style": "normal"
        },
        {
          "weight": 700,
          "style": "italic"
        },
        {
          "weight": 800,
          "style": "normal"
        },
        {
          "weight": 800,
          "style": "italic"
        },
        {
          "weight": 900,
          "style": "normal"
        },
        {
          "weight": 900,
          "style": "italic"
        }
      ]
    },
    {
      "role": "body",
      "ref": "inter@1.0.0",
      "family": "Inter",
      "classification": "sans-serif",
      "source": {
        "kind": "google-fonts",
        "family": "Inter",
        "url": "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
      },
      "fallbackStack": [
        "-apple-system",
        "BlinkMacSystemFont",
        "Segoe UI",
        "Roboto",
        "Helvetica Neue",
        "Arial",
        "sans-serif"
      ],
      "availableStyles": [
        {
          "weight": 100,
          "style": "normal"
        },
        {
          "weight": 100,
          "style": "italic"
        },
        {
          "weight": 200,
          "style": "normal"
        },
        {
          "weight": 200,
          "style": "italic"
        },
        {
          "weight": 300,
          "style": "normal"
        },
        {
          "weight": 300,
          "style": "italic"
        },
        {
          "weight": 400,
          "style": "normal"
        },
        {
          "weight": 400,
          "style": "italic"
        },
        {
          "weight": 500,
          "style": "normal"
        },
        {
          "weight": 500,
          "style": "italic"
        },
        {
          "weight": 600,
          "style": "normal"
        },
        {
          "weight": 600,
          "style": "italic"
        },
        {
          "weight": 700,
          "style": "normal"
        },
        {
          "weight": 700,
          "style": "italic"
        },
        {
          "weight": 800,
          "style": "normal"
        },
        {
          "weight": 800,
          "style": "italic"
        },
        {
          "weight": 900,
          "style": "normal"
        },
        {
          "weight": 900,
          "style": "italic"
        }
      ]
    },
    {
      "role": "mono",
      "ref": "roboto-mono@1.0.0",
      "family": "Roboto Mono",
      "classification": "monospace",
      "source": {
        "kind": "google-fonts",
        "family": "Roboto Mono",
        "url": "https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap"
      },
      "fallbackStack": [
        "SFMono-Regular",
        "Menlo",
        "Consolas",
        "Liberation Mono",
        "Courier New",
        "monospace"
      ],
      "availableStyles": [
        {
          "weight": 100,
          "style": "normal"
        },
        {
          "weight": 100,
          "style": "italic"
        },
        {
          "weight": 200,
          "style": "normal"
        },
        {
          "weight": 200,
          "style": "italic"
        },
        {
          "weight": 300,
          "style": "normal"
        },
        {
          "weight": 300,
          "style": "italic"
        },
        {
          "weight": 400,
          "style": "normal"
        },
        {
          "weight": 400,
          "style": "italic"
        },
        {
          "weight": 500,
          "style": "normal"
        },
        {
          "weight": 500,
          "style": "italic"
        },
        {
          "weight": 600,
          "style": "normal"
        },
        {
          "weight": 600,
          "style": "italic"
        },
        {
          "weight": 700,
          "style": "normal"
        },
        {
          "weight": 700,
          "style": "italic"
        }
      ]
    }
  ],
  "roles": {
    "colors": {
      "identity": "body-background",
      "on-identity": "text",
      "primary": "brand",
      "primary-hover": "link-hover",
      "accent": "focus",
      "accent-hover": "focus",
      "mark": "text",
      "success": "success",
      "warning": "web-orange",
      "error": "error",
      "text-primary-light": "text",
      "text-primary-dark": "body-background",
      "background-light": "body-background",
      "background-dark": "text",
      "surface-light": "template-background",
      "surface-dark": "text",
      "text-secondary-light": "secondary-text",
      "text-tertiary-light": "secondary-text",
      "border-light": "border"
    },
    "typography": {
      "display": "heading",
      "prose": "body",
      "code": "mono"
    }
  },
  "assets": [],
  "rules": [
    {
      "type": "colorChoice",
      "target": "roles.colors.accent",
      "severity": "error",
      "rationale": "GOV.UK Yellow (#FFDD00) is the documented focus indicator across every central government service surface, paired with GOV.UK Black ink and an accompanying focus-bottom border. Substituting the brand blue or any other hue for the focus state breaks visual parity with the rest of GOV.UK and fails the system's keyboard-accessibility contract (WCAG 2.1 Success Criterion 2.4.7).\n",
      "allowed": [
        "focus"
      ],
      "forbidden": [
        "brand",
        "error",
        "success",
        "web-orange",
        "web-purple"
      ]
    },
    {
      "type": "colorChoice",
      "target": "roles.colors.primary",
      "severity": "error",
      "rationale": "GOV.UK Blue (#1D70B8) is the documented link / brand colour. The other \"web palette\" hues exist for chart, illustration, and category-distinction use and MUST NOT stand in for the primary link role — users navigating GOV.UK rely on blue-means-link recognition built up across thousands of service pages.\n",
      "allowed": [
        "brand",
        "link"
      ],
      "forbidden": [
        "web-magenta",
        "web-purple",
        "web-orange",
        "web-teal"
      ]
    },
    {
      "type": "contrastRatio",
      "target": "text-primary",
      "severity": "error",
      "rationale": "GOV.UK targets WCAG 2.1 Level AA at minimum across every central-government service, in line with the Public Sector Bodies Accessibility Regulations 2018. GOV.UK Black (#0B0C0C) on white clears AA at ~19:1; on the pale-blue template (#F4F8FB) it clears AA at ~18:1.\n",
      "against": "background",
      "minRatio": 4.5,
      "standard": "WCAG-AA"
    },
    {
      "type": "accessibilityRequirement",
      "target": "*",
      "severity": "error",
      "rationale": "WCAG 2.1 Success Criterion 2.4.7 (Focus Visible) — Level AA. The signature GOV.UK Yellow focus state exists specifically to satisfy this criterion. Any GOV.UK-styled consumer that suppresses or substitutes focus indicators fails the regulation that drove the focus state's existence.\n",
      "standard": "WCAG-AA",
      "criterion": "2.4.7"
    },
    {
      "type": "forbiddenTreatment",
      "target": "logo",
      "severity": "error",
      "rationale": "The GOV.UK logotype is Crown copyright and its use is restricted to UK central-government services. The mark MUST render in its supplied form (black wordmark on a white field, or white on the GOV.UK Black header bar) with no decorative treatment. Non-government consumers of this brand atom should substitute their own identifier rather than alter the GOV.UK mark.\n",
      "treatments": [
        "stretched",
        "rotated",
        "recolored",
        "drop-shadow",
        "gradient-fill",
        "outlined",
        "tilted",
        "on-busy-photo"
      ]
    },
    {
      "type": "enumMembership",
      "target": "typography.heading.fontWeight",
      "severity": "warning",
      "rationale": "GDS Transport, the live GOV.UK heading face, ships in two weights only (Light/Regular and Bold) and the published GOV.UK type ramp uses Regular and Bold exclusively. Constraining the substitute (Inter) to the same two weights preserves the typographic restraint of the live service surface.\n",
      "allowed": [
        "400",
        "700"
      ]
    },
    {
      "type": "fontPairing",
      "target": "typography.display",
      "severity": "error",
      "rationale": "GOV.UK's published type scale steps from 16px body up through 19px lede, 24px small heading, 36px medium heading, and 48px+ display heading — every step preserving at least a 1.5× ratio against the 16px body anchor. Display-at-body-size collapses the hierarchy that service-page scannability depends on.\n",
      "requires": "prose",
      "minSizeRatio": 1.5
    },
    {
      "type": "contextRestriction",
      "target": "roles.colors.error",
      "severity": "error",
      "rationale": "GOV.UK Red (#CA3535) is reserved for the error-summary and validation patterns. Reusing it for confirmation inverts the semantic contract that users navigating a GOV.UK form rely on — the red border / red link inside an error summary is the documented signal that something needs the user's attention before submission.\n",
      "allowedContexts": [
        "error-state",
        "destructive-action",
        "validation-failure"
      ],
      "forbiddenContexts": [
        "confirmation",
        "completion",
        "data-viz-positive"
      ]
    },
    {
      "type": "compositionConstraint",
      "target": "roles.colors.primary",
      "severity": "recommendation",
      "rationale": "GOV.UK Blue reads cleanly against the white body or pale template background; placing it adjacent to the other web-palette hues at equal weight produces chromatic competition that fights GOV.UK's restrained, hierarchy- first voice. The web-palette colours are for charts and illustrations, where they sit inside a frame and are legibly distinct without competing with brand blue.\n",
      "pairsWith": [
        "body-background",
        "template-background",
        "text"
      ],
      "doesNotPairWith": [
        "web-purple",
        "web-magenta",
        "web-teal",
        "web-orange"
      ]
    }
  ]
}