## 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/teenage-engineering/02d63820-361c-4c31-b791-8f2d75691669-1789060797-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/teenage-engineering/02d63820-361c-4c31-b791-8f2d75691669-1789060161282.webp
- Design on Kage: https://kage.design/designs/teenage-engineering-landing-page

## Before you start
Ask the user what they are building, who it is for, and what brand assets they already have (name, colours, type, product imagery). Wait for the answers before writing code. Everything below is a design language to apply to *their* product — not a clone of the reference.

## Page structure
Build one long scrolling page with these sections in order:

1. **Utility nav strip** — thin white bar. Left: wordmark set small. Middle: 4–5 links in ~10px caps, each preceded by a small black pictogram, each with a second line of even smaller grey sub-labels. Right: one large black brand glyph (~64px) that visually balances the tiny links. Optional language/country micro-list in grey.
2. **Hero** — a two-line all-caps ultra-condensed black headline spanning most of the viewport, tight leading. Right of it, a small accent-coloured promo flag: series name, vertical 'buy now', and a mini list of product codes. Below, a full-width black-and-white line-art illustration scene with speech bubbles that tells a story. All on white.
3. **Cinematic product section (dark)** — full-bleed near-black background, one product photographed dead-centre, huge empty darkness around it, 10px caption pinned bottom-left.
4. **Media/merch still-life (dark)** — full-bleed black, second still-life (accessories/merch), tiny grey caption near its lower edge.
5. **Light product hero** — full-bleed white, one large product on a plain studio background, tiny caption bottom-left (optionally bilingual).
6. **Three-up buy row** — white, three equal columns divided by 1px hairlines; each column: tiny name top-left, lowercase 'buy now', product image centred.
7. **Macro close-up (dark)** — full-bleed black detail shot of the product's controls, one strong accent colour present (e.g. orange knobs), caption bottom-left.
8. **Two-up pack row** — same hairline grid, two wide columns for bundles with 'buy now'.
9. **Collage break** — a full-bleed section that abandons the grid entirely: hand-made collage of cut-paper textures, taped labels, stickers, bold mixed-style lettering as headline, and small product mockups embedded in the scene. This resets the page's rhythm.
10. **Three-up buy row** for that section's product family.
11. **Group shot (dark)** — full-bleed black with a whole product lineup arranged in a row, caption bottom-left.
12. **Three-up buy row** for that family.
13. **Product portrait (dark)** — one more full-bleed dark hero shot.
14. **Variant row** — three columns showing colourways of the same product (light / dark / accent colour), each 'buy now'.
15. **Accessory wall (light)** — a wide light band with the small product family shown packaged/hanging in a row, then a 3×3 grid of small cards with 1px hairline borders, each with model name + 'buy now'.
16. **Footer** — black strip with a centred 'explore all products' link; below it a thin bar: country selector left, a row of plain text links (newsletter, retailers, store, terms, press, contact, returns), copyright right.

## Design language
- **Type at two extremes**: display type is an ultra-condensed heavy grotesque, all caps, tight leading and negative tracking, scaled so a two-line headline fills the viewport width. Everything else is a tiny neutral sans or mono, 9–11px, uppercase for labels and nav, lowercase for links. Hierarchy comes from this jump — there is almost nothing in between.
- **Rhythm via alternation**: full-bleed cinematic dark sections (one object, massive negative space) alternate with tight white catalog rows (equal columns, hairline dividers). Sparse → dense → sparse is the page's beat. Captions on full-bleed sections are always tiny and pinned bottom-left.
- **Colour**: white #ffffff and near-black #0a0a0a carry everything. One warm accent — orange-red ~#ff4b00 — is rationed: promo flag, 'buy now' affordances, and at most one physical detail per section. A section may carry its own local palette (e.g. green + orange collage) but only within that one section.
- **Borders, radius, shadow**: 1px solid black hairlines for all card and column borders; border-radius 0 everywhere; no UI shadows — depth comes only from photographic lighting.
- **Imagery**: studio photography of a single product on black or white with dramatic light falloff; storytelling moments use flat black-and-white line-art illustration or hand-made collage, never gradients or generic 3D decoration.
- **Micro-labels**: bilingual or dual-script micro-captions (product name in latin plus a second script) add texture; keep them grey, 9–10px.
- **Interaction**: links are plain text with underline or colour shift on hover; 'buy now' stays lowercase and tiny, sometimes set vertically or inside a small accent flag. No filled buttons except tiny accent rectangles/pills.
- **Motion**: essentially static — photography and illustration carry the page; add only subtle hover states.

## Never
- No brand names, product names, model codes, logos, wordmarks, comic characters, illustrations, product photography or copy from the reference.
- Never present the result as the reference brand or reuse its label text.
- Do not soften the language with rounded corners, gradients, glassmorphism or decorative shadows — they contradict the system.