## 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/chime-com/8a783617-6b1d-44ef-a500-84b69ae63fa0-1789146449552-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/chime-com/8a783617-6b1d-44ef-a500-84b69ae63fa0-1789146443003.webp
- Design on Kage: https://kage.design/designs/chime-landing-page

## Before you start
Ask the user (and wait for the answers before writing any code):
- What product or service are we building this landing page for, and what is the one action the page should drive (sign-up, download, purchase)?
- Who is the audience?
- What brand assets already exist: name, wordmark, primary/accent colours, typeface names or files, existing product screenshots?
Apply every rule below to the user's product and brand — never to the reference site.

## Page structure
1. **Utility nav** — thin white bar: hamburger menu left, wordmark beside it, right-aligned filled pill CTA plus a plain "Log in" text link.
2. **Hero** — full-bleed deep-green band with a soft radial glow. Two columns: left holds a 3-line display headline, a 3-item green-check benefit list, an email input paired with a filled pill button, and one line of 10px legal microcopy; right holds a slightly tilted phone mockup running the real app UI (balance, account cards) with a corner claim badge.
3. **Trust marquee** — full-width near-black strip of repeating press names, review counts and regulator/insurance badges, slowly scrolling; sits flush under the hero.
4. **Feature explorer** — one large rounded dark-green panel: left column is a vertical accordion of 6–7 benefit headlines where the active item expands into a green-check list plus an outlined pill link; right column is a lifestyle photo (hand holding phone) overlaid with floating rounded info cards — an ATM card with status chips and a small glassy tooltip.
5. **Scroll showcase** — a tall, visually quiet dark band reserved for a sticky scroll-driven product story; it lets the page breathe between the two densest dark sections.
6. **Bento pair** — two equal rounded dark-green cards: left combines a phone mockup with a headline, short paragraph and pill link (rewards pitch); right uses a single 3D object illustration (a lock for security) with a green-check list and pill link.
7. **Light interlude** — the only off-white band: left editorial headline + paragraph + filled pill CTA; right a dark rounded finance card showing a portfolio value, a green delta line, an area chart and time-range tab pills (1W/1M/3M…).
8. **Member proof** — centred display heading, then three white quote cards: green star row, 2–6 line quote, name plus review-source chip (store/reddit); arrow buttons and dot pagination beneath.
9. **App-download panel** — full-width rounded dark-green card: left wordmark, headline, sub-line and App Store/Google Play badges; right phone mockup with a floating award badge pinned above it.
10. **FAQ** — light band: oversized "FAQs" heading, then 8 full-width accordion rows with thin hairline dividers and plus icons.
11. **Mission band** — dark-green full-bleed closer: giant translucent wordmark set behind a warm group photo, small caps eyebrow, then an oversized two-line mission statement.
12. **Footer** — near-black: five link columns (features, company, resources, privacy, contact) with store badges and social icons in the contact column, followed by a very long block of 10–11px legal fine print, licensing and address lines.

## Design language
- **One colour owns the page.** Deep forest green (#0E3A2A–#14432F) is the default surface; near-black (#0A0F0B) appears exactly once for contrast; warm off-white (#F4F1EA) appears exactly once to reset the eye; vivid green (#2ECC5E) drives buttons and deltas with lime (#8FF06A) reserved for badges, checks and star icons. Four tones total — resist adding more.
- **Hierarchy is scale, not decoration.** Display headlines 72–96px with tight tracking, section headings ~40px, body 16–17px, check bullets 14–15px, legal microcopy 10–11px at reduced opacity.
- **Repeat the check-list motif:** claim headline → three short green-check items → one CTA. Reuse it in the hero, the feature explorer and the bento cards so each section reads claim–proof–action.
- **Rounded geometry everywhere:** 20–24px radius panels, fully-rounded pill buttons and chips, hairline 1px dividers in accordions. Depth comes from colour contrast and glassy overlays (white at ~12%, backdrop blur) floating over photos — not from drop shadows.
- **Rhythm down the page:** alternate dark→black→dark→dark→light→white→dark→light→dark→near-black; give bands 120–160px vertical padding while keeping information inside cards dense and compact. Full-bleed bands for narrative moments, inset rounded panels (with side gutters) for product content.
- **Type:** one humanist/geometric sans for everything — heavier weight for display with slightly tightened tracking, regular for body with relaxed line-height. No serifs, no more than two weights.
- **Device mockups persuade:** show the actual product UI with real-looking numbers, tilted slightly and cropped at panel edges; never use generic placeholder screens.
- **Interaction:** infinite slow marquee for the trust strip, expand/collapse accordions for features and FAQ, horizontal carousel with arrows + dots for testimonials; hover states simply deepen or brighten the green — no showy motion.
- **Photography:** warm candid lifestyle shots (hands, people, interiors) unified by a green-tinted gradient overlay so imagery never fights the brand colour.

## Never
- Do not use the Chime name, wordmark, logo, headline copy, testimonial text, app screens, card visuals, badges or illustrations from the reference.
- Do not copy its marketing claims or legal disclosures; write original ones for the user's product.
- Never present the result as Chime or imply any affiliation with it.