Colours

Primary Colours


Brands primary brand color is the recognisable brand Green. The brands secondary color, Charcoal, functions as a base tone for contrast, while the Accent Red is used to highlight important information.

Primary

var(--color-primary-black)

Hex: #080c0f

Secondary

var(--color-primary-orange)

Hex: #8ad8f7

Accent


Should be used for accents and backgrounds paired with text for a good contrast ratio.

Accent One

var(--color-accent-red)

Hex: #ed1b3e

Accent Two

var(--color-accent-secondary-red)

Hex: #a31525

Background


Should be used for accents and backgrounds paired with text for a good contrast ratio.

Background One

var(--color-background-white)

Hex: #F6F4EE

Background Two

var(--color-white)

Hex: #ffffff

Alert / Error colour


Signal Colours are used solely for warnings and status messages.

Success

var(--color-success)

Hex: #6bbd4f

20 %

Alert

var(--color-warning)

Hex: #f0b743

20 %

Fail Red

var(--color-error)

Hex: #e45f5f

20 %

Fonts

Headings: Tungsten


Ab

Info


Tungsten is a sans-serif typeface released by Hoefler & Frere-Jones (now known as Hoefler & Co.) in 2009. This style of flat-sided sans-serif is known as gaspipe and was popular with poster designers of the twentieth century as the flat sides made it easy to space letters.

Symbols and numbers


ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789$£€/&@#%^*•()_+:;™

Weights


Semi bold

Bold

Body: Roboto


Ab

Info


Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves.

Symbols and numbers


ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789$£€/&@#%^*•()_+:;™

Weights


Regular

Bold


Heading One

.h1/h1 85px

Mobile Heading One

.h1/h1 64px

Heading Two

.h2/h2 72px

Mobile Heading Two

.h2/h2 45px

Heading Three

.h3/h3 45px

Mobile Heading Three

.h3/h3 30px

Heading Four

.h3/h3 30px

Mobile Heading Four

.h3/h3 23px

Heading Five
.h3/h3 23px
Mobile Heading Five
.h3/h3 18px

Heading Six
.h3/h3 18px
Mobile Heading Six
.h3/h3 16px

Paragraph Default

p, body 16 px

Paragraph Default

p, body 16 px

Paragraph Small

.body-small 14 px

Paragraph Small

.body-small 14 px

Navigation

.navigation 16px

Navigation

.navigation 16px

Button

.button 14 px

Button

.button 14 px

Label

label 14 px

Label

label 14 px

Caption

caption 12 px

Caption

caption 12 px

Icons

Icon library


In the icon library there are a wide range of icons available for all applications.


Global icons will be used consistently, whereas custom icons add unique character across the brand.


The icons have been simplified and made primarily monotone. Use the render 'icon-[name]' method to render an icon snippet.

UI icons

chevron-left
chevron-right
chevron-up
chevron-down
arrow-left
arrow-right
arrow-up
arrow-down
search
plus
minus
close
menu
check
heart
heart-full
shopping-bag
account
shipping-box
shipping
store
gift
email
calendar
location
share
zoom-plus
zoom-minus
filter
info
size-guide
play
pause
star
star-full
phone
view

Payment

amex
mastercard
visa
apple-pay
google-pay
shopify-pay
afterpay
paypal
jcb

Social

facebook
instagram
youtube
pinterest
gmail

Patterns/Textures

Textures


A range of provided patterns and textures are available to use from the brand style guide in the patterns library.

UI Components

Buttons


Buttons are used to initiate an action or trigger a link. Button labels express what action will occur when interacted with.


They should have clear and concise labels, with the option of a supporting icon if necessary for further clarification.

Anatomy


Anatomy

Primary


Default
Hover

Secondary


Default
Hover

Tertiary


Default
Hover

Icon Buttons


Default
Hover

UI Components

Navigation


The Primary Navigation bar in the site's header is show here, including the hover state.


Some pages will also include a Secondary Navigation which weill adopt a similar atyle, however, it will also include an active state indicator for the currently-active page.


On small viewports, the Primary Navigation could change into a slide-out menu, while the Secondary Navigation could change to a dropdown.

Input


Default
Hover

Tabs


Tags allow for an easy way to organize similar information into groups, without having to use separate pages to do so.

Default - Active
CH Classics
Asian Delights
Bella Italia
Bowls

List Navigation


Some navigation sections will use a vertical list as shown below. On smaller viewports, the navigation list could be changed to a dropdown or accordion.

List


Default
  • About
  • Our Guarantee
  • Rewards
  • Brands
  • Deliveries
  • Returns
Hover
  • About
  • Our Guarantee
  • Rewards
  • Brands
  • Deliveries
  • Returns

Breadcrumbs


Breadcrumbs are an important navigational element that supports wayfinding — making users aware of their current location within the hierarchical structure of a website.


To prevent breadcrumbs from becoming long and unwieldly on small viewports, they can be truncated.

Default
Shop / Category / Product
Truncated
Category / Product Title is extra lon...

Other UI Elements


Badges
New Arrival
Best Seller
Dairy-free
Lactose-free

Layout

Spacing


We are using an 4px grid, which means that the spacing across the page will be divisible by 4.


The spacing between elements should be consistent, and selected from the options below.

Grid


The flexible grid consists of 12 columns for Desktop and 2 columns for Mobile.


The spacing between the columns for both platforms is 8px, while the outer margins are 60px for Desktop and 16px for Mobile.