## 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/duolingo-com/3a8c78c9-bd82-49c8-8251-8e9f7b022530-1789146240317-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/duolingo-com/3a8c78c9-bd82-49c8-8251-8e9f7b022530-1789146235228.webp
- Design on Kage: https://kage.design/designs/duolingo-landing-page

## Before you start
Ask the user: what product are you building, who is it for, and what brand assets do they have (name, logo, colours, typeface, mascot or illustration style)? Wait for the answers before writing code. Apply everything below to their product, not to the reference.

## Page structure
1. **Header**: slim white bar with small logo mark + wordmark left, a single utility control (site language) right. No nav links — this page funnels to sign-up.
2. **Hero**: two columns — floating illustration cluster of characters/mascot left, right column with a short two-line headline, a bright solid pill primary button ("Get started") stacked above a bordered secondary pill ("I already have an account").
3. **Course strip**: full-width horizontal scrolling row of small uppercase chips with tiny icons, with left/right chevrons; acts as a divider between hero and features.
4. **Feature sections (x4)**: each is a two-column band with generous vertical padding. Alternate illustration/text sides: (a) text left / phone-in-illustration right, (b) illustration left / text right, (c) text left / illustration right, (d) illustration left / text right. Text block = bold lowercase heading in brand colour + one short grey paragraph, sometimes with a coloured inline link.
5. **App download section**: breaks the rhythm — centred two-line navy heading, two store badges side by side, then a large collage of floating phones, tiles and confetti shapes filling the space below.
6. **Premium band**: full-bleed dark navy section, large glossy gradient character illustration left, italic display wordmark + a single white pill CTA right. The page's only dark moment.
7. **Secondary product feature**: return to alternating layout — lowercase green heading, paragraph, outlined pill CTA left; big illustration right.
8. **Closing CTA**: centred large heading + primary button, then a wavy SVG green shape that sweeps the page into the footer.
9. **Footer**: on the green wave, five link columns (About, Products, Apps, Help, Privacy) plus a social column, then a site-language row of many language links; bottom strip on green.

## Design language
- Build hierarchy from colour, not chrome: headings in saturated brand green (#58CC02), body text in muted grey (#777), headings set in a rounded heavy sans, lowercase, large (~40–56px), tight line-height.
- One accent colour carries all CTAs: solid green pill buttons with a slightly darker green bottom edge (2–4px darker border-bottom, subtle pressed affordance). Secondary buttons are white with a 2px light grey border and bold coloured text. Buttons always uppercase, letter-spaced, extra-rounded (12–16px radius on tall pills).
- Page background stays pure white; sections separate with whitespace alone, except one deliberate full-bleed dark navy (#131F24) band for the premium offer to create contrast.
- Alternate text/illustration sides in feature sections to create a zig-zag reading rhythm, then break the rhythm with a centred, denser collage section so the page doesn't feel mechanical.
- Illustration style: flat vector characters with bold saturated colours (green, blue, orange, pink, purple), thick friendly shapes, slight 3D isometric phone mockups. Keep every illustration tied to the product (phones, characters, icons), never abstract stock.
- Borders are minimal and thin (#E5E5E5); shadows are essentially absent — depth comes from illustration and colour.
- Density: hero and features are airy (150–200px section padding); the footer is the densest zone, small 13–14px links in five columns.
- Motion: the course strip scrolls horizontally; keep other animation subtle (gentle float on illustrations, button press states).

## Never
- Do not copy the owl mascot, "duolingo" name, Super Duolingo wordmark, character designs, or any of the reference copy.
- Do not reuse the exact green/white palette if the user's brand has its own colours — adapt the rules to their palette.