Hero library · full-bleed
Full-bleed duotone in an accent field
hero.fullbleed-duotone: any design can use this hero. It suits the styles below; pairing it with another style makes the picker warn about a clash.
- Rule
- The hero is an accent-coloured field: headline at step 5 in onAccent across 1–10, subhead + CTA under it, then a duotone photo (accent × ink) running edge to edge at 21:9.
- Slots
eyebrow, meta, headline, subhead, cta, heroImage- Grid
- eyebrow
1-4 · meta 9-12 · headline 1-10 · subhead 1-4 · cta 10-12 · image full - Notes
- Duotone = map the photo's shadows to the darkest ink and highlights to the accent (CSS filter + mix-blend-mode or a pre-processed image), so the photo melts into the accent field.
Do
- Paint the whole hero in the accent colour and set all text in onAccent.
- Run the headline at display step 5 across columns 1–10 in two or three long lines, heavy and tight, so the duotone photo starts inside the first screen.
- Duotone the photo from the palette (ink shadows, accent highlights) and run it full-bleed at 21:9 below the copy.
- Use the secondary (inverted) button so it reads on the accent field.
Don't
- Don't use a full-colour photo — the duotone is what ties it to the field.
- Don't put text over the photo.
- Don't add a gradient between the field and the photo; the join is a hard edge.
Phone width
- Keep the accent field; stack eyebrow, headline (step 5), subhead, CTA, then the photo at 4:3.
- Drop the meta line if it wraps to more than one line.
Try this hero in the pickerllms.txt