Colour Palette
Brand Colours
Primary
Primary Light
Secondary
Secondary Light
Black
White
Default Colours
Gray-100
Gray-200
Gray-300
Gray-400
Gray-500
Gray-600
Gray-700 (Text Gray)
Functional Colours
Error
Success
Fonts
Spectral
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
DM Sans Regular
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
DM Sans Regular Italic
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
DM Sans Bold
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
DM Sans Bold 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 Styles
Title Super
Title Plus
Title 1
Title 2
Title 3
Title 4
Title 5
Title 6
Body Styles
Large Body
Medium Body
Regular Body - Default
Small Body
Tiny Body
Icons
Navigation & Utility
#burger
#close
#account
#account_filled
#wishlist
#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
#map-marker
#bin
#box
#chevron-left
#chevron-right
#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
Player
#pause
#sound-off
#sound-on
#close-video
Buttons & CTAs
Buttons - Light Background
Buttons - Dark Background
CTAs
Form Fields
Tables
| Title | Title | Title |
|---|---|---|
| Lorem Ipsum | Lorem Ipsum | Lorem Ipsum |
| Lorem Ipsum | Lorem Ipsum | Lorem Ipsum |