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.

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.

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.
Download
Heebo Font Family

Iconography

Build Wealth
Clock
Investing Made Simple
Graph
Download
Icon set

UI Components

Button styles

50px
Primary
Primary Button
40px
Primary
Primary Button
50px
Secondary
Secondary Button
40px
Secondary
Secondary Button
20px
Text Button
Text Button

Inputs

Back to top

© Amber Style Guide 2020. All Rights Reserved.

Start investing with Amber

Start investing from as little as $5 a month.

Available on

App Store
Google Play