Style Guide

Brand

Logo primary

Logo alternatives

Social & Favicon

Typography

The brand font is General Sans and is available for free on Fontshare.

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

Button

Secondary Button

Button

Text Button

Button

Icon Button

Icons

Form

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Notifications

Standard notification component.

Notification title

Standard notification component.

Alert! Something went wrong while submitting the form.

Success! That went well.

Cookie banner

Color

Brand

100%

25%

Primary

Coalesce Coral

HEX: #FF585D

RGB: 255, 88, 93

CMYK: 0, 75, 57, 0

Accent

100%

25%

Accent 1

Persian Green

HEX: #00A6A1

RGB: 0, 161, 161

CMYK: 79, 11, 42, 0

100%

25%

Accent 2

Blackcurrant

HEX: #332B3A

RGB: 51, 43, 58

CMYK: 74, 75, 51, 55

100%

25%

Accent 3

Allports

HEX: #007999

RGB: 0, 121, 153

CMYK: 100, 21, 0, 40

100%

25%

Accent 4

Persian Indigo

HEX: #726A95

RGB: 114, 106, 149

CMYK: 62, 62, 20, 2

100%

25%

Accent 5

Cochonnet

HEX: #FF8EBF

RGB: 255, 142, 191

CMYK: 0, 44, 25, 0

100%

25%

Accent 6

Tangerine Yellow

HEX: #FFCC00

RGB: 255, 204, 0

CMYK: 0, 20, 100, 0

Neutral

100%

25%

Dark 1

HEX: #242424

RGB: 36, 36, 36

CMYK: 0, 0, 0, 86

100%

25%

Dark 2

HEX: #292929

RGB: 41, 41, 41

CMYK:

100%

25%

Dark 3

HEX: #2e2e2e

RGB: 46, 46, 46

CMYK:

100%

25%

Dark 4

HEX: #383838

RGB: 56, 56, 56

CMYK: 0, 0, 0, 78

100%

25%

Light 1

HEX: #ffffff

RGB: 255, 255, 255

CMYK: 0, 0, 0, 0

100%

25%

Light 2

HEX: #f7f7f7

RGB: 247, 247, 247

CMYK:

100%

25%

Light 3

HEX: #f0f0f0

RGB: 240, 240, 240

CMYK:

100%

25%

Light 4

HEX: #e0e0e0

RGB: 224, 224, 224

CMYK: 0, 0, 0, 12

100%

25%

Medium

HEX: #8c8c8c

RGB: 140, 140, 140

CMYK: 0, 0, 0, 45

100%

25%

Medium 2

HEX: #8c8c8c @ 75%

RGB: 140, 140, 140, 0.75

CMYK:

100%

25%

Medium 3

HEX: #8c8c8c @ 50%

RGB: 140, 140, 140, 0.5

CMYK:

100%

25%

Medium 4

HEX: #8c8c8c @ 25%

RGB: 140, 140, 140, 0.25

CMYK:

Themes

data-theme="light"

Heading

Button

data-theme="inherit"

Heading

Button

data-theme="dark"

Heading

Button

data-theme="invert"

Heading

Button

label text

Layout

Grid Utilities

u-grid-custom

u-grid-autofit

u-grid-subgrid

u-column

u-column-full

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"