## 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/strawberrybrowser-com/0a6dd4bb-409f-4c45-aa48-6abac7e2076e-1789060532-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/strawberrybrowser-com/0a6dd4bb-409f-4c45-aa48-6abac7e2076e-1789060057226.webp
- Design on Kage: https://kage.design/designs/strawberrybrowser-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, fonts, mascot/illustration style). Wait for the answers before writing any code. Everything below is applied to *their* product, not to the reference.

## Page structure
1. **Nav** – slim top bar: wordmark + beta tag left, centred text links (use cases, pricing, blog, about, contact), "Account" text link and a black pill "Download" button right.
2. **Hero** – centred: one huge display headline, two-line grey subhead, two CTAs (black pill primary, white pill secondary). Below, four small mascot characters flank a large product screenshot with rounded top corners that bleeds into the next section.
3. **Logo strip** – "Trusted by fast-growing companies worldwide" caption in small caps, then a row of greyed-out partner wordmarks.
4. **Meet your companion** – two-column band: left text block (heading, short paragraph, black download pill), right a row of three mascot characters. Playful breather after the hero.
5. **Full-width statement** – centred large heading + grey paragraph, followed by a mosaic of colourful app icons fading at the edges, then a floating chat-input mockup with a sample prompt.
6. **Feature bento grid** – centred heading, then a 2x2 grid of cards. Each card: a soft-tinted visual area (abstract shape, screenshot, or UI mockup) above a bold card title and short grey description.
7. **Use-case carousel** – left-aligned heading + subtext, prev/next arrows top right, three mini browser-window cards each tagged with a URL-style chip (`/use-case`), tiny window chrome, mascot, and a title + description + small integration icons below.
8. **Onboarding strip** – "Get started in minutes": three equal columns (install / import data / meet companion), one with a black download pill, one with a checklist of importable items, one with mascots.
9. **Big composite screenshot section** – centred large statement heading ("1.5 billion websites…") over a large layered product screenshot composition with overlapping panels.
10. **Testimonials** – centred heading, then a 3x2 grid of quote cards: quote text, avatar, name, role. Hairline borders, no colour.
11. **Security section** – left column with heading, short copy and download CTA; right side a 2x2 grid of icon + bold title + one-line description (control, compliance, local passwords, no training on data).
12. **FAQ** – two columns: left heading + "Contact us" pill; right a stack of pill-shaped question chips, the expanded answer rendered as a dark rounded chat bubble with a small mascot tail — the FAQ itself is styled as a conversation.
13. **Final CTA** – centred "Experience [product] for free" heading, black download pill, then the logo strip repeated.
14. **Footer** – four link columns (Product, Compare, Explore, Company) beside the wordmark and copyright, with a bottom row of legal links.

## Design language
- **Background & colour**: warm off-white/cream base (~#FAF6F0), near-black text (~#1A1A1A), mid-grey body (~#8A8A85). Accent colours arrive only through mascot pastels (lavender ~#A78BDB, coral ~#D98A85, mint ~#7FBFA8) and small UI moments — never as large fills. One black pill button is the single strongest CTA colour.
- **Type**: one grotesque family throughout. Display headings ~64–96px at medium weight with tight tracking; body 14–16px with generous line-height; captions ~12px in muted grey. Hierarchy comes almost entirely from size jumps between huge headings and small body — keep that contrast extreme.
- **Cards & borders**: hairline 1px borders in warm light grey, ~16–24px radius, essentially no drop shadows — depth comes from subtle tinted background fills in card visual areas (pale green, pale pink, pale grey).
- **Mascots as rhythm**: a recurring pastel character set ties sections together. If the user has no mascot, use a consistent simple illustration or emoji-scale accent that repeats at hero, mid-page, and FAQ.
- **Rhythm down the page**: alternate centred full-width statements with asymmetric two-column bands and dense grids; insert playful illustrated breather sections between information-heavy grids so the page never feels monotonous.
- **Product proof**: show real UI in mockups (browser chrome, chat input, workflow cards) rather than abstract illustrations — draw simplified mockups in code with matching border/radius language.
- **Buttons**: two sizes of pill (fully rounded): black with white text for primary, white with hairline border for secondary. Hover: slight darken/translate.
- **Motion**: subtle — gentle fade/translate on scroll into sections, marquee-like logo rows, carousel arrows for the use-case row. Keep transitions fast (200–300ms) and understated.
- **FAQ as conversation**: render answers as dark rounded chat bubbles with rounded question chips above; it reinforces an assistant product's personality.

## Never
- Do not copy the Strawberry name, wordmark, logo, mascot designs, testimonial quotes, partner names, or any of its copy.
- Do not clone the exact layout pixel-for-pixel; rebuild the same design language for the user's own product and brand.
- Do not use third-party app icons or logos in mockups; substitute neutral placeholders.