Style Guide

Edit the following Elements directly in this Style Guide. All changes will be reflected across the Library.

Typography

Font
Lora

Heading 1

Class Name:
Heading H1

Heading 2

Class Name:
Heading H2

Heading 3

Class Name:
Heading H3

Heading 4

Class Name:
Heading H4

Heading 5

Class Name:
Heading H5

Heading 6

Class Name:
Heading H6
Text Small (14px)
Class Name:
Text Small Light
Class Name:
Text Small Regular
Class Name:
Text Small Medium
Class Name:
Text Small Bold
Text Normal (16px)
Class Name:
Text Normal Light
Class Name:
Text Normal Regular
Class Name:
Text Normal Medium
Class Name:
Text Normal Bold
Text Large (18px)
Class Name:
Text Large Light
Class Name:
Text Large Regular
Class Name:
Text Large Medium
Class Name:
Text Large Bold
Rich Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Neutral Colors

Aa
Neutral 50
#F6F5F5
Aa
Neutral 100
#e7e6e6
Aa
Neutral 200
#d2cfd0
Aa
Neutral 300
#b3adae
Aa
Neutral 400
#8c8485
Aa
Neutral 500
#71696a
Aa
Neutral 600
#605a5b
Aa
Neutral 700
#524c4d
Aa
Neutral 800
#474343
Aa
Neutral 900
#3e3b3b

Primary Colors

Aa
Primary Main
#5653e0
Aa
Primary Light
#eeeefd

System Colors

Aa
Red 100
#febebe
Aa
Red 200
#f38787
Aa
Red 300
#e05353
Aa
Red 400
#dd4040
Aa
Green 100
#c3ffc1
Aa
Green 200
#83ea82
Aa
Green 300
#45b542
Aa
Green 400
#298727
Aa
Orange 100
#ffe3ca
Aa
Orange 200
#f9b77b
Aa
Orange 300
#f59d4c
Aa
Orange 400
#e77812

Shadows

Drop Shadow Small
Drop Shadow Medium
Drop Shadow Large
Drop Shadow Extra Large

Input

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Class Name:
Input Field
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Class Name:
Input Field / Text Area
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Class Name:
Input Field / Select
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Component Name:
Input Field + Button
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Class Names:
Checkbox Field, Checkbox Label, Checkbox
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Class Names:
Radio Field, Radio Label, Radio

Icons

Class Name:
Social Icons Wrapper, Social Icon Container, Social Icon