## 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/notion-com/9e072824-4b09-4216-9cff-06c643793f91-1789060339-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/notion-com/9e072824-4b09-4216-9cff-06c643793f91-1789060006739.webp
- Design on Kage: https://kage.design/designs/notion-landing-page

## Before you start
Ask the user what 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 — everything below is applied to *their* product, not to the reference site.

## Page structure
1. **Top nav** — slim white bar: logo left, centred links with dropdown carets, right side a quiet "Log in" link and a solid blue pill CTA. No border, no shadow.
2. **Hero** — centred, generous top padding (~100px+). Two-line headline at ~80–96px, weight ~700, tight leading and tracking, with one keyword wrapped in a rounded pale-blue highlight pill (like a text selection). One-line grey subcopy, then a solid blue pill button beside a pale-blue pill button.
3. **Product collage** — a large browser-chrome mockup of the app fills the hero's lower half; smaller floating cards (task lists, chat panels, sidebar menus) overlap it at offsets, with small hand-drawn black-ink doodle characters breaking the card edges. Soft diffuse shadows, 12–16px radii.
4. **Logo wall** — small grey caption line, then ~17 greyscale logos across two even rows, generous gaps, optically centred.
5. **Feature section** — huge left-aligned black headline (~56px). Below, a 2-column grid of tall light-grey cards: each has a tiny eyebrow label, a bold 24px title, a black circular arrow button, and a real product screenshot anchored to the card bottom. A third full-width card flips the layout (text left, mockup right) to reset the rhythm.
6. **Use-case row** — small caption, then five equal white cards in one row, each with a colourful emoji-style icon tile, bold 16px link text and an arrow.
7. **Testimonials** — big left-aligned headline, then three full-bleed photo cards washed in duotone (one red, one blue, one amber): brand mark top-left, white quote text in the middle, name and title pinned at the bottom.
8. **Stats ticker** — a single-line slow marquee of proof points, each with a small monochrome icon, grey text, wide spacing.
9. **CTA band** — full-width warm beige band, centred bold ~40px headline and the same two pill CTAs repeated.
10. **Footer** — white: logo plus a short cultural quote with attribution on the left, four link columns on the right, legal row and a language pill selector at the bottom.

## Design language
- **Base system:** pure white surfaces, near-black ink text (~#191918), 1px warm-grey borders (~#E9E9E7), light-grey card fills (~#F6F5F4), warm beige band (~#FBF0DE) for the closing CTA.
- **Colour discipline:** one saturated accent blue (~#2383E2) is reserved for primary buttons, links and tiny UI details; pale blue (~#D3E6F8) handles the headline highlight pill and secondary buttons. Everything else is black/grey so the accent reads as an action.
- **Accent moments:** saturated duotone photo cards (red ~#D64525, blue ~#2B5FAC, amber ~#D99E2B) and multicoloured emoji-style icon tiles are the only places full colour appears — use them sparingly and deliberately.
- **Type:** a single humanist sans throughout (Inter-like). Scale jumps hard between steps: ~90px hero → ~50px section heads → ~24px card titles → 16px body → 13px eyebrows. Tight tracking (−2 to −4%) and leading (~1.05) on big sizes; normal weight for body; hierarchy comes from size, not colour.
- **Rhythm down the page:** alternate airy centred statements (hero, CTA band) with dense, content-heavy sections (collage, cards, testimonials). Big left-aligned headlines act as resets between zones.
- **Shape and depth:** pill buttons (999px radius), 12–16px card radii, flat cards with hairline borders; reserve soft shadows (0 2px 8px rgba(0,0,0,.06)) only for floating collage elements and the nav CTA.
- **Interaction:** circular black arrow buttons signal card links; arrows nudge right on hover; the stats row drifts as a slow marquee; otherwise the page is calm and static.
- **Illustration:** small hand-drawn ink doodles may overlap mockup edges for personality — keep them monochrome, small and rare.

## Never
- Never reuse Notion's logo, name, headline copy, doodle illustrations, customer logos (OpenAI, Figma, Toyota, etc.), testimonial text or its McLuhan quote; do not reproduce the reference's exact section copy.
- Never present the result as Notion or imply any affiliation — the design language is what transfers, never the brand.