01. Colour Scheme
Primary
 
Black
Name: black
#000000
 
Brand Red
Name: brandred
[primary]
#DF2B2A
 
Dark Red
Name: darkred
[primary]
#A22B1D
Secondary
 
Burgundy
Name: burgundy
[secondary]
#6d3d4c
 
Light Blue
Name: lightblue
[secondary]
#0080b4
 
Dark Blue
Name: darkblue
[secondary]
#005270
Greys
 
Light Grey
Name: lightgrey
#F4F4F4
 
Medium Grey
Name: mediumgrey
#CCCCCC
 
Dark Grey
Name: darkgrey
#7F7F81
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


Regular title default

Regular body font

Bold body font

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.
chevron-up