## 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/copilot-money/645bb157-e222-4315-91ed-1b76fbb9bd6b-1789146540058-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/copilot-money/645bb157-e222-4315-91ed-1b76fbb9bd6b-1789146535264.webp
- Design on Kage: https://kage.design/designs/copilot-money-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, logo, colours, typeface). Wait for the answers before writing any code. Apply the design language below to *their* product — do not recreate the reference site or its content.

## Page structure
1. **Announcement bar** — thin full-width strip in the accent colour with one short line of copy and a close button; dismissible.
2. **Top navigation** — logo left, three to four text links centre, "Log in" text link plus a solid pill CTA right; dark background, generous height.
3. **Hero** — centred, very large three-line display headline in pale gray on the dark canvas, one-sentence subcopy, single solid pill CTA. Floating tilted category-style pills (coloured rounded lozenges with small icons) drift around the headline for personality.
4. **Awards/credibility strip** — five monochrome laurel-wreath badges in a single row, muted gray so they read as texture, not content.
5. **Brand statement** — centred app icon, one large multi-line statement sentence, a "available on…" platform line, then a large composite product mockup showing the desktop dashboard with an overlapping phone screen.
6. **Spending feature bento (dark)** — section headline, then an asymmetric grid of five cards, each a self-contained mini-scene: heading, one-liner, and an embedded UI mockup (transaction list with coloured category tags, spending line chart with a target pill, monthly rollover bar chart, cash-flow category rows, upcoming subscriptions list).
7. **Wealth feature bento (light)** — full-bleed light section as a rhythm break. Same card grammar inverted: balance chart with account list, live stock ticker cards, allocation bars, and an input-style card. Cards are white with soft shadows on a pale blue-tinted background.
8. **Pricing** — back to dark. Section headline, two side-by-side panels: a free-trial panel with a phone mockup and CTA, and a price panel with a large "$X/mo" figure, a yearly/monthly toggle, and trust copy ("no ads, no hidden fees", data-privacy line).
9. **Testimonials** — masonry grid (3–4 columns) of tweet/App-Store-style cards: star rows, avatars, handles, and short quotes of varying lengths so column heights stagger naturally.
10. **Closing CTA** — left-aligned headline and subcopy with a final CTA button, next to a device collage (phone, tablet, laptop) showing the product.
11. **Footer** — four link columns (product, company, resources, social), legal/privacy row with the logo, and a decorative bottom strip repeating the colourful category pills as a sign-off.

## Design language
- **Canvas:** near-black navy page background (≈ #0B1120) with card surfaces one step lighter (≈ #141C2F); one full-bleed light section mid-page (≈ #F2F6FB) to reset the eye. Never mix dark and light cards within one section.
- **Accent discipline:** one vivid blue (≈ #3E6FF6) reserved for CTAs and active states; green (≈ #22C55E) for positive deltas; red (≈ #E5484D) for negative; a fixed palette of category colours (orange, purple, pink, teal) used only as small tags, chart series and decorative pills.
- **Type:** a single rounded geometric sans throughout. Display headline very large (≈ 90–120px) with tight leading and slightly light weight in pale gray (#E6EAF2); section heads ≈ 40px bold in white; card titles 18–20px semibold; body 14–15px in muted slate (#8A94A8). Hierarchy comes from size steps and colour value, never from font changes.
- **Cards:** radius 16–24px, hairline borders (rgba(255,255,255,0.06) on dark; none needed on light), soft ambient shadows, generous internal padding. Every card is a complete thought: title + one sentence + one concrete data visual.
- **Data as illustration:** embed realistic-looking mini UIs — line charts with gradient fills, coloured category pills, tabular transaction rows — instead of stock photography or abstract shapes. Keep numbers, labels and deltas legible at card size.
- **Rhythm:** airy, centred, text-led sections alternate with dense, asymmetric card grids. Whitespace between sections is large (≈ 120–160px); inside grids, gaps stay tight (≈ 16–24px) so cards cluster into a bento block.
- **Motion and interaction:** floating pills drift slowly; CTAs are pill-radius solid blue with a small glyph; cards can lift subtly on hover. Keep animation gentle and ambient, never attention-stealing from the headline.
- **Playfulness, controlled:** colour and tilted decorative elements appear at the top (hero) and bottom (footer strip) to bookmark the page; the middle stays disciplined and data-focused.

## Never
- Do not reuse the reference's logo, wordmark, product name, headline copy, testimonial quotes, reviewer names or avatars.
- Do not copy its category-pill emoji set, award laurel claims or Apple-specific badges.
- Do not present the result as Copilot Money or imply any affiliation; rebuild the design language around the user's own brand.