## 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/ramp-com/ad2900d9-6fba-4f32-a572-3ba7a6ce9831-1789060875-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/ramp-com/ad2900d9-6fba-4f32-a572-3ba7a6ce9831-1789060041312.webp
- Design on Kage: https://kage.design/designs/ramp-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). Wait for the answers before writing any code. Everything below is applied to their product, not to the reference.

## Page structure
1. **Announcement bar**: thin black strip at the very top with one line of small white text and a "Learn more" link plus a close ×.
2. **Navbar**: white bar with small lowercase wordmark left, five dropdown nav items, and right-aligned "Sign in" text plus a yellow pill CTA and a dark "Get started" button.
3. **Hero**: small mono-style stat label ("US corporate payments processed…"), then a very large two-line display headline, one line of plain subcopy, and an inline email capture — a rounded pill-shaped input joined to a yellow "Get started for free" button.
4. **Product collage**: a large rounded, slightly inset panel showing overlapping fragments of the actual product UI (cards, receipts, transactions) with a thin stats strip of live-counting metrics beneath (agents at work, receipts processed, coding runs…).
5. **Social proof band**: left-aligned sentence with bolded figures, a "Read the report" link, then a grid of monochrome partner logos with small "+" hover affordances, and one dark customer photo tile with a big "$1M+" stat overlay.
6. **Platform overview**: centered large headline in two weights, two pill buttons (yellow + outline), then a bento grid: two wide cards on top, three smaller cards below, each with a bold claim headline, an arrow icon, and product UI fragments as imagery on the cream card background.
7. **Recommendations interstitial**: full-bleed soft gradient/photo band with centered copy and a large white URL-input field with a submit arrow — an interactive "paste your website" moment.
8. **Problem section**: centered headline "Systems that never spoke" with a flat collage of chaotic legacy screenshots/emails below to visualise the pain.
9. **Intelligence section**: dark-to-cream transition band with a big centered two-tone headline and a single yellow pill CTA.
10. **Product story blocks**: three alternating rows — (a) intro text left + large brand-tile image right ("Stack"), (b) office photo left + quote and attribution right, (c) text left + policy document UI card right. Each row has a small "Learn about…" arrow link and a customer quote with name and role.
11. **Mid-page CTA**: rounded full-width banner with a subtle yellow gradient wash, one line of copy and a dark "View Demo" button.
12. **Two-feature split**: centered two-tone headline ("Scale the team. Shrink the paperwork."), then two columns: a workflow-builder UI mockup left and a dotted world map right, each with subheadline, paragraph and arrow link.
13. **Testimonials**: "70,000 teams and counting" eyebrow, huge centered headline "We've got the receipts.", then a loose multi-row grid of quote cards (photo avatar, name, role, short quote) of varying widths.
14. **Final CTA**: single centered line of copy plus the same pill email input + yellow button as the hero.
15. **Footer**: dark charcoal, six columns of dense link lists, then a legal block of fine-print paragraphs, badges, app-store links, and a final email capture row.

## Design language
- Canvas is a warm off-white/cream (#F7F6F2 area) rather than pure white; cards sit on it in a slightly deeper beige (#EDEBE6) with no borders, distinguished only by fill and large radius (~24–32px).
- Exactly one accent: an acid/chartreuse yellow (#E8FF4D-ish) used only for primary pill CTAs and small highlights. Everything else is black/near-black text on cream, plus one dark charcoal (#1E1E1C) footer band.
- Type: a single grotesque family at extreme scale contrast — display headlines ~72–96px with tight leading and mixed weights (one line bold black, one line lighter grey) to create two-tone headlines; body ~14–16px; tiny uppercase/mono labels for stats and eyebrows.
- Hierarchy is built with scale and whitespace, not dividers: sections are separated by large vertical padding (~120–160px), and rhythm alternates tight rows (nav, hero, metrics strip) with airy centered statements.
- Buttons are fully rounded pills; inputs are pill-shaped and joined to their CTA. Secondary actions are quiet text links with a → arrow.
- Imagery is real product UI shown in flat fragments on cream backgrounds, plus occasional duotone/dimmed photography in rounded tiles with large stat overlays. No illustrations, no gradients except the soft photographic band and subtle yellow washes.
- Motion: quiet — hover states swap card fills and show "+" icons on logos; live-counting metric numbers; no parallax or flashy reveals.
- Testimonial cards vary in width and stagger across rows, avoiding a uniform grid; each is a plain cream card with small avatar, bold name, grey role, and 1–3 line quote.
- The footer is a content asset in itself: dense link columns, exhaustive legal fine print, and a repeated email capture — signal trust through detail.

## Never
- Never use the Ramp name, wordmark, logo, or any of its copy, headlines, quotes, customer names or photography.
- Never copy the specific yellow as a brand colour — derive the accent from the user's own brand.
- Never reproduce the exact testimonial quotes or fictionalise recognisable real customers.
- Never present the output as Ramp or imply affiliation.