01. Colour Scheme
White
Name: $white
#F8F8F8
Tile Blue
Name: tile-blue
[$primary]
#4197b5
Aqua
Name: aqua
[$secondary]
#82d2e8
Nile Blue
Name: nile-blue
[$tertiary]
#1a3c4a
Red
Name: red
[$red]
#e5554f
Dark Grey
Name: dark-grey
[$dark]
#343d3a
Border Grey
Name: border-grey
[$border]
#c8c6cc
Mid Grey
Name: mid-grey
[$mid]
#efeff2
Light Grey
Name: light-grey
[$light]
#f8f8f8



Positive
Name: green-leaf
#3CC275
Negative
Name: miliano-red
#b70e0e
Caution
Name: sunflower
#ded31e
Neutral
Name: picton-blue
#1BA8E9
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)
Link
Type
Volume
Frequency
Use
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
This is a required field.
Checkboxes
Radio Button
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.
loader
Loading...