## 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/lu-ma/a4be0bf4-46ad-4066-8582-e9890f24d9e0-1789146157883-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/lu-ma/a4be0bf4-46ad-4066-8582-e9890f24d9e0-1789146155422.webp
- Design on Kage: https://kage.design/designs/lu-ma-landing-page

## Before you start
Ask the user what they are building, who it is for, and which brand assets they already have (name, wordmark/logo, brand colours, typeface). Wait for the answers before designing. Apply everything below to *their* product and brand — this reference defines a design language, not content to copy.

## Page structure
One white page, one centred content column (max-width ≈ 1000px), generous vertical rhythm. Top to bottom:

1. **Minimal top bar** — a tiny logo mark at the far left and one small pill button ("Sign in") at the far right. No border, no background, nothing else.
2. **Centred hero** — a modest wordmark, then a 3-line display headline (~64–72px, tight leading) where only the final line is coloured with the brand gradient; a 1–2 sentence grey subhead; a single solid-black pill CTA with a soft glow/shadow beneath it; and a quiet grey text link with an arrow as the secondary action. Surround it with emptiness.
3. **Featured items row** — left-aligned section heading (~20px semibold) mixing one black word and one coloured/linked word (e.g. a location). Below, a horizontal band of 6 media cards: rounded poster image, 2-line clamped title, small grey timestamp. This is the densest band on the page.
4. **Featured collections grid** — 4 columns of cards, wrapping naturally (a 4+2 second row, left-aligned, never stretched to fill). Each card: small rounded-square icon chip, bold name, 2-line grey description.
5. **Category browse grid** — a clean 4×3 grid of tall airy tiles (~120px), each with a small single-colour line icon top-left and a label pinned bottom-left. Give every tile its own pastel icon colour so the grid reads as a spectrum.
6. **Gradient closing statement** — a large (~40px) 2-line sentence in the same pink→orange→yellow gradient, centred alone, followed by two pill buttons (one white with border, one light-grey). It mirrors the hero and signals the page is done.
7. **Hairline footer** — one thin top rule; wordmark plus 4 inline text links on the left, three small social icons on the right; below, a final row of small grey legal links.

## Design language
- **Canvas & rhythm:** pure white (#FFFFFF) throughout; ≈96–128px between major bands, ≈32–40px between a heading and its grid. Alternate dense card bands with airy centred statements so each grid is followed by a breath of whitespace.
- **Hierarchy:** one oversized moment per zone. Only the hero and closing statement get display type; everything between is led by small bold left-aligned headings while the content itself provides the visual interest. Metadata is always the lightest voice: ~13px grey.
- **Type:** one geometric-humanist sans (e.g. Inter or the brand sans) at a strict scale: 64–72px hero / ~40px closing / 20px section headings / 15px card titles / 13px metadata. Leading ~1.05 on display, ~1.5 on body; weight 600 for titles, 400 elsewhere — no italics, no serif contrast.
- **Colour:** text #1A1A1A on #FFFFFF, secondary text #9A9A9A, hairlines #ECECEA. One accent device: a warm gradient — pink #F04F8C → orange #FF8A3D → yellow #FFC94D — reserved for headline text (hero's last line, closing statement) plus one warm-orange interactive word in a heading. Colour otherwise lives only in small icons, each in a single pastel (purple, yellow, blue, teal, orange, pink, green) — never as surface fills.
- **Cards & borders:** flat white cards with 1px #ECECEA borders; radius 12px on tiles/cards, 8–10px on media images; no shadows, no fills. Left-align content inside cards and clamp titles to two lines so rows stay even.
- **Buttons:** pills (radius 999px), compact (36–44px tall). Primary = solid #111 with white text plus a soft ambient glow below; secondary = white with 1px border; tertiary = light-grey #F2F2F0 fill. Labels 14–15px, medium weight.
- **Motion (suggested):** restraint — on hover, darken a card's border to #D9D9D6, nudge the image, and deepen button colour slightly. No parallax, no large animations.

## Never
- No Luma wordmark, sparkle logo, event posters, community names, category labels, illustrations or icon set from the reference.
- Never present the result as Luma or imply any affiliation.
- Keep gradients off backgrounds, buttons and cards — in this language gradient belongs to headline text alone.