Overview
Our Mono palette is subtle, textured and flexible; it utilises the softness of all the tones found in between said extremes to bring out detail, nuance and character. To determine such tones, the colour gradients are marked at various opacity increments of a foundational Black #111111 (mono 900).
Font family
The primary (and only) typeface used in any scenario is Hermes Regular Condensed. The brand wordmark is set in this typeface.
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz0123456789!”#$%&’()*+,-./:;<=>?©¬ ®1⁄2 1⁄3 2⁄3 1⁄4 fifl∂Δ∑–≠≈
Headings
.text-5xl / <h1>
Pay by Bank :
Instance
X Large Headline
Px
48 / 60
Em
3.00 / 3.75
.text-4xl / <h2>
Pay by Bank :
Instance
Large Headline
Px
36 / 50
Em
2.25 / 3.13
.text-3xl / <h3>
Securely from your bank account.
Instance
Sub Heading
Px
30 / 50
Em
1.88 / 3.13
.text-2xl / <h4>
Securely from your bank account.
Instance
Full Screen Form Titles, Pull Quote
Px
26 / 40
Em
1.63 / 2.50
.text-xl / <h5>
Securely from your bank account.
Instance
Section Titles
Px
20 / 30
Em
1.25 / 1.88
.text-lg / <h6>
Securely from your bank account.
Instance
Section Titles
Px
18 / 24
Em
1.13 / 1.50
Body
.text-lg / <p>
Pay by Bank : for a fast, simple and secure payment experience at checkout with no account or set up needed. With no security codes or long card numbers to remember when you pay, your transaction data and privacy is kept safe and secure without being stored on browsers or shared with merchants.
Instance
Secondary Descriptive Text, Paragraph Blocks
Px
18 / 24
Em
1.13 / 1.50
.text-base / <p>
Pay by Bank : for a fast, simple and secure payment experience at checkout with no account or set up needed. With no security codes or long card numbers to remember when you pay, your transaction data and privacy is kept safe and secure without being stored on browsers or shared with merchants.
Instance
Secondary Descriptive Text, Paragraph Blocks
Px
16 / 26
Em
1.00 / 1.63
.text-sm / <p>
Pay by Bank : for a fast, simple and secure payment experience at checkout with no account or set up needed. With no security codes or long card numbers to remember when you pay, your transaction data and privacy is kept safe and secure without being stored on browsers or shared with merchants.
Instance
Navigation Link, Paragraph Blocks, Image Captions, Input Label, Input Prompt, Input Entry
Px
14 / 26
Em
0.88 / 1.63
.text-xs / <p>
Recommended Usage — Vertical Button Group • Ahead of Checkout
Instance
Check Box Descriptor, Disclaimers, Image Caption
Px
12 / 26
Em
0.75 / 1.63