Styleguide
Logo-Variationen
Farbpalette neu
#FF8624
Primärfarbe
#CBDD8C
Sekundärfarbe
#A2D36B
Akzent
#1C1008
Schwarz // Überschriften
#4E4E4C
Dunkles Grau // Texte
#79716A
Grau
#D7D1CD
Mittleres Grau // Icons o.Ä.
#DCF1FE
Helles Grau // Abschnitte
#FFFFFF
Weiß
Farbpalette alt
#E8620D
Primärfarbe
-
Sekundärfarbe
-
Akzent
#242B2E
Schwarz // Überschriften
-
Dunkles Grau // Texte
#7A7A7A
Grau // Text bei Leistungen
#E9E9E9
Mittleres Grau // Icons o.Ä.
#F9F9F9
Helles Grau // Abschnitte
#FFFFFF
Weiß
Accessibility Check – Contrast Grid
|
Background
Text
|
#FFFFFF
|
#FCF8F4
|
#D7D1CD
|
#79716A
|
#4E4E4C
|
#1C1008
|
#E8620D
|
#FF8624
|
#CBDD8C
|
#A2D36B
|
|---|---|---|---|---|---|---|---|---|---|---|
|
Weiß
#FFFFFF
|
Text
AA
4.7
|
Text
AAA
8.3
|
Text
AAA
18.6
|
|||||||
|
Helles Grau
#FCF8F4
|
Text
AA
4.5
|
Text
AAA
7.8
|
Text
AAA
17.6
|
|||||||
|
Mittleres Grau
#D7D1CD
|
Text
AA
5.5
|
Text
AAA
12.3
|
||||||||
|
Grau
#79716A
|
Text
AA
4.7
|
Text
AA
4.5
|
||||||||
|
Dunkles Grau
#4E4E4C
|
Text
AAA
8.3
|
Text
AAA
7.8
|
Text
AA
5.5
|
Text
AA
5.6
|
Text
AA
4.7
|
|||||
|
Schwarz
#1C1008
|
Text
AAA
18.6
|
Text
AAA
17.6
|
Text
AAA
12.3
|
Text
AA
5.4
|
Text
AAA
7.7
|
Text
AAA
12.6
|
Text
AAA
10
|
|||
|
Primär (vorher)
#E8620D
|
Text
AA
5.4
|
|||||||||
|
Primär (neu)
#FF8624
|
Text
AAA
7.7
|
|||||||||
|
Sekundär
#CBDD8C
|
Text
AA
5.6
|
Text
AAA
12.6
|
||||||||
|
Akzent
#A2D36B
|
Text
AA
4.7
|
Text
AAA
10
|
||||||||
|
AAA Pass, AAA (7+)
AA Pass, AA (4.5+)
AA18 Pass, Large Text Only (3+)
DNP Does Not Pass
|
||||||||||
Typografie
Poppins für Überschriften und Text
400 (Regular), 500 (Medium), 600 (Semi Bold) und 700 (Bold)
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 | @ & % § ! ? € / # + – =
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 | @ & % § ! ? € / # + – =
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 | @ & % § ! ? € / # + – =
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, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus 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 accusam et justo duo dolores et ea rebum.
Skalierung
Desktop
1.250 - Major Third
H1 - 44px
skip 35px
H2 - 28px
H3 - 22px
Tablet
1.200 - Minor Third
H1 - 37px
skip 31px
H2 - 26px
H3 - 22px
Mobil
1.125 - Major Second - Base: 16px
H1 - 26px
skip 23px
H2 - 20px
H3 - 18px
Skalierung vorher
Desktop
H1 - 32px
H2 - 29px
H3 - 26px
Team-Name - 21px
Team-Position - 16,4px
Tablet
H1 - 24px
H2 - 29px
H3 - 26px
Team-Name - 21px
Team-Position - 16,4px
Mobil
H1 - 24px
H2 - 29px
H3 - 26px
Team-Name - 21px
Team-Position - 16,4px
Icons
Text mit Icon oben
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Text mit Icon links
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Text mit Icon links
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Formulare
CTAs & Flächen
8px Border Radius
für CTA-Blöcke, Mitarbeiter-Karten o.Ä.
und minimaler box-shadow:
0px 0px 10px 0px rgba(0, 0, 0, 0.05);
Layout System
Website-Einstellungen
1280px Inhaltsbreite
Boxed-Layout für äußere Container
0px Padding rundherum
Für alle Container
20px Gap zwischen Elementen
CSS im Child-Theme
80px Padding oben und unten
40px Mobil - überschreibbar
40px Padding rechts und links
20px Mobil - NICHT überschreibbar
Gestaltungsregeln
Innere Container auf "Volle Breite"
Boxed-Layout für äußere Container
Abstände: Vielfaches von 20px
20px | 40px | 80px | 160px
Optionen
20px Gap zwischen Spalten
20px Gap zwischen Elementen
z.B. bei Aufzählungen mit Icon-Boxen