Brand Guide

Logo

Color

Brand

100%
Auric Brand Gradient

The Auric gradient is used in the Auric colour logo.
The gradient colour stops are shown below.

100%
Brand Orange
HEX: #CB9C7D
RGB: 203, 156, 125
CMYK: 0, 23, 38, 20
100%
Brand Purple
HEX: #C09CAB
RGB: 192, 156, 171
CMYK: 0, 19, 11, 25
100%
Brand Green
HEX: #AEAF7F
RGB: 174, 175, 127
CMYK: 0, 0, 27, 31
100%
Brand Blue
HEX: #9EAEB7
RGB: 158, 174, 183
CMYK: 14, 5, 0, 28

Neutral

100%
Light 1
HEX: #F6F0E4
RGB: 246, 240, 228
CMYK: 0, 2, 7, 4
100%
Light 2
HEX: #FAF6F0
RGB: 250, 246, 240
CMYK: 0, 2, 4, 2
100%
Light 3
HEX: #FEFDFB
RGB: 254, 253, 251
CMYK: 0, 0, 2, 0
100%
Medium Grey
HEX: #98948E
RGB: 152, 148, 142
CMYK: 0, 3, 7, 40
100%
Dark 1
HEX: #2E2B2B
RGB: 46, 43, 43
CMYK: 0, 7, 7, 82
100%
Dark 2
HEX: #343232
RGB: 52, 50, 50
CMYK: 0, 4, 4, 80
100%
Dark 3
HEX: #3A3737
RGB: 58, 55, 55
CMYK: 0, 5, 5, 77

Oils

100%
Bergamot
HEX: #E3DDB5
RGB: 227, 221, 181
CMYK: 0, 3, 20, 11
100%
Clary Sage
HEX: #C4BFAA
RGB: 196, 191, 170
CMYK: 0, 3, 13, 23
100%
Eucalyptus
HEX: #B9BCA6
RGB: 185, 188, 166
CMYK: 2, 0, 12, 26
100%
Frankincense
HEX: #BB9780
RGB: 187, 151, 128
CMYK: 0, 19, 32, 27
100%
Lavender
HEX: #AD9C95
RGB: 173, 156, 149
CMYK: 0, 10, 14, 32
100%
Marjoram
HEX: #C6B69C
RGB: 198, 182, 156
CMYK: 0, 8, 21, 22
100%
Peppermint
HEX: #A4AFA9
RGB: 164, 175, 169
CMYK: 6, 0, 3, 31
100%
Ylang-Ylang
HEX: #D1BB96
RGB: 209, 187, 150
CMYK: 0, 11, 28, 18

Moods

100%
Calm
Reference colour:
Lavender
100%
Energy
Reference colour:
Frankincense
100%
Focus
Reference colour:
Clary Sage
100%
Sleep
Reference colour:
Peppermint

Themes

data-theme="light"

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Button
Button
data-theme="inherit"

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Button
Button
data-theme="dark"

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Button
Button
data-theme="invert"

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Button
Button
1
Choose your mood

Open the Auric app whenever you need a shift in mood. Choose CALM, FOCUS, ENERGY, or SLEEP to set your desired atmosphere.

Typography

The body font for Auric is Overpass and the heading font is Outfit. Both typefaces are available from Google fonts.

Font Styles

u-display-2

Heading

u-display-1

Heading

u-h1

Heading

u-h2

Heading

u-h3

Heading

u-h4

Heading

u-h5
Heading
u-h6
Heading
u-text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

u-text-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

u-text-xlarge

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

u-text-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

u-text-xsmall

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

Typography Elements

All Ordered List
  1. This is some text inside of a div block.
  2. This is some text inside of a div block.
  3. This is some text inside of a div block.
All Unordered List
  • This is some text inside of a div block.
  • This is some text inside of a div block.
  • This is some text inside of a div block.
All Block Quotes
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Rich Text

u-rich-text

Lorem ipsum dolor sit amet conse ctetur

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

Lorem ipsum dolor sit amet conse ctetur

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

Caption goes here with a link if required

Lorem ipsum dolor sit amet conse ctetur

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  • List item two
  • List item three

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

Lorem ipsum dolor sit amet conse ctetur

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  2. List item two
  3. List item three

Line Clamp

u-line-clamp-1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

u-line-clamp-2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

u-line-clamp-3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

u-line-clamp-4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Elements

Button Styles

data-button-style="default"
Button
Button
Button
data-button-style="secondary"
Button
Button
Button
Text Button
Button
Button
Button
Icon Button

Icons

Lines

Social Share

Notifications

Standard notification component.
Standard notification component.
Notification title
Standard notification component.
Alert! Something went wrong while submitting the form.
Success! That went well.

Cookie banner

We and selected partners, use cookies or similar technologies as specified in the cookie policy.
Reject
Accept
Preferences

Form

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Layout

Grid Utilities

u-grid-custom
u-grid-autofit
u-grid-subgrid
u-column
u-column-full

Adaptive

Size

0
0.125
0.25
0.5
0.75
1
1.25
1.5
2
2.5
3
3.5
4
4.5
5
5.5
6
6.5
7
7.5
8
8.5
9
9.5
10
11
12
13
14
15
16

Space

xsmall
small
main
medium
large
xlarge

Miscellaneous

Utilities

u-full
u-absolute-full
data-padding-top="none"
data-padding-bottom="none"
data-padding-top="small"
data-padding-bottom="small"
data-padding-top="main"
data-padding-bottom="main"
data-padding-top="large"
data-padding-bottom="large"