## 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/zola-com/ad1936e8-70c2-47e9-b9d5-59869832f93f-1789146280251-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/zola-com/ad1936e8-70c2-47e9-b9d5-59869832f93f-1789146275382.webp
- Design on Kage: https://kage.design/designs/zola-landing-page

## Before you start
Ask the user: what product are you building, who is it for, and what brand assets exist (name, logo, colours, fonts)? Wait for answers. Everything below is applied to their product, not the reference site.

## Page structure
1. **Header bar**: white, logo left, "log in" link and a pill CTA button right. Simple, no nav menu.
2. **Announcement strip**: full-width slim bar below the header with a small "New" pill, one-line promo copy, and an underlined "try it" link.
3. **Hero**: full-bleed lifestyle photo with a dark overlay; large serif headline centered, short sans subcopy, two pill buttons (primary light / secondary dark), and a small scroll-down arrow. Photo bleeds to all edges.
4. **Feature index / tab strip**: a light section introducing the product areas, with a right-side sticky vertical nav rail listing each section (used as in-page anchors) plus a "chat with us" support link pinned near the bottom.
5. **Long teal feature band**: 5 alternating rows on a deep teal background. Each row = large photo card on one side with small floating UI chips (avatar cluster, price tag, "add foil stamp", "add gift" buttons), and on the other side a big serif headline, 1–2 sentence subcopy, and 1–2 pill CTAs. Headline accent colours rotate (mint, lavender, pink).
6. **"Difference in the details" split**: left = editorial serif heading plus an accordion list of small features with arrows; right = a large burgundy panel containing a mock product UI card (contribution widget with dollar stepper, progress bar, photo thumbnail).
7. **Support section**: light background, two columns — photo with chat-bubble overlays, and a serif/sans mixed heading ("Meet …, your expert advisors"), subcopy, dark pill CTA.
8. **Category directory**: heading plus a grid of circular line-icon buttons with labels (8 per row, wrapping), then a row of dropdown-style link pills ("… by state", "… in top cities").
9. **Footer**: light grey, 3–4 link columns (About; Advice and support), brand column with tagline, quick links, app-store badges, social icons; thin legal bar at the bottom with privacy links.

## Design language
- Build hierarchy with oversized serif headlines (~48–72px, tight leading) over small, airy sans body copy (~16px, generous line height); pair a display serif for headings with a clean geometric sans for everything else.
- Use colour in large blocks: a warm white top, then one deep saturated section colour (deep teal ≈ #0E4A44) carrying most of the page, then a contrast panel (burgundy ≈ #8E2D50) near the end for one highlight, then back to light for footer.
- Rotate 3–4 pastel accents (lavender ≈ #C9B8F0, mint ≈ #BFF0DC, pink ≈ #F6C6D8, soft yellow) for pill buttons and headline tints; each feature row gets its own accent so scrolling has rhythm.
- CTAs are fully-rounded pills: solid accent for primary, 1px white/dark outline for secondary. Small text (~14px, medium weight).
- Photo cards use large radius (~16–24px) and carry small white floating UI chips (avatars, steppers, price tags) with tiny icons and 1px borders — mock-product elements layered over photography to make benefits concrete.
- Borders are minimal; depth comes from colour blocking and photo cards, not shadows. Icons are thin-line circles in the directory grid.
- Density: hero and feature rows are spacious (large vertical padding ~96–120px); the category grid and footer tighten up into smaller, denser text.
- Motion should be calm: hover states on pills darken/lighten slightly, accordion rows expand on the details section, sticky right rail highlights the active section on scroll.

## Never
Never reuse Zola's name, logo, ring icon, copy, or its wedding photography; never clone the exact section headlines or vendor-category labels; never present the result as Zola.