Typography
Colors
Elements
Buttons
Forms
Icons
Style Guide
Edit the following Elements directly in this Style Guide. All changes will be reflected across the Library.
Typography
Font
Poppins
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*()
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
- Item 1
- Item 2
- Item 3
Unordered list
- Item A
- Item B
- Item C
Bold text
Emphasis
Superscript
Subscript
Neutral Colors
Aa
Neutral 50
Aa
Neutral 100
Aa
Neutral 200
Aa
Neutral 300
Aa
Neutral 400
Aa
Neutral 500
Aa
Neutral 600
Aa
Neutral 700
Aa
Neutral 800
Aa
Neutral 900
Primary Colors
Aa
Primary Main
Aa
Primary Light
System Colors
Aa
Red 100
Aa
Red 200
Aa
Red 300
Aa
Red 400
Aa
Green 100
Aa
Green 200
Aa
Green 300
Aa
Green 400
Aa
Orange 100
Aa
Orange 200
Aa
Orange 300
Aa
Orange 400
Shadows
Drop Shadow Small
Drop Shadow Medium
Drop Shadow Large
Drop Shadow Extra Large
Buttons
Button Secondary Small
Button Outline Small
Button Clear Small
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
Component Name:
Input Field + Button
Class Names:
Checkbox Field, Checkbox Label, Checkbox
Class Names:
Radio Field, Radio Label, Radio