Colour Palette

Base Colours

White
Gray-100
Gray-200
Gray-300
Gray-400
Gray-500
Gray-600
Gray-700
Gray-800
Warm Black

Functional Colours

Error
Error Light
Warning
Warning Light
Success
Success Light

Primary Colours

Primary
Primary Accent
Primary Light

Secondary Colours

Secondary
Secondary Accent
Secondary Light
Secondary Extra Light

Fonts

Switzer Regular

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz

Switzer Light

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz

Switzer Italic

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz

Louize Sans

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz

Louize Sans Italic

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz

Type Styles

* Header sizes are referred to as ‘Title’ as to not give confusion to the header precedent that will appear across different pages. For Example: Title 3 size may be used as a H1 on Product Pages.

Title 1 50/64, 36/44
Title 2 46/56, 32/40
Title 3 40/48, 28/36
Title 4 36/44, 24/30
Title 5 32/40, 20/26
Title 6 28/36, 18/22

Global (body) Text Styles

Large Text 20/26
Medium Text 18/22
Base Text 16/20
Small Text 14/18
Extra Small Text 12/16
Blog Title 28/36, 18/22
Footer Title 20/26, 18/22
Quote 28/36, 18/22
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

Icons

Navigation & Utility

#burger
#close
#account
#account_filled
#wishlist_filled
#shopping_bag
#shopping_bag_filled
#add_to_bag
#search
#location
#store
#add
#add_small
#minus
#arrow_left
#arrow_right
#up
#down
#left
#right
#download
#drag
#error
#filter
#information
#share
#sort
#tick
#zoom

Account

#settings
#address_book
#dashboard
#inbox
#logout
#options_vertical
#options_horizontal
#power
#refresh

Service

#calendar
#email
#express_delivery
#gift_wrap
#live_chat
#message
#packaging
#phone
#delivery
#secure

Social Media

#facebook
#instagram
#pinterest
#twitter
#whatsapp
#youtube
#tiktok

Video

Payment

Flags

Buttons & CTAs

Buttons

CTAs

Discover More Discover More Discover More

Form Fields

Name must be at least 3 letters long
Please enter a valid email address
Only numbers allowed, minimum 5 numbers
Minimum 5 characters
Please enter a valid date

How can we help?

How did you hear about us?

How should we contact you?

Tables

Title Title Title
Lorem Ipsum Lorem Ipsum Lorem Ipsum
Lorem Ipsum Lorem Ipsum Lorem Ipsum