## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Component: https://kage-design-assets.t3.tigrisfiles.io/components/monzo-com/b864c421-0184-411c-901f-a4ffc676dbcc-1789060818-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/monzo-com/b864c421-0184-411c-901f-a4ffc676dbcc-1789060760-full.webp
- Component on Kage: https://kage.design/component/monzo-hero

# Build a lifestyle-first image hero

## Before you start
Ask me what my product does, who it is for, and what its brand personality, colours, typography, and conversion goal are. Apply the principles below to my product rather than reproducing the reference or its content.

## Goal
Create a responsive homepage hero that makes the product’s core promise immediately understandable, pairs it with one clear primary action, and uses a warm, human visual to establish emotional context.

## Structure
- Build a compact site header above the hero. On desktop, place the brand mark at the left, a small audience or product switcher beside it, and utility/navigation controls toward the right, ending with a prominent rounded primary action.
- If the product serves multiple audiences or regions, represent those choices as compact pill-shaped controls. Keep them secondary to the main conversion action.
- Place the hero inside a large rounded rectangle with generous side margins on desktop. Use a full-bleed image or video background relevant to the user’s product and audience.
- Add a dark, subtle gradient/scrim over the media, strongest behind the copy and fading toward the opposite side. Preserve enough image detail that the visual still contributes meaning.
- Align the content to the lower-left or vertically centred left side of the hero. Constrain the copy to roughly 420–560px so the headline remains readable and creates a strong visual block.
- Include a short supporting paragraph and one primary CTA beneath the message. Avoid competing secondary buttons unless the product genuinely needs one.
- Keep any trust mark, compliance note, award, or reassurance element visually subordinate and anchored near the lower edge or opposite corner. Only include one when it is relevant to the product.

## Layout and alignment
- Use a max-width container around 1200–1280px, with 24–32px horizontal gutters on desktop.
- Header height should feel compact, approximately 72–88px. Give the hero a minimum height of 620px on desktop, scaling toward 720px when the viewport is tall.
- Use a 12-column mental grid: the copy occupies about 5 columns, while the image carries the remaining visual weight.
- On mobile, stack the header controls or collapse them into a menu, reduce the hero’s side margin, and place the copy near the bottom with 24px padding. Use a fixed or content-driven hero height of roughly 560–680px.
- Keep the CTA large enough for touch, with at least 44px height and a comfortable horizontal padding.

## Typography
- Use the product’s own typeface if available; otherwise choose a friendly contemporary sans-serif with a substantial weight and rounded or humanist forms.
- Make the hero headline bold or extra-bold, approximately 52–72px on desktop with a tight 0.95–1.02 line-height and slight negative tracking. Use 36–48px on mobile.
- Supporting text should be 18–21px on desktop and 16–18px on mobile, with a 1.35–1.5 line-height.
- Keep navigation and control labels around 14–16px, medium weight. Make CTA text 15–17px and semibold.
- Write a concise, benefit-led headline. Use no more than three or four lines at desktop width.

## Colour
- Let the brand determine the accent colour; it should appear in the main CTA, active states, or a small navigation emphasis.
- Use an off-white or very pale neutral page background, approximately #F7F7F5, with a near-black navigation text colour around #17212B.
- Use white or warm white for hero copy, approximately #FFFFFF or #FFF8F0.
- Use a scrim such as rgba(0, 0, 0, 0.48) over the image, potentially increasing to rgba(0, 0, 0, 0.68) directly behind the text.
- Keep header controls light and understated: translucent neutral fills, soft grey borders, or a pale surface that contrasts gently with the page.

## Borders and radius
- Give the main hero a large radius, approximately 44–64px on desktop and 28–36px on mobile.
- Use pill radii for buttons, switches, and compact controls: 999px or half the control height.
- Use subtle 1px borders around outlined controls, approximately rgba(23, 33, 43, 0.18). Avoid heavy borders on the hero itself.
- Use a soft shadow only where needed to separate floating controls from the background; the image and scrim should do most of the visual work.

## Imagery and media
- Choose an authentic, product-relevant lifestyle image rather than a generic abstract background. The subject should remain recognisable behind the text and have a useful focal point toward the right or centre.
- Use `object-fit: cover`, a responsive focal position, and an accessible fallback colour while media loads.
- If using video, respect reduced-motion preferences, provide a poster frame, mute it by default, and never let motion compete with the headline.

## Interaction and accessibility
- Make the primary CTA visibly actionable with a clear hover, focus, and pressed state. A small colour shift or 1–2px lift is enough; avoid exaggerated animation.
- Give every interactive control a visible keyboard focus ring with at least 2px contrast against its surface.
- Ensure copy remains readable against every crop using the scrim, not text shadows alone.
- Provide meaningful alt text for informative imagery; mark decorative media appropriately.
- On narrow screens, prioritise the headline and CTA. Hide or collapse nonessential header controls rather than allowing wrapping or cramped tap targets.

## Never
- Never copy the reference’s logos, product names, exact headline, supporting copy, trust badges, navigation labels, or imagery.
- Never reproduce the reference brand’s exact colours, typeface, iconography, or visual assets; adapt the system to the user’s brand.
- Never use a decorative image that makes the product promise unclear or competes with the CTA.
- Never rely on colour or imagery alone to communicate meaning.
- Never add invented certifications, awards, guarantees, or claims.