01. Colour Scheme

White
Name: $white

#ffffff

Black
Name: $black
[$primary]

#000000

Red
Name: Red
[$secondary]

#d61130

Gray 875
Name: gray-875
[$dark]

#373737

Gray 150
Name: gray-150
[$light]

#eeeded

Positive
Name: sage

#89a176

Negative
Name: ruby

#852335

Caution
Name: ochre

#cc9900

Neutral
Name: aquamarine

#4f8a8c

Name: Go Ben

#71644C

Name: Amulet

#79A17B

Name: Straw

#D5D07B

Name: Green Smoke

#A7A660

Name: Congress Blue

#004C84

Name: Breaker Bay

#53989B

Name: Pelorous

#4F9EC5

Name: Galliano

#D59F0B

Name: Wafer

#DFD4C9

Name: Pompadour

#590055

Name: Burgundy

#93002E

Name: Pampas

#F8F7F3

Name: Cabaret

#D8406D

02. Typography

Header Font

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz 1234567890!@#$%^&*()_+<>

Body Font

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz 1234567890!@#$%^&*()_+<>

Hero Titles

THIS IS A HERO TITLE

Header Styles with Responsive Fluid Scaling

H1 Heading Level 1

H2 Heading Level 2

H3 Heading Level 3

H4 Heading Level 4

H5 Heading Level 5

H6 Heading Level 6

Extra Bold title

Semi-bold title

Regular title

Body Copy Sizing

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquam architecto at beatae consectetur debitis eligendi esse harum magni natus perspiciatis provident quidem quod quos sequi totam unde, velit veritatis! Excepturi harum hic impedit nostrum rem repudiandae. Aliquam dolor, minima nam pariatur qui quibusdam quod rerum unde velit voluptas? Cumque doloremque et incidunt iure laborum! Accusamus aliquid atque blanditiis consequuntur culpa cupiditate, doloribus facere fugiat inventore itaque iure iusto labore magnam magni maiores natus nobis officiis quae quibusdam ratione rem voluptas voluptatibus. Ad deleniti ducimus eligendi expedita impedit, incidunt odio officia? Assumenda ex facilis in itaque laborum ratione sequi temporibus!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aspernatur commodi eos fugit hic necessitatibus nemo nisi, odit quae reprehenderit! Aspernatur corporis culpa deleniti dolorem et impedit in incidunt, nobis officia placeat possimus provident ratione recusandae repellendus reprehenderit repudiandae sit suscipit unde vel voluptates. Ad corporis dicta dolorem ducimus expedita facere fugiat, id illo ipsum itaque laudantium officiis quas, saepe.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, cupiditate delectus dignissimos eligendi illo laboriosam laborum qui quo quos reprehenderit?

03. UI Elements

Buttons (Loudness Guide)

Graphic

Scream

Selectively

Promo

button-base button-promo

Button

Yell

Rare

Brand, Registration, help

button-base button-yell

Button

Shout

Occasionally

Editing, Actions

button-base button-shout

Button

Cheer
Cheer Inverted

Often

Primary Button

button-base button-cheer

button-base button-cheer-inverted

Button

Murmur

Occasionally

Secondary Button

button-base button-murmur

Link

Whistle

Often

Primary text link

button-base button-whistle

Link

Whisper

Occasionally

Secondary text link

button-base button-whisper

03. Inputs

Form

First name

Last name

Email

This is a required field.

Password

Type of business

Checkboxes

Choice one

Choice two

Choice three (disabled)

Radio Button

Radio one

Radio two

Radio three (disabled)

04. Site Messages

Successfully completed the action that has happened.

Failed to complete the action that has happened.

This message is a warning.

This message is for your information.

This section is empty.

This section is for your notice.