Skip to content
Nucleus Docs

Tokens

guidelines

What are design tokens?

Design tokens are a technology-agnostic way to create and share reusable variables.

Colours

Colour plays an important role in defining the visual identity. Using the full suite of colours in accordance with brand guidelines can create a real sense of brand recognition.

Primary

CYAN #0093F5 COLOR_PRIMARY_CYAN
LIME #7FCC00 COLOR_PRIMARY_LIME
NAVY #002F87 COLOR_PRIMARY_NAVY

Secondary

BLUE #004ECC COLOR_SECONDARY_BLUE
FOREST #00A33E COLOR_SECONDARY_FOREST
ORANGE #FF7A00 COLOR_SECONDARY_ORANGE
RED #D50032 COLOR_SECONDARY_RED
SLATE #111518 COLOR_SECONDARY_SLATE
YELLOW #FFC72C COLOR_SECONDARY_YELLOW

Greyscale

DARK #435460 COLOR_GREYSCALE_DARK
LIGHT #F3F5F7 COLOR_GREYSCALE_LIGHT
MEDIUM #C3CED5 COLOR_GREYSCALE_MEDIUM
WHITE #FFFFFF COLOR_GREYSCALE_WHITE

System

System colours support and enhance communication with users throughout their journeys. Please be aware that system colours always carry specific meanings, so exercise caution to avoid confusion by using these colours or similar brand colours inappropriately. Never rely solely on system colours for conveying information or requesting actions.

ATTENTION #FFC72C COLOR_SYSTEM_ATTENTION
DANGER #E60F41 COLOR_SYSTEM_DANGER
FOCUS #002F87 COLOR_SYSTEM_FOCUS
INFORMATION #1192E8 COLOR_SYSTEM_INFORMATION
NEUTRAL #767676 COLOR_SYSTEM_NEUTRAL
SUCCESS #1BA158 COLOR_SYSTEM_SUCCESS
WARNING #E3660E COLOR_SYSTEM_WARNING

Theme

ACTION #1565C0 THEME_COLOR_ACTION
ATTENTION #FFC72C THEME_COLOR_ATTENTION
BACKGROUND #FFFFFF THEME_COLOR_BASE_BACKGROUND
DARKEST #000000 THEME_COLOR_DARKEST
FOCUS #002F87 THEME_COLOR_FOCUS
LIGHTEST #FFFFFF THEME_COLOR_LIGHTEST
PLACEHOLDER #b0b0b0 THEME_COLOR_PLACEHOLDER
DARK #404040 THEME_COLOR_TEXT_DARK
LIGHT #FFFFFF THEME_COLOR_TEXT_LIGHT

Border

Radius

LARGE0.5remTHEME_BORDER_RADIUS_LARGE
MEDIUM0.25remTHEME_BORDER_RADIUS_MEDIUM
SMALL0.125remTHEME_BORDER_RADIUS_SMALL

Width

MEDIUM0.25remTHEME_BORDER_WIDTH_MEDIUM
SMALL0.125remTHEME_BORDER_WIDTH_SMALL
TINY0.0625remTHEME_BORDER_WIDTH_TINY

Size

Theme

LG1.5remTHEME_SIZE_LG
MD1.25remTHEME_SIZE_MD
SM1remTHEME_SIZE_SM

System

16PX1remSIZE_16PX
18PX1.125remSIZE_18PX
20PX1.25remSIZE_20PX
24PX1.5remSIZE_24PX
28PX1.75remSIZE_28PX
32PX2remSIZE_32PX
36PX2.25remSIZE_36PX
48PX3remSIZE_48PX
56PX3.5remSIZE_56PX
64PX4remSIZE_64PX
72PX4.5remSIZE_72PX
92PX5.75remSIZE_92PX
128PX8remSIZE_128PX
144PX9remSIZE_144PX

Spacer

Theme

LG1.5remTHEME_SPACER_LG
MD1remTHEME_SPACER_MD
SM0.5remTHEME_SPACER_SM
XL2remTHEME_SPACER_XL
ZERO0remTHEME_SPACER_ZERO
LG-1.5remTHEME_SPACER_NEGATIVE_LG
MD-1remTHEME_SPACER_NEGATIVE_MD
SM-0.5remTHEME_SPACER_NEGATIVE_SM
XL-2remTHEME_SPACER_NEGATIVE_XL

System

4PX0.25remSPACER_4PX
8PX0.5remSPACER_8PX
12PX0.75remSPACER_12PX
16PX1remSPACER_16PX
20PX1.25remSPACER_20PX
24PX1.5remSPACER_24PX
28PX1.75remSPACER_28PX
32PX2remSPACER_32PX
36PX2.25remSPACER_36PX
40PX2.5remSPACER_40PX
48PX3remSPACER_48PX
64PX4remSPACER_64PX
144PX9remSPACER_144PX

Typography

The British Gas font is a typeface unique to British Gas. It has a clear, legible and elegant style. A fallback to sans-serif is present to allow the operating system to provide the substitute.

Heading 1

<h1>, class="h1", @extend %h1 or @extend %h1-no-margin

Heading 2

<h2>, class="h2", @extend %h2 or @extend %h2-no-margin

Heading 3

<h3>, class="h3", @extend %h3 or @extend %h3-no-margin

Heading 4

<h4>, class="h4", @extend %h4 or @extend %h4-no-margin

Heading 5

<h5>, class="h5", @extend %h5 or @extend %h5-no-margin

Heading 6

<h6>, class="h6", @extend %h6 or @extend %h6-no-margin

Paragraph large

class="p-large", @extend %p-large or @extend %p-large-no-margin

Paragraph feature

class="p-feature", @extend %p-feature or @extend %p-feature-no-margin

Paragraph normal

class="p-normal", @extend %p-normal or @extend %p-normal-no-margin

Paragraph small

class="p-small", @extend %p-small or @extend %p-small-no-margin

Paragraph caption

class="p-caption", @extend %p-caption or @extend %p-caption-no-margin

Last updated: