Design System

Colours

Background
#F8F6F2

Surface
#FFFFFF

Primary Text
#2F2F2F

Secondary Text
#6B6B6B

Primary Accent
#4E6654

Secondary Accent
#A88C5A

Border
#E8E3DA

Success
#708B75

Error
#B85C5C

Typography

H1
Cormorant Garamond
48px
600

H2
Cormorant Garamond
36px
600

H3
Cormorant Garamond
28px
600

Body
Inter
18px
400

Small Text
Inter
15px
400

Buttons
Inter
16px
600
Upper & Lower Case (not ALL CAPS)

Buttons

Hero

Purpose
Create an immediate emotional connection.

Layout
————————————————-
Large Hero Image (16:9)

H1

Short introductory paragraph (max 35 words)

Primary Button

Optional breadcrumb
————————————————-

Rules

• One strong image only.
• Never use image sliders.
• Maximum one button.
• Keep text left aligned.
• Never place products in the hero.
• Plenty of white space.

Introduction

Purpose
Explain the page in simple language.

Rules

• Maximum 2 paragraphs.
• Reading width 760px.
• No more than 150 words.
• Write for humans first.
• Answer the visitor’s first question.

Callout Box

Buying Guide

Product Section

FAQ

Collections

Journal Cards

Call to Action

CSS Classes

Hero HTML v1.0

Home / Candles & Light

Candles & Light

Discover thoughtfully chosen candles, lanterns and candle holders that bring warmth, calm and timeless character to your home. Explore the Collection