Cohesive design language
Refine our visual language to be simpler, more fun and more communicative.
Expedite the design process
By abstracting our base styles layer, now developers can churn out UIs with minimal design input.
Style Guide
Overview
Introduction
Welcome to the Amber website style and brand guidelines.
Everything you need to know around the Amber brand and its usage can be found below, including downloadable logo and font files.
Go ahead and explore or get in touch with the team if you have any questions.
Last updated 29th October 2020.
Design
Logo
Download
SVG Logo Set
Download
PNG Logo Set
Brand Colours
Primary / 800
#20232D
900
#11131B
700
#2E3341
600
#414756
500
#5B606F
400
#7A808D
300
#949AAA
200
#BAC1CF
100
#DDE2EE
50
#F3F5FA
25
#FAFBFF
Secondary / 600
#1955FD
Gradient / Blue
#CBD7F9 - #A3BBFE
Tertiary / 600
#FDC119
Gradient / Yellow
#F3CE79 - #F2A902
System Colour
UI / 900
#0B0B0C
800
#343437
700
#505055
600
#6F6F74
500
#C2C2C2
400
#D9D9D9
300
#E1E1E1
200
#EAEAEA
100
#F3F3F3
50
#F9F9F9
25
#FFFFFF
Typography
H1 - Heading / Heebo / 58px
The quick brown fox jumps over the lazy dog.
H2 - Heading / Heebo / 48px
The quick brown fox jumps over the lazy dog.
H3 - Heading / Heebo / 38px
The quick brown fox jumps over the lazy dog.
H4 - Heading / Heebo / 28px
The quick brown fox jumps over the lazy dog.
H5 - Heading / Heebo / 23px
The quick brown fox jumps over the lazy dog.
H6 - Heading / heebo / 14px
The quick brown fox jumps over the lazy dog.
Body - XS / Heebo / 11px
The quick brown fox jumps over the lazy dog.
Body - S / Heebo / 13px
The quick brown fox jumps over the lazy dog.
Body - Base / Heebo / 16px
The quick brown fox jumps over the lazy dog.
Body - M / Heebo / 18px
The quick brown fox jumps over the lazy dog.
Body - L / HEEBO / 20px
The quick brown fox jumps over the lazy dog.
Body - XL / HEEBO / 22px
The quick brown fox jumps over the lazy dog.
