Colours - BAS Style Kit

Overview

Back to top
Link to section

The Style Kit defines two sets of colours:

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.3.0
Back to top
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.

Typography

Live
Added in version 0.1.0
Back to top
Link to section

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.

Components

Live
Added in version 0.1.0
Back to top
Link to section

Variants

Live
Added in version 0.1.0
Back to top
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.

Standard contextual colours

Live
Added in version 0.1.0
Back to top
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.

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

Standard contextual background colours

Live
Added in version 0.1.0
Back to top
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	`.bsk-bg-success`
Warning	`.bsk-bg-warning`
Danger	`.bsk-bg-danger`
Info	`.bsk-bg-info`

Development phase colours

Live
Added in version 0.3.0
Back to top
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

BAS theme colours

Live
Added in version 0.5.0
Back to top
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)

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

BAS facility colours

Live
Added in version 0.5.0
Back to top
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.

External service colours

Live
Added in version 0.1.0
Last updated in version 0.6.0
Back to top
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:

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

Standard greyscale colours

Live
Added in version 0.1.0
Last updated in version 0.3.0
Back to top
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.

Standard colours

Live
Added in version 0.1.0
Last updated in version 0.3.0
Back to top
Link to section

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

Extended colours

Live
Added in version 0.3.0
Back to top
Link to section

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.

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

External services

Back to top
Link to section

See external service colours.

Development phases

Back to top
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).