Design system

Colors

Bg main
Boxes
Borders
Text 1
Text 2
Text 3
Text 4
Text 5
Bg accent
Text accent 1
Text accent 2
Text accent 3
Color 1 dark
Color 1 base
Color 1 light
Color 1 light 2
Color 1 light 3
Color 1 transparent
Color 2 dark
Color 2 base
Color 2 light
Color 2 light 2
Color 2 light 3
Color 2 transparent
Stars rating
White
White transparent

https://colorkit.io/shades-tints

Title

Title 7 - The quick brown fox jumps over the lazy dog

Title 6 - The quick brown fox jumps over the lazy dog

Title 5 - The quick brown fox jumps over the lazy dog

Title 4 - The quick brown fox jumps over the lazy dog

Title 3 - The quick brown fox jumps over the lazy dog

Title 2 - The quick brown fox jumps over the lazy dog

Title 1 - The quick brown fox jumps over the lazy dog

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

Paragraph

Paragraph XL

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

Praesent vel lacus facilisis, accumsan massa vitae, vehicula lorem ipsum dolor.

Paragraph L

Aenean sit amet justo dui. Nunc nec velit ex. In ac scelerisque nisi, nec placerat accumsan dolor link example feugiat ligula elementum efficitur pellentesque.

Praesent vel lacus facilisis, accumsan massa vitae, vehicula lorem ipsum dolor.

Paragraph M (Base)

Aenean sit amet justo dui. Nunc nec velit ex. In ac scelerisque nisi, nec placerat accumsan dolor link example feugiat ligula elementum efficitur pellentesque.

Nunc nec velit ex. In ac scelerisque nisi, nec placerat mi. Maecenas feugiat ligula elementum efficitur pellentesque.

Paragraph S

Aenean sit amet justo dui. Nunc nec velit ex. In ac scelerisque nisi, nec placerat accumsan sit amet dolor link example feugiat ligula elementum efficitur pellentesque.

Nunc nec velit ex. In ac scelerisque nisi, nec placerat mi. Maecenas feugiat ligula elementum efficitur pellentesque.

Paragraph XS

Aenean sit amet justo dui. Nunc nec velit ex. In ac scelerisque nisi, nec placerat accumsan sit amet glavrida dolor link example feugiat ligula elementum efficitur pellentesque.

Nunc nec velit ex. In ac scelerisque nisi, nec placerat mi. Maecenas feugiat ligula elementum efficitur pellentesque.

Text

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

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.

Additional styles

Uppercase M
Uppercase S
Uppercase XXS
Uppercase XS
Number/Counter 1234567890

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
Instagram
Simple icons (social)
Unsplash
Pexels
SVG shapes