Style Guide

Overview

Introduction

Aliquam vel libero at justo porta elementum sit amet ac diam. Etiam viverra posuere justo, sit amet placerat turpis mollis id. Etiam metus justo, fringilla in cursus quis, consectetur eu arcu. Etiam ultrices laoreet rhoncus. Sed porta suscipit ipsum vitae rutrum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque suscipit iaculis lorem, eu consectetur dolor. Pellentesque nibh nisi, efficitur sit.

Purpose

Cohesive design language

Etiam ultrices laoreet rhoncus. Sed porta suscipit ipsum vitae rutrum. Interdum et malesuada fames ac ante ipsum primis in faucibus pellentesque.

Cohesive design language

Etiam ultrices laoreet rhoncus. Sed porta suscipit ipsum vitae rutrum. Interdum et malesuada fames ac ante ipsum primis in faucibus pellentesque.

Brand Colours

Primary
#307FE2
Secondary
#00D8B7
Primary Dark
#063781
Secondary Dark
#01373F
Primary Light
#F4FAFF
Secondary Light
#E1FAF6

System Colour

White
#FFFFFF
Grey 1
#F9FBFF
Grey 2
#F3F7FF
Grey 3
#E5ECFA
Grey 4
#CAD3E5
Grey 5
#9BA8C3
Grey 6
#7B869D
Grey 7
#556077
Dark
#1E2533
Success Dark
#01373F
Info Dark
#065495
Warning Dark
#C05621
Error Dark
#C53030
Success
#00D8B7
Info
#4299E1
Warning
#ED8936
Error
#F56565
Success Light
#ECFCF9
Info Light
#E4F3FF
Warning Light
#FFFAF0
Error Light
#FFF5F5

Typography

H1 - Heading / 48px
The quick brown fox jumps over the lazy dog.
H2 - Heading / 44px
The quick brown fox jumps over the lazy dog.
H3 - Heading / 38px
The quick brown fox jumps over the lazy dog.
H4 - Heading / 28px
The quick brown fox jumps over the lazy dog.
H5 - Heading / 23px
The quick brown fox jumps over the lazy dog.
H6 - Heading / 14px
The quick brown fox jumps over the lazy dog.
Body - XS / 11px
The quick brown fox jumps over the lazy dog.
Body - Base / 16px
The quick brown fox jumps over the lazy dog.
Body - M / 18px
The quick brown fox jumps over the lazy dog.
Body - L / 20px
The quick brown fox jumps over the lazy dog.
Body - XL / 22px
The quick brown fox jumps over the lazy dog.

UI Components

Buttons

Regular
Primary - Solid
Small
Primary - Solid
Regular
Primary - Ghost
Small
Primary - Ghost
Regular
Secondary - Solid
Small
Secondary - Solid
Regular
Secondary - Ghost
Small
Secondary - Ghost
Regular
Text Button

Inputs

Base Input / Solid
Base Input / Solid
Search Input / Solid
Search Input / Ghost
Message Input / Solid
Message Input / Ghost

© expensemanager Style Guide 2020. All Rights Reserved.