Overlay-System
Text über Bild braucht eine Lesefläche. Der Gradient ist das Standardmittel: im Digitalen als halbtransparenter Verlauf, im Print als opaker Farbblock.
Halbtransparenter Gradient von deckend zu transparent, stetig und ohne Haltezone. Das Bild bleibt sichtbar.
Gradient als Lesefläche
HEADLINE TEXT
Subline direkt auf Bild
01
Farblogik
| Bildcharakter | Overlay-Farbe | Textfarbe |
|---|---|---|
| Dunkles Bild | Kein Overlay | Weiß |
| Standard | #181818 → Transparent | Weiß |
| Helles Bild | #FFFFFF → Transparent | Schwarz (#181818) |
| Hero-Moment | #0071EA → Transparent | Weiß |
Verlauf (stetig, ohne Haltezone)
Stetiger Verlauf ohne Haltezone: volle Deckung nur am Rand (0,75 bis 0,80), dann eine weiche S-Kurve bis auf null, dazu feines Korn gegen Banding. Ersetzt den Drei-Stop-Verlauf mit Haltezone (Stand 09.09.2026).
Overlay-Breite
Counter Fade
Für zweizeilige Headlines: Zwei gegenläufige Verläufe erzeugen Spannung und Blickführung. Zeile 1 links→rechts, Zeile 2 rechts→links.
Regel
- Social Media (Feed, Stories, Reels): Editorial-Energie
- Kampagnen-Hero (16:9): Dominanz und Dynamik
- Paid Ads: optional, je nach Motiv
Ausnahme
- Präsentation: nur bei Openern, Standard ist einfacher Gradient
- Newsletter: zu laut für den Kanal
- Webshop: HTML-Overlay-Logik greift
02
Accent Bar
PP-Blau (#0071EA), Enden 9°-geschert. Optional, max. 1× pro Komposition. Wird nicht durch den Gradient ersetzt. Beide können gleichzeitig existieren.
| Kontext | Accent Bar |
|---|---|
| Präsentation | 1× pro Slide: unter der Seitenüberschrift |
| Social Media | Optional, max. 1×, wenn Text-Overlay vorhanden |
| Webshop | Nein: HTML-Logik übernimmt |
| Print / Retail | Optional, max. 1×, bei Headlines auf Flächen |
03
Fade-Zonen: No-Gos
- Fade-Zone darf nicht über Gesichtern liegen
- Fade-Zone darf keine Produktlogos schneiden
- Fade-Zone darf keine harten Bildkanten betonen
- Fade immer in ruhigeren Bildbereichen platzieren: im Zweifel Overlay breiter machen
04
Abgrenzung: Gradient und Highlight-Balken
Zwei eigenständige Wege, Text auf Bild lesbar zu machen, stehen gleichberechtigt nebeneinander. Je Komposition wird einer gewählt.
| Leseflächen-Gradient (dieses Kapitel) | Highlight-Balken (Social-Modus, Newsletter) | |
|---|---|---|
| Form | Abgedunkelte Zone im Bild, stetige Kurve #181818 | Weißer Balken hinter Headline und Subline, links solid, nach rechts zu Transparenz auslaufend. Auf Folie im Raum hart ohne Verlauf |
| Text | Weiß auf der abgedunkelten Zone | Dunkler Text auf dem Balken |
| Akzentlinie | Möglich, auf der abgedunkelten Zone | Nicht kombiniert, eigener Modus. Auf Raumträgern ersetzt genau eine blaue Balkenzeile die Akzentlinie |
| Typischer Einsatz | Social-Raster, Hero-Visuals, Retail | Newsletter-Banner, Social-Modus Highlight-Balken |
Ein weißer Balken ist kein hellerer Gradient, und ein Gradient ersetzt keinen Balken. Die Werte des einen (Deckung, Kurve, Breite) gelten nicht für den anderen.