Colours

Overview

Link to section

standard colours - consisting of a general colour and greyscale schemes, used by almost all page elements and recommended for general use
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

Live
Added in version 0.1.0
Last updated in version 0.8.0
Link to section

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

Live
Added in version 0.1.0
Last updated in version 0.8.0
Link to section

Page text
$page-text
#002337
BAS dark blue

Link color
$link-color
#0069a8
Tailwind: color-sky-700

Components

Live
Added in version 0.1.0
Last updated in version 0.8.0
Link to section

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

Live
Added in version 0.1.0
Last updated in version 0.8.0
Link to section

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

Live
Added in version 0.1.0
Last updated in version 0.8.0
Link to section

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.

Success base
$state-success-base
#008236
Tailwind: color-green-700

Warning base
$state-warning-base
#ffb900
Tailwind: color-amber-400

Danger base
$state-danger-base
#c10007
Tailwind: color-red-700

Info base
$state-info-base
#0069a8
Tailwind: color-sky-700

Success text
$state-success-text
#016630
Tailwind: color-green-800

Warning text
$state-warning-text
#e17100
Tailwind: color-amber-600

Danger text
$state-danger-text
#770914
Tailwind: color-red-700

Info text
$state-info-text
#00598a
Tailwind: color-sky-800

Standard contextual background colours

Live
Added in version 0.1.0
Last updated in version 0.8.0
Link to section

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

Standard Context	Background Contextual Class
Success	`.bg-success`
Warning	`.bg-warning`
Danger	`.bg-danger`
Info	`.bg-info`

Success background
$state-success-bg
#b9f8cf
Tailwind: color-green-200

Warning background
$state-warning-bg
#fee685
Tailwind: color-amber-200

Danger background
$state-danger-bg
#ffa2a2
Tailwind: color-red-300

Info background
$state-info-bg
#8ec5ff
Tailwind: color-blue-300

Development phase colours

Live
Added in version 0.3.0
Last updated in version 0.8.0
Link to section

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:

labels

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

Live
Added in version 0.5.0
Last updated in version 0.8.0
Link to section

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)

Polar Science
$bsk-theme-polar-science
#B10E1E

Polar Operations
$bsk-theme-polar-operations
#F47738

Polar Arts
$bsk-theme-polar-arts
#912B88

Polar People
$bsk-theme-polar-people
#1D5E83

Polar Environment
$bsk-theme-polar-environment
#333333

Polar Wildlife
$bsk-theme-polar-wildlife
#FFBF47

BAS facility colours

Live
Added in version 0.5.0
Last updated in version 0.8.0
Link to section

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
$bsk-facility-rothera
#2B8CC4

Bird Island
$bsk-facility-bird-island
#379245

King Edward Point
$bsk-facility-king-edward-point
#FFBF47

Sir David Attenborough
$bsk-facility-sir-david-attenborough
#B10E1E

External service colours

Live
Added in version 0.1.0
Last updated in version 0.8.0
Link to section

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:

Twitter / X
$bsk-colour-ext-twitter-base
#000000

Bluesky
$bsk-colour-ext-bluesky-base
#362fff

Facebook
$bsk-colour-ext-facebook-base
#3B5998

YouTube
$bsk-colour-ext-youtube-base
#CD201F

RSS
$bsk-colour-ext-rss-base
#F26522

ORCID
$bsk-colour-ext-orcid-base
#A6CE39

Standard greyscale colours

Live
Added in version 0.3.0
Last updated in version 0.8.0
Link to section

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

Live
Added in version 0.3.0
Last updated in version 0.8.0
Link to section

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

Extended colours

Live
Added in version 0.3.0
Last updated in version 0.8.0
Link to section

This section lists 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

Live
Added in version 0.3.0
Last updated in version 0.8.0
Link to section

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

Live
Added in version 0.3.0
Last updated in version 0.8.0
Link to section

See external service colours.

Development phases

Live
Added in version 0.3.0
Last updated in version 0.8.0
Link to section

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