Subscribe
Contact Us

Colors

primary

cola #000

secondary

milk #fff

grayscale

milk #fff
cola #000

Typography

Font family

Aa

Font family Light

Aa

Font family Medium

Aa

Font family Bold

Heading 1

Font / weight:
Family weight
Font size:
size
Line height:
line-height
Letter spacing:
letter-spacing

The quick brown fox jumps over the lazy dog

Heading 2

Font / weight:
Family weight
Font size:
size
Line height:
line-height
Letter spacing:
letter-spacing

The quick brown fox jumps over the lazy dog

Heading 3

Font / weight:
Family weight
Font size:
size
Line height:
line-height
Letter spacing:
letter-spacing

The quick brown fox jumps over the lazy dog

Heading 4

Font / weight:
Family weight
Font size:
size
Line height:
line-height
Letter spacing:
letter-spacing

The quick brown fox jumps over the lazy dog

Heading 5

Font / weight:
Family weight
Font size:
size
Line height:
line-height
Letter spacing:
letter-spacing
The quick brown fox jumps over the lazy dog

Body

Font / weight:
Family weight
Font size:
size
Line height:
line-height

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque.

Paragraph links

Text decoration
underline

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque.

Unordered list

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aenean commodo ligula eget dolor.
  • Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  • Donec quam felis, ultricies nec, pellentesque.

Ordered list

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aenean commodo ligula eget dolor.
  3. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  4. Donec quam felis, ultricies nec, pellentesque.

System icons

Buttons

Primary button

Button text Button text Button text

Secondary button

Social button

Accordion

Accordion titel

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Accordion titel

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Accordion titel

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Inputs

Error message

Checkboxes

Active

Unactive

Radio buttons

Active

Unactive