## 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/ynab-com/e7a182c7-b158-445f-80c9-594412562788-1789146549729-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/ynab-com/e7a182c7-b158-445f-80c9-594412562788-1789146545386.webp
- Design on Kage: https://kage.design/designs/ynab-landing-page

## Before you start

Ask the user what product they are building, who it is for, and what brand assets they already have (name, colour palette, fonts, logo). Wait for the answers before writing any code. Everything below is applied to *their* product, not to the reference site.

## Page structure

1. **Announcement bar** — thin full-width dark strip above the nav with one short promotional line, an inline text link, and a dismiss ×.
2. **Navigation** — dark navy bar: bold wordmark left, 3–4 dropdown items and one flat link centre-left, Log In link plus a lime pill CTA button right.
3. **Hero** — two-column split on an indigo→purple gradient with overlapping organic wave shapes. Left: two-line serif display headline, italic serif subline, lime CTA button, and a tiny reassurance line under it. Right: an illustrated phone mockup showing a real app screen, surrounded by playful floating graphics and sparkle accents. Wavy curves transition into the next section.
4. **Press / proof strip** — one horizontal row on cream of 5–6 press badges and review scores (publication wordmarks, star ratings, review counts), small and muted.
5. **Stats section** — left column: section headline, short empathetic paragraph, CTA button. Right: 2×2 grid of white cards, each with an oversized navy percentage and a one-line caption, closed by a thick green baseline rule; a footnote in small type below.
6. **Founder quote** — centred, lots of whitespace: a large italic serif pull-quote where each line sits on a hand-drawn blue highlighter band, followed by a small bold attribution line.
7. **How-it-works** — left: headline, stat-backed subline, then three compact steps each with a small flat illustrated icon, bold title and 1–2 line description, ending in a green CTA. Right: a collage of desktop app screenshot overlapping two phone mockups.
8. **Savings claim** — big two-line sans headline stating a concrete numeric outcome, two short paragraphs, then a curved hand-drawn arrow pointing down into the next section.
9. **Testimonials** — three equal white cards, each with a large coloured quote-mark icon, a bold sans headline quote, body paragraph, and a footer row of avatar photo + name + tenure. Each card has a wavy coloured bottom edge (green, teal, purple) that bleeds into the section below.
10. **Closing CTA band** — deep indigo/purple section entered via layered waves. Left: phone mockup of a real app screen with doodle plus-marks and sparkles around it. Right: white two-line headline, short paragraph, and two buttons side by side (solid lime primary, white-outline secondary).
11. **Footer** — navy, wave transition from the band above. Tree-style brand mark, a search input, a row of social icons, small legal paragraph, then four link columns (Company, Programs, App, Legal) with lime column titles, copyright line at the bottom.

## Design language

- **Emotional framing first**: every section answers a feeling (worry → proof → belonging → outcome → steps → testimonials → commit), and copy is written in second person, warm and plain. Keep that voice in headings and body copy.
- **Colour system**: cream canvas `#FDF3DF`; dark navy ink for text and dark sections `#1D2B4F`; indigo→purple gradient for hero and closing band (`#5456E0` → `#7A6CF0`); one loud accent lime for every primary CTA `#ABE871` with navy label text; supporting teal `#2FD3A8` and periwinkle `#7B84F5` for accents and card bottom waves. White `#FFFFFF` for cards. Never use more than these six roles.
- **Type pairing**: a chunky rounded serif (Recoleta-like) for display headlines and stat numerals, a neutral geometric sans (Inter-like) for body, nav and buttons; italic serif reserved for the founder quote. Scale: hero ~64–72px, section heads ~40–48px, stat numbers ~56–64px, card headlines ~20–24px bold sans, body ~16–18px with 1.5 line-height.
- **Shape language**: wavy SVG dividers between major sections, soft blob and cloud shapes behind heroes, doodle details (sparkles, plus-marks, hand-drawn arrows) used sparingly to direct the eye. Cards use ~16–20px radius, hairline borders, almost no shadow.
- **Accent rules**: green baseline rules under stat cards; blue highlighter bands behind quote lines; wavy coloured card footers; lime buttons always pill-shaped with navy text; secondary buttons are white with a 1.5px white/indigo outline on dark backgrounds.
- **Rhythm down the page**: alternate dense proof sections (logo strip, stat grid) with airy editorial moments (the quote gets the most whitespace). Content sections sit on cream; the last act inverts to dark gradient band + navy footer so the CTA is the visual climax.
- **Product imagery**: show the actual UI — illustrated device mockups with real screens, slightly rotated and overlapping, never generic stock photos.
- **Motion**: calm — gentle hover lift on cards and buttons, no parallax or heavy animation.

## Never

- No YNAB wordmark, tree logo, or any copy from the reference ("Do you worry about money?", "Get YNAB. Get good at money.", testimonial texts, stats).
- No press logos or review badges from the reference (NYT, WIRED, WSJ, Trustpilot, Apple App of the Day, Entrepreneur).
- No illustrations of flying dollar bills, the reference phone screens, or the founder photo/quote — substitute the user's own brand mark, product screens and customer stories.
- Never present the result as YNAB or reuse its exact tagline structure.