Colors
Primary
Primary
Ultra Light
Light
Semi Light
Semi Dark
Dark
Ultra Dark
10%
20%
30%
40%
50%
60%
70%
80%
90%
Secondary
Primary
Ultra Light
Light
Semi Light
Semi Dark
Dark
Ultra Dark
10%
20%
30%
40%
50%
60%
70%
80%
90%
Accent
Primary
Ultra Light
Light
Semi Light
Semi Dark
Dark
Ultra Dark
10%
20%
30%
40%
50%
60%
70%
80%
90%
Base
Primary
Ultra Light
Light
Semi Light
Semi Dark
Dark
Ultra Dark
10%
20%
30%
40%
50%
60%
70%
80%
90%
Semantic Colors
Success
Warning
Info
Danger
Headings & Text
Typography
The quick brown fox jumps over the lazy dog
h1
The quick brown fox jumps over the lazy dog
h2
The quick brown fox jumps over the lazy dog
h3
The quick brown fox jumps over the lazy dog
h4
The quick brown fox jumps over the lazy dog
h5
The quick brown fox jumps over the lazy dog
h6
The quick brown fox jumps over the lazy dog
h1 & L
This is large placeholder text. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet. Once we have your content finalized, we’ll replace this placeholder text with your real content.
The quick brown fox jumps over the lazy dog
h2 & m
This is default placeholder text. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet. Once we have your content finalized, we’ll replace this placeholder text with your real content.
The quick brown fox jumps over the lazy dog
h3 & s
This is small placeholder text. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet. Once we have your content finalized, we’ll replace this placeholder text with your real content.
Contextual Content Width & Spacing
General Spacing
Content Width
Grid Gap
Card Gap
Content Gap
Default Section Padding
Container Gap
Relative sizing and gaps
Width - XL
Width - L
Width - 50
Width - M
Width - S
Width - XS
Gap - XXL
Gap - XL
Gap - L
Gap - M
Gap - S
Gap - XS
Cards & Icons
Light Cards
Media Card
Here goes your text ... Select any part of your text to access the formatting toolbar.
Avatar Card
Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready.
dark cards
Media Card
Here goes your text ... Select any part of your text to access the formatting toolbar.
Avatar Card
Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready.