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
Stars Rating

https://icolorpalette.com/color/01C2CE

https://icolorpalette.com/color/2C74FF

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

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.

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 XS
Uppercase XXS
Number M - 1234567890
Number L - 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

Form styles & sizes

Extra small
Small
Medium
Large
Extra Large
Icons & images
Phosphor icons
Instagram
Simple icons (social)
Unsplash
Pexels
SVG shapes
Placeholder logos