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
Inter
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
#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
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
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