Styleguide

Project Colors

Brand Colors

Typography

H1

The quick brown fox jumps
over the lazy dog 0123456789

H2

The quick brown fox jumps
over the lazy dog

H3

The quick brown fox jumps
over the lazy dog

H4

The quick brown fox jumps
over the lazy dog

H5
The quick brown fox jumps
over the lazy dog
Lead 1

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 0123456789

H6
The quick brown fox jumps
over the lazy dog
Lead 2

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Paragraph
Normal –

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.


Tighter + Bold –

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.


Tighter + Medium –

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.


Small 1 –

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.


Small 2 –

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.


Small 2 + Bold –

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.


Small 3 –

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.


Small 4 –

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.


Lists

Unordered list example

  • Lorem ipsum dolor sit
  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  • Lorem ipsum dolor sit
  • Lorem ipsum dolor sit

Ordered list example

  1. Lorem ipsum dolor sit
  2. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  3. Lorem ipsum dolor sit
  4. Lorem ipsum dolor sit

Button & Links

Links Text

Lorem ipsum dolor sit amet, consetetur link elitr, sed diam nonumy eirmod Mehr erfahren invidunt ut labore et dolore magna link erat, sed diam voluptua.

Gallery
Back Link
Accordion

Lorem Ipsum?

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Social
Footer link

Schliessen
Logo
S
M
L
XL
XXL