Colors

20%
40%
60%
80%
90%
Primary
The action color for your website (buttons, links, etc.)
20%
40%
60%
80%
90%
Secondary
An alternate to the primary color.
20%
40%
60%
80%
90%
Accent
Typically the least used color on the website.
20%
40%
60%
80%
90%
Base
Typically the darkest color or background color for the website.
20%
40%
60%
80%
90%
Shade
Default black base. Adjust if you want to slightly change its hue. Adjustments won't effect "white" or "black" classes.

Typography

Headline (h1)

Non rerum dolor in distinctio praesentium ut dolore dignissimos. Est quia autem quo similique laboriosam quo molestias consequuntur in dicta consequatur et consequatur labore sed ducimus quia. Ex distinctio quasi officia quidem eos earum cumque quo dolorem repudiandae in enim sequi a consequuntur enim. Ad quia sequi hic ipsa voluptatem sed ratione atque 33 quia expedita sit amet voluptatum et quasi ipsum.

Headline (h2)

Non rerum dolor in distinctio praesentium ut dolore dignissimos. Est quia autem quo similique laboriosam quo molestias consequuntur in dicta consequatur et consequatur labore sed ducimus quia. Ex distinctio quasi officia quidem eos earum cumque quo dolorem repudiandae in enim sequi a consequuntur enim. Ad quia sequi hic ipsa voluptatem sed ratione atque 33 quia expedita sit amet voluptatum et quasi ipsum.

Headline (h3)

Non rerum dolor in distinctio praesentium ut dolore dignissimos. Est quia autem quo similique laboriosam quo molestias consequuntur in dicta consequatur et consequatur labore sed ducimus quia. Ex distinctio quasi officia quidem eos earum cumque quo dolorem repudiandae in enim sequi a consequuntur enim. Ad quia sequi hic ipsa voluptatem sed ratione atque 33 quia expedita sit amet voluptatum et quasi ipsum.

Headline (h4)

Non rerum dolor in distinctio praesentium ut dolore dignissimos. Est quia autem quo similique laboriosam quo molestias consequuntur in dicta consequatur et consequatur labore sed ducimus quia. Ex distinctio quasi officia quidem eos earum cumque quo dolorem repudiandae in enim sequi a consequuntur enim. Ad quia sequi hic ipsa voluptatem sed ratione atque 33 quia expedita sit amet voluptatum et quasi ipsum.
Headline (h5)
Non rerum dolor in distinctio praesentium ut dolore dignissimos. Est quia autem quo similique laboriosam quo molestias consequuntur in dicta consequatur et consequatur labore sed ducimus quia. Ex distinctio quasi officia quidem eos earum cumque quo dolorem repudiandae in enim sequi a consequuntur enim. Ad quia sequi hic ipsa voluptatem sed ratione atque 33 quia expedita sit amet voluptatum et quasi ipsum.
Headline (h6)
Non rerum dolor in distinctio praesentium ut dolore dignissimos. Est quia autem quo similique laboriosam quo molestias consequuntur in dicta consequatur et consequatur labore sed ducimus quia. Ex distinctio quasi officia quidem eos earum cumque quo dolorem repudiandae in enim sequi a consequuntur enim. Ad quia sequi hic ipsa voluptatem sed ratione atque 33 quia expedita sit amet voluptatum et quasi ipsum.
text--xxl
text--xxl
text--m
text
text--s
text--xs