# Hero tint wash > A full-bleed photographic opener with exactly three things on it: one two-word headline at up to 128px, a 12px tracked line sitting straight underneath it, and one button. The jump between the two type sizes is the whole composition, and a 90% veil of your contrast colour is what lets a two-word headline hold a 36rem stage whatever photograph you choose. Includes a replaceable example photograph. States no colour and no font of its own, and ends on a short hand-off row on your theme's paper. Canonical: https://patternpaste.com/pattern/hero-tint-wash.html Section: Hero Access: Included in Pattern Paste access. Needs: Requires a block theme on WordPress 7.0 to 7.1. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type. Blocks: button, buttons, cover, group, heading, paragraph Keywords: hero, cover, photo, video, display, centred ## Variations (3) ### Ink wash (the default) Identical markup in every theme. A 90% veil of your contrast over the still, your base as the type. The headline runs to 128px and the tracked line under it to 12px, with nothing in between. ### In motion Identical markup in every theme. The same composition over a clip instead of a still. Choose a short, silent, looping video in the cover's media picker; at 90% the veil keeps it a texture rather than a film, so the type is exactly as legible. ### Stated wash This variation states its own colours: identical in every theme. States its own colours instead of inheriting yours: a deep ink-blue wash with warm bone type, identical in every theme and matching none. This one does NOT adapt to your palette. The other two do, so take one of those if you want your site's colours. --- ## The signature moment: scale collision **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. ## Why the veil is 90 and not lower 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. ## What it inherits, what it decides 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. ## What a buyer changes first 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. ## Variations - **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. ## The hand-off row 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. ## Display type Off the theme's ladder on purpose, because the size is the composition: - h1 at clamp(3.5rem, 9vw, 8rem) ## Included images 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](/image-credits/) for the sources and licenses. Pasting an image URL does not import a Media Library attachment.