Bruegel exhibition microsite hero

# Editorial museum-exhibition hero — full-bleed painting on cream

A single full-viewport hero section for an art-exhibition microsite. Reference viewport: **1440 × 825 CSS px**. Everything below is given at that width. The whole idea is one image: a crowded old-master painting that rises out of the bottom of the page with **no visible edge** — the page ground and the painting's own pale ground are the same colour, so the figures look printed onto the paper. A large serif title sits over the painting's empty upper area. Nothing else is on screen.

---

## 1. Structure

- **Page**: full-bleed, background `#F8F5EC`, no outer frame, no rounded corners, no mat. The page is the sheet.
- **Text container**: `max-width: 960px`, centred → **240px of free margin each side at 1440**. Single column. All type — header row, headline, attribution, dates — aligns to this 960px box.
- **Artwork layer**: ignores the container. **100vw, full bleed**, anchored to the bottom edge of the section, clipped by it.
- Header is in normal flow at the top of the section, not fixed, not sticky.

Sections top to bottom (these numbers are used everywhere below):

1. **Utility header** — hamburger + "Index" flush left; stacked wordmark centred; language pair + sound toggle flush right; a small tilted notice chip hanging below the right cluster; a 1px rule closing the header at the container width.
2. **Hero stage** — fills the remaining viewport. Three text layers plus one image layer, composited over each other:
   - 2a. **Display headline**, centred on the page, 2 lines.
   - 2b. **Attribution**, flush left to the container, 2 lines, vertically centred against the headline block.
   - 2c. **Date range**, flush right to the container, right-aligned, 2 lines, same baseline grid as 2b.
   - 2d. **Artwork band**, full-bleed, bottom-anchored, sits *behind* 2a–2c and *in front of* nothing — it is the lowest layer above the page ground.

The section ends at exactly 100vh; the painting is cut off by the viewport edge, not by a container.

---

## 2. Scroll map

| # | Section | Height | Viewports | Scroll consumed | Kind |
|---|---------|--------|-----------|-----------------|------|
| 1 | Utility header | 97px | 0.12vh | 97px | entrance, then static |
| 2 | Hero stage (2a–2d) | 728px | 0.88vh | 728px | entrance on load; 2d also scroll-linked (inferred) |
| — | **Total section height** | **825px** | **1.00 viewport** | **825px** | — |

No motion report was measured for this page; every timing and offset in the Motion section is marked **(inferred)** and given as a range. Exact durations, easings and parallax distances: **not measured**.

The section is exactly one viewport tall and hands off at 825px to whatever follows, on the same `#F8F5EC` ground with no divider.

---

## 3. Spacing

**Section 1 — header (total 97px tall, rule included)**
- `padding-top: 28px`, content row ~36px tall, then 32px of air to the closing rule at y = 97px.
- Rule spans the 960px container only — it stops 240px short of each viewport edge. Never full bleed.
- Left cluster: hamburger glyph (three 14px bars, 3px apart) → **10px gap** → "Index".
- Centre wordmark: 3 stacked lines, block is 38px tall, optically centred on the content row; a **34px-wide hairline rule 6px above and 6px below** the word stack.
- Right cluster: `DE / EN` with **6px** either side of the slash → **28px gap** → sound icon (14px) → **6px** → `EIN`.
- Notice chip: absolutely positioned, `top: 45px`, right edge inset **22px** from the container right edge, `padding: 7px 12px`, so it hangs into the gap between the header row and the rule without touching either.

**Section 2 — hero stage**
- Rule (97px) → **156px** → cap-top of headline line 1 (253px).
- Headline: 2 lines at 123px leading; block runs 253px → 475px.
- 2b/2c sit at `top: 334px`, 60px tall (2 lines × 30px) — i.e. **vertically centred on the headline block**, not on the viewport, and the headline overlaps them horizontally with ~70px of clearance on each side.
- 2d artwork: `height: 56vh` (462px), `bottom: 0`. Its box top lands at 363px — *above* the headline's baseline. This is deliberate: the top ~40% of the crop is the painting's empty pale ground, so the overlap is invisible and the headline reads as if set on the page.
- Bottom padding: none. The painting runs off the bottom edge.

Rhythm: one large silence (156px) between the header and the title, and no other vertical break. There are exactly two horizontal lines on the whole screen — the header rule and the 34px wordmark hairlines.

---

## 4. Type

Two families only.

- **Display**: high-contrast transitional/Scotch serif with true thick–thin modulation, ball terminals, generous ascenders. Free stand-ins: **Libre Caslon Display**, or **Playfair Display** at 400, or **EB Garamond** at 500.
- **UI**: neutral grotesk, closed apertures, no quirk. Free stand-ins: **Inter** or **Archivo**.

Body anchor: **17px at 1440** (this page carries no running paragraph; 17px is the reference every other level is measured against).

| Level | Multiple of body | Size | Line-height | Tracking | Weight | Family |
|---|---|---|---|---|---|---|
| Display headline (2a) | 8.2× | **140px** | **0.88** (123px) | −0.01em | 400 | serif display |
| Attribution (2b) / dates (2c) | 1.3× | **22px** | 1.35 (30px) | 0 | 400 | grotesk |
| Nav "Index", `DE / EN`, `EIN` (1) | 0.88× | **15px** | 1.2 | +0.01em | 400 | grotesk |
| Notice chip (1) | 0.76× | **13px** | 1.25 | 0 | 400 | grotesk |
| Wordmark (1) | 0.7× | **12px** | 1.05 | +0.08em, uppercase | 700 | grotesk |

Max line length: the headline is **9–10 characters per line, hard-wrapped on purpose** (never let it reflow into three lines at 1440). Attribution and dates are 2–3 words per line. Any running copy added later: 62–68 characters.

The 0.88 line-height on the headline is the single most important type value here — the two lines nearly touch, ascenders of line 2 running up between the descenders of line 1. Anything at 1.1 or looser breaks the composition.

Placeholder copy by role:
- Nav label: 1 word (~5 characters).
- Wordmark: 2–4 short words stacked on 3 lines, all caps.
- Notice chip: 1 short sentence, 3–4 words.
- Headline: **4–5 words on two lines**, the kind of phrase that splits 3 words / 1–2 words.
- Attribution: a personal name, 2 words on two lines.
- Dates: two dates, one per line, right-aligned.

---

## 5. Colour

| Hex | Role |
|---|---|
| `#F8F5EC` | **Ground — ~70% of the surface.** Warm pastel cream. This is also the exact colour of the painting's empty ground; the two must be indistinguishable. |
| `#383637` | **Ink — all type**, header, headline, attribution, dates. Warm near-black. Used for 100% of text. |
| `#977549` | Secondary/inactive: the non-selected language, the notice chip's border and its text if you want it recessive. |
| `#C8A978` | Hairlines only: the header rule, the wordmark rules. Use at full strength at 1px — it reads as a pale warm grey against the cream. |
| `#A93825` | **Single accent — brick red.** It is the dominant colour *inside the painting* (caps, cloaks). In the UI it is allowed in exactly three places: the active language item, the "sound on" state, and the 1px underline on a hovered nav item. Nothing else. No red headline, no red button, no red background. |

Pure white and pure black never appear.

---

## 6. Surface

- **Borders**: 1px only. Header rule and wordmark hairlines in `#C8A978`. The notice chip has a 1px `#977549` border at ~40% opacity.
- **Radii**: `0` everywhere except the notice chip at **4px**. The artwork has **no radius** — it is flush to all three edges it touches.
- **Shadows**: exactly one, on the notice chip: `0 2px 6px rgba(56,54,55,0.12)`. No shadow on the image, no shadow on text, no card elevation anywhere else.
- **No cards, no panels, no containers with visible edges.** The only shapes on the page are type, two hairlines, one chip and one photograph.

---

## 7. Imagery

**One image. It is the entire design.**

- **Subject**: a wide detail from a 16th-century Netherlandish oil painting of a peasant feast — a long trestle table seen slightly from above and to the left, two dozen figures packed shoulder to shoulder: women in white linen coifs, men in felt caps of brick red, olive and slate, a bagpiper standing at the far left with his pipes crossing diagonally upward, bowls of porridge being carried in on a door. Earthy, low-saturation palette: ochre, brick red, dull green, cream linen, brown wood. The paint surface should read as paint — visible craquelure and brush texture, warm varnish tone, not a cleaned-up digital reproduction.
- **Treatment**: none. No colour grade, no duotone, no desaturation, no blur, no vignette, no overlay of any kind.
- **Crop**: **~3.1 : 1** (1440 × 462 rendered; supply at least 2880 × 924). Crop so that the **top third of the frame is the painting's empty pale straw-coloured ground** — the barn wall and hanging straw behind the figures — and the heads of the seated figures begin around 55–60% down the frame. The bagpiper's pipes are the only thing that breaks up into the pale zone, entering from the left at about 35% down.
- **Position**: full bleed, `width: 100vw`, `height: 56vh`, `bottom: 0`, `object-fit: cover`, `object-position: center bottom`. Clipped by the viewport bottom — the front figures at the table are cut off mid-torso.

**The blend is the whole trick, and it is done with colour, not with a fade.** Sample the page background directly from the top row of the crop; that sample *is* `#F8F5EC`. Export the image with no alpha channel and lay it flush on that ground. If a faint seam remains, fix it by re-sampling the background colour or by nudging the crop upward into more empty ground — never by adding a fade. Do not use `mask-image`, `-webkit-mask-image`, a `linear-gradient` overlay, a `::before`/`::after` scrim, a feathered PNG edge, `opacity` ramps, or a blurred top edge. A gradient at the top of this image is immediately visible as a grey haze over the cream and destroys the printed-on-paper effect that the entire hero depends on. Optionally `mix-blend-mode: multiply` on the image over the cream ground to knit any residual off-white — that is the only compositing trick permitted, and it must not change the painting's mid-tones.

---

## 8. Motion

No motion instrumentation exists for this page. Everything below is **(inferred)** from the composition; exact durations, easings and offsets are **not measured** and are given as ranges. Do not invent spring, lerp or tween parameters.

### Section 1 — Utility header
- **kind**: entrance (plays once on load), then static. **(inferred)**
- **what moves**: the three header clusters (left nav, wordmark, right controls) as one group; the closing rule; the notice chip separately.
- **from → to**: clusters `opacity 0 → 1`, **no translate** — the header does not slide. Rule `scaleX 0 → 1` from its centre. Chip `opacity 0 → 1`, `scale 0.96 → 1`, settling at its `rotate(-2.5deg)` resting angle.
- **range**: trigger is page load, not scroll. Clusters: 300–500ms, ease-out, no stagger between the three. Rule: same window, 400–600ms. Chip: begins 250–400ms after the clusters, 250–400ms duration — it is the last thing to arrive on the page.
- **reduced motion**: all three appear at their final state immediately, no fade, no scale, no rule wipe. The chip keeps its `-2.5deg` rotation (that is layout, not animation).

### Section 2 — Hero stage
- **kind**: entrance on load for 2a/2b/2c and 2d; 2d additionally **scroll-linked** thereafter. **(inferred)**
- **what moves**:
  - 2a headline — the two lines, each masked by its own line box.
  - 2b attribution and 2c dates — as one pair, moving identically.
  - 2d artwork band — the whole image.
- **from → to**:
  - 2a: each line `translateY 100% → 0` inside a line-height-tall `overflow: hidden` box, `opacity 1` throughout (a clip reveal, not a fade). Line 2 is staggered **80–140ms** behind line 1.
  - 2b/2c: `opacity 0 → 1`, `translateY 12–16px → 0`. They start together, **150–250ms** after headline line 1.
  - 2d: `translateY 40–60px → 0`, `opacity 1` throughout. **The image never fades in** — fading it reveals the seam it exists to hide. It starts with the headline, or slightly before.
- **range (entrance)**: trigger is page load — the whole hero is above the fold, so there is no scroll trigger. Total choreography 800–1200ms end to end. Easing: a single ease-out curve for everything (`cubic-bezier(0.22, 1, 0.36, 1)` is a safe stand-in); no bounce, no overshoot, no elastic. Stagger order: artwork → headline line 1 → headline line 2 → attribution + dates → notice chip.
- **range (scroll-linked, 2d only)**: from the moment the page begins to scroll until the section's bottom reaches the viewport top — i.e. over one viewport of scroll — the artwork translates up **0 → −30 to −50px** while the page moves −825px, a slow parallax. This is a function of scroll position and **reverses exactly on the way back up**. Distance **not measured**; keep it under 60px — more than that pulls the pale ground down past the headline and a hard top edge becomes visible. The text layers 2a/2b/2c are **not** parallaxed; they scroll at page speed.
- **reduced motion**: headline lines are visible at final position with no clip reveal; 2b/2c and 2d render at final position with no translate; the scroll-linked parallax is disabled entirely (artwork pinned at `translateY: 0`).

### Interaction transitions (not part of the scroll choreography)

- **Nav "Index" hover** — a 1px `#A93825` underline grows from the left, 150–200ms ease-out; text colour unchanged. Reverses on leave.
- **Hamburger hover** — the three bars shift to `#A93825`, 120ms, no movement.
- **Hamburger press / Index open** — a full-screen index panel drops in over the hero; opening 300–400ms ease-out, closing 200–300ms ease-in. The hero does not move behind it.
- **Language item hover** — inactive item goes `#977549 → #383637`, 120ms. The active item stays `#A93825` and is not hoverable.
- **Sound toggle press** — label swaps between the on/off strings and the icon's wave strokes toggle; the on state carries `#A93825`, the off state `#977549`. Instant swap, 120ms colour crossfade, no icon rotation.
- **Notice chip hover** — nothing. It is a static notice, not a control.
- **Focus-visible** — 2px `#383637` outline at 2px offset on all four interactive items. No accent-coloured focus ring.

---

## 9. Responsive (below 640px)

- Container margin drops from 240px to **20px**; the text box becomes fluid.
- Header: the centred wordmark moves to the **left**, replacing the "Index" label; the hamburger stays far left; `DE / EN` stays far right and the **sound toggle is dropped**. Header height falls to 72px. The rule spans the new container.
- The notice chip moves to sit **below** the header rule, flush left, still rotated −2.5deg, full-width-minus-margins is *not* allowed — it stays shrink-to-fit.
- Headline: **48px / 0.92 line-height**, still hard-wrapped to two lines, still centred. Tracking relaxes to −0.005em.
- 2b attribution and 2c dates **stop being left/right pairs**. They stack under the headline, both **centred**, attribution first, dates second, 20px apart, at 16px / 1.4. They no longer overlap the headline.
- 2d artwork: height rises to **48vh**, `object-position: 60% bottom` so the bagpiper and the two central figures survive the narrower crop. Still full bleed, still bottom-anchored, still no fade.
- Section height stays 100vh.

---

## 10. Don'ts

- **Do not fade the top of the painting into the page.** No gradient mask, no `linear-gradient(to bottom, transparent, ...)`, no scrim div, no feathered PNG, no blur, no `opacity` ramp at the edge. The blend comes from the page background being the painting's own ground colour and nothing else. A gradient here is the single most damaging mistake available.
- Don't put the image in a card, a rounded container, a bordered frame or an inset with margins. It is full bleed and hard-edged on all sides it touches.
- Don't lay a dark overlay, tint or `background-color` wash behind the headline "for contrast". The contrast is already there because the headline sits over the painting's empty pale ground.
- Don't crop the image 16:9 as a banner with the figures centred. The crop is ~3.1:1 with a third of the frame empty at the top — that emptiness is where the type lives.
- Don't colour-grade, desaturate, duotone or "modernise" the painting. Its warmth is the palette.
- Don't set the headline in a sans, a geometric serif, a slab, or at weight 600+. It's a 400-weight high-contrast serif.
- Don't open the headline's line-height to 1.1 or 1.2. It is 0.88 — the lines nearly collide, and that tension is the design.
- Don't centre the attribution and dates at desktop, and don't box them. They are flush to the 960px container's left and right edges, vertically centred on the headline, and the headline overlaps into the space between them.
- Don't make the header rule full-bleed. It stops at the 960px container while the image below it does not — that mismatch is intentional.
- Don't stretch the text container to 1200px or 1440px. 960 of 1440 is the measure; the wide margins are the point.
- Don't add a CTA button, a "Buy tickets" pill, a scroll-down chevron, a breadcrumb, or a hero subheading paragraph. There are exactly four text elements plus a notice chip.
- Don't use `#A93825` on anything larger than a 1px underline, a 3-character label or a small icon. It is the painting's colour, borrowed for state, not a brand fill.
- Don't use `#FFFFFF` for the chip background — it must be the cream, or a chip slightly lighter than the ground, never pure white against `#F8F5EC`.
- Don't straighten the notice chip. The −2.5° tilt reads as a sticker applied over the layout and is the only informal gesture on the page.
- Don't animate the image's opacity on entrance or on scroll — it slides, never fades, because a partially transparent image reveals the seam.
- Don't parallax the text. Only the artwork moves at a different rate, and by less than 60px.
- Don't add a sticky header, a shrink-on-scroll header, or a backdrop blur bar. The header scrolls away with the page.
- Don't use drop shadows on type or a text-shadow to "lift" the headline off the painting.