Brand colours

Colours can be found in __vars/_colours.scss. Refer to it for available colours when making components, and maintain the palette there.

Colours should be stored as solid hexes or rgb (not rgba), and given a name unique to their appearance - consistent with their naming in brand guidelines, if possible, and then assigned for use within the design system, it is encouraged to abstract as much as possible, this helps components to be themed later.

For example, the theme could use an abstracted $neutral--primary and $neutral--light, to avoid using $slate from the main palette, which might not be suitable for sub-themes.

If multiple shades of a colour exist, give them BEM-like modifier names.

If allowed by brand guidelines, use Sass rgba() to create transparent variants.

For example:

  // Palette
  $purple:                        #ad0075;
  $purple--light:                 #ad0075;
  $purple--vibrant:               #ad0075;
  $orange:                        #e6650a;

  // Theme colours
  $primary:                       $purple;
  $secondary:                     $orange;

  // References
  $main-link-color:               $primary;
  $main-link-color--hover:        rgba($main-link-color, 0.9)

Sass for each component can then pick up $main-link-color, eg.

  a {
    color: $main-link-color;

    &:hover {
      color: $main-link-color--hover;
    }
  }

Applying colour

If not abstracting to a colour variable (or map of colour variables) for a specific component, aim to utilise $primary, $secondary, etc. variables when colouring components. This means when a theme layer is applied, the components can take on any updated colours easily. More on this below, and in Theming docs.

Colour variants

If the brand guidelines allow, colour variants/derivatives should always be named and added to the main colour variables file so they are traceable. Hexes should (almost?) never be found in components' partials.

Colour tints

'Tints' (usually from print brand guidelines) are acheived best by using the Sass mix() function, with white. Something like:

  $green-lime:                    #a2aa1f;
  $green-lime--tint-10:           mix($green-lime, white, 10%);
  $green-lime--tint-20:           mix($green-lime, white, 20%);
  $green-lime--tint-30:           mix($green-lime, white, 30%);
  $green-lime--tint-50:           mix($green-lime, white, 50%);

Avoid just lightening/darkening in Sass (these functions are just weird in their operation and produce inconsistent results to what you might expect, don't use them).

Component variants (maps & loops)

A select number of components have colour variants, these are generated dynamically from maps and loops, for example, the Tile component has a $tile-accent-colors map:

$tile-accent-colors: (
  'dark-blue': $dark-blue,
  'digital-blue': $digital-blue,
  'neon': $neon,
);

This is accompanied by a loop in the component file to generate CSS classes for variants:

@each $name, $value in $tile-accent-colors {
  &--accent-#{$name} {
    --accent-color: #{$value};
  }
}

Producing:

.tile--accent-dark-blue { --accent-color: #170d38; }
.tile--accent-digital-blue { --accent-color: #304dfc; }
.tile--accent-neon { --accent-color: #c4ff36; }

Colour Utilities

There are two maps, $utils-bg-colors and $utils-text-colors which generate utility classes for colours. As with the margin/spacing utilities, use sparingly, not by default. These styles probably belong in a component.

For example, adding:

'primary': $primary,

to the $utils-text-colors map, will output a class of text-color-primary which can be used to make text the primary colour.

In $utils-bg-colors, the line:

'tertiary': $tertiary,

Will output a class of bg-tertiary which can be used to set the background of any element to tertiary.

If you were to use bg-offblack, you'd need to be careful to also add a class of text-color-offwhite so that text is readable.