Style Guide

Brand

Logo primary

Logo alternatives

Social & Favicon

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

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 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 conse ctetur

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
List item two
List item three

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
List item two
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

u-line-clamp-3

u-line-clamp-4

Elements

Button Styles

data-button-style="default"

Button

data-button-style="secondary"

Button

Text Button

Button

Icon Button

Icons

Lines

Social Share

Badge

Accordion

How does this accordion component work?

How is JavaScript added to the component?

Inside this component, there is an embed block that contains all of the custom code needed for this accordion to function.

How do I understand the attributes added

We have full documentation for this accordion component here. You can use it to edit this component —or to build your own accessible accordion from scratch.

This component will only work on the published/exported site. Full documentation in Finsweet's Attributes docs.

How does this accordion component work?

This component uses custom JavaScript to open and close. Custom attributes and additional custom JavaScript is added to this component to make it accessible.

Notifications

Standard notification component.

Notification title

Standard notification component.

Alert! Something went wrong while submitting the form.

Success! That went well.

Cookie banner

Form

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

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

Button

data-theme="inherit"

Heading

Button

data-theme="dark"

Heading

Button

data-theme="invert"

Heading

Button

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.

Layout

Grid Utilities

u-grid-custom

u-grid-autofit

u-grid-subgrid

u-column

u-column-full

Max Widths

u-max-width-medium

u-max-width-small

Adaptive

Size

0.125

0.25

0.5

0.75

1.25

1.5

2.5

3.5

4.5

5.5

6.5

7.5

8.5

9.5

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"