01. Colour Scheme
Gallery
Name: gallery
#EEEEEE
Alto
Name: alto
#D9D9D9
Silver
Name: silver
#BEBEBE
Alizarin Crimson
Name: alizarin-crimson
[$secondary]
#E72130
Monza
Name: monza
#BF0B19
Dune
Name: dune
[$primary]
#2C2A28
Bay of Many
Name: bay-of-many
[$tertiary]
#26358c
Fern Green
Name: fern-green
#4c7b33



Positive
Name: green-leaf
#2e6e0b
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.
© Plastics 4 Performance. All Rights Reserved