Presets Global Styles
Which cross-provider styles can be used in the design if you do not want to define everything per object, per layout, per output medium, per state?
Open issue: Inversion can either be defined as another headline/copy style (see above) or via a colour scheme (see below). The colour scheme below shows that this is defined on a case-by-case basis. If info boxes are to appear in the company colour magenta, for example, the text on them would be white - i.e. inverted. The inverted colour tones above can therefore be omitted if colour schemes are assigned via the application area.
Font Styles
| Standard | Colour inverted | Application | D | M |
| Headline | ||||
head-xl | head-inv-xl | H1 Page Title | B40(46) | B26(30) |
| head-l | head-inv-l | H2 (in RTE) | B32(38) | B22(27) |
| head-m | head-inv-m | H3 (in RTE) | B28(34) | B19(22) |
| head-s | head-inv-s | H4 (in 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-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, Mobile:quarter | B22(27) | B17(20) |
| teaserhead-xs | teaserhead-inv-xs | B15(18) | ||
| teaserhead -xxs | teaserhead -inv-xxs | Mobile: small tile | B12(15) | |
| Copy | ||||
copy-xl | copy-inv-xl | Blockquote (in RTE)/ Copy Teaxt in Breaking | Ita24(31) | Ita18(25) |
| copy-l | copy-inv-l | Standard (in RTE) | 18(27) | 16(24) |
| copy-m | copy-inv-m | Abstract in teaser, Standard (in RTE with infobox element) | 16(24) | 13(19) |
| copy-s | copy-inv-s | Captions | 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, smaller (not used) | ||
| Bereichs-überschrift/ Section headline | ||||
section-m | section-inv-m | H2 as list headline | B20(30)+CAP | B18(25)+CAP |
| section-s | section-inv-s | H2 as list headline, smaller (not used) | ||
| Subheadline | ||||
| sub-m | sub-inv-m | H2 when description is displayed as subtitle | 26(32) | 21(26) |
| sub-s | sub-inv-s | H2 bei Ausgabe der Description als Untertitel, kleiner (nicht genutzt) | ||
| Minor Info | ||||
minor-m | minor-inv-m | Display of document type, date etc. in teaser | 16(24) | 12(18) |
| minor-s | minor-inv-s | Display of document type, date etc. in teaser | 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
| Normal Text | Link | Over | Background | |
Page
| text | link | over | bg-page |
| Infobox | wie Page | wie Page | wie Page | bg-infobox |
| CTA | like page or | like page or link-inv | like page or over-inv | bg-cta |
| Over Pic | like page or | like page or link-inv | like page or over-inv | bg-overpic |
| On Pic | like page or | like page or link-inv | like page or over-inv | bg-onpic |
| Header | like page or | like page or link-inv | like page or over-inv | bg-header |
| Footer | like page or | like page or link-inv | like page or over-inv | bg-footer |