Colors

Primary
Secondary
Accent
Base
Black
White

Primary Color

Ultra Light
Light
Default
Medium
Dark
Ultra Dark
Hover
Comp
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90

Secondary Color

Ultra Light
Light
Default
Medium
Dark
Ultra Dark
Hover
Comp
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90

Accent Color

Ultra Light
Light
Default
Medium
Dark
Ultra Dark
Hover
Comp
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90

Base Color

Ultra Light
Light
Default
Medium
Dark
Ultra Dark
Hover
Comp
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90

Black & White Color

Ultra Light
Light
Medium
Medium
Dark
Ultra Dark
White
Black
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90

This is a heading 1

This is a heading 2

This is a heading 3

This is a heading 4

This is a heading 5
This is a heading 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis risus sed vulputate odio ut enim blandit volutpat maecenas. Habitant morbi tristique senectus et. Mauris ultrices eros in cursus turpis massa tincidunt dui ut. Ullamcorper eget nulla facilisi etiam dignissim diam quis enim lobortis.

Iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Cursus vitae congue mauris rhoncus aenean vel. Elit duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Nulla pellentesque dignissim enim sit amet venenatis urna. Arcu felis bibendum ut tristique et egestas quis. In est ante in nibh mauris.

Porta lorem mollis aliquam ut porttitor leo a diam. Risus commodo viverra maecenas accumsan lacus.

Ut sem viverra aliquet eget sit amet tellus cras. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing.

Malesuada bibendum arcu vitae elementum curabitur.
This is a text xs
This is a text s
This is a text m
This is a text l
This is a text xl
This is a text xxl
This is a text xxl larger

Buttons & Links

Paddings

var(--pad-xs)

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

var(--pad-s)

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

var(--pad-m)

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

var(--pad-l)

var(--pad-l) 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

var(--pad-xl)

var(--pad-xl) 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

var(--pad-xxl)

var(--pad-xxl) 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Box Shadows

var(--box-shadow--xs)
var(--box-shadow--s)
var(--box-shadow--m)
var(--box-shadow--l)
var(--box-shadow--xl)

Rounded corners

var(--rounded--xs)
var(--rounded--s)
var(--rounded--m)
var(--rounded--l)
var(--rounded--xl)
var(--rounded--xxl)
var(--rounded-circle)