Design System
Style Guide
Typography, colours and visual standards used across the site.
Headings — neulis-sans, 700
The quick brown fox jumps
TagH1
Desktop54px3.375rem
Line Height56px3.5rem
Mobile48px3rem
Line Height50px3.125rem
The quick brown fox jumps
TagH2
Desktop48px3rem
Line Height50px3.125rem
Mobile40px2.5rem
Line Height45px2.8125rem
The quick brown fox jumps
TagH3
Desktop40px2.5rem
Line Height45px2.8125rem
Mobile30px1.875rem
Line Height33px2.0625rem
The quick brown fox jumps
TagH4
Desktop30px1.875rem
Line Height33px2.0625rem
Mobile23px1.4375rem
Line Height28px1.75rem
The quick brown fox jumps
TagH5
Desktop23px1.4375rem
Line Height28px1.75rem
Mobile16px1rem
Line Height19px1.1875rem
The quick brown fox jumps
TagH6
Desktop16px1rem
Line Height19px1.1875rem
Mobile14px0.875rem
Line Height16px1rem
Body Text — inter, 300
This is lead text. Used for introductory paragraphs and key statements that need more visual weight than body copy.
Classp.lead
Weight300
Size20px1.25rem
Line Height30px1.875rem
This is body text. Used for all standard paragraph content across the site, set in Inter at a light weight for readability at longer lengths.
Tagp
Weight300
Size16px1rem
Line Height25px1.5625rem
Pre-title — inter, 600
Section pre-title
Class.pre-title
Weight600
Size16px1rem
Margin Bottom10px0.625rem
Quotes
"This is a blockquote used in the 50/50 page builder block alongside supporting content."
Jane Smith, Head of Compliance
Elementblockquote
Name/Role14px0.875rem
Size18px1.125rem
Line Height24px1.5rem
"This is a pullquote used as a standalone full-width statement block."
Class.pullquote
Weight700
Size18px1.125rem
Line Height24px1.5rem
Brand
Mint
Moss
Black
White
Crystal
Crystal Light
Crystal
Crystal Dark
Supporting
Mint Dark
Grey Dark
Grey
Accents
Cyan
Yellow
Orange
Blue
Purple
Pink
Red