Design system

Colors

Background 1

Background 2

Separators

Headings

Content 1

Content 2

Contrast background

Contrast content

Accent 1 dark

Accent 1

Accent 1 light

Accent 1 transparent 1

Accent 1 transparent 2

Accent 2 dark

Accent 2

Accent 2 light

H1-H6

H1 Lorem ipsum dolor sit amet adipiscing elit.

H2 Lorem ipsum dolor sit amet adipiscing elit.

H3 Lorem ipsum dolor sit amet adipiscing elit.

H4 Lorem ipsum dolor sit amet adipiscing elit.

H5 Lorem ipsum dolor sit amet adipiscing elit.

H6 Lorem ipsum dolor sit amet adipiscing elit.

Buttons

Icons

https://atlasicons.vectopus.com/

https://remixicon.com/

Content Sizes

6X-Large
Lorem ipsum dolor sit amet consectetur adipiscing elit ullamcorper orci finibus.

5X-Large
Lorem ipsum dolor sit amet consectetur adipiscing elit ullamcorper orci finibus.

4X-Large
Lorem ipsum dolor sit amet consectetur adipiscing elit ullamcorper orci finibus. Quisque vel magna ullamcorper orci finibus pulvinar.

3X-Large
Lorem ipsum dolor sit amet consectetur adipiscing elit ullamcorper orci finibus. Quisque vel magna ullamcorper orci finibus pulvinar.

2X-Large
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin. Quisque vel magna ullamcorper orci finibus pulvinar.

X-Large
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin. Quisque vel magna ullamcorper orci finibus pulvinar.

Large
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin. Quisque vel magna ullamcorper orci finibus pulvinar.

Base
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin. Quisque vel magna ullamcorper orci finibus pulvinar consectetur adipiscing.

Small
Lorem ipsum dolor sit amet, consectetur adipiscing elit quam lacinia turpis vehicula, cursus luctus elit sollicitudin. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin. Quisque vel magna ullamcorper orci finibus pulvinar.

Based on https://type-scale.spencermortensen.com/

80-130 Spacing

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin.

Quisque vel magna ullamcorper orci finibus pulvinar. Sed nisl tortor, congue ut elit consequat, mattis posuere nunc. Etiam porttitor eu mauris vitae tristique.

65-90 Spacing

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin.

Quisque vel magna ullamcorper orci finibus pulvinar. Sed nisl tortor, congue ut elit consequat, mattis posuere nunc. Etiam porttitor eu mauris vitae tristique.

50-65 Spacing

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin.

Quisque vel magna ullamcorper orci finibus pulvinar. Sed nisl tortor, congue ut elit consequat, mattis posuere nunc. Etiam porttitor eu mauris vitae tristique.

40-50 Spacing

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin.

Quisque vel magna ullamcorper orci finibus pulvinar. Sed nisl tortor, congue ut elit consequat, mattis posuere nunc. Etiam porttitor eu mauris vitae tristique.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin.

Quisque vel magna ullamcorper orci finibus pulvinar. Sed nisl tortor, congue ut elit consequat, mattis posuere nunc. Etiam porttitor eu mauris vitae tristique.

30-40 Spacing

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin.

Quisque vel magna ullamcorper orci finibus pulvinar. Sed nisl tortor, congue ut elit consequat, mattis posuere nunc. Etiam porttitor eu mauris vitae tristique.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin.

Quisque vel magna ullamcorper orci finibus pulvinar. Sed nisl tortor, congue ut elit consequat, mattis posuere nunc. Etiam porttitor eu mauris vitae tristique.

25-30 Spacing

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin.

Quisque vel magna ullamcorper orci finibus pulvinar. Sed nisl tortor, congue ut elit consequat, mattis posuere nunc. Etiam porttitor eu mauris vitae tristique.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin.

Quisque vel magna ullamcorper orci finibus pulvinar. Sed nisl tortor, congue ut elit consequat, mattis posuere nunc. Etiam porttitor eu mauris vitae tristique.

20 Spacing

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin.

Quisque vel magna ullamcorper orci finibus pulvinar. Sed nisl tortor, congue ut elit consequat, mattis posuere nunc. Etiam porttitor eu mauris vitae tristique.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin.

Quisque vel magna ullamcorper orci finibus pulvinar. Sed nisl tortor, congue ut elit consequat, mattis posuere nunc. Etiam porttitor eu mauris vitae tristique.

15 Spacing

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin.

Quisque vel magna ullamcorper orci finibus pulvinar. Sed nisl tortor, congue ut elit consequat, mattis posuere nunc. Etiam porttitor eu mauris vitae tristique.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin.

Quisque vel magna ullamcorper orci finibus pulvinar. Sed nisl tortor, congue ut elit consequat, mattis posuere nunc. Etiam porttitor eu mauris vitae tristique.

10 Spacing

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin.

Quisque vel magna ullamcorper orci finibus pulvinar. Sed nisl tortor, congue ut elit consequat, mattis posuere nunc. Etiam porttitor eu mauris vitae tristique.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin.

Quisque vel magna ullamcorper orci finibus pulvinar. Sed nisl tortor, congue ut elit consequat, mattis posuere nunc. Etiam porttitor eu mauris vitae tristique.