Primary

Favicon

Typography

Two font families: Barlow (Medium 500) for headings and UI elements, Barlow (Regular 400) for body text. Display headings use FreightBig Pro (Light 300).

Display Headings

Display Serif

FreightBig Pro / Light 300 / 74px desktop / 52px mobile / Line height: 0.9 / Letter spacing: -0.01em / Title-case

Display Sans

Barlow / Medium 500 / 74px desktop / 52px mobile / Line height: 0.9 / Letter spacing: 0.01em / uppercase

Desktop Headings

Heading 1

Barlow / Medium 500 / 58px / Line height: 1.1 / Letter spacing: 0.01em / uppercase

Heading 2

Barlow / Medium 500 / 48px / Line height: 1.1 / Letter spacing: 0.01em / uppercase

Heading 3

Barlow / Medium 500 / 34px / Line height: 1.1 / Letter spacing: 0.01em / uppercase

Heading 4

Barlow / Medium 500 / 24px / Line height: 1.1 / Letter spacing: 0.01em / uppercase

Heading 5

Barlow / Medium 500 / 20px / Line height: 1.1 / Letter spacing: 0.01em / uppercase

Heading 6

Barlow / Semibold 600 / 16px / Line height: 1.1 / Letter spacing: 0.01em / uppercase

Body Text

Body Medium — The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

Barlow / Regular 400 / 18px / Line height: 1.3

Body Small — The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

Barlow / Regular 400 / 16px (base) / Line height: 1.3

Body Extra Small — The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

Barlow / Regular 400 / 14px / Line height: 1.3

Badge / Caption — The quick brown fox jumps over the lazy dog.

Barlow / Medium 500 / 12px / Line height: 1.3

Brand Colours

Brand Dark #35332C · rgb(53 51 44)

Brand Red #C63A36 · rgb(198 58 54)

Brand Brown #C8AD8B · rgb(200 173 139)

Brand White #FFFFFF · rgb(255 255 255)

Neutral Palette

Dark Grey #35332C · Primary Text

Olive Green #606342 · Secondary Text

Secondary Grey #5C5A53 · Alternate Text

Medium Grey #94938F · Disabled Text

Light Grey #F4F3F2

Sand #F9F4E7 · Dividers

System Colours

Success Usage: Success Text or buttons #0C5A30 RGB (12, 90, 48) HSL (148, 76, 20) HSB (148, 87, 35)

Error Usage: Error Text or buttons #BB2121 RGB (187, 33, 33) HSL (0, 70, 43) HSB (0, 82, 73)

Warning Usage: Warning Text or buttons #8A5E00 RGB (138, 94, 0) HSL (41, 100, 27) HSB (41, 100, 54)

Information Usage: Information Text or buttons #2B2B2B RGB (43, 43, 43) HSL (0, 0, 17) HSB (0, 0, 17)

Success Light Usage: Success background #DBFAE9 RGB (219, 250, 233) HSL (147, 76, 92) HSB (147, 12, 98)

Error Light Usage: Error background #F6CBCB RGB (246, 203, 203) HSL (0, 70, 88) HSB (0, 17, 96)

Warning Light Usage: Warning background #FFEABD RGB (255, 234, 189) HSL (41, 100, 87) HSB (41, 26, 100)

Information Light Usage: Information background #DCD4D0 RGB (220, 212, 208) HSL (20, 15, 84) HSB (20, 5, 86)

Colour Accessibility

All text colours are WCAG AA compliant. These colours apply to text only — background colours may be used freely.

Background	Group	WCAG	Accessible Colours
White	Brand	AA	Dark Grey, Red
	Neutrals	AA	Dark Grey, Olive Green, Secondary Grey
	System	AA	Success, Warning, Error, Info
Black	Brand	AA	White, Brown
Black	Neutrals	AA	Light Grey, Sand

Buttons — Solid

Large Solid Light — Default · Hover · Focused · Disabled

Large Solid Dark — Default · Hover · Focused · Disabled

Medium Solid — Light · Dark · Disabled

Buttons — Outline

Large Outline Dark — Default · Hover · Focused · Disabled

Large Outline Light (on dark background) — Default · Hover · Disabled

Medium Outline — Dark · Light

Buttons — Icon

Large Icon (40×40) — Solid Light · Solid Dark · Ghost Dark · Ghost Light · Outline Dark · Outline Light · Disabled

Medium Icon (32×32) — Solid Light · Solid Dark · Ghost Dark · Ghost Light · Outline Dark · Outline Light

Buttons — Text

Text Large Dark — Barlow Medium 500 / 16px / capitalize / underline

Text Large Light (on dark background)

Text Medium Dark — Barlow Medium 500 / 14px / capitalize / underline

Text Small Dark — Barlow Regular 400 / 14px / normal case / underline

Text Grey — Barlow Regular 400 / 14px / normal case / underline / grey text

Buttons — Text Links

Text Link — Barlow Regular 400 / 18px / underline / line-height 1.3

Text Link Light (on dark background)

Spacing Scale (8px base grid)

--space-2 · 2px

--space-4 · 4px

--space-8 · 8px

--space-12 · 12px

--space-16 · 16px

--space-24 · 24px

--space-32 · 32px

--space-40 · 40px

--space-48 · 48px

--space-64 · 64px

--space-80 · 80px

--space-96 · 96px

--space-128 · 128px

--space-160 · 160px

Border Radius

none (0)

default (6px)

Focus & Validation Rings

Focus

Focus (Dark)

Success

Error

Effect: Drop shadow / Spread: 1px / Colour: Brand Black (light), Brand White (dark), System Success, System Error

Grid & Layout

Breakpoint	Columns	Margin	Gutter	Max Width
Mobile (<768px)	4	16px	4px	—
Desktop (≥1025px)	12	50px	4px	1440px

Icons

Icons are rendered at three sizes: 16px (small UI), 24px (default), and 32px (mobile navigation). Sharp and rounded variants are available for navigation icons. Custom icons are used for cart, account, delivery, returns, and product feature badges.

arrow-down

arrow-left

arrow-right

cart

check

check-circle

clock

close

discount

error

eye

facebook

filter

hamburger

image

info

instagram

mail

map

phone

play

plus

search

shopping-bag

snapchat

spinner

spotify

tiktok

tumblr

twitter

unavailable

user

vimeo

youtube

zoom

Text Casing

The text-transform rules used across headings, body text, buttons, links, and badges.

Element	Casing	Example
Display (serif)	Title-case	Shop the Collection
Headings (H1–H6)	Upper-case	Shop The Collection
Subheading	Upper-case	Subheading
Paragraphs	Sentence-case	Shop the collection
Buttons (solid)	Upper-case	Button Text
Links (large)	Upper-case	Button Text
Links (small)	Sentence-case	Button text
Badges	Upper-case	Badge Text