Style Guide

Style Guide

Living reference for the tokens defined in the Utility Design Figma file.

UI Colour Palette

Primary

.primary-1

#250858

.primary-2

#333333

.primary-3

#666666

.primary-4

#999999

.primary-5

#CCCCCC

Base

.base-1

#000000

.base-2

#FFFFFF

.base-3

#F5F5F5

.base-4

#D6D8D9

Overlay

.overlay-1 (70%)

#000000

.overlay-2 (30%)

#000000

.overlay-3 (20%)

#FFFFFF

Buttons

.button-primary default

#000000

.button-primary hover

#333333

.button-primary disabled

#CCCCCC

.button-secondary default

#FFFFFF

.button-secondary hover

#EEEEEE

.button-secondary disabled

#CCCCCC

System

.system-success

#00893E

.system-warning

#F49C10

.system-danger

#EE3224

.system-info

#0079C2

.system-sale

#A50E22

Typography 1

Display

.display-1

Gazpacho Heavy · Mobile 40px/46px · Desktop 60px/66px

.display-2

Gazpacho Heavy · Mobile 30px/36px · Desktop 40px/46px

Heading

.heading-1

Gazpacho Heavy · Mobile 20px/26px · Desktop 30px/36px

.heading-2

Gazpacho Heavy · Mobile 18px/24px · Desktop 24px/30px

.heading-3

Gazpacho Heavy · Mobile 16px/20px · Desktop 18px/24px

.heading-4

Gazpacho Heavy · 16px/22px

Typography 2

Body

.body-xl — The quick brown fox

.body-xl-bold — The quick brown fox

.body-lg — The quick brown fox

.body-lg-bold — The quick brown fox

.body-base — The quick brown fox

.body-base-bold — The quick brown fox

.body-sm — The quick brown fox

.body-sm-bold — The quick brown fox

.body-xs — The quick brown fox

.body-xs-bold — The quick brown fox

Labels

.label-xl

.label-lg

.label-base

.label-sm

.label-xs

Links

.link-lg .link-base .link-sm .link-xs

Underlined Links

.line-link-lg .line-link-base .line-link-sm .line-link-xs

Buttons Text

.cta

.tile

.tile-mobile

Icons

SVG snippets ({% render 'icon-*' %}) sized with the .icon-* utilities.

.icon-xxs

14px

.icon-xs

16px

.icon-sm

18px

.icon-base

20px

.icon-lg

24px

.icon-xlg

30px

Buttons

CTA Primary

Uses the class 'btn-primary'.

CTA Secondary

Uses the class 'btn-secondary'.

Desktop / Mobile Link

Uses the class 'btn-tertiary' (or 'btn-tertiary-light' on dark backgrounds). Underlines on hover.

Link
Link

Icon Primary / Secondary

Uses the classes 'btn-primary-icon' / 'btn-secondary-icon'.

Tiles

Uses the class 'tile' ('tile-mobile' for the smaller mobile variant).

Radio Button

Wrap with a div using the 'input-radio' class.

Check Box

Wrap with a div using the 'input-checkbox' class.

Input fields

White

Search