1
Client Version

Chaos to Calm
Client Style Kit

Purchase
$38

Introduction

This website style kit is a reference to the basic styling elements of the website that contribute to the look, feel and experience.

Colour Palette

Primary Palette

Fill Colours
Sky Blue
#61ceed
Dodger Blue
#0c9afe
Yellow
#d4dc1f
Coral
#ff7324
Medium Violet Red
#c81ea1

Secondary Palette

Pastel Colours
Mint Cream
#e8f1f0
Moon Raker
#d5dff7
Off Green
#e9f9f0
Health
#fffaf1
Chardon
#fff3f1

Typograhy Palette

Grey Colours
Downriver
#0a1f44
Port Gore
#4e5d78
Regent Gray
#8a94a6
Cadet Blue
#b0b7c3

Typograhy Palette

Neutral Tone
Ghost
#c1c7d0
Athens Gray
#ebecf0
Casper
#fafbfc
White
#ffffff

Typography Styles

Looking for something else? View the glossary

Headings

Typography - Inter Bold

Aa Bb Cc Dd Ee

Heading 1

Aa Bb Cc Dd Ee

Heading 2

Aa Bb Cc Dd Ee

Heading 3

Aa Bb Cc Dd Ee

Heading 4
Aa Bb Cc Dd Ee
Heading 5
Aa Bb Cc Dd Ee
Heading 6

Body Copy

Typography - Inter

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of  type and scrambled it to make a type specimen book.

Paragraph Large

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of  type and scrambled it to make a type specimen book.

Paragraph Normal

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of  type and scrambled it to make a type specimen book.

Paragraph Small

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of  type and scrambled it to make a type specimen book.

Detail Messages

Quotes

Typography - Inter
The ultimate Interface component kit built to create harmony across your products.
Plain Quote Block
The ultimate Interface component kit built to create harmony across your products.
Additional Detail Messages

Additional Copy Elements

Typography - San Francisco
  • Example Item 1
  • Example Item 2
  • Example Item 3
List Items - Dots
  • Example Item 1
  • Example Item 2
  • Example Item 3
List Items - Numbers
  • Example Item 1
  • Example Item 2
  • Example Item 3
List Items - Letters

Additional Copy Elements

Typography - San Francisco

This line rendered as bold text.

Bold Text

This line rendered as italicized text.

Italicized Text

This line of text is meant to be treated as deleted text.

Deleted Text

This line of text is meant to be treated as deleted text.

Underline Text

You can use the mark tag to highlight text.

Highlight Text

Elevation & Shadows

Looking for something else? View the glossary

Elevation and Shadows

Outter Shadow, Inner Shadow
Shadow
S1
Shadow
S2
Shadow
S3
Shadow
S4
Shadow
S5
Shadow
S1
Shadow
S2
Shadow
S3

Avatars

Looking for something else? View the glossary

Primary Buttons

Corner Radius
X Large
96px
Large
40px
Medium
32px
Small
24px
X Small
18px

TB

X Large
96px

TB

Large
40px

T

Medium
32px

T

Small
24px

T

X Small
18px

Buttons

Looking for something else? View the glossary

Field Elements

Looking for something else? View the glossary

Form Fields

Input Fields

Field Elements

Input Fields
Intruction text here
Intruction text here
Intruction text here
Intruction text here
Intruction text here
Intruction text here
Intruction text here
Intruction text here
Intruction text here
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Alert Bars

Looking for something else? View the glossary

Notification

Input Fields
Looks like we're having trouble
Default Alert Error
Looks like we're having trouble
Warning Alert
Looks like we're having trouble
Error Alert
Your information has been saved.
Default Alert Check
Your information has been saved.
Default Alert Grey
Your information has been saved.
Confirm Alert

Badges

Looking for something else? View the glossary

Pill Badges

Corner Radius
5
32
32
32
32
5
32
3
22
3

Contextual Badges

Corner Radius
Default
Primary
Success
Warning
Error
Default
Primary
Success
Success
Success

Version Control

Corner Radius
1
Version 1.0
1
Version 1.0
1
Version 1.0
1
Version 1.0
1
Version 1.0
1
Version 1.0
1
Version 1.0
1
Version 1.0
1
Version 1.0
1
Version 1.0
Success! Thank you for subscribing.
Oops! Something went wrong while submitting the form.