## 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/betterment-com/48b23e19-a777-4bc7-89e7-1aceabf18629-1789146502433-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/betterment-com/48b23e19-a777-4bc7-89e7-1aceabf18629-1789146496914.webp
- Design on Kage: https://kage.design/designs/betterment-landing-page

## Before you start
Ask the user what they are building, who it is for, and which brand assets they already have (name, colours, typography, imagery, and logos). Wait for their answers before proceeding. Apply every instruction below to that product, not to the reference site.

## Page structure
1. **Utility audience bar** — Add a thin black strip at the top with compact links for the primary audience groups.
2. **Primary navigation** — Place the brand area, category links, dropdown indicators, login link, and a high-contrast primary CTA over the hero.
3. **Hero** — Use a tall, full-bleed photographic or product-in-use background with a blue treatment. Set a large left-aligned serif headline, short supporting copy, three compact benefit bullets, CTA, disclaimer, and a small media-control affordance.
4. **Account/product chooser** — Transition into a saturated blue section with a centered heading and three evenly spaced columns. Each column contains a category title and stacked, lightly divided product rows with small icon tiles, descriptions, and arrow affordances. Finish with a centered legal note.
5. **Investment approach introduction** — Fade from blue into pale beige through a soft blue gradient and center a serif section heading.
6. **Investment options comparison** — Show three large overlapping product cards over a warm yellow/orange semicircular graphic. Vary card position slightly, include labels, descriptions, CTAs, and blue product-interface artwork in the lower halves.
7. **Retirement feature banner** — Use a full-width lifestyle photograph with a dark overlay, white left-aligned headline and body copy, paired CTAs, and an illustrative disclaimer.
8. **Cash feature split** — On a pale beige background, place a bold blue/yellow APY illustration on the left and a right-side text block with headline, paragraph, checklist, and dual CTAs.
9. **Trust and protection proof** — Create a split editorial section with a large trust statement and award/proof copy on the left, a rounded lifestyle image on the right, and an overlaid statistic badge crossing the split.
10. **Assurance pillars** — Add three evenly spaced columns with small yellow circular icons, concise bold headings, and explanatory paragraphs covering fiduciary status, protection, and human expertise.
11. **Metrics strip** — Switch to deep navy and present a horizontal row of large white statistic cards with rounded corners. Include supporting microcopy beneath the cards.
12. **FAQ section** — Return to pale beige. Use a two-column layout with a large serif “common questions” heading on the left and an accordion list on the right; show one expanded answer and several collapsed rows separated by fine rules.
13. **Closing CTA** — Center a serif invitation and blue CTA in generous beige whitespace.
14. **Footer illustration transition** — Extend the closing section into a wide yellow-to-orange sunset gradient with a simplified blue road/hill illustration and a small vehicle motif.
15. **Footer navigation** — Continue into deep navy with the small brand mark at left and multiple link columns for accounts, tools, service, resources, about, rewards, and disclosures.
16. **Footer app/social links** — Add social icons and app-store badges below the navigation columns.
17. **Legal and disclosure copy** — Fill the remainder of the footer with small, high-density legal paragraphs, linked disclosures, separators, headings, licensing statements, and copyright details. Preserve generous horizontal margins despite the dense text.

## Design language
- Build hierarchy with contrast between oversized literary serif headlines and compact, highly legible sans-serif interface copy; use serif display sizes around 48–76px on desktop and sans-serif body text around 14–18px.
- Let the page change rhythm by section: immersive and sparse in the hero, highly structured and dense in the product chooser, spacious and editorial in beige feature areas, then information-heavy in metrics, FAQs, and legal footer content.
- Use a vivid blue system for action and product surfaces, approximately `#1769D8` to `#1551C5`; reserve deep navy such as `#050E5B` for footer and high-trust areas.
- Use warm pale beige around `#FBF0E2` as the editorial canvas and bright yellow around `#FFD32A` for CTAs, icon discs, highlights, and optimistic transitions. Add orange/pink near `#FF8B3D` only in large atmospheric gradients.
- Keep primary text near navy rather than pure black; use white text on blue, photographic, and navy sections. Maintain strong contrast for all CTAs and legal text.
- Treat cards as calm, slightly rounded white surfaces with thin or nearly invisible borders, modest shadows, and occasional blue gradient artwork. Use medium radii around 10–16px; avoid excessive glass effects.
- Use fine horizontal dividers for product rows, accordion items, and disclosure groupings. Keep grid alignment consistent while allowing large photographic sections and oversized graphics to break the strict grid.
- Pair photography with controlled overlays and place text in predictable left-aligned regions. Product illustrations should be graphic, simplified, and clearly subordinate to the headline and CTA.
- Use buttons with compact semibold labels, moderate corner radii, and solid blue or yellow fills. Provide a quieter text-link alternative beside major CTAs.
- Make interaction cues explicit through arrow affordances, dropdown chevrons, accordion carets, and compact media controls. Use restrained hover elevation or colour shifts rather than elaborate motion; allow large gradients and imagery to carry the visual energy.
- Maintain a polished, reassuring financial-services tone: generous whitespace in editorial sections, precise alignment in comparison sections, and very small but readable legal text at the end.

## Never
- Do not copy the reference company’s logos, wordmarks, product names, exact copy, illustrations, photography, icon set, statistics, awards, or legal language.
- Do not reproduce the reference brand identity or present the result as that product. Create new content, imagery, data, and brand assets for the user’s product while preserving only the reusable layout and design principles.