## Reference images

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

- Full page: https://kage-design-assets.t3.tigrisfiles.io/screenshots/hinge-co/fc8d8d16-7276-4f4c-b1c9-567702ba4b3c-1789146918698-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/hinge-co/fc8d8d16-7276-4f4c-b1c9-567702ba4b3c-1789146914903.webp
- Design on Kage: https://kage.design/designs/hinge-landing-page

## Before you start
Before writing any code, ask the user: what product or company is this page for, who is the audience, and what brand assets do they already have (brand name, logo, primary colours, serif/sans typefaces, existing photography)? Wait for the answers. Everything below is a design language to apply to *their* product, not a clone of the reference site.

## Page structure
1. **Transparent nav over hero** — a handful of small sans-serif links split left/right with the wordmark centred, floating directly on the hero image with no bar or background.
2. **Full-bleed photo hero** — one large documentary-style photograph filling the viewport width, with a two-line white serif headline anchored bottom-left over a subtle darkening of the image. No CTA button in the hero.
3. **Intro / approach section (light band)** — small coloured eyebrow label, then a very large serif statement broken across two lines, with one word circled by a hand-drawn ellipse. A hand-drawn curved arrow points from the headline down to a narrow body paragraph offset to the right column, followed by a solid dark pill button.
4. **Expertise section (light band)** — a large photo flush to the left edge of the viewport, paired with a text block on the right half: eyebrow, serif headline, short paragraph. No button; the image does the persuading.
5. **Testimonial band (dark, near-black)** — eyebrow label top-left, an oversized quote glyph, then the quote itself set large in serif across roughly half the page width, a short attribution line, and thin horizontal progress bars (one active, others muted) indicating a rotatable carousel of quotes.
6. **Careers section (light band)** — eyebrow, serif headline and a one-line paragraph on the left third with a pill button; the remaining two-thirds are a horizontal strip of candid office photos with slightly rounded corners, the last one cropped by the viewport edge to imply horizontal scrolling.
7. **Press band (dark)** — eyebrow, big serif headline, one supporting sentence, and a light pill button. This band visually merges into the footer below it.
8. **Footer (dark, continuing the band)** — wordmark on the left, three columns of links headed by muted small labels (site index, resources, legal), a couple of social icons, then a hairline-separated bottom bar with copyright and a language selector.

## Design language
- **Canvas and bands**: the page alternates a warm cream base (`#F7F2E9`) with near-black bands (`#191919`). Light sections feel airy and editorial; dark sections are reserved for gravity — testimonials and press — so the palette itself signals tone shifts down the page.
- **Accent**: a single deep aubergine/plum (`#5A2A4A`) used only for eyebrow labels and hand-drawn annotations on light backgrounds; on dark bands the eyebrow switches to cream.
- **Type pairing**: one high-contrast serif for all display headlines (set very large, ~56–96px, tight leading ~1.05, no bolding — let the serif carry the weight) against a small neutral sans-serif for everything else: eyebrows at ~13px with slight letter-spacing, body at 15–16px with a generous ~1.6 line-height.
- **Hierarchy pattern**: every section opens with the same micro-pattern — eyebrow label, then serif headline — which creates a repeatable rhythm the eye can follow; variation comes from where the text block sits (left, right, or half-width), not from changing the type treatment.
- **Asymmetry and whitespace**: use a loose 12-column grid but deliberately misalign — paragraphs offset into one column with empty columns beside them, images flush to the viewport edge while text keeps a wide margin. Whitespace between sections is large; the page should breathe.
- **Buttons**: fully-rounded pills with no borders or shadows. On light bands: near-black fill, cream label. On dark bands: cream fill, near-black label. Only one button per section.
- **Annotations**: add one or two hand-drawn touches in the accent colour — an ellipse around a key word in a headline, a curved arrow connecting headline to body copy. Keep them sparse; they are seasoning, not structure.
- **Photography**: candid, documentary-style images of real people in real environments (no stocky studio poses), warm natural tones. Use one full-bleed hero, one edge-flush half image, and a rounded-corner (~8px) horizontal photo strip that bleeds off the right edge to imply a carousel.
- **Motion/interaction**: testimonials rotate via a carousel indicated by thin progress bars (~2px lines) rather than dots; the photo strip implies drag/scroll. No other visible ornament — interactions stay quiet.
- **Footer**: dark, quiet and dense — muted column labels, low-contrast link lists, a hairline rule before the legal bar.

## Never
- Do not copy the reference brand's name, wordmark, tagline (e.g. any "designed to be deleted"-style line), mission copy, testimonial text, press wording, or link labels.
- Do not reuse the reference's photographs, illustrations, or hand-drawn artwork — source or create original imagery in the same documentary spirit.
- Do not reproduce their exact font choices; pick serif/sans pairings that suit the user's own brand.
- Never present the output as the reference product — it is the user's product wearing this design language.