Styleguide

Farbpalette

#51A3DA

Hauptfarbe 

#7EC9C9

Haupt­far­be — Hover 

#9FB0AF

Aktionsfarbe 

#25C980

Akti­ons­far­be — Hover 

#222222

Schwarz // Text 

#424242

Dunk­les Grau 

#878787

Grau 

#BFBFBF

Mitt­le­res Grau 

#EEF0F1

Hel­les Grau 

Typografie

Heebo SemiBold 

Über­schrif­ten — Font Weight 600 

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z Ä Ö Ü ẞ
a b c d e f g h i j k l m n o p q r s t u v w x y z ä ö ü ß
0 1 2 3 4 5 6 7 8 9 | @ & % § ! ? € / # + — =

Inter Regular 

Text — Font Weight 400 

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z Ä Ö Ü ẞ
a b c d e f g h i j k l m n o p q r s t u v w x y z ä ö ü ß
0 1 2 3 4 5 6 7 8 9 | @ & % § ! ? € / # + — =

Fließtext mit Absatz und Aufzählung

Lorem ipsum dolor sit amet, con­sete­tur sadipscing elitr, sed diam nonumy eirm­od tem­por invidunt ut labo­re et dolo­re magna ali­quyam erat, sed diam voluptua.

At vero eos et accu­sam et jus­to duo dolo­res et ea rebum. Stet cli­ta kasd guber­gren, no sea taki­ma­ta sanc­tus est. Lorem ipsum dolor sit amet.

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet

At vero eos et accu­sam et jus­to duo dolo­res et ea rebum.

Skalierung

Desktop 

1.250 — Major Third 

Tablet 

1.200 — Minor Third 

Mobil 

1.125 — Major Second 

Body +4 | H1 — 44px

Body +3 | H2 — 35px

Body +2 | H3 — 28px

Body +1 | H4 – H6 — 22px

Body +4 | H1 — 37px

Body +3 | H2 — 31px

Body +2 | H3 — 26px

Body +1 | H4 – H6 — 22px

Body +4 | H1 — 29px

Body +3 | H2 — 26px

Body +2 | H3 — 23px

Body +1 | H4 – H6 — 20px

Nor­ma­le Text­grö­ße — 16px
Klei­ne Hin­weis­tex­te & Co. — 15px
Kleins­te Schrift­grö­ße — 12px
Nor­ma­le Text­grö­ße — 16px
Klei­ne Hin­weis­tex­te & Co. — 15px
Kleins­te Schrift­grö­ße — 12px
Nor­ma­le Text­grö­ße — 16px
Klei­ne Hin­weis­tex­te & Co. — 15px
Kleins­te Schrift­grö­ße — 12px

Button-Variationen

Primär 

Ausgefüllt 

Hier Kli­cken
Hier Kli­cken

Sekundär 

Eingerahmt 

Hier Kli­cken
Hier Kli­cken

Tertiär 

nur Text 

Hier Kli­cken
Hier Kli­cken

Formular-Design

This is how it shouldn’t be

Text mit Icon oben 

Lorem ipsum dolor sit amet, con­sete­tur sadipscing elitr, sed diam nonumy eirm­od tem­por invidunt ut labo­re et dolo­re magna ali­quyam erat, sed diam voluptua. 

Text mit Icon links 

Lorem ipsum dolor sit amet, con­sete­tur sadipscing elitr, sed diam nonumy eirm­od tem­por invidunt ut labo­re et dolo­re magna ali­quyam erat, sed diam voluptua. 

Text mit Icon links 

Lorem ipsum dolor sit amet, con­sete­tur sadipscing elitr, sed diam nonumy eirm­od tem­por invidunt ut labo­re et dolo­re magna ali­quyam erat, sed diam voluptua. 

  • Icon-Lis­te
  • Mit meh­re­ren Elementen
  • Lorem ipsum dolor sit amet

Border Radius

0px 

für CTA-Blö­cke o.Ä.

0px 

für Inhalts-Rah­men z.b. beim Impressum 

Layout System

Stan­dard Pad­ding per CSS in Ele­men­tor festgelegt

Abschnitte: 80px 20px 

Spalten: 10px rundherum