Styleguide

Logo-Variationen

Farbpalette

#78909C

Hauptfarbe

#0073AA

Sekundärfarbe

#E0E0E0

Mittleres Grau

#00000000

Transparent
Schwarz 100 % Transparenz

#607D8B

Hauptfarbe Hover

#005177

Sekundärfarbe – Hover

#F5F5F5

Helles Grau

#ffffff

Weiß

#424242

Dunkles Grau

#757575

Grau

#212121

Schwarz
Textfarbe

Accessibility Check – Contrast Grid

Background Text	#78909C	#607D8B	#0073AA	#005177	#212121	#424242	#757575	#E0E0E0	#F5F5F5	#FFFFFF
Hauptfarbe #78909C		Text DNP 1.3	Text DNP 1.5	Text DNP 2.5	Text AA 4.8	Text AA18 3	Text DNP 1.3	Text DNP 2.5	Text AA18 3	Text AA18 3.3
Hauptfarbe – Hover #607D8B	Text DNP 1.3		Text DNP 1.1	Text DNP 1.9	Text AA18 3.6	Text DNP 2.3	Text DNP 1	Text AA18 3.3	Text AA18 4	Text AA18 4.3
Sekundärfarbe #0073AA	Text DNP 1.5	Text DNP 1.1		Text DNP 1.6	Text AA18 3	Text DNP 1.9	Text DNP 1.1	Text AA18 3.9	Text AA 4.7	Text AA 5.2
Sekundärfarbe – Hover #005177	Text DNP 2.5	Text DNP 1.9	Text DNP 1.6		Text DNP 1.8	Text DNP 1.1	Text DNP 1.8	Text AA 6.5	Text AAA 7.8	Text AAA 8.5
Schwarz #212121	Text AA 4.8	Text AA18 3.6	Text AA18 3	Text DNP 1.8		Text DNP 1.6	Text AA18 3.4	Text AAA 12.2	Text AAA 14.7	Text AAA 16.1
Dunkles Grau #424242	Text AA18 3	Text DNP 2.3	Text DNP 1.9	Text DNP 1.1	Text DNP 1.6		Text DNP 2.1	Text AAA 7.6	Text AAA 9.2	Text AAA 10
Grau #757575	Text DNP 1.3	Text DNP 1	Text DNP 1.1	Text DNP 1.8	Text AA18 3.4	Text DNP 2.1		Text AA18 3.4	Text AA18 4.2	Text AA 4.6
Mittleres Grau #E0E0E0	Text DNP 2.5	Text AA18 3.3	Text AA18 3.9	Text AA 6.5	Text AAA 12.2	Text AAA 7.6	Text AA18 3.4		Text DNP 1.2	Text DNP 1.3
Helles Grau #F5F5F5	Text AA18 3	Text AA18 4	Text AA 4.7	Text AAA 7.8	Text AAA 14.7	Text AAA 9.2	Text AA18 4.2	Text DNP 1.2		Text DNP 1
Weiß #FFFFFF	Text AA18 3.3	Text AA18 4.3	Text AA 5.2	Text AAA 8.5	Text AAA 16.1	Text AAA 10	Text AA 4.6	Text DNP 1.3	Text DNP 1
AAA Pass, AAA (7+) AA Pass, AA (4.5+) AA18 Pass, Large Text Only (3+) DNP Does Not Pass About WCAG 2.0 contrast

Typografie

Soleil

Überschriften – 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 | @ & % § ! ? € / # + – =

Soleil

Text – 500 (Medium), 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 | @ & % § ! ? € / # + – =

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 (angepasst)

H1 – 3,5em

H2 – 2,25em

H3 – 1,5em

H4–H6 – 1,25em

Basis Textgröße – 18px

Kleine Hinweistexte & Co. – 16px

Kleinste Schriftgröße – 14px

Buttons & Aktionen- 18px

Dekorative Überschriften – 16px

Tablet

1.250 – Major Third (angepasst)

H1 – 3,5em

H2 – 2,25em

H3 – 1,5em

H4–H6 – 1,25em

Normale Textgröße – 18px

Kleine Hinweistexte & Co. – 16px

Kleinste Schriftgröße – 14px

Buttons & Aktionen- 18px

Dekorative Überschriften – 16px

Mobil

1.125 – Major Second

H1 – 2em

H2 – 1,75em

H3 – 1,4em

H4–H6 – 1,2em

Normale Textgröße – 18px

Kleine Hinweistexte & Co. – 16px

Kleinste Schriftgröße – 14px

Buttons & Aktionen- 18px

Dekorative Überschriften – 16px

Icons & Illustrationen

Buttons & Links

Dies ist ein Hyperlink

Formulare

CTAs & Flächen

20px Border Radius

für CTA-Blöcke, Mitarbeiter-Karten o.Ä.

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

80px Gap zwischen Spalten

20px Gap zwischen Elementen

z.B. bei Aufzählungen mit Icon-Boxen

Sty­le­gui­de

Logo-Varia­tio­nen

Farb­pa­let­te

#78909C

#0073AA

#E0E0E0

#00000000

#607D8B

#005177

#F5F5F5

#ffffff

#424242

#757575

#212121

Acces­si­bi­li­ty Check – Con­trast Grid

Typo­gra­fie

Soleil

Soleil

Fließ­text mit Absatz und Aufzählung

Ska­lie­rung

Desktop

H1 – 3,5em

H2 – 2,25em

H3 – 1,5em

H4–H6 – 1,25em

Tablet

H1 – 3,5em

H2 – 2,25em

H3 – 1,5em

H4–H6 – 1,25em

Mobil

H1 – 2em

H2 – 1,75em

H3 – 1,4em

H4–H6 – 1,2em

Icons & Illustrationen

But­tons & Links

For­mu­la­re

CTAs & Flächen

20px Bor­der Radius

Lay­out System

Web­site-Ein­stel­lun­gen

1280px Inhaltsbreite

0px Pad­ding rundherum

20px Gap zwi­schen Elementen

CSS im Child-Theme

80px Pad­ding oben und unten

40px Pad­ding rechts und links

Gestal­tungs­re­geln

Inne­re Con­tai­ner auf “Vol­le Breite”

Abstän­de: Viel­fa­ches von 20px

Optio­nen

80px Gap zwi­schen Spalten

20px Gap zwi­schen Elementen

Styleguide

Logo-Variationen

Farbpalette

Accessibility Check – Contrast Grid

Typografie

Fließtext mit Absatz und Aufzählung

Skalierung

Buttons & Links

Formulare

20px Border Radius

Layout System

Website-Einstellungen

0px Padding rundherum

20px Gap zwischen Elementen

80px Padding oben und unten

40px Padding rechts und links

Gestaltungsregeln

Innere Container auf “Volle Breite”

Abstände: Vielfaches von 20px

Optionen

80px Gap zwischen Spalten

20px Gap zwischen Elementen