Style Guide

Overview

Introduction

Welcome to the expensemanager website style and brand guidelines.

Everything you need to know around the expensemanager 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 22nd October 2020.

Purpose

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.

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.

100% Client Satisfaction
We strive to achieve the highest client satisfaction, and thats our promise.
Reduce costs & time by up to 85%
Our solution has been proven to cut time & resources by eliminating tedious processes.
Local Everything
We are a local Australian company, just like you - from development to support.
Click Here
"A key advantage of expensemanager is their responsiveness to our needs and willing to customise the product to our complex requirements."
Andrew Deane
Financial Controller
"We have saved hard dollars on printing, filing, storage and man-hours. The return on investment IS absolutely there!"
Gavin Finn
Financial Accountant

Book a Demo with your local specialist.

 

Book in a risk free, one-on-one demo with one of our specialists to demonstrate why expensemanager is the leading spend management tool.

By registering you agree with the T&C’s and Privacy Policy.

tripReconcile

Free Savings Consultation

We are local, just like you

Enquire now for a no-obligation consultation with your local specialist to see how much time and money you can save!

By registering above, you agree with the T&C’s and Privacy Policy.

simplifyExpenses

Before you go!

Download your Free Cost Saving Guide to seamlessly calculate the time & money you can save through Automation.

By registering above, you agree with the T&C’s and Privacy Policy.