## 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/plaid-com/7f22fbce-e808-4b19-99a1-7dcb31fbfb56-1789060772-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/plaid-com/7f22fbce-e808-4b19-99a1-7dcb31fbfb56-1789060126350.webp
- Design on Kage: https://kage.design/designs/plaid-landing-page

## Before you start
Ask the user what they are building, who it is for, and what brand assets they already have (name, colours, type, any illustration style), then wait for the answers. Apply everything below to their product and brand — not to the reference site.

## Page structure
Build a single long marketing homepage with this section order:
1. **Hero** — full-bleed cyan-to-blue gradient with a large engraved/etched illustration anchored on the right, headline with mint-to-white gradient text on the left, short subcopy, two pill CTAs (primary + secondary), a partner logo strip beneath, and a small inline promo card linking to a video.
2. **Product grid** — light section: large two-line statement headline, a small pill link, then a bento grid: two wide cards on the first row, three narrower cards on the second. Each card has a pastel gradient fill, a bolded title phrase followed by regular-weight text, an arrow icon top-right, and a cropped product-UI mockup inside.
3. **Dark feature banner** — full-width deep-navy rounded block with an abstract network graphic and a second etched illustration, one headline and one pill button.
4. **Network proof section** — light section, two columns: left is a collage of floating notification cards and gradient thumbnails with soft drop shadows; right is a heading, a paragraph, and a 2×2 stat grid with oversized serif numerals in purple and small captions.
5. **Developer banner** — dark navy rounded block, centred headline, one-line subcopy, two buttons, and below them a code-editor mockup: dark panel, filename tab, line numbers, syntax-highlighted code.
6. **Case-study carousel** — light section: heading on the left with circular prev/next arrow buttons, horizontally scrolling photo cards bleeding off both page edges; each card has a photo with a brand wordmark overlay, a caption below, and a "read the story" link.
7. **Lead-form section** — full-bleed gradient that echoes the hero: oversized gradient headline on the left, white rounded form card on the right with two-column inputs (name, email, company, country select, phone), legal microcopy, and one submit button.
8. **Trust strip** — pale lavender rounded band with a short consumer-trust sentence and a text link.
9. **Footer** — dark navy with large rounded top corners: logo mark, then six to seven link columns (product, company, use cases, consumers, resources, developers, institutions) laid out over two rows in small type, social icons, locale selector, and a bottom line with copyright and privacy links.

## Design language
- **Rhythm**: alternate light content sections with full-width dark navy rounded blocks (radius ~32–40px). Never place two dark blocks adjacent; the light sections between them carry the detailed content.
- **Bookends**: the hero and the lead-form section share one cyan-blue gradient (≈ #21C4E0 → #1470C8) so the page starts and ends inside the brand atmosphere.
- **Palette**: deep navy ≈ #0B2447 for dark blocks and footer; ink ≈ #0B1526 for headings on light; mint ≈ #52E0B4 as the highlight/gradient-text start colour; purple ≈ #7452F5 reserved exclusively for stat numerals; pastel card fills in lavender ≈ #E7E6FA, sky ≈ #E3F0FF, blush ≈ #FCE9F1; white surfaces elsewhere. No colour outside these families.
- **Type**: one grotesque sans family throughout — display ≈ 64–72px for the hero and section statements, ~40–48px for dark-banner headlines, 16–18px body, 12–13px footer links. Pair it with a single high-contrast serif used only for stat numerals (~56–64px, purple).
- **Headline treatment**: gradient-filled text only for the two big brand statements (mint→white on dark, mint→blue on light); all other headings solid ink.
- **Card titles**: bold lead phrase + regular continuation in one sentence ("**Bank payments** designed for fast connection") — this creates hierarchy inside a single line.
- **Cards**: radius ~24px, no borders, no shadows, pastel gradient fills; arrow-in-circle affordance top-right; UI mockups cropped and centred inside the card.
- **Buttons**: fully rounded pills. On light backgrounds the primary is a dark navy pill and the secondary a light pill; on dark backgrounds the primary is a white/light pill and the secondary a darker outlined pill. Small chips for index-style links like "See all products".
- **Shadows**: use large, soft drop shadows only on floating notification/collage cards to lift them off light backgrounds; keep everything else flat.
- **Data proof**: stats sit in a 2×2 grid with generous spacing — numeral, then a short three-to-six-word caption underneath in small regular type.
- **Code mockup**: dark editor panel ≈ #0D1B33 with a filename tab, left-aligned line numbers, and muted syntax colours (soft blues, greens, off-white); rounded corners matching the banner block.
- **Case-study cards**: desaturated photography with a dark scrim and a wordmark overlay, caption and link below the card, carousel bleeding past both page margins with circular arrow controls.
- **Footer**: tiny type, many narrow columns, wide gaps between column groups, generous padding; rounded top corners signal it is part of the same card system.
- **Motion**: restrained — hover states move arrows, the carousel scrolls horizontally, no heavy animation.

## Never
- Do not use the engraved Benjamin Franklin / dollar-bill imagery, the Plaid name, wordmark, or logo.
- Do not reuse any customer or partner logos or names (Monzo, Affirm, Robinhood, Venmo, Carvana, Gemini, HealthEquity, GoFundMe) or their photos.
- Do not copy headline or section copy such as "Turn data into revolutionary financial products", "Want access to 12K banks?", the /auth/get code sample, the "LendScore 83" UI, or the exact stat set — rebuild all content from the user's own product.
- Never present the result as the reference product.