Design

Colors

Primary
The action color for your website (buttons, links, etc.)
Secondary
An alternate to the primary color.
Accent
Typically the least used color on the website.
Base
Typically the darkest color or background color for the website.
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. text--xxl

Headline (h2)

Non rerum dolor in distinctio praesentium ut dolore dignissimos. text--xl

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. text--xl

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. text--m / default
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. --text-s
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-xs
text--xxl
text--xxl
text--m
text
text--s
text--xs
--shade-ultra-dark
--shade-dark
--shade-medium
--shade-light
--shade-ultra-light
--shade-black
--shade-black-trans-90
--shade-black-trans-80
--shade-black-trans-60
--shade-black-trans-40
--shade-black-trans-20
--shade-black-trans-10
--shade-white

Box Shadow

box-shadow--xl
box-shadow--l
box-shadow--m
box-shadow--s
coming soon
box-shadow--xs
coming soon

Rounded

rounded--xl
rounded--l
rounded--m
rounded--s
rounded--xs

Opacity

Quickly set opacity on any element - 5,10,20,30,40,50,60,70,80,90,95
rounded--xl
rounded--xl
rounded--xl
rounded--xl
rounded--xl
rounded--xl
rounded--xl
rounded--xl
rounded--xl
rounded--xl
rounded--xl

Rounded

works on images. position classes need object-fit--cover added too
object-fit--cover
test
object-fit--contain
test
object-fit--top-left
test
object-fit--top-center
test
object-fit--top-right
test
object-fit--center-left
test
object-fit--center-center
test
object-fit--center-right
test
object-fit--bottom-left
test
object-fit--bottom-center
test
object-fit--bottom-right
test

Flip

flip--x
height--30
flip--y
height--30
flip--xy
height--30

Flip

coming soon

Info Card

Tooltip with more links in the text like this one
Link Goes Here

Info Card

Tooltip with more links in the text like this one
Link Goes Here

Widths

Width full
Width xxl
Width xl
Width l
Width m
Width s
Width xs
Width width--vp-max
bg--primary
bg--secondary
bg--primary-trans-10
bg--black-trans-20
bg--black-trans-10
envelopephone-handsetmap-markerclockmagnifiercrossmenu linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram