Headline 1 ohne Abstand
H1 Desktop sollte sein:
Myriad Light · 80 px Schriftgröße · 95 px Zeilenabstand · 0px Absatzbstand · 0 Laufweite (Zeichenabstand) · L 65px Margin Bottom
Headline 2
H2 Desktop sollte sein:
Myriad Light · 60 px Schriftgröße · 66 px Zeilenabstand · 0px Absatzbstand · 10 Laufweite (Zeichenabstand) · M 45px Margin Bottom
Headline 3
H3 Desktop sollte sein:
Myriad Light · 40 px Schriftgröße · 48 px Zeilenabstand · 0px Absatzbstand · 0 Laufweite (Zeichenabstand) · S 30px Margin Bottom
Headline 4
H4 Desktop sollte sein:
Myriad Regular · 32 px Schriftgröße · 36 px Zeilenabstand · 0px Absatzbstand · 10 Laufweite (Zeichenabstand) · S 30px Margin Bottom
Aberichung in den großen Würfel-CTAs: BOLD
Headline 5
H5 Desktop sollte sein:
Myriad Semibold · 24 px Schriftgröße · 28 px Zeilenabstand · 0px Absatzbstand · 10 Laufweite (Zeichenabstand) · S 30px Margin Bottom
Herotext 1 – Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
Herotext 1 sollte sein:
Myriad Light · 55 px Schriftgröße · 60 px Zeilenabstand · 0 px Absatzbstand · 0 Laufweite (Zeichenabstand) · L 65px Margin Bottom
Herotext 2 – Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
Herotext 2 sollte sein:
Myriad Light · 36 px Schriftgröße · 48 px Zeilenabstand · 15 px Absatzbstand · 10 Laufweite (Zeichenabstand) · S 30px Margin Bottom
Herotext 3 – Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid
Herotext 3 sollte sein:
Myriad Regular · 20 px Schriftgröße · 30 px Zeilenabstand · 15 px Absatzbstand · 10 Laufweite (Zeichenabstand) · S 30px Margin Bottom
Copy 01 = Normal – Das hier soll der ganz normale Absatztext sein. Lorem ipsum dolor Textlink sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid.
-
Die Aufzählungszeichen sind Geviertstriche
-
Ut enim ad minim veniam, quis nostrud
-
consectetur adipisici elit
-
sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
-
Ut enim ad minim veniam, quis nostrud
-
consectetur adipisici elit
-
sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
Ab hier ohne zugewiesenem Stil - Copy 01 = Normal sollte sein:
Myriad Regular · 18 px Schriftgröße · 24 px Zeilenabstand · 10 px Absatzbstand · 0 Laufweite (Zeichenabstand)
Copy 02 - Stil fehtl noch - Lorem ipsum dolor Textlink sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid.
-
Die Aufzählungszeichen sind Geviertstriche
-
Ut enim ad minim veniam, quis nostrud
-
consectetur adipisici elit
-
sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
-
Ut enim ad minim veniam, quis nostrud
-
consectetur adipisici elit
-
sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
Copy 02 (kleinere Copy) sollte sein:
Myriad Regular · 16 px Schriftgröße · 21 px Zeilenabstand · 7 px Absatzbstand · 0 Laufweite (Zeichenabstand)
Quote – Lorem ipsum dolor Textlink sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid
Quote sollte sein (wie Herotext 2):
Myriad Light · 36 px Schriftgröße · 48 px Zeilenabstand · 15 px Absatzbstand · 10 Laufweite (Zeichenabstand)
Copy 02 - Stil fehtl noch - Lorem ipsum dolor Textlink sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid.
- Die Aufzählungszeichen sind Geviertstriche
- Ut enim ad minim veniam, quis nostrud
- consectetur adipisici elit
- sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
- Ut enim ad minim veniam, quis nostrud
- consectetur adipisici elit
- sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
Copy 02 (kleinere Copy) sollte sein:
Myriad Regular · 16 px Schriftgröße · 21 px Zeilenabstand · 7 px Absatzbstand · 0 Laufweite (Zeichenabstand)
Standard-Buttons und Links
Für alle Buttons gilt: Je nach Bereich, in dem sie gesetzt werden, erhalten sie automatisch die richtige Kategoriefarbe.
Button – Dieser Stil darf nur im B2B benutzt werden. Sollte er im B2C benutzt werden, dann nur in Midnight Blue.
Pfeillinks gibts in 2 Größen: L & M (Desktop), S & XS (mobil):
Dies ist der Pfeillink L (mobil S)
Dies ist der Pfeillink M (mobil XS)
Link mit Pfeil – Diese Stil sollte wegfallen.
Ein Textlink ist eine Unterstreichung in Hellblau. Der Hover macht den Text dann ebenfalls hellblau.
Tabellen
| Nullam dictum | semper nisi | x | Integer tincidunt. Cras dapibus | 1.225,25 |
| enean vulputa | Duis leo. Sed fringilla mauris sit amet nibh | ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed i | y | 12.269,21 |
| Etiam ultricies | Donec quam felis | semper nisi | 1.258,44 | |
| sit amet adipiscing sem neque sed ipsum | Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. | Sed consequat, leo eget bibendum sodales | 90,– |
Zweispaltige, Tabelle 1 zu 2
| Nullam dictum | semper nisi | x | Integer tincidunt. Cras dapibus | 1.225,25 |
| enean vulputa | Duis leo. Sed fringilla mauris sit amet nibh | ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed i | y | 12.269,21 |
| Etiam ultricies | Donec quam felis | semper nisi | 1.258,44 | |
| sit amet adipiscing sem neque sed ipsum | Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. | Sed consequat, leo eget bibendum sodales | 90,– |
