## 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/lemonade-com/fec12946-54bf-4cf0-ac52-dcd9bbeb95c9-1789146795796-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/lemonade-com/fec12946-54bf-4cf0-ac52-dcd9bbeb95c9-1789146793064.webp
- Design on Kage: https://kage.design/designs/lemonade-landing-page

## Before you start
Ask the user what they are building, who it is for, and what brand assets they already have (product name, brand colours, typefaces, logo). Wait for the answers. Everything below is applied to their product, not to the reference.

## Page structure
1. **Utility nav** — slim bar with product links on the left and an account link on the right; a centered script-style wordmark sits on its own line just below. No buttons in the nav.
2. **Hero** — centered two-line serif headline, one-line gray subhead, solid pink uppercase CTA; a full-width panorama of grayscale hand-drawn line illustrations (buildings, vehicles, people) anchors the bottom of the band and fades into the page background.
3. **Press bar** — a single centered row of eight small grayscale publication wordmarks.
4. **Bundle pricing** — centered head + subhead, then five equal white cards in a row, each with a top-left checkbox, a line-drawn product illustration, product name and a "from $X/mo" price; a pink CTA closes the band.
5. **Social proof** — centered witty head plus short subhead, five oversized pink stars (~90px), then a horizontally scrollable row of white tweet-style quote cards (avatar, name, gray handle, short text with pink-highlighted mentions/hashtags) that peek off both edges.
6. **Speed demo** — centered head/subhead, then two overlapping phone mockups showing a chat UI with a pink "Done." bubble, flanked by handwritten-style annotations with arrows stating time savings on each side.
7. **Switcher stats** — centered head and subhead, then a floating cluster of soft-gray bubbles sized by percentage with company names inside, followed by a pink CTA.
8. **How it works** — two centered explainer paragraphs, then a large illustrated donut/ring diagram with a removed slice, annotated labels around it (flat fee / give back / fast claims) and exactly one pink-filled element; a small footnote line sits under it.
9. **Trust badges** — three stamp-like circular badges (certification, stock listing, rating) each above a bold caption and a two-to-three-line paragraph, in a three-column grid.
10. **Footer** — solid black, eight columns of links grouped by product and topic with uppercase gray group titles, then a row with social icons, phone, email, a locale selector and app-store badges, and long 11px legal fine print.

## Design language
- **Palette:** off-white #F7F7F5 and white #FFFFFF fields, near-black #1B1B1B type, warm grays #8A8A8A / #B9B9B9 for illustrations and secondary text, and one hot-pink accent ~#FF0083 reserved for CTAs, stars, inline highlights and one focal element per band. Buttons darken to ~#E00074 on hover.
- **Type pairing:** a transitional serif for display headlines only — hero 56–64px at 1.1 line height, section heads 36–40px — paired with a neutral sans for everything else: body 16–18px, gray subheads 18px, button labels 12–13px uppercase with 0.08em letter-spacing. Almost nothing sits between headline and body sizes; the scale does the hierarchy work.
- **Illustration:** one consistent hand-drawn outline style — single-weight gray strokes with sketchy detail and rare pink fills. Keep illustrations monochrome so the accent stays scarce and loud.
- **Bands and rhythm:** every section is a centered column (~1100px max width) with 96–140px vertical padding; alternate white and #F7F7F5 bands so section changes read without dividers, and end most bands with the same pink CTA to keep momentum.
- **Cards:** white surfaces, 12–16px radius, soft diffuse shadow (0 12px 32px rgba(0,0,0,.08)), generous inner padding, flat checkboxes, no hard borders.
- **Data made friendly:** percentages become soft gray circles (#EFEFEC) sized by value with serif numerals; process diagrams become annotated line drawings with one pink fill — never bar charts or dense tables on a consumer page.
- **Footer inversion:** black #0F0F0F field with white uppercase group titles, 13px gray links, small icons and 11px fine print; density is allowed to spike only here, as a contrast to the airy page above.
- **Motion:** subtle only — card hover lift, button colour shift, slow horizontal scroll of testimonial cards; no parallax or heavy animation.

## Never
- Never reuse the Lemonade wordmark, script logo, its exact pink brand system, or copy such as "Forget everything you know about insurance" or "Instant everything. Incredible prices. Big heart."
- Never copy the lemonade-glass illustration, the pizza/donut diagram, the star-rating framing or the tweet-card content from the reference.
- Never use the press logos or claim endorsements; the finished page must read as the user's own product, never as Lemonade.