Style Guide

Style Guide
Typography
Colour
Layout
Utilities
Spacing
Components

Logo

Logo primary

Logo alternatives

Social and favicon

Colour

Brand Primary

25%
100%
Ethereal Blue
HEX: #6BAFD2
RGB: 107, 175, 210
CMYK: 49, 17, 0, 18
25%
100%
Light 1
HEX: #F6EEE5
RGB: 246, 238, 229
CMYK: 2, 3, 10, 3
25%
100%
Dark 1
HEX: #292726
RGB: 41, 39, 38
CMYK: 0, 0, 0, 90

Brand Secondary

25%
100%
Lush Green
HEX: #69A297
RGB: 105, 162, 151
CMYK: 35, 0, 6, 37
25%
100%
Golden Glow
HEX: #E6AF2E
RGB: 230, 175, 46
CMYK: 0, 24, 80, 10
25%
100%
Dynamic Teal
HEX: #30A7B3
RGB: 48, 167, 179
CMYK: 73, 7, 0, 30

Greys / Backgrounds

25%
100%
Light 1
HEX: #F6EEE5
RGB: 246, 238, 229
CMYK: 2, 3, 10, 3
25%
100%
Light 2
HEX: #FFFFFF
RGB: 255, 255, 255
CMYK: 0, 0, 0, 0
25%
100%
Dark 1
HEX: #292726
RGB: 41, 39, 38
CMYK: 0, 0, 0, 90
25%
100%
Dark 2
HEX: #201F1D
RGB: 32, 31, 29
CMYK: 0, 0, 0, 100
25%
100%
Medium Grey
HEX: #908b86
RGB: 144, 139, 134
CMYK: 0, 0, 0, 45

Moods

25%
100%
Calm
HEX: #6AB6C9
RGB: 106, 182, 201
CMYK: 47, 9, 0, 21
25%
100%
Focus
HEX: #7B8B99
RGB: 123, 139, 153
CMYK: 19, 9, 0, 40
25%
100%
Energy
HEX: #FF7F50
RGB: 255, 127, 80
CMYK: 0, 50, 69, 0
25%
100%
Sleep
HEX: #A890D3
RGB: 168, 144, 211
CMYK: 21, 32, 0, 17

Oils

25%
100%
Lavender
HEX: #A19DC6
RGB: 161, 157, 198
CMYK: 19, 21, 0, 22
25%
100%
Peppermint
HEX: #77DD77
RGB: 119, 221, 119
CMYK: 28, 0, 28, 13
25%
100%
Eucalyptus
HEX: #6CB17E
RGB: 108, 177, 126
CMYK: 39, 0, 29, 0
25%
100%
Bergamot
HEX: #FDB462
RGB: 253, 180, 98
CMYK: 0, 29, 61, 0
25%
100%
Frankincense
HEX: #DAA520
RGB: 218, 165, 32
CMYK: 0, 24, 85, 0
25%
100%
Ylang-Ylang
HEX: #FFC12C
RGB: 255, 193, 44
CMYK: 0, 24, 83, 0
25%
100%
Clary Sage
HEX: #8CB18C
RGB: 140, 177, 140
CMYK: 21, 0, 21, 0
25%
100%
Roman Chamomile
HEX: #FFC98E
RGB: 255, 201, 142
CMYK: 0, 21, 44, 0

Typography

Fonts

Headings and display

Obviously Narrow

Obviously Narrow

Obviously Narrow

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed ante eget justo finibus viverra ac quis sem. Phasellus a felis lacinia, euismod dolor vel, elementum metus.

Body copy

Obviously

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed ante eget justo finibus viverra ac quis sem. Phasellus a felis lacinia, euismod dolor vel, elementum metus. Aenean a purus nec nisl bibendum bibendum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed ante eget justo finibus viverra ac quis sem. Phasellus a felis lacinia, euismod dolor vel, elementum metus. Aenean a purus nec nisl bibendum bibendum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed ante eget justo finibus viverra ac quis sem. Phasellus a felis lacinia, euismod dolor vel, elementum metus. Aenean a purus nec nisl bibendum bibendum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed ante eget justo finibus viverra ac quis sem. Phasellus a felis lacinia, euismod dolor vel, elementum metus. Aenean a purus nec nisl bibendum bibendum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed ante eget justo finibus viverra ac quis sem. Phasellus a felis lacinia, euismod dolor vel, elementum metus. Aenean a purus nec nisl bibendum bibendum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed ante eget justo finibus viverra ac quis sem. Phasellus a felis lacinia, euismod dolor vel, elementum metus. Aenean a purus nec nisl bibendum bibendum.

Specific web classes and utilities

Style Guide
Typography
Colour
Layout
Utilities
Spacing
Components