Overlay System
Text over image needs a reading surface. The gradient is the standard tool: digital as a semi-transparent gradient, print as an opaque solid block.
Semi-transparent gradient from opaque to transparent, continuous with no hold zone. The image remains visible.
Gradient as Reading Surface
HEADLINE TEXT
Subline direkt auf Bild
01
Color Logic
| Image character | Overlay color | Text color |
|---|---|---|
| Dark image | No overlay | White |
| Standard | #181818 → Transparent | White |
| Light image | #FFFFFF → Transparent | Black (#181818) |
| Hero moment | #0071EA → Transparent | White |
Gradient (continuous, no hold zone)
Continuous gradient with no hold zone: full opacity only at the edge (0.75 to 0.80), then a soft S-curve down to zero, plus fine grain against banding. Replaces the three-stop gradient with hold zone (as of 9 September 2026).
Overlay Width
Counter Fade
For two-line headlines: Two opposing gradients create tension and visual flow. Line 1 left→right, line 2 right→left.
Rule
- Social Media (feed, stories, reels): editorial energy
- Campaign hero (16:9): dominance and dynamics
- Paid ads: optional, depending on motif
Exception
- Presentations: only for openers, standard is simple gradient
- Newsletter: too loud for the channel
- Webshop: HTML overlay logic applies
02
Accent Bar
PP Blue (#0071EA), ends sheared at 9°. Optional, max. 1× per composition. Not replaced by the gradient. Both can coexist.
| Context | Accent Bar |
|---|---|
| Presentation | 1× per slide: below the page title |
| Social Media | Optional, max. 1×, when text overlay present |
| Webshop | No: HTML logic takes over |
| Print / Retail | Optional, max. 1×, for headlines on surfaces |
03
Fade Zones: No-Gos
- Fade zone must not cover faces
- Fade zone must not cut through product logos
- Fade zone must not emphasize hard image edges
- Always place fade in calmer image areas: when in doubt, make the overlay wider
04
Distinction: Gradient and Highlight Bar
Two independent ways to make text readable on an image exist side by side. One is chosen per composition.
| Readability Gradient (this chapter) | Highlight Bar (social mode, newsletter) | |
|---|---|---|
| Form | Darkened zone in the image, continuous curve #181818 | White bar behind headline and subline, solid on the left, fading to transparent on the right. On film in a space: hard-edged, no fade |
| Text | White on the darkened zone | Dark text on the bar |
| Accent Line | Possible, on the darkened zone | Not combined, its own mode. On carriers in a space, exactly one blue bar line replaces the accent line |
| Typical Use | Social grid, hero visuals, retail | Newsletter banner, social highlight-bar mode |
A white bar is not a lighter gradient, and a gradient does not replace a bar. The values of one (coverage, curve, width) do not apply to the other.