Tokens

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.

DANGER #E60F41 COLOR_SYSTEM_DANGER

FOCUS #FFC72C COLOR_SYSTEM_FOCUS

INFORMATION #1192E8 COLOR_SYSTEM_INFORMATION

NEUTRAL #767676 COLOR_SYSTEM_NEUTRAL

SUCCESS #1BA158 COLOR_SYSTEM_SUCCESS

WARNING #E3660E COLOR_SYSTEM_WARNING

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

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> or class="h1"

Tokens
Example

Value: 'Centrica Stabil Grotesk Medium'
Token: THEME_TYPOGRAPHY_X_LARGE_HEADING_FONT_FAMILY
Value: 400
Token: THEME_TYPOGRAPHY_X_LARGE_HEADING_FONT_WEIGHT
Value: 2.027rem in the default viewport
Token: THEME_TYPOGRAPHY_X_LARGE_HEADING_FONT_SIZE_VIEWPORT_DEFAULT
Value: 2.986rem in the basketball-court viewport
Token: THEME_TYPOGRAPHY_X_LARGE_HEADING_FONT_SIZE_VIEWPORT_BASKETBALL_COURT
Value: 3.815rem in the rugby-pitch viewport
Token: THEME_TYPOGRAPHY_X_LARGE_HEADING_FONT_SIZE_VIEWPORT_RUGBY_PITCH

Heading 2

<h2> or class="h2"

Tokens
Example

Value: 'Centrica Stabil Grotesk Medium'
Token: THEME_TYPOGRAPHY_LARGE_HEADING_FONT_FAMILY
Value: 400
Token: THEME_TYPOGRAPHY_LARGE_HEADING_FONT_WEIGHT
Value: 1.699rem in the default viewport
Token: THEME_TYPOGRAPHY_LARGE_HEADING_FONT_SIZE_VIEWPORT_DEFAULT
Value: 2.272rem in the basketball-court viewport
Token: THEME_TYPOGRAPHY_LARGE_HEADING_FONT_SIZE_VIEWPORT_BASKETBALL_COURT
Value: 2.73rem in the rugby-pitch viewport
Token: THEME_TYPOGRAPHY_LARGE_HEADING_FONT_SIZE_VIEWPORT_RUGBY_PITCH

Heading 3

<h3> or class="h3"

Tokens
Example

Value: 'Centrica Stabil Grotesk Medium'
Token: THEME_TYPOGRAPHY_MEDIUM_HEADING_FONT_FAMILY
Value: 400
Token: THEME_TYPOGRAPHY_MEDIUM_HEADING_FONT_WEIGHT
Value: 1.424rem in the default viewport
Token: THEME_TYPOGRAPHY_MEDIUM_HEADING_FONT_SIZE_VIEWPORT_DEFAULT
Value: 1.728rem in the basketball-court viewport
Token: THEME_TYPOGRAPHY_MEDIUM_HEADING_FONT_SIZE_VIEWPORT_BASKETBALL_COURT
Value: 1.953rem in the rugby-pitch viewport
Token: THEME_TYPOGRAPHY_MEDIUM_HEADING_FONT_SIZE_VIEWPORT_RUGBY_PITCH

Heading 4

<h4> or class="h4"

Tokens
Example

Value: 'Centrica Stabil Grotesk Medium'
Token: THEME_TYPOGRAPHY_SMALL_HEADING_FONT_FAMILY
Value: 400
Token: THEME_TYPOGRAPHY_SMALL_HEADING_FONT_WEIGHT
Value: 1.342rem in the default viewport
Token: THEME_TYPOGRAPHY_SMALL_HEADING_FONT_SIZE_VIEWPORT_DEFAULT
Value: 1.577rem in the basketball-court viewport
Token: THEME_TYPOGRAPHY_SMALL_HEADING_FONT_SIZE_VIEWPORT_BASKETBALL_COURT
Value: 1.747rem in the rugby-pitch viewport
Token: THEME_TYPOGRAPHY_SMALL_HEADING_FONT_SIZE_VIEWPORT_RUGBY_PITCH

Heading 5

<h5> or class="h5"

Tokens
Example

Value: 'Centrica Stabil Grotesk Medium'
Token: THEME_TYPOGRAPHY_X_SMALL_HEADING_FONT_FAMILY
Value: 400
Token: THEME_TYPOGRAPHY_X_SMALL_HEADING_FONT_WEIGHT
Value: 1.193rem in the default viewport
Token: THEME_TYPOGRAPHY_X_SMALL_HEADING_FONT_SIZE_VIEWPORT_DEFAULT
Value: 1.315rem in the basketball-court viewport
Token: THEME_TYPOGRAPHY_X_SMALL_HEADING_FONT_SIZE_VIEWPORT_BASKETBALL_COURT
Value: 1.398rem in the rugby-pitch viewport
Token: THEME_TYPOGRAPHY_X_SMALL_HEADING_FONT_SIZE_VIEWPORT_RUGBY_PITCH

Heading 6

<h6> or class="h6"

Tokens
Example

Value: 'Centrica Stabil Grotesk Book'
Token: THEME_TYPOGRAPHY_TINY_HEADING_FONT_FAMILY
Value: 400
Token: THEME_TYPOGRAPHY_TINY_HEADING_FONT_WEIGHT
Value: 1.125rem in the default viewport
Token: THEME_TYPOGRAPHY_TINY_HEADING_FONT_SIZE_VIEWPORT_DEFAULT
Value: 1.2rem in the basketball-court viewport
Token: THEME_TYPOGRAPHY_TINY_HEADING_FONT_SIZE_VIEWPORT_BASKETBALL_COURT
Value: 1.25rem in the rugby-pitch viewport
Token: THEME_TYPOGRAPHY_TINY_HEADING_FONT_SIZE_VIEWPORT_RUGBY_PITCH

Paragraph large

class="p-large"

Tokens
Example

Value: 'Centrica Stabil Grotesk Book'
Token: THEME_TYPOGRAPHY_LARGE_PARAGRAPH_FONT_FAMILY
Value: 400
Token: THEME_TYPOGRAPHY_LARGE_PARAGRAPH_FONT_WEIGHT
Value: 1.424rem in the default viewport
Token: THEME_TYPOGRAPHY_LARGE_PARAGRAPH_FONT_SIZE_VIEWPORT_DEFAULT
Value: 1.728rem in the basketball-court viewport
Token: THEME_TYPOGRAPHY_LARGE_PARAGRAPH_FONT_SIZE_VIEWPORT_BASKETBALL_COURT
Value: 1.953rem in the rugby-pitch viewport
Token: THEME_TYPOGRAPHY_LARGE_PARAGRAPH_FONT_SIZE_VIEWPORT_RUGBY_PITCH

Paragraph feature

class="p-feature"

Tokens
Example

Value: 'Centrica Stabil Grotesk Book'
Token: THEME_TYPOGRAPHY_FEATURE_PARAGRAPH_FONT_FAMILY
Value: 400
Token: THEME_TYPOGRAPHY_FEATURE_PARAGRAPH_FONT_WEIGHT
Value: 1.266rem in the default viewport
Token: THEME_TYPOGRAPHY_FEATURE_PARAGRAPH_FONT_SIZE_VIEWPORT_DEFAULT
Value: 1.44rem in the basketball-court viewport
Token: THEME_TYPOGRAPHY_FEATURE_PARAGRAPH_FONT_SIZE_VIEWPORT_BASKETBALL_COURT
Value: 1.563rem in the rugby-pitch viewport
Token: THEME_TYPOGRAPHY_FEATURE_PARAGRAPH_FONT_SIZE_VIEWPORT_RUGBY_PITCH

Paragraph normal

class="p-normal"

Tokens
Example

Value: 'Centrica Stabil Grotesk Book'
Token: THEME_TYPOGRAPHY_NORMAL_PARAGRAPH_FONT_FAMILY
Value: 400
Token: THEME_TYPOGRAPHY_NORMAL_PARAGRAPH_FONT_WEIGHT
Value: 1.125rem in the default viewport
Token: THEME_TYPOGRAPHY_NORMAL_PARAGRAPH_FONT_SIZE_VIEWPORT_DEFAULT
Value: 1.2rem in the basketball-court viewport
Token: THEME_TYPOGRAPHY_NORMAL_PARAGRAPH_FONT_SIZE_VIEWPORT_BASKETBALL_COURT
Value: 1.25rem in the rugby-pitch viewport
Token: THEME_TYPOGRAPHY_NORMAL_PARAGRAPH_FONT_SIZE_VIEWPORT_RUGBY_PITCH

Paragraph small

class="p-small"

Tokens
Example

Value: 'Centrica Stabil Grotesk Book'
Token: THEME_TYPOGRAPHY_SMALL_PARAGRAPH_FONT_FAMILY
Value: 400
Token: THEME_TYPOGRAPHY_SMALL_PARAGRAPH_FONT_WEIGHT
Value: 1rem in the default viewport
Token: THEME_TYPOGRAPHY_SMALL_PARAGRAPH_FONT_SIZE_VIEWPORT_DEFAULT
Value: 1.125rem in the basketball-court viewport
Token: THEME_TYPOGRAPHY_SMALL_PARAGRAPH_FONT_SIZE_VIEWPORT_BASKETBALL_COURT
Value: 1.2rem in the rugby-pitch viewport
Token: THEME_TYPOGRAPHY_SMALL_PARAGRAPH_FONT_SIZE_VIEWPORT_RUGBY_PITCH

Paragraph caption

class="p-caption"

Tokens
Example

Value: 'Centrica Stabil Grotesk Book'
Token: THEME_TYPOGRAPHY_CAPTION_PARAGRAPH_FONT_FAMILY
Value: 400
Token: THEME_TYPOGRAPHY_CAPTION_PARAGRAPH_FONT_WEIGHT
Value: 0.889rem in the default viewport
Token: THEME_TYPOGRAPHY_CAPTION_PARAGRAPH_FONT_SIZE_VIEWPORT_DEFAULT
Value: 0.889rem in the basketball-court viewport
Token: THEME_TYPOGRAPHY_CAPTION_PARAGRAPH_FONT_SIZE_VIEWPORT_BASKETBALL_COURT
Value: 0.889rem in the rugby-pitch viewport
Token: THEME_TYPOGRAPHY_CAPTION_PARAGRAPH_FONT_SIZE_VIEWPORT_RUGBY_PITCH

Last updated: Mar 12, 2024