Typography
Headline H1 56px
Headline H2 40px
Headline H3 36px
Headline H4 30px
Headline H5 26px
Headline H6 20px
Headline H6 20px
Paragraph 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis bibendum mollis metus, id dictum justo eleifend nec. Donec ut arcu mauris. Aliquam luctus nisl dolor, id mollis ante viverra eu. Sed nec mauris leo. Vivamus vel congue nibh.
Paragraph 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis bibendum mollis metus, id dictum justo eleifend nec. Donec ut arcu mauris. Aliquam luctus nisl dolor, id mollis ante viverra eu. Sed nec mauris leo. Vivamus vel congue nibh.
Paragraph 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis bibendum mollis metus, id dictum justo eleifend nec. Donec ut arcu mauris. Aliquam luctus nisl dolor, id mollis ante viverra eu. Sed nec mauris leo. Vivamus vel congue nibh.
Paragraph 4 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis bibendum mollis metus, id dictum justo eleifend nec. Donec ut arcu mauris. Aliquam luctus nisl dolor, id mollis ante viverra eu. Sed nec mauris leo. Vivamus vel congue nibh.
Small Display Text
Medium Display Text
Large Display Text
Quote 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis bibendum mollis metus, id dictum justo eleifend nec. Donec ut arcu mauris. Aliquam luctus nisl dolor, id mollis ante viverra eu. Sed nec mauris leo. Vivamus vel congue nibh. Nunc fermentum rhoncus orci ac tincidunt. Aenean erat massa, fringilla a lorem at, tincidunt mattis neque.
Colors
Charcoal
50
100
200
300
400
500
600
700
800
900
Parchment
50
100
200
300
400
500
600
700
800
900
Sand
50
100
200
300
400
500
600
700
800
900
Sage
50
100
200
300
400
500
600
700
800
900
Dusk Teal
50
100
200
300
400
500
600
700
800
900
Eucalyptus
50
100
200
300
400
500
600
700
800
900
Clay Rose
50
100
200
300
400
500
600
700
800
900
Terracotta
50
100
200
300
400
500
600
700
800
900
Forest
50
100
200
300
400
500
600
700
800
900
Form Inputs
Text Inputs
Input States
Textarea & Disabled
Select & Dropdown
Checkboxes
Checkboxes, Radios & Toggles
Radio Buttons
Toggles
Sliders & Range
Badge Variants
Feedback & Status
Progress Bars
Circular Progress
Toast Notifications
Spinners
Skeleton Loaders
Single Open Mode
What to expect
How we can help
Past & Present
Overlays & Modals
Confirm Action
Are you sure you want to proceed? This action can be undone.
Destructive Modal
Delete Item
This action cannot be undone. All associated data will be permanently removed.
Date Picker
Badges, Tags & Chips
With Status Dots & Removable
Tag Group
Tab Styles
Accordion & Disclosure
Multiple Open Mode
Default Modal
Miscellaneous
File Upload