[Library] Cover

Catalogue accessStandard

Cover veil

A full-bleed cover whose photograph is reduced to grain behind a display headline by a heavy veil of your theme's contrast colour. The one cover design where the type sits on the image, measured against the lightest and darkest photograph you could choose. Ships the cover empty. States no colour and no font of its own. Ships with a short hand-off row on your theme's paper below it, so the cover reads as a section and not the page.

Variation View
Before you copy
Open in a new window

Identical markup in every theme. Manrope typeface rgb(255, 255, 255) ground 1280px viewport

A full-bleed core/cover whose photograph is reduced to grain by a heavy veil of your theme's contrast colour, with a display headline set directly on it. This is the one cover design in the catalogue where type sits on the image, and it is allowed because the veil makes the ground a bounded quantity.

The signature moment

Scale collision

A 13px eyebrow at very open tracking, then a headline that runs from 44px to 100px at -0.04em and 0.98 line-height, with nothing between them but a spacing preset. The lede is held to a 34rem measure under the headline, so the line lengths go tiny, enormous, modest. The photograph is there for texture and nothing else; at 80% veil it reads as grain, not as a picture.

What it inherits, what it decides

Inherits: every colour (veil contrast, type base), the typeface, the spacing scale. Decides: the veil's opacity, the type ramp, the 34rem measure, the 40rem minimum height (in rem, never vh), padding above and below. The cover states its own text colour chain so core's :where() rule that paints cover text #fff never applies. Heading level is h1: this is a page opener.

Why type on a photograph is permitted here, and only here145 words

A photograph's luminance is unknowable, so the rule is that type never sits on one. A cover's veil is the exception that can be measured: its colour is a chain and its opacity is a number, so the darkest ground the type can land on is the veil over a black photograph and the lightest is the veil over a white one. Both are measured, and the worse of the two has to pass. At dimRatio 80 with a contrast veil and base type, the lightest ground in Twenty Twenty-Four is rgb(65, 65, 65) under rgb(249, 249, 249) type, 9.7:1; the no-contract control's is 10.9:1. At dimRatio 40 the same markup measured 2.48:1, too low to read, which is how the veil was set.

So: whatever photograph you choose, light or dark, the words pass. Lower the veil below 80 and that stops being true.

What a buyer changes first38 words

The photograph: the cover ships EMPTY and is valid at 6.6 and 7.0; pick one in the media library. Then the headline. Keep it under about five words at this size; two lines at 390 is the ceiling.

Variations64 words
  • Paper veil: the veil is base at 80% and the type contrast. The photograph becomes a pale ghost behind ink. Darkest ground in Twenty Twenty-Four: base over black, rgb(199, 199, 199) under rgb(17, 17, 17), 12.6:1.
  • In motion: backgroundType: "video"; a clip instead of a still, same veil, same type. Choose a short, silent, looping clip; core writes autoplay muted loop playsinline.
The hand-off row83 words

A full-bleed cover on its own fills the preview on this page edge to edge, and on a buyer's page it is never alone either. So the pattern ships with what comes next: a short row on your theme's paper under the cover, a tracked label and one paragraph at a 34rem measure. It is ordinary page copy, it shows where the cover ENDS, and it is the first thing a buyer rewrites or deletes. It carries the same chains as everything else.

Back to the library

Continue exploring

Next in Cover

Explore all 5 Cover patterns