idsk_frontend_toolkit 7.4.2

data/app/assets/stylesheets/_font_stack.scss

@@ -0,0 +1,25 @@
+//  GOV.UK font stacks, referred to in typography.scss
+
+// New Transport Light
+$nta-light: "nta", Arial, sans-serif;
+$nta-light-tabular: "ntatabularnumbers", $nta-light;
+
+// Helvetica Regular
+$helvetica-regular: "HelveticaNeue", "Helvetica Neue", "Arial", "Helvetica", sans-serif;
+
+// Allow font stack to be overridden
+// Not all apps using toolkit use New Transport
+$toolkit-font-stack: $nta-light !default;
+$toolkit-font-stack-tabular: $nta-light-tabular !default;
+
+// Font reset for print
+$print-reset: sans-serif;
+
+// Fallback variable names after renaming previous uppercase names to be lowercase
+// @deprecated, please only use the lowercase versions
+// Make an exception to the linting as these are still used a lot
+// scss-lint:disable NameFormat
+$NTA-Light: $nta-light;
+$NTA-Light-Tabular: $nta-light-tabular;
+$Helvetica-Regular: $helvetica-regular;
+$Print-reset: $print-reset;

data/app/assets/stylesheets/_grid_layout.scss

@@ -0,0 +1,136 @@
+@import 'conditionals';
+@import 'css3';
+@import 'measurements';
+@import 'shims';
+
+$site-width: 960px;
+
+// An extendable selector to wrap your entire site content block
+// It limits the sites width to be 960px wide and maintains consistent margins
+// on the site of the page and shrinks the margins for mobile.
+//
+// Usage:
+//
+// #page-container {
+//   @extend %site-width-container;
+// }
+
+%site-width-container {
+  max-width: $site-width;
+
+  @include ie-lte(8) {
+    width: $site-width;
+  }
+
+  margin: 0 $gutter-half;
+
+  @include media(tablet) {
+    margin: 0 $gutter;
+  }
+
+  @include media($min-width: ($site-width + $gutter * 2)) {
+    margin: 0 auto;
+  }
+}
+
+// An extendable selector to outdent to the full page-width
+// So that you can create elements that take up the gutters on the side of the
+// page and butt up to the edge of the browser on smaller screens (rather than
+// leaving a gutter at the edge of the page).
+//
+// Usage:
+//
+// .hero-image-container {
+//   @extend %outdent-to-full-width;
+// }
+%outdent-to-full-width {
+  margin-left: -$gutter-half;
+  margin-right: -$gutter-half;
+
+  @include media(tablet) {
+    margin-left: -$gutter;
+    margin-right: -$gutter;
+  }
+}
+
+// An extendable selector to define a row for grid columns to sit in
+//
+// Usage:
+//
+// .grid-row {
+//   @extend %grid-row;
+// }
+
+%grid-row {
+  @extend %contain-floats;
+  margin: 0 (-$gutter-half);
+}
+
+// A mixin for a grid column
+// Creates a cross browser grid column with a standardised gutter between the
+// columns. Widths should be defined as fractions of the full desktop width
+// they want to fill. By default they break to become full width at tablet size
+// but that can be configured to be desktop using the `$full-width` argument.
+//
+// Usage:
+//
+//   .column-quarter {
+//     @include grid-column( 1/4 );
+//   }
+//   .column-half {
+//     @include grid-column( 1/2 );
+//   }
+//   .column-third {
+//     @include grid-column( 1/3 );
+//   }
+//   .column-two-thirds {
+//     @include grid-column( 2/3 );
+//   }
+//   .column-desktop-third {
+//     @include grid-column( 1/3, $full-width: desktop );
+//   }
+
+@mixin grid-column($width, $full-width: tablet, $float: left) {
+
+  @include media($full-width) {
+    float: $float;
+    width: percentage($width);
+  }
+
+  @include ie-lte(7) {
+    width: (($site-width + $gutter) * $width) - $gutter;
+  }
+
+  padding: 0 $gutter-half;
+  @include box-sizing(border-box);
+}
+
+
+// OLD deprecated grid mixins
+// You should migrate to the mixins above in the future
+
+// Outer block sets a max width
+@mixin outer-block {
+  @warn "The @mixin outer-block is deprecated and should be updated to use new grid helpers";
+  margin: 0 auto;
+  width: auto;
+  max-width: 960 + $gutter * 2;
+  @extend %contain-floats;
+
+  @include ie-lte(8) {
+    width: 1020px;
+  }
+}
+
+// Inner block sets either margin or padding
+// to align content with header and footer
+@mixin inner-block($margin-or-padding: padding) {
+  @warn "The @mixin inner-block is deprecated and should be updated to use new grid helpers";
+  #{$margin-or-padding}-left: $gutter-half;
+  #{$margin-or-padding}-right: $gutter-half;
+
+  @include media(tablet) {
+    #{$margin-or-padding}-left: $gutter;
+    #{$margin-or-padding}-right: $gutter;
+  }
+}

data/app/assets/stylesheets/_helpers.scss

@@ -0,0 +1,16 @@
+// Base font size in pixels
+$base-font-size: 16;
+
+// Convert pixels to em
+@function pem($px, $base: $base-font-size) {
+
+  @if (unitless($px)) {
+    $px: $px * 1px;
+  }
+
+  @if (unitless($base)) {
+    $base: $base * 1px;
+  }
+
+  @return $px / $base * 1em;
+}

data/app/assets/stylesheets/_measurements.scss

@@ -0,0 +1,14 @@
+// Measurements used across GOV.UK
+
+$full-width: 100%;
+$one-quarter: $full-width / 4;
+$one-third: $full-width / 3;
+$half: $full-width / 2;
+$two-thirds: ($full-width) - ($one-third);
+$three-quarters: ($full-width) - ($one-quarter);
+
+$gutter: 30px;
+$gutter-one-quarter: $gutter / 4;
+$gutter-one-third: $gutter / 3;
+$gutter-half: $gutter / 2;
+$gutter-two-thirds: $gutter - $gutter-one-third;

data/app/assets/stylesheets/_shims.scss

@@ -0,0 +1,55 @@
+// Cross-browser shims
+// Ways of normalising properties across browsers.
+
+@import "conditionals";
+
+// From: https://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/
+
+// Usage:
+//
+// @include inline-block
+// or
+// @include inline-block("250px")
+//
+// which gives a min-height to the inline-block elements.
+
+
+@mixin inline-block($min-height: "") {
+  display: -moz-inline-stack;
+  display: inline-block;
+
+  @if $min-height != "" {
+    min-height: $min-height;
+  }
+
+  @include ie-lte(7) {
+    zoom: 1;
+    display: inline;
+  }
+
+  @include ie(6) {
+    @if $min-height != "" {
+      height: $min-height;
+    }
+  }
+}
+
+
+// Contain floats usage:
+//
+// .this-has-floated-children {
+//  @extend %contain-floats;
+// }
+
+
+%contain-floats {
+  &:after {
+    content: "";
+    display: block;
+    clear: both;
+  }
+
+  @include ie-lte(7) {
+    zoom: 1;
+  }
+}

data/app/assets/stylesheets/_typography.scss

@@ -0,0 +1,249 @@
+@import 'font_stack';
+@import 'conditionals';
+@import 'device-pixels';
+@import 'url-helpers';
+
+//  GOV.UK typography palettes
+
+//  ANATOMY OF A TYPE STYLE
+//  -----------------------
+//  These are a collection of graphic styles. They are deliberately
+//  abstracted from semantic HTML context to enable flexible re-use.
+//  Although there is a lot of duplication within this file, as long
+//  as you GZIP your CSS it shouldnt cause any bloat.
+
+
+// CORE FONTS - NEW TRANSPORT
+
+// Allow uppercase letters in font stack variable names
+// scss-lint:disable NameFormat
+
+$is-print: false !default;
+
+@mixin _core-font-generator($font-size: 19px, $font-size-640: 16px, $font-size-print: 14pt, $line-height: (25 / 19), $line-height-640: (20 / 16), $tabular-numbers: false, $font-weight: 400) {
+  @if $tabular-numbers == true {
+    font-family: $toolkit-font-stack-tabular;
+  } @else if $is-print {
+    font-family: $Print-reset;
+  } @else {
+    font-family: $toolkit-font-stack;
+    @if $toolkit-font-stack == "$NTA-Light" {
+      @if $font-weight > 400 {
+        font-size-adjust: 0.525;
+      } @else {
+        font-size-adjust: 0.5;
+      }
+    }
+  }
+  font-weight: $font-weight;
+  text-transform: none;
+
+  @if $is-print {
+    font-size: $font-size-print;
+    line-height: $line-height;
+
+  } @else {
+    font-size: $font-size-640;
+    line-height: $line-height-640;
+
+    @include media(tablet) {
+      font-size: $font-size;
+      line-height: $line-height;
+    }
+  }
+}
+// scss-lint:enable NameFormat
+
+@mixin core-80($line-height: (80 / 80), $line-height-640: (55 / 53), $tabular-numbers: false, $font-weight: 400) {
+  $font-size: 80px;
+  $font-size-640: 53px;
+  $font-size-print: 28pt;
+  @include _core-font-generator($font-size, $font-size-640, $font-size-print, $line-height, $line-height-640, $tabular-numbers, $font-weight);
+}
+
+@mixin core-48($line-height: (50 / 48), $line-height-640: (35 / 32), $tabular-numbers: false, $font-weight: 400) {
+  $font-size: 48px;
+  $font-size-640: 32px;
+  $font-size-print: 18pt;
+  @include _core-font-generator($font-size, $font-size-640, $font-size-print, $line-height, $line-height-640, $tabular-numbers, $font-weight);
+}
+
+@mixin core-36($line-height: (40 / 36), $line-height-640: (25 / 24), $tabular-numbers: false, $font-weight: 400) {
+  $font-size: 36px;
+  $font-size-640: 24px;
+  $font-size-print: 18pt;
+  @include _core-font-generator($font-size, $font-size-640, $font-size-print, $line-height, $line-height-640, $tabular-numbers, $font-weight);
+}
+
+@mixin core-27($line-height: (30 / 27), $line-height-640: (20 / 18), $tabular-numbers: false, $font-weight: 400) {
+  $font-size: 27px;
+  $font-size-640: 20px;
+  $font-size-print: 16pt;
+  @include _core-font-generator($font-size, $font-size-640, $font-size-print, $line-height, $line-height-640, $tabular-numbers, $font-weight);
+}
+
+@mixin core-24($line-height: (30 / 24), $line-height-640: (24 / 20), $tabular-numbers: false, $font-weight: 400) {
+  $font-size: 24px;
+  $font-size-640: 18px;
+  $font-size-print: 16pt;
+  @include _core-font-generator($font-size, $font-size-640, $font-size-print, $line-height, $line-height-640, $tabular-numbers, $font-weight);
+}
+
+@mixin core-19($line-height: (25 / 19), $line-height-640: (20 / 16), $tabular-numbers: false, $font-weight: 400) {
+  $font-size: 19px;
+  $font-size-640: 16px;
+  $font-size-print: 14pt;
+  @include _core-font-generator($font-size, $font-size-640, $font-size-print, $line-height, $line-height-640, $tabular-numbers, $font-weight);
+}
+
+@mixin core-16($line-height: (20 / 16), $line-height-640: (16 / 14), $tabular-numbers: false, $font-weight: 400) {
+  $font-size: 16px;
+  $font-size-640: 14px;
+  $font-size-print: 12pt;
+  @include _core-font-generator($font-size, $font-size-640, $font-size-print, $line-height, $line-height-640, $tabular-numbers, $font-weight);
+}
+
+@mixin core-14($line-height: (20 / 14), $line-height-640: (15 / 12), $tabular-numbers: false, $font-weight: 400) {
+  $font-size: 14px;
+  $font-size-640: 12px;
+  $font-size-print: 11pt;
+  @include _core-font-generator($font-size, $font-size-640, $font-size-print, $line-height, $line-height-640, $tabular-numbers, $font-weight);
+}
+
+@mixin bold-80($line-height: (80 / 80), $line-height-640: (55 / 53), $tabular-numbers: false) {
+  @include core-80($line-height, $line-height-640, $tabular-numbers: $tabular-numbers, $font-weight: 700);
+}
+
+@mixin bold-48($line-height: (50 / 48), $line-height-640: (35 / 32), $tabular-numbers: false) {
+  @include core-48($line-height, $line-height-640, $tabular-numbers: $tabular-numbers, $font-weight: 700);
+}
+
+@mixin bold-36($line-height: (40 / 36), $line-height-640: (25 / 24), $tabular-numbers: false) {
+  @include core-36($line-height, $line-height-640, $tabular-numbers: $tabular-numbers, $font-weight: 700);
+}
+
+@mixin bold-27($line-height: (30 / 27), $line-height-640: (20 / 18), $tabular-numbers: false) {
+  @include core-27($line-height, $line-height-640, $tabular-numbers: $tabular-numbers, $font-weight: 700);
+}
+
+@mixin bold-24($line-height: (30 / 24), $line-height-640: (24 / 20), $tabular-numbers: false) {
+  @include core-24($line-height, $line-height-640, $tabular-numbers: $tabular-numbers, $font-weight: 700);
+}
+
+@mixin bold-19($line-height: (25 / 19), $line-height-640: (20 / 16), $tabular-numbers: false) {
+  @include core-19($line-height, $line-height-640, $tabular-numbers: $tabular-numbers, $font-weight: 700);
+}
+
+@mixin bold-16($line-height: (20 / 16), $line-height-640: (16 / 14), $tabular-numbers: false) {
+  @include core-16($line-height, $line-height-640, $tabular-numbers: $tabular-numbers, $font-weight: 700);
+}
+
+@mixin bold-14($line-height: (20 / 14), $line-height-640: (15 / 12), $tabular-numbers: false) {
+  @include core-14($line-height, $line-height-640, $tabular-numbers: $tabular-numbers, $font-weight: 700);
+}
+
+@mixin heading-80($tabular-numbers: false) {
+  @include core-80($tabular-numbers: $tabular-numbers);
+
+  display: block;
+
+  padding-top: 8px;
+  padding-bottom: 7px;
+
+  @include media(tablet) {
+    padding-top: 6px;
+    padding-bottom: 14px;
+  }
+}
+
+@mixin heading-48($tabular-numbers: false) {
+  @include core-48($tabular-numbers: $tabular-numbers);
+
+  display: block;
+
+  padding-top: 10px;
+  padding-bottom: 10px;
+
+  @include media(tablet) {
+    padding-top: 7px;
+    padding-bottom: 13px;
+  }
+}
+
+@mixin heading-36($tabular-numbers: false) {
+  @include core-36($tabular-numbers: $tabular-numbers);
+
+  display: block;
+
+  padding-top: 8px;
+  padding-bottom: 7px;
+
+  @include media(tablet) {
+    padding-top: 6px;
+    padding-bottom: 9px;
+  }
+}
+
+@mixin heading-27($tabular-numbers: false) {
+  @include core-27($tabular-numbers: $tabular-numbers);
+
+  display: block;
+
+  padding-top: 8px;
+  padding-bottom: 7px;
+
+  @include media(tablet) {
+    padding-top: 4px;
+    padding-bottom: 6px;
+  }
+}
+
+@mixin heading-24($tabular-numbers: false) {
+  @include core-24($tabular-numbers: $tabular-numbers);
+
+  display: block;
+
+  padding-top: 9px;
+  padding-bottom: 6px;
+
+  @include media(tablet) {
+    padding-top: 6px;
+    padding-bottom: 4px;
+  }
+}
+
+@mixin copy-19($tabular-numbers: false) {
+  @include core-19($tabular-numbers: $tabular-numbers);
+
+  padding-top: 2px;
+  padding-bottom: 8px;
+
+  @include media(tablet) {
+    padding-top: 0;
+    padding-bottom: 5px;
+  }
+}
+
+@mixin copy-16($tabular-numbers: false) {
+  @include core-16($tabular-numbers: $tabular-numbers);
+
+  padding-top: 8px;
+  padding-bottom: 7px;
+
+  @include media(tablet) {
+    padding-top: 5px;
+    padding-bottom: 5px;
+  }
+}
+
+@mixin copy-14($tabular-numbers: false) {
+  @include core-14($tabular-numbers: $tabular-numbers);
+
+  padding-top: 8px;
+  padding-bottom: 7px;
+
+  @include media(tablet) {
+    padding-top: 5px;
+    padding-bottom: 5px;
+  }
+}

data/app/assets/stylesheets/_url-helpers.scss

@@ -0,0 +1,16 @@
+// URL Helpers
+
+$path: false !default;
+
+// A function which can either output a image-url to be used with the Rails
+// Asset Pipeline or Compass or a plain url which is prefixed with a defined
+// path variable.
+@function file-url($file) {
+  $url: '';
+  @if $path {
+    $url: url($path + $file);
+  } @else {
+    $url: image-url($file);
+  }
+  @return $url;
+}

data/app/assets/stylesheets/colours/_organisation.scss

@@ -0,0 +1,104 @@
+// We use `websafe` to mean strong enough contrast against white to
+// be used for copy and meet the AAA (large text) and AA (smaller
+// copy) WCAG guidelines.
+
+$attorney-generals-office: #9f1888;
+$attorney-generals-office-websafe: #a03a88;
+$cabinet-office: #005abb;
+$cabinet-office-websafe: #347da4;
+$civil-service: #af292e;
+$department-for-business-innovation-skills: #003479;
+$department-for-business-innovation-skills-websafe: #347da4;
+$department-for-communities-and-local-government: #00857e;
+$department-for-communities-and-local-government-websafe: #37836e;
+$department-for-culture-media-sport: #d40072;
+$department-for-culture-media-sport-websafe: #a03155;
+$department-for-education: #003a69;
+$department-for-education-websafe: #347ca9;
+$department-for-environment-food-rural-affairs: #00a33b;
+$department-for-environment-food-rural-affairs-websafe: #008938;
+$department-for-international-development: #002878;
+$department-for-international-development-websafe: #405e9a;
+$department-for-international-trade: #CF102D;
+$department-for-international-trade-websafe: $link-colour;
+$department-for-transport: #006c56;
+$department-for-transport-websafe: #398373;
+$department-for-work-pensions: #00beb7;
+$department-for-work-pensions-websafe: #37807b;
+$department-of-energy-climate-change: #009ddb;
+$department-of-energy-climate-change-websafe: #2b7cac;
+$department-of-health: #00ad93;
+$department-of-health-websafe: #39836e;
+$foreign-commonwealth-office: #003e74;
+$foreign-commonwealth-office-websafe: #406e97;
+$government-equalities-office: #9325b2;
+$hm-government: #0076c0;
+$hm-government-websafe: #347da4;
+$hm-revenue-customs: #009390;
+$hm-revenue-customs-websafe: #008670;
+$hm-treasury: #af292e;
+$hm-treasury-websafe: #832322;
+$home-office: #9325b2;
+$home-office-websafe: #9440b2;
+$ministry-of-defence: #4d2942;
+$ministry-of-defence-websafe: #5a5c92;
+$ministry-of-justice: #231f20;
+$ministry-of-justice-websafe: #5a5c92;
+$northern-ireland-office: #002663;
+$northern-ireland-office-websafe: #3e598c;
+$office-of-the-advocate-general-for-scotland: #002663;
+$office-of-the-advocate-general-for-scotland-websafe: $link-colour;
+$office-of-the-leader-of-the-house-of-lords: #9c132e;
+$office-of-the-leader-of-the-house-of-lords-websafe: #c2395d;
+$scotland-office: #002663;
+$scotland-office-websafe: #405c8a;
+// Note: the 'the' part here will get dropped
+$the-office-of-the-leader-of-the-house-of-commons: #317023;
+$the-office-of-the-leader-of-the-house-of-commons-websafe: #005f8f;
+$uk-export-finance: #005747;
+$uk-export-finance-websafe: $link-colour;
+$uk-trade-investment: #C80651;
+$uk-trade-investment-websafe: $link-colour;
+$wales-office: #a33038;
+$wales-office-websafe: #7a242a;
+
+// All organisation colours in a list
+// (class_name, brand colour, WCAG acceptible text colour)
+//
+// example usage:
+// @each $organisation in $all-organisation-brand-colours {
+//    .#{nth($organisation, 1)} {
+//      border-color: nth($organisation, 2);
+//    }
+// }
+
+$all-organisation-brand-colours:
+  'attorney-generals-office' $attorney-generals-office $attorney-generals-office-websafe,
+  'cabinet-office' $cabinet-office $cabinet-office-websafe,
+  'civil-service' $civil-service $civil-service,
+  'department-for-business-innovation-skills' $department-for-business-innovation-skills $department-for-business-innovation-skills-websafe,
+  'department-for-communities-and-local-government' $department-for-communities-and-local-government $department-for-communities-and-local-government-websafe,
+  'department-for-culture-media-sport' $department-for-culture-media-sport $department-for-culture-media-sport-websafe,
+  'department-for-education' $department-for-education $department-for-education-websafe,
+  'department-for-environment-food-rural-affairs' $department-for-environment-food-rural-affairs $department-for-environment-food-rural-affairs-websafe,
+  'department-for-international-development' $department-for-international-development $department-for-international-development-websafe,
+  'department-for-international-trade' $department-for-international-trade $department-for-international-trade-websafe,
+  'department-for-transport' $department-for-transport $department-for-transport-websafe,
+  'department-for-work-pensions' $department-for-work-pensions $department-for-work-pensions-websafe,
+  'department-of-energy-climate-change' $department-of-energy-climate-change $department-of-energy-climate-change-websafe,
+  'department-of-health' $department-of-health $department-of-health-websafe,
+  'foreign-commonwealth-office' $foreign-commonwealth-office $foreign-commonwealth-office-websafe,
+  'hm-government' $hm-government $hm-government-websafe,
+  'hm-revenue-customs' $hm-revenue-customs $hm-revenue-customs-websafe,
+  'hm-treasury' $hm-treasury $hm-treasury-websafe,
+  'home-office' $home-office $home-office-websafe,
+  'ministry-of-defence' $ministry-of-defence $ministry-of-defence-websafe,
+  'ministry-of-justice' $ministry-of-justice $ministry-of-justice-websafe,
+  'northern-ireland-office' $northern-ireland-office $northern-ireland-office-websafe,
+  'office-of-the-advocate-general-for-scotland' $office-of-the-advocate-general-for-scotland $office-of-the-advocate-general-for-scotland-websafe,
+  'office-of-the-leader-of-the-house-of-lords' $office-of-the-leader-of-the-house-of-lords $office-of-the-leader-of-the-house-of-lords-websafe,
+  'scotland-office' $scotland-office $scotland-office-websafe,
+  'the-office-of-the-leader-of-the-house-of-commons' $the-office-of-the-leader-of-the-house-of-commons $the-office-of-the-leader-of-the-house-of-commons-websafe,
+  'uk-export-finance' $uk-export-finance $uk-export-finance-websafe,
+  'uk-trade-investment' $uk-trade-investment $uk-trade-investment-websafe,
+  'wales-office' $wales-office $wales-office-websafe;

data/app/assets/stylesheets/colours/_palette.scss

@@ -0,0 +1,77 @@
+// Brand colours
+$govuk-blue: #005ea5;
+$mainstream-brand: $govuk-blue;
+
+// Standard palette, colours
+$purple: #2e358b;
+$purple-50: #9799c4;
+$purple-25: #d5d6e7;
+$mauve: #6f72af;
+$mauve-50: #b7b9d7;
+$mauve-25: #e2e2ef;
+$fuschia: #912b88;
+$fuschia-50: #c994c3;
+$fuschia-25: #e9d4e6;
+$pink: #d53880;
+$pink-50: #eb9bbe;
+$pink-25: #f6d7e5;
+$baby-pink: #f499be;
+$baby-pink-50: #faccdf;
+$baby-pink-25: #fdebf2;
+$red: #b10e1e;
+$red-50: #d9888c;
+$red-25: #efcfd1;
+$mellow-red: #df3034;
+$mellow-red-50: #ef9998;
+$mellow-red-25: #f9d6d6;
+$orange: #f47738;
+$orange-50: #fabb96;
+$orange-25: #fde4d4;
+$brown: #b58840;
+$brown-50: #dac39c;
+$brown-25: #f0e7d7;
+$yellow: #ffbf47;
+$yellow-50: #ffdf94;
+$yellow-25: #fff2d3;
+$grass-green: #85994b;
+$grass-green-50: #c2cca3;
+$grass-green-25: #e7ebda;
+$green: #006435;
+$green-50: #7fb299;
+$green-25: #cce0d6;
+$turquoise: #28a197;
+$turquoise-50: #95d0cb;
+$turquoise-25: #d5ecea;
+$light-blue: #2b8cc4;
+$light-blue-50: #96c6e2;
+$light-blue-25: #d5e8f3;
+
+// Standard palette, greys
+$black: #0b0c0c;
+$grey-1: #6f777b;
+$grey-2: #bfc1c3;
+$grey-3: #dee0e2;
+$grey-4: #f8f8f8;
+$white: #fff;
+
+// Semantic colour names
+$link-colour: $govuk-blue;
+$link-active-colour: $light-blue;
+$link-hover-colour: $light-blue;
+$link-visited-colour: #4c2c92;
+$button-colour: #00823b;
+$focus-colour: $yellow;
+$text-colour: $black;             // Standard text colour
+$secondary-text-colour: $grey-1;  // Section headers, help text etc.
+$border-colour: $grey-2;          // Borders, seperators, rules, keylines etc.
+$panel-colour: $grey-3;           // Related links panel, page footer etc.
+$canvas-colour: $grey-4;          // Page background
+$highlight-colour: $grey-4;       // Table stripes etc.
+$page-colour: $white;             // The page
+$discovery-colour: $govuk-blue;   // Discovery badges and banners
+$alpha-colour: $govuk-blue;       // Alpha badges and banners
+$beta-colour: $govuk-blue;        // Beta badges and banners
+$live-colour: $grass-green;       // Live badges and banners
+$banner-text-colour: #000;        // Text colour for Alpha & Beta banners
+$error-colour: $red;              // Error text and border colour
+$error-background: #fef7f7;       // Error background colour