Skip to main content

Colours

Overview

The Style Kit defines two sets of colours:

  1. standard colours - consisting of a general colour and greyscale schemes, used by almost all page elements and recommended for general use
  2. extended colours - consisting of highly specific colours for particular purposes such as branding

The extended colours are used for specific purposes such as meeting external service branding requirements or to give sufficient contrast within a component, they should not be used generally.

To promote consistency, it is strongly recommended to only use standard colours, unless specifically recommended to use an alternative.

If you do use other colours (including extended colours) you must ensure this complies with the recommended minimum colour contrast.

Page background

A default background colour is applied to the <body> element.

A default background colour is also applied to the parent <html> element to account for shorter pages where a white space would be shown after the footer component.

  • HTML background
  • $html-bg
  • #333333
  • Body background
  • $body-bg
  • #FFFFFF

Typography

A default text colour is applied to the <body> element, which is inherited by headings and paragraphs for example.

A default link colour is applied to the <body> element.

  • Page text
  • $page-text
  • #333333
  • Link colour
  • $link-color
  • #2B8CC4

Components

  • Default component colour
  • $component-default-color
  • #333333
  • Default component background
  • $component-default-bg
  • #EEEEEE
  • Default component active background
  • $component-default-active-bg
  • #2B8CC4
  • Inverse component colour
  • $component-inverse-color
  • #EEEEEE
  • Inverse component background
  • $component-inverse-bg
  • #555555
  • Inverse component link colour
  • $component-inverse-link-color
  • #71B2D7

Variants

To indicate the significance of an element (such as a notice or action), the Style Kit uses a set of conventional colours.

Primary
Indicates the most important, common or default option, may be used where there is only one option
Experimental
Indicates something new or that will be different and is being tested, with possibly unexpected results

These colours have meaning. To promote recognition by users, they should not be used beyond their intended purpose.

If something experimental may also be dangerous, use the ‘danger’ contextual colour as well.

  • Primary variant base
  • $state-primary-base
  • #28A197
  • Experimental variant base
  • $state-experimental-base
  • #6F72AF
  • Primary variant text
  • $state-primary-text
  • #1B6C65
  • Experimental variant text
  • $state-experimental-text
  • #4A4C75

Standard contextual colours

To indicate the context of an element (such as a notice or action), the Style Kit uses a set of conventional, contextual, colours.

Success
Indicates something positive or successful will happen, or has happened
Warning
Indicates something needs attention, or carries a low-risk
Danger
Indicates something negative, dangerous, or with a high-risk, will happen, or has happened
Info
Indicates something neutral, or informative

These colours have meaning. To promote recognition by users, they should not be used beyond their intended purpose.

These colours can be used with many core styles and components, such as:

You should ensure contextual colours are not the only means context is conveyed to ensure those using assistive technologies are not excluded.

There are accompanying standard contextual icons which can be used alongside these classes.

  • Success base
  • $state-success-base
  • #379245
  • Warning base
  • $state-warning-base
  • #FFBF47
  • Danger base
  • $state-danger-base
  • #B10E1E
  • Info base
  • $state-info-base
  • #2B8CC4
  • Success text
  • $state-success-text
  • #25622E
  • Warning text
  • $state-warning-text
  • #AB8030
  • Danger text
  • $state-danger-text
  • #770914
  • Info text
  • $state-info-text
  • #1D5E83

Standard contextual background colours

The standard contextual colours can be used as the background of an element using these classes:

Standard Context Background Contextual Class
Success .bsk-bg-success
Warning .bsk-bg-warning
Danger .bsk-bg-danger
Info .bsk-bg-info
  • Success background
  • $state-success-bg
  • #BBDAC0
  • Warning background
  • $state-warning-bg
  • #FFE9C0
  • Danger background
  • $state-danger-bg
  • #E4ADB3
  • Info background
  • $state-info-bg
  • #B7D8EB

Development phase colours

To indicate the state of a service, project, feature, component or other concept in its life-cycle, the Style Kit uses a set of development phases, which have associated colours. These phases and colours are defined by the Government Digital Service (except Backlog).

Backlog
A phase for concepts that are yet to be evaluated, or deliberately held for review in the future
Discovery
A phase before a concept is started to find out whether users need it and is not already provided by another service
Alpha
A development phase during which a concept is prototyped and tested to demonstrate its feasibility and function
Beta
A refinement phase following alpha where a concept is tested and improved until it is suitable for general use
Live
A phase where a concept is generally available and receiving support for, improvements and fixes
Retired
A phase for where a concept is no longer needed, due to changing needs or replacement by another concept

These colours can be used with many core styles and components, such as:

  • Backlog base
  • $development-phase-backlog
  • #2E358B
  • Discovery base
  • $development-phase-discovery
  • #912B88
  • Alpha base
  • $development-phase-alpha
  • #D53880
  • Beta base
  • $development-phase-beta
  • #F47738
  • Live base
  • $development-phase-live
  • #AAB437
  • Retired base
  • $development-phase-retired
  • #555555

BAS theme colours

To promote consistency, the Style Kit defines a series of colours for different types of activity undertaken at, by, or in relation to BAS and the polar regions. These are termed ‘BAS theme colours’ and are unique to the Style Kit.

Polar Science
Activities primarily associated with science and research undertaken at BAS or by BAS staff
Polar Operations
Activities primarily associated with the operations of BAS ships, stations and aircraft
Polar Arts
Activities related to artistic endeavours, either as a primary focus or drawing from other BAS activities
Polar People
Activities related to the BAS staff in a non-professional setting (see other themes if a processional focus)
Polar Environment
Activities related to the preservation of the polar environment
Polar Wildlife
Activities related to the wildlife in the polar regions (see other themes if focus is primarily research)

Contact the BAS Communications Team if you are unsure which theme to use, and for idents and other assets that incorporate them.

  • Polar Science
  • $bas-theme-polar-science
  • #B10E1E
  • Polar Operations
  • $bas-theme-polar-operations
  • #F47738
  • Polar Arts
  • $bas-theme-polar-arts
  • #912B88
  • Polar People
  • $bas-theme-polar-people
  • #1D5E83
  • Polar Environment
  • $bas-theme-polar-environment
  • #333333
  • Polar Wildlife
  • $bas-theme-polar-wildlife
  • #FFBF47

BAS facility colours

To promote consistency, the BAS Style Kit defines a series of colours to represent major BAS facilities, such as offices, ships, stations and aircraft. These are termed ‘BAS facility colours’ and are unique to the Style Kit.

Rothera
Station
Bird Island
Station
King Edward Point
Station
Sir David Attenbourgh
Ship

This series is incomplete. If you need a colour for an undefined location check first with the BAS Communications Team. Do not simply use a colour.

  • Rothera
  • $bas-facility-rothera
  • #2B8CC4
  • Bird Island
  • $bas-facility-bird-island
  • #379245
  • King Edward Point
  • $bas-facility-king-edward-point
  • #FFBF47
  • Sir David Attenborough
  • $bas-facility-sir-david-attenborough
  • #B10E1E

External service colours

By convention, and often recommendation by the relevant service, the Style Kit uses these colours for various external services.

These colours can be used with components such as:

These colours are part of the extended colour scheme and should not be used except for representing their respective service.

  • Twitter
  • $bsk-colour-ext-twitter-base
  • #55ACEE
  • Facebook
  • $bsk-colour-ext-facebook-base
  • #3B5998
  • YouTube
  • $bsk-colour-ext-youtube-base
  • #CD201F
  • RSS
  • $bsk-colour-ext-rss-base
  • #F26522

Standard greyscale colours

This section lists all the greyscale colours in the standard colour set.

These colours are defined by mixing black with a white base, they do not use a colour tint.

  • White
  • $bsk-colour-std-white
  • #FFFFFF
  • Grey lighter
  • $bsk-colour-std-grey-lighter
  • #EEEEEE
  • Grey light
  • $bsk-colour-std-grey-light
  • #999999
  • Grey base
  • $bsk-colour-std-grey-base
  • #777777
  • Grey dark
  • $bsk-colour-std-grey-dark
  • #555555
  • Grey darker
  • $bsk-colour-std-grey-darker
  • #333333
  • Black
  • $bsk-colour-std-black
  • #000000

Standard colours

This section lists all the colours in the standard colour set.

Each standard colour consists of a base colour defined as part of a colour pallet. These bases are then mixed with black and white to produce variants, two lighter and two darker, using a consistent process.

Variant Made By
lighter Mixing the base colour with 66% white
light Mixing the base colour with 33% white
base N/A
dark Mixing the base colour with 33% black
darker Mixing the base colour with 66% black

Some base colours are choosen for specific reasons:

Aircraft Red
The colour of BAS aircraft
Blue
The BAS brand colour used in the colour roundel and logo
NERC Green
The NERC brand colour used in the NERC logo
  • Yellow
  • $bsk-colour-std-yellow-base
  • #FFBF47
  • Orange
  • $bsk-colour-std-orange-base
  • #F47738
  • Aircraft-red
  • $bsk-colour-std-aircraft-red-base
  • #CC0033
  • red
  • $bsk-colour-std-red-base
  • #B10E1E
  • Baby pink
  • $bsk-colour-std-baby-pink-base
  • #F499BE
  • Pink
  • $bsk-colour-std-pink-base
  • #D53880
  • Fuschia
  • $bsk-colour-std-fuschia-base
  • #912B88
  • Mauve
  • $bsk-colour-std-mauve-base
  • #6F72AF
  • Sky blue
  • $bsk-colour-std-sky-blue-base
  • #2B8CC4
  • Blue
  • $bsk-colour-std-blue-base
  • #003A5D
  • Turquoise
  • $bsk-colour-std-turquoise-base
  • #28A197
  • green
  • $bsk-colour-std-green-base
  • #379245
  • NERC Green
  • $bsk-colour-std-nerc-green-base
  • #AAB437
  • Brown
  • $bsk-colour-std-brown-base
  • #B58840

  • Yellow lighter
  • $bsk-colour-std-yellow-lighter
  • #FFE9C0
  • Yellow light
  • $bsk-colour-std-yellow-light
  • #FFD484
  • Yellow base
  • $bsk-colour-std-yellow-base
  • #FFBF47
  • Yellow dark
  • $bsk-colour-std-yellow-dark
  • #AB8030
  • Yellow darker
  • $bsk-colour-std-yellow-darker
  • #574118
  • Orange lighter
  • $bsk-colour-std-orange-lighter
  • #FBD1BB
  • Orange light
  • $bsk-colour-std-orange-light
  • #F8A47A
  • Orange base
  • $bsk-colour-std-orange-base
  • #F47738
  • Orange dark
  • $bsk-colour-std-orange-dark
  • #A35026
  • Orange darker
  • $bsk-colour-std-orange-darker
  • #532813
  • Aircraft red lighter
  • $bsk-colour-std-aircraft-red-lighter
  • #EEA8BA
  • Aircraft red light
  • $bsk-colour-std-aircraft-red-light
  • #DD5476
  • Aircraft red base
  • $bsk-colour-std-aircraft-red-base
  • #CC0033
  • Aircraft red dark
  • $bsk-colour-std-aircraft-red-dark
  • #890022
  • Aircraft red darker
  • $bsk-colour-std-aircraft-red-darker
  • #450011
  • Red lighter
  • $bsk-colour-std-red-lighter
  • #E4ADB3
  • Red light
  • $bsk-colour-std-red-light
  • #CB5E68
  • Red base
  • $bsk-colour-std-red-base
  • #B10E1E
  • Red dark
  • $bsk-colour-std-red-dark
  • #770914
  • Red darker
  • $bsk-colour-std-red-darker
  • #3C050A
  • Baby pink lighter
  • $bsk-colour-std-baby-pink-lighter
  • #FBDCE9
  • Baby pink light
  • $bsk-colour-std-baby-pink-light
  • #F8BBD3
  • Baby pink base
  • $bsk-colour-std-baby-pink-base
  • #F499BE
  • Baby pink dark
  • $bsk-colour-std-baby-pink-dark
  • #A3677F
  • Baby pink darker
  • $bsk-colour-std-baby-pink-darker
  • #533441
  • Pink lighter
  • $bsk-colour-std-pink-lighter
  • #F1BBD4
  • Pink light
  • $bsk-colour-std-pink-light
  • #E37AAA
  • Pink base
  • $bsk-colour-std-pink-base
  • #D53880
  • Pink dark
  • $bsk-colour-std-pink-dark
  • #8F2656
  • Pink darker
  • $bsk-colour-std-pink-darker
  • #48132C
  • Fuschia lighter
  • $bsk-colour-std-fuschia-lighter
  • #DAB7D7
  • Fuschia light
  • $bsk-colour-std-fuschia-light
  • #B571AF
  • Fuschia base
  • $bsk-colour-std-fuschia-base
  • #912B88
  • Fuschia dark
  • $bsk-colour-std-fuschia-dark
  • #611D5B
  • Fuschia darker
  • $bsk-colour-std-fuschia-darker
  • #310F2E
  • Mauve lighter
  • $bsk-colour-std-mauve-lighter
  • #CECFE4
  • Mauve light
  • $bsk-colour-std-mauve-light
  • #9FA1C9
  • Mauve base
  • $bsk-colour-std-mauve-base
  • #6F72AF
  • Mauve dark
  • $bsk-colour-std-mauve-dark
  • #4A4C75
  • Mauve darker
  • $bsk-colour-std-mauve-darker
  • #26273C
  • Sky blue lighter
  • $bsk-colour-std-sky-blue-lighter
  • #B7D8EB
  • Sky blue light
  • $bsk-colour-std-sky-blue-light
  • #71B2D7
  • Sky blue base
  • $bsk-colour-std-sky-blue-base
  • #2B8CC4
  • Sky blue dark
  • $bsk-colour-std-sky-blue-dark
  • #1D5E83
  • Sky blue darker
  • $bsk-colour-std-sky-blue-darker
  • #0F3043
  • Blue lighter
  • $bsk-colour-std-blue-lighter
  • #A8BCC8
  • blue light
  • $bsk-colour-std-blue-light
  • #547B92
  • Blue base
  • $bsk-colour-std-blue-base
  • #003A5D
  • Blue dark
  • $bsk-colour-std-blue-dark
  • #00273E
  • Blue darker
  • $bsk-colour-std-blue-darker
  • #001420
  • Turquoise lighter
  • $bsk-colour-std-turquoise-lighter
  • #B6DFDC
  • Turquoise light
  • $bsk-colour-std-turquoise-light
  • #6FC0B9
  • Turquoise base
  • $bsk-colour-std-turquoise-base
  • #28A197
  • Turquoise dark
  • $bsk-colour-std-turquoise-dark
  • #1B6C65
  • Turquoise darker
  • $bsk-colour-std-turquoise-darker
  • #0E3733
  • Green lighter
  • $bsk-colour-std-green-lighter
  • #BBDAC0
  • Green light
  • $bsk-colour-std-green-light
  • #79B682
  • Green base
  • $bsk-colour-std-green-base
  • #379245
  • Green dark
  • $bsk-colour-std-green-dark
  • #25622E
  • Green darker
  • $bsk-colour-std-green-darker
  • #133217
  • NERC green lighter
  • $bsk-colour-std-nerc-green-lighter
  • #E2E6BB
  • NERC green light
  • $bsk-colour-std-nerc-green-light
  • #C6CD79
  • NERC green base
  • $bsk-colour-std-nerc-green-base
  • #AAB437
  • NERC green dark
  • $bsk-colour-std-nerc-green-dark
  • #727925
  • NERC green darker
  • $bsk-colour-std-nerc-green-darker
  • #3A3D13
  • Brown lighter
  • $bsk-colour-std-brown-lighter
  • #E6D7BE
  • Brown light
  • $bsk-colour-std-brown-light
  • #CDAF7F
  • Brown base
  • $bsk-colour-std-brown-base
  • #B58840
  • Brown dark
  • $bsk-colour-std-brown-dark
  • #795B2B
  • Brown darker
  • $bsk-colour-std-brown-darker
  • #3E2E16

Extended colours

This section lists all the colours in the extended colour set.

These colours should not be used for any other purpose. They do not compete with or replace standard colours.

Contrast

These colours are required to give additional contrast to Style Kit components.

Table component
grey-light-lighter
Navbar component
grey-darker-dark
Inline code component
sky-blue-lighter-light
  • Grey light lighter
  • $bsk-colour-ext-grey-light-lighter
  • #F7F7F7
  • Grey darker dark
  • $bsk-colour-ext-grey-darker-dark
  • #222222
  • Sky blue lighter light
  • $bsk-colour-ext-sky-blue-lighter-light
  • #E6F1F8

External services

See external service colours.

Development phases

The backlog development phase is not included in the Government Digital Service scheme, and therefore isn’t included in their colour scheme (incorporated into the standard colours). This colour is defined by the (UK Government) Department of Work and Pensions (DWP).

  • Purple base
  • $bsk-colour-ext-purple-base
  • #2E358B