Hero tint wash

A full-bleed core/cover with three things on it and nothing else: a two-word headline at display size, a 12px tracked line, and one button. Centred in a 44rem inner container on a 36rem stage, under a 90% veil of your contrast colour.

One word at display size sitting directly on a 12px tracked line, with nothing in between. The headline runs from 56px to 128px at -0.05em and a line-height of exactly 1; the line under it is 12px to 13px, uppercase, tracked at 0.42em, and its top margin is 1.15rem, so the two are touching. There is no lede, no rule, no eyebrow above, and no intermediate size anywhere in the pattern. The jump between roughly 128px and roughly 12px IS the composition; everything else is held flat so that the jump is the only thing to look at.

hero-statement owns the centred manifesto on paper: a sentence, extreme air, and a rule. This is the same nerve struck on a photograph instead, and the photograph is why the numbers can be this extreme. A two-word headline on paper leaves an empty band; a two-word headline over a 90% veil has a texture holding the rest of the stage, so a 36rem section reads as full with eleven words in it.

• In motion: backgroundType: "video" and nothing else changed. A clip instead of a still, same veil, same type; core writes autoplay muted loop playsinline.
• Stated wash ("colour": "stated"): the colour axis, stated. The veil is a literal deep ink-blue #0d1a30 and the type a literal warm bone #f0e9dc, including the button and the hand-off row's paper. It looks identical in every theme and matches none, which is the point: no preset pair can promise ink-blue against bone, because base and contrast are the only universal slugs and they are a light and a dark, not a hue relationship. Measured as painted: at 90% over a white photograph the ground is rgb(37, 49, 69) and the bone type is 10.86:1 on it; over a black photograph, rgb(12, 23, 43) at 14.79:1. Ink on bone in the hand-off row is 14.4:1. It still states no font family, uses core blocks only, and carries no bare preset attribute; stating its own colours changes what is measured, not whether it is.

Inherits: every colour (veil contrast, type and button ground base, button text contrast), the typeface, and the spacing scale on the hand-off row. Decides: the veil's opacity, the two type sizes and the distance between them, the 44rem inner measure, the 36rem minimum height (in rem, never vh), and the square button. The cover states its own text colour as a chain, so core's :where() rule that paints cover text #fff never applies. Heading level is h1: this is a page opener.

Off the theme's ladder on purpose, because the size is the composition:

• h1 at clamp(3.5rem, 9vw, 8rem)

A photograph's luminance is unknowable, so 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 it is measured composited over a white photograph and over a black one, at the worse of the two. At dimRatio 90 with a contrast veil and base type, the lightest ground the type can ever land on is the veil over a white image, which is close to the veil itself. At 40 the same shape measured 2.48:1 on cover-veil and was rejected.

The 90 is also doing the composition's work, not only keeping the type readable. At 80 the image reads as a picture the headline is standing on; at 90 it is grain, and a two-word headline is the subject.

The photograph. The cover includes an example image; choose Replace to select one from your media library with the composition already set. Then the headline: keep it to two or three words. At 128px a fourth word wraps and the scale collision becomes an ordinary big heading over a caption. The tracked line should stay under about 26 characters so it holds one line at 390.

A full-bleed cover fills the stage edge to edge and is never alone on a real page, so the pattern ships what comes next: a tracked label and one paragraph at a 34rem measure, on your theme's paper. It shows where the hero ENDS, and it is the first thing a buyer rewrites or deletes.

The copied markup includes WordPress Photo Directory example photographs. The public image URLs keep the examples visible after pasting. Select an image or cover and choose Replace to use your own Media Library files. See image credits for the sources and licenses. Pasting an image URL does not import a Media Library attachment.