Voreinstellungen Globale Styles
Mit welchen angebotsübergreifenden Styles kann man im Design arbeiten, wenn man nicht alles je Objekt, je Layout, je Ausgabemedium, je Zustand definieren will?
Offene Frage: Invertierung kann hier entweder als weiterer Headline/Copy Style definiert werden s. o. oder auch über ein Farbschema definiert werden (s.u.). Am Farbschema unten sieht man, dass das fallweise festgeleget wird. Sollen Infoboxen z. B. im Firmenfarbton Magenta erscheinen, wäre der Text darauf weiß - also invertiert. Die Invertiert-Farbtöne oben können somit entfallen wenn Farbschemata über den Einsatzbereich zugewiesen werden.
Font Styles
| Standard | Farbinvertiert | Anwendung | D | M |
| Überschrift/Headline | ||||
head-xl | head-inv-xl | H1 Seitenüberschrift | B40(46) | B26(30) |
| head-l | head-inv-l | H2 (im RTE) | B32(38) | B22(27) |
| head-m | head-inv-m | H3 (im RTE) | B28(34) | B19(22) |
| head-s | head-inv-s | H4 (im RTE) | B22(27) | B17(20) |
| head-xs | head-inv-xs | H5 (im RTE) | B15(18) | |
| head-xxs | head-inv-xxs | k.A. | B12(15) | |
| Teaser-Überschriften/Teaser-Headlines | ||||
| teaserhead-l | teaserhead-inv-l | Dektop:full/half, Mobil:full/half/third | B32(38) | B22(27) |
| teaserhead-m | teaserhead-inv-m | Desktop:third | B28(34) | B19(22) |
| teaserhead-s | teaserhead-inv-s | Dektop:quarter, Mobil:quarter | B22(27) | B17(20) |
| teaserhead-xs | teaserhead-inv-xs | B15(18) | ||
| teaserhead -xxs | teaserhead -inv-xxs | Mobil:kleine Kachel | B12(15) | |
| Fließtext/Copy | ||||
copy-xl | copy-inv-xl | Blockquote (im RTE)/ Fließtext im Störer | Ita24(31) | Ita18(25) |
| copy-l | copy-inv-l | Standard (im RTE) | 18(27) | 16(24) |
| copy-m | copy-inv-m | Abstract im Teaser, Standard (im RTE bei Infobox) | 16(24) | 13(19) |
| copy-s | copy-inv-s | Bildunterschriften | 14(20) | 12(18) |
| Kopfzeile/ Super headline | ||||
super-m | super-inv-m | Superheadline | 18(27)+CAP | 12(18)+CAP |
| super-s | super-inv-s | Superheadline, kleiner (nicht genutzt) | ||
| Bereichs-überschrift/ Section headline | ||||
section-m | section-inv-m | H2 als Listenüberschrift | B20(30)+CAP | B18(25)+CAP |
| section-s | section-inv-s | H2 als Listenüberschrift, kleiner (nicht genutzt) | ||
| Subheadline/ Subheadline | ||||
| sub-m | sub-inv-m | H2 bei Ausgabe der Description als Untertitel | 26(32) | 21(26) |
| sub-s | sub-inv-s | H2 bei Ausgabe der Description als Untertitel, kleiner (nicht genutzt) | ||
| Neben-infomation/ Minor Info | ||||
minor-m | minor-inv-m | Anzeige Dokumententyp, Datum etc. im Teaser | 16(24) | 12(18) |
| minor-s | minor-inv-s | Anzeige Dokumententyp, Datum etc. im Teaser | neu: 14(20) | 12(18) |
Menu Styles
| Base | Tablet | Desktop | |
| Menu | menu-base-1st | menu-tablet-1st menu-tablet-2nd menu-tablet-3rd menu-tablet-4th | menu-desktop-1st menu-desktop-2nd menu-desktop-3rd menu-desktop-4th |
Colours
| Normaler Text | Link | Over | Background | |
Page
| text | link | over | bg-page |
| Infobox | wie Page | wie Page | wie Page | bg-infobox |
| CTA | wie Page oder | wie Page oder link-inv | wie Page oder over-inv | bg-cta |
| Over Pic | wie Page oder | wie Page oder link-inv | wie Page oder over-inv | bg-overpic |
| On Pic | wie Page oder | wie Page oder link-inv | wie Page oder over-inv | bg-onpic |
| Header | wie Page oder | wie Page oder link-inv | wie Page oder over-inv | bg-header |
| Footer | wie Page oder | wie Page oder link-inv | wie Page oder over-inv | bg-footer |