Design System

Colors

Bg main
Bg main transparent
Bg Main Boxes
Borders
Text 1
Text 2
Text 3
Text 4
Text 5
Bg accent
Bg accent boxes
Text Accent 1
Text Accent 2
Text Accent 3
Color 2 dark
Color 2 base
Color 2 light
Color 2 light 2
Color 2 light 3
Color 2 transparent
Color 1 dark
Color 1 base
Color 1 light
Color 1 light 2
Color 1 light 3
Color 1 transparent
White
White transparent
https://icolorpalette.com/color/5E2ACC

Headings

Title 1 - Lorem ipsum dolor 123

Title 2 - Lorem ipsum dolor 123

Title 3 - Lorem ipsum dolor 123

Title 4 - Lorem ipsum dolor 123

Title 5 - Lorem ipsum dolor 123

Title 6 - Lorem ipsum dolor 123

https://typescale.com/
https://type-scale.spencermortensen.com/

Paragraph

Text XL

Aenean sit amet justo dui. Nunc nec velit ex. In ac scelerisque nisi, nec placerat mi. Maecenas feugiat ligula elementum efficitur pellentesque.

Text L

Aenean sit amet justo dui. Nunc nec velit ex. In ac scelerisque nisi, nec placerat mi. Maecenas feugiat ligula elementum efficitur pellentesque.

Text M

Aenean sit amet justo dui. Nunc nec velit ex. In ac scelerisque nisi, nec placerat mi. Maecenas feugiat ligula elementum efficitur pellentesque.

Text S

Fusce vitae enim et sapien finibus faucibus. Aenean sit amet justo dui. Nunc nec velit ex. In ac scelerisque nisi, nec placerat mi. Maecenas feugiat ligula elementum efficitur pellentesque.

Text XS

Fusce vitae enim et sapien finibus faucibus. Aenean sit amet justo dui. Nunc nec velit ex. In ac scelerisque nisi, nec placerat mi. Maecenas feugiat ligula elementum efficitur pellentesque.

Accent text (subtitles, lists etc.)

Accent XL

Aenean sit amet justo dui. Nunc nec velit ex. In ac scelerisque nisi, nec placerat mi. Maecenas feugiat ligula elementum efficitur pellentesque.

Accent L

Aenean sit amet justo dui. Nunc nec velit ex. In ac scelerisque nisi, nec placerat mi. Maecenas feugiat ligula elementum efficitur pellentesque.

Accent M

Aenean sit amet justo dui. Nunc nec velit ex. In ac scelerisque nisi, nec placerat mi. Maecenas feugiat ligula elementum efficitur pellentesque.

Accent S

Fusce vitae enim et sapien finibus faucibus. Aenean sit amet justo dui. Nunc nec velit ex. In ac scelerisque nisi, nec placerat mi. Maecenas feugiat ligula elementum efficitur pellentesque.

Accent XS

Fusce vitae enim et sapien finibus faucibus. Aenean sit amet justo dui. Nunc nec velit ex. In ac scelerisque nisi, nec placerat mi. Maecenas feugiat ligula elementum efficitur pellentesque.

Button styles

Button name
Button name
Button name
Button name
Button name
Button name
Button name
Button name
Button name
Button name
Button name
Button name
Button name
Button name
Button name
Button name
Button name
Button name
Button name
Button name
Button name
Button name
Button name
Button name
Button name
Button name
Button name
Button name
Button name
Button name

Form styles & sizes

Extra small
Small
Medium
Large
Extra Large
Icons & images
Phosphor icons
SVG masks
Images