01. Colour Scheme

KCS Guarantee
Name: $kcs-quarantee

#755f7c

KCS Gray
Name: $kcs-gray

#9b99b3

Aqua
Name: aqua
[$primary]

#1ba7b3

KCS Petrol
Name: kcs-petrol
[$secondary]

#007894

KCS Moss
Name: kcs-moss

#9ba933

KCS Petrol Light
Name: kcs-petrol-light

#c7d9e3

KCS Light
Name: kcs-lightr

#e7eff3;

KCS Green
Name: kcs-green

#58987b

KCS Flamingo
Name: kcs-flamingo

#ee6d78

KCS Mustard
Name: kcs-mustard

#d7b800

KCS Blue
Name: kcs-blue

#009fe4

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.