Prototype new colour palette

owenatgov · owenatgov · commit 4ec0f14ac62a · 2025-10-02T14:21:59.000+01:00
diff --git a/packages/govuk-frontend-review/src/stylesheets/full-page-examples/campaign-page.scss b/packages/govuk-frontend-review/src/stylesheets/full-page-examples/campaign-page.scss
@@ -48,7 +48,7 @@
   margin-bottom: govuk-spacing(8);
   padding: govuk-spacing(4) govuk-spacing(4) govuk-spacing(2);
   border: 1px solid $govuk-border-colour;
-  background-color: govuk-colour("light-grey");
+  background-color: govuk-colour("black", $variant: "tint-95");
 }
 
 .app-nhs-box {
diff --git a/packages/govuk-frontend-review/src/stylesheets/full-page-examples/search.scss b/packages/govuk-frontend-review/src/stylesheets/full-page-examples/search.scss
@@ -64,5 +64,5 @@
 }
 
 .app-next-page:hover {
-  background-color: govuk-colour("light-grey");
+  background-color: govuk-colour("black", $variant: "tint-95");
 }
diff --git a/packages/govuk-frontend-review/src/stylesheets/partials/_code.scss b/packages/govuk-frontend-review/src/stylesheets/partials/_code.scss
@@ -11,7 +11,7 @@
   overflow-x: auto;
   border: $govuk-focus-width solid transparent;
   outline: 1px solid transparent;
-  background-color: govuk-colour("light-grey");
+  background-color: govuk-colour("black", $variant: "tint-95");
   @include govuk-responsive-margin(4, "bottom");
 
   &:focus {
diff --git a/packages/govuk-frontend-review/src/stylesheets/partials/_feature-flag-banner.scss b/packages/govuk-frontend-review/src/stylesheets/partials/_feature-flag-banner.scss
@@ -1,5 +1,5 @@
 .app-feature-flag-banner {
   padding: govuk-spacing(4) 0;
-  border-bottom: 1px solid govuk-colour("mid-grey");
-  background-color: govuk-colour("light-grey");
+  border-bottom: 1px solid govuk-colour("black", $variant: "tint-80");
+  background-color: govuk-colour("black", $variant: "tint-95");
 }
diff --git a/packages/govuk-frontend/src/govuk/components/accordion/_index.scss b/packages/govuk-frontend/src/govuk/components/accordion/_index.scss
@@ -1,6 +1,6 @@
 @include govuk-exports("govuk/component/accordion") {
   $govuk-accordion-base-colour: govuk-colour("black");
-  $govuk-accordion-hover-colour: govuk-colour("light-grey");
+  $govuk-accordion-hover-colour: govuk-colour("black", $variant: "tint-95");
   $govuk-accordion-icon-focus-colour: $govuk-focus-colour;
   $govuk-accordion-bottom-border-width: 1px;
 
diff --git a/packages/govuk-frontend/src/govuk/components/button/_index.scss b/packages/govuk-frontend/src/govuk/components/button/_index.scss
@@ -37,7 +37,7 @@ $govuk-inverse-button-text-colour: $govuk-brand-colour !default;
   $govuk-button-shadow-colour: govuk-shade($govuk-button-colour, 60%);
 
   // Secondary button variables
-  $govuk-secondary-button-colour: govuk-colour("light-grey");
+  $govuk-secondary-button-colour: govuk-colour("black", $variant: "tint-95");
   $govuk-secondary-button-text-colour: govuk-colour("black");
   $govuk-secondary-button-hover-colour: govuk-shade($govuk-secondary-button-colour, 10%);
   $govuk-secondary-button-shadow-colour: govuk-shade($govuk-secondary-button-colour, 40%);
diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/_index.scss b/packages/govuk-frontend/src/govuk/components/file-upload/_index.scss
@@ -6,8 +6,8 @@
   $file-upload-border-width: 2px;
   $component-padding: govuk-spacing(1);
   $empty-button-background-colour: govuk-colour("white");
-  $empty-pseudo-button-background-colour: govuk-colour("light-grey");
   $empty-status-background-colour: govuk-tint(govuk-colour("blue"), 70%);
+  $empty-pseudo-button-background-colour: govuk-colour("black", $variant: "tint-95");
 
   .govuk-file-upload {
     @include govuk-font($size: 19);
@@ -99,8 +99,8 @@
     width: 100%;
     // align the padding to be same as notification banner and error summary accounting for the thicker borders
     padding: (govuk-spacing(3) + $govuk-border-width - $file-upload-border-width);
-    border: $file-upload-border-width govuk-colour("mid-grey") solid;
-    background-color: govuk-colour("light-grey");
+    border: $file-upload-border-width govuk-colour("black", $variant: "tint-80") solid;
+    background-color: govuk-colour("black", $variant: "tint-95");
     cursor: pointer;
 
     @include govuk-media-query($from: tablet) {
@@ -145,7 +145,7 @@
       &:hover .govuk-file-upload-button__pseudo-button {
         border-color: $govuk-focus-colour;
         outline: 3px solid transparent;
-        background-color: govuk-colour("light-grey");
+        background-color: govuk-colour("black", $variant: "tint-95");
         box-shadow: inset 0 0 0 1px $govuk-focus-colour;
       }
     }
@@ -167,7 +167,7 @@
     &:hover,
     &:focus,
     &:active {
-      background-color: govuk-colour("light-grey");
+      background-color: govuk-colour("black", $variant: "tint-95");
 
       .govuk-file-upload-button__status {
         background-color: govuk-tint(govuk-colour("blue"), 80%);
@@ -186,7 +186,7 @@
     }
 
     &.govuk-file-upload-button--empty {
-      background-color: govuk-colour("light-grey");
+      background-color: govuk-colour("black", $variant: "tint-95");
     }
 
     &.govuk-file-upload-button--empty:not(:disabled) .govuk-file-upload-button__status,
@@ -195,7 +195,7 @@
     }
 
     .govuk-file-upload-button__pseudo-button {
-      background-color: govuk-shade(govuk-colour("light-grey"), 10%);
+      background-color: govuk-shade(govuk-colour("black", $variant: "tint-95"), 10%);
     }
   }
 
diff --git a/packages/govuk-frontend/src/govuk/components/input/_index.scss b/packages/govuk-frontend/src/govuk/components/input/_index.scss
@@ -122,7 +122,7 @@
     height: govuk-px-to-rem(40px);
     padding: govuk-spacing(1);
     border: $govuk-border-width-form-element solid $govuk-input-border-colour;
-    background-color: govuk-colour("light-grey");
+    background-color: govuk-colour("black", $variant: "tint-95");
     text-align: center;
     white-space: nowrap;
     // Emphasise non-editable status of prefixes and suffixes
diff --git a/packages/govuk-frontend/src/govuk/components/pagination/_index.scss b/packages/govuk-frontend/src/govuk/components/pagination/_index.scss
@@ -32,7 +32,7 @@
     float: left; // Float is ignored if flex is active for prev/next links
 
     &:hover {
-      background-color: govuk-colour("light-grey");
+      background-color: govuk-colour("black", $variant: "tint-95");
     }
   }
 
diff --git a/packages/govuk-frontend/src/govuk/components/service-navigation/_index.scss b/packages/govuk-frontend/src/govuk/components/service-navigation/_index.scss
@@ -1,6 +1,6 @@
 @include govuk-exports("govuk/component/service-navigation") {
   $govuk-service-navigation-active-link-border-width: govuk-spacing(1);
-  $govuk-service-navigation-background: govuk-colour("light-grey");
+  $govuk-service-navigation-background: govuk-colour("black", $variant: "tint-95");
   $govuk-service-navigation-border-colour: $govuk-border-colour;
 
   // We make the link colour a little darker than normal here so that it has
diff --git a/packages/govuk-frontend/src/govuk/components/summary-list/_index.scss b/packages/govuk-frontend/src/govuk/components/summary-list/_index.scss
@@ -188,7 +188,7 @@
     // Ensures the card header appears separate to the summary list in forced
     // colours mode
     border-bottom: 1px solid transparent;
-    background-color: govuk-colour("light-grey");
+    background-color: govuk-colour("black", $variant: "tint-95");
 
     @include govuk-media-query($from: "tablet") {
       display: flex;
diff --git a/packages/govuk-frontend/src/govuk/components/tabs/_index.scss b/packages/govuk-frontend/src/govuk/components/tabs/_index.scss
@@ -66,7 +66,7 @@
         padding: govuk-spacing(2) govuk-spacing(4);
 
         float: left;
-        background-color: govuk-colour("light-grey");
+        background-color: govuk-colour("black", $variant: "tint-95");
         text-align: center;
 
         &::before {
diff --git a/packages/govuk-frontend/src/govuk/components/task-list/_index.scss b/packages/govuk-frontend/src/govuk/components/task-list/_index.scss
@@ -1,7 +1,7 @@
 @import "../tag/index";
 
 @include govuk-exports("govuk/component/task-list") {
-  $govuk-task-list-hover-colour: govuk-colour("light-grey");
+  $govuk-task-list-hover-colour: govuk-colour("black", $variant: "tint-95");
 
   .govuk-task-list {
     @include govuk-font($size: 19);
diff --git a/packages/govuk-frontend/src/govuk/helpers/_colour.scss b/packages/govuk-frontend/src/govuk/helpers/_colour.scss
@@ -19,7 +19,7 @@
 /// @throw if `$colour` is not a colour from the colour palette
 /// @access public
 
-@function govuk-colour($colour, $legacy: false) {
+@function govuk-colour($colour, $legacy: false, $variant: primary) {
   // Output a warning if $legacy is set to anything.
   @if $legacy and _should-warn("legacy-colour-param") {
     @warn _warning-text("legacy-colour-param", "The `$legacy` parameter of " +
@@ -32,11 +32,25 @@
     $colour: quote("#{$colour}");
   }
 
-  @if not map-has-key($govuk-colours, $colour) {
-    @error "Unknown colour `#{$colour}`";
-  }
+  @if map-has-key($govuk-brand-colours, $colour) {
+    $located-colour-palette: map-get($govuk-brand-colours, $colour);
+
+    @if type-of($located-colour-palette) == "color" {
+      @return $located-colour-palette;
+    } @else {
+      @if not map-has-key($located-colour-palette, $variant) {
+        @error "Unknown colour variant `#{$variant}`";
+      }
 
-  @return map-get($govuk-colours, $colour);
+      @return map-get($located-colour-palette, $variant);
+    }
+  } @else {
+    @if not map-has-key($govuk-colours, $colour) {
+      @error "Unknown colour `#{$colour}`";
+    }
+
+    @return map-get($govuk-colours, $colour);
+  }
 }
 
 /// Get the colour for a government organisation
diff --git a/packages/govuk-frontend/src/govuk/settings/_colours-applied.scss b/packages/govuk-frontend/src/govuk/settings/_colours-applied.scss
@@ -33,11 +33,11 @@ $govuk-text-colour: govuk-colour("black") !default;
 /// version. Use `$govuk-template-background-colour` if you want to change the background of
 /// the `<html>` element and background colour of elements that need to match for visual
 /// continuity.
-$govuk-canvas-background-colour: govuk-colour("light-grey") !default;
+$govuk-canvas-background-colour: govuk-colour("black", $variant: "tint-95") !default;
 
 // Output a deprecation warning if $govuk-canvas-background-colour is being overridden
 // Remove in next major version.
-@if $govuk-canvas-background-colour != govuk-colour("light-grey") {
+@if $govuk-canvas-background-colour != govuk-colour("black", $variant: "tint-95") {
   @include _warning(
     "$govuk-canvas-background-colour",
     "$govuk-canvas-background-colour has been deprecated and will be removed in the next major version."
@@ -52,7 +52,7 @@ $govuk-canvas-background-colour: govuk-colour("light-grey") !default;
 /// @type Colour
 /// @access public
 
-$govuk-template-background-colour: govuk-colour("light-grey") !default;
+$govuk-template-background-colour: govuk-colour("black", $variant: "tint-95") !default;
 
 /// Body background colour
 ///
@@ -77,7 +77,7 @@ $govuk-print-text-colour: #000000 !default;
 /// @type Colour
 /// @access public
 
-$govuk-secondary-text-colour: govuk-colour("dark-grey") !default;
+$govuk-secondary-text-colour: govuk-colour("black", $variant: "tint-25") !default;
 
 /// Focus colour
 ///
@@ -124,7 +124,7 @@ $govuk-success-colour: govuk-colour("green") !default;
 /// @type Colour
 /// @access public
 
-$govuk-border-colour: govuk-colour("mid-grey") !default;
+$govuk-border-colour: govuk-colour("black", $variant: "tint-80") !default;
 
 /// Input border colour
 ///
@@ -142,7 +142,7 @@ $govuk-input-border-colour: govuk-colour("black") !default;
 /// @type Colour
 /// @access public
 
-$govuk-hover-colour: govuk-colour("mid-grey") !default;
+$govuk-hover-colour: govuk-colour("black", $variant: "tint-80") !default;
 
 // =============================================================================
 // Links
@@ -167,7 +167,7 @@ $govuk-link-visited-colour: govuk-colour("purple") !default;
 /// @type Colour
 /// @access public
 
-$govuk-link-hover-colour: govuk-colour("dark-blue") !default;
+$govuk-link-hover-colour: govuk-colour("blue", $variant: "shade-50") !default;
 
 /// Active link colour
 ///
@@ -184,10 +184,10 @@ $govuk-link-active-colour: govuk-colour("black") !default;
 ///
 /// @type Colour
 /// @access private
-$_govuk-rebrand-template-background-colour: govuk-tint($govuk-brand-colour, 95%);
+$_govuk-rebrand-template-background-colour: govuk-colour("blue", $variant: "tint-95");
 
 /// Border colour for areas on a light-blue background
 ///
 /// @type Colour
 /// @access private
-$_govuk-rebrand-border-colour-on-blue-tint-95: govuk-tint($govuk-brand-colour, 50%);
+$_govuk-rebrand-border-colour-on-blue-tint-95: govuk-colour("blue", $variant: "tint-50");
diff --git a/packages/govuk-frontend/src/govuk/settings/_colours-palette.scss b/packages/govuk-frontend/src/govuk/settings/_colours-palette.scss
@@ -12,24 +12,126 @@
 /// @access public
 
 $govuk-colours: (
+  // primary red
   "red": #d4351c,
+  // primary yellow
   "yellow": #ffdd00,
+  // primary green
   "green": #00703c,
+  // primary blue
   "blue": #1d70b8,
+  // shade 50 blue
   "dark-blue": #003078,
+  // tint 25 blue
   "light-blue": #5694ca,
+  // primary purple
   "purple": #4c2c92,
+  // primary black
   "black": #0b0c0c,
+  // tint 25 black
   "dark-grey": #505a5f,
+  // tint 80 black
   "mid-grey": #b1b4b6,
+  // tint 95 black
   "light-grey": #f3f2f1,
+  // white
   "white": #ffffff,
+  // tint 25 purple
   "light-purple": #6f72af,
+  // No obvious map?
   "bright-purple": #912b88,
+  // primary magenta
   "pink": #d53880,
+  // tint 50 magenta
   "light-pink": #f499be,
+  // primary orange
   "orange": #f47738,
+  // primary brown
   "brown": #b58840,
+  // tint 25 green? No obvious map
   "light-green": #85994b,
+  // primary teal
   "turquoise": #28a197
 ) !default;
+
+$govuk-brand-colours: (
+  "blue": (
+    "primary": #1d70b8,
+    "tint-25": #5694ca,
+    "tint-50": #8eb8dc,
+    "tint-80": #d2e2f1,
+    "tint-95": #f4f8fb,
+    "shade-50": #0f385c
+  ),
+  "green": (
+    "primary": #11875a,
+    "tint-25": #4da583,
+    "tint-50": #88c3ad,
+    "tint-80": #cfe7de,
+    "tint-95": #f3f9f7,
+    "shade-50": #09442d
+  ),
+  "teal": (
+    "primary": #158187,
+    "tint-25": #50a1a5,
+    "tint-50": #8ac0c3,
+    "tint-80": #d0e6e7,
+    "tint-95": #f3f9f9,
+    "shade-50": #0b4144,
+    "accent": #00ffe0
+  ),
+  "purple": (
+    "primary": #54319f,
+    "tint-25": #7f65b7,
+    "tint-50": #aa98cf,
+    "tint-80": #ddd6ec,
+    "tint-95": #f6f5fa,
+    "shade-50": #2a1950
+  ),
+  "magenta": (
+    "primary": #ca357c,
+    "tint-25": #d7689d,
+    "tint-50": #e59abe,
+    "tint-80": #f4d7e5,
+    "tint-95": #fcf5f8,
+    "shade-50": #651b3e
+  ),
+  "red": (
+    "primary": #ca3535,
+    "tint-25": #d76868,
+    "tint-50": #e59a9a,
+    "tint-80": #f4d7d7,
+    "tint-95": #fcf5f5,
+    "shade-50": #651b1b
+  ),
+  "orange": (
+    "primary": #f47738,
+    "tint-25": #f7996a,
+    "tint-50": #fabb9c,
+    "tint-80": #fde4d7,
+    "tint-95": #fef8f5,
+    "shade-50": #7a3c1c
+  ),
+  "yellow": (
+    "primary": #ffdd00,
+    "tint-25": #ffe640,
+    "tint-50": #ffee80,
+    "tint-80": #fff8cc,
+    "tint-95": #fffdf2,
+    "shade-50": #806f00
+  ),
+  "brown": (
+    "primary": #99704a,
+    "tint-25": #b39477,
+    "tint-50": #ccb8a5,
+    "tint-95": #faf8f6
+  ),
+  "black": (
+    "primary": #0b0c0c,
+    "tint-25": #484949,
+    "tint-50": #858686,
+    "tint-80": #cecece,
+    "tint-95": #f3f3f3
+  ),
+  "white": #ffffff
+) !default;

Original file line number	Diff line number	Diff line change
`@@ -48,7 +48,7 @@`
`48`	`48`	`margin-bottom: govuk-spacing(8);`
`49`	`49`	`padding: govuk-spacing(4) govuk-spacing(4) govuk-spacing(2);`
`50`	`50`	`border: 1px solid $govuk-border-colour;`
`51`		`- background-color: govuk-colour("light-grey");`
	`51`	`+ background-color: govuk-colour("black", $variant: "tint-95");`
`52`	`52`	`}`
`53`	`53`
`54`	`54`	`.app-nhs-box {`
Original file line number	Diff line number	Diff line change
`@@ -64,5 +64,5 @@`
`64`	`64`	`}`
`65`	`65`
`66`	`66`	`.app-next-page:hover {`
`67`		`- background-color: govuk-colour("light-grey");`
	`67`	`+ background-color: govuk-colour("black", $variant: "tint-95");`
`68`	`68`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`.app-feature-flag-banner {`
`2`	`2`	`padding: govuk-spacing(4) 0;`
`3`		`- border-bottom: 1px solid govuk-colour("mid-grey");`
`4`		`- background-color: govuk-colour("light-grey");`
	`3`	`+ border-bottom: 1px solid govuk-colour("black", $variant: "tint-80");`
	`4`	`+ background-color: govuk-colour("black", $variant: "tint-95");`
`5`	`5`	`}`
Original file line number	Diff line number	Diff line change
`@@ -32,7 +32,7 @@`
`32`	`32`	`float: left; // Float is ignored if flex is active for prev/next links`
`33`	`33`
`34`	`34`	`&:hover {`
`35`		`- background-color: govuk-colour("light-grey");`
	`35`	`+ background-color: govuk-colour("black", $variant: "tint-95");`
`36`	`36`	`}`
`37`	`37`	`}`
`38`	`38`