01
Typography
.headline
Field Gothic No.83 Med XWide
Uppercase · 0.05em · 1.1 · 700
Headlines should be set in field gothic
.subheading
Field Gothic No.83 Med XWide
Uppercase · 0.05em · 1.1 · 700
Sub headings set in field gothic
.small-heading
Geist Mono Bold
Uppercase · 1.2
Small headings set in geist mono bold
.body-copy
Geist Regular
Sentence case · 0 · 1.4
Body copy is set in Geist Regular. It is a clear, legible and technical typeface that captures the brand personality. If you needed to, you could use underline or bold to highlight important words or phrases in the text that you are typesetting.
.small-print
Geist Mono Regular
Small print should be set in Geist Mono Regular. Used for captions, legal text, footnotes, and metadata.
02
Colour
Primary palette
Guardian
bg-guardian
#2F2E7E
Resilient
bg-resilient
#F0EBE6
Fortify
bg-fortify
#202023
Blueprint
bg-blueprint
#217EFF
Progress
bg-progress
#BFF197
CTAs only
Secondary palette
Guardian Mid
bg-guardian-mid
#9796BE
Guardian Light
bg-guardian-light
#CBCBDF
Guardian Dark
bg-guardian-dark
#12112F
White
bg-white
#FFFFFF
Fortify Light
bg-fortify-light
#535260
Blueprint Light
bg-blueprint-light
#599EFF
Blueprint Dark
bg-blueprint-dark
#195FBF
Progress Pale
bg-progress-pale
#DFF8CB
CTA action states
Tertiary palette · category accents
Spill Containment
bg-spill-light
#FEFBA4
bg-spill
#FCF649
bg-spill-dark
#23230B
Storage
bg-storage-light
#C0F4DC
bg-storage
#20BC84
bg-storage-dark
#012716
Fire and Safety
bg-fire-light
#FFC8C9
bg-fire
#FF6357
bg-fire-dark
#400809
03
Components
.btn-cta · on Guardian
.btn-cta · on Resilient
.btn-cta · on Fortify
04
Using colour
The deeper the engagement, the more of the palette is revealed. Resilient is the default canvas across all levels. Progress is reserved for CTAs only.
First impression
Guardian dominant. Accents: fortify, blueprint.
Familiar with brand
Introduces progress (CTA), guardian-light, and tertiaries sparingly.
Deep interaction
Full palette. Tertiary colours differentiate product categories.