## 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/blinkist-com/923d3302-3f7c-4bf2-9567-691903266cb3-1789146395050-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/blinkist-com/923d3302-3f7c-4bf2-9567-691903266cb3-1789146388735.webp
- Design on Kage: https://kage.design/designs/blinkist-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, 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. **Slim sticky nav** — wordmark left with a primary dropdown link beside it; right-aligned utility links (secondary product, log in) and a solid green CTA button.
2. **Hero** — two-column split. Left: a display headline where one word is set in italic, a short paragraph in which three key nouns are wrapped in coloured highlight pills (mint, lavender, cream), and a green CTA. Right: a soft-blue rounded panel holding two overlapping phone mockups of the app's audio player, sprinkled with small doodle stars and spot illustrations.
3. **Feature explainer** — centred heading with a hand-drawn yellow underline on one phrase; below, a narrow left column stacks three mini-features (icon, title, one sentence) while a large media panel (video thumbnail over a colourful content collage) fills the right two-thirds; green CTA underneath.
4. **Solo testimonial** — centred italic quote with a star rating and short attribution.
5. **Stat trio** — three equal columns, each a thin line icon, an oversized number (downloads, rating, years) and a one-line caption.
6. **Interest picker** — centred heading plus a question line, then a wrap-flow cloud of pill chips with small icons, one chip highlighted as default.
7. **Content carousel** — horizontal row of catalogue cards on pastel rounded tiles; the centre card is enlarged and carries an audio-player bar; side arrows; green CTA below.
8. **Feature carousel** — centred heading then a full-width scroller of very large rounded cards, each a pastel background with a two-line title, short copy and collaged graphics; dash pagination and arrows.
9. **Social proof** — centred heading containing a huge figure; three photo testimonial tiles, each with an audience label pill, oversized quotation mark, stars, and a quote where the strongest sentence gets a yellow highlighter mark; green CTA.
10. **Percent stat trio** — three display-size percentages (95/91/87-style) with small captions and an asterisked methodology footnote.
11. **Logo strip** — a pale-blue full-width band: small heading and one row of grey partner logos.
12. **Use-case photo quartet** — centred heading, then four rounded lifestyle photos each with a small white pill label overlapping the top edge; platform badges tucked under one photo.
13. **FAQ** — centred heading, single-column accordion with hairline dividers and chevrons; last row links to support.
14. **Footer** — near-black navy panel: top half is a six-column catalogue link grid (popular items / categories / topics ×2), bottom half a brand block with tagline, app-store badges, three link columns, social icons, legal row and language selector.

## Design language
- **Canvas & colour:** white `#FFFFFF` background; deep navy ink `#14303E` for all text; one electric green `#2EE07F` reserved almost exclusively for CTA buttons and the wordmark — never as a background — so every button remains the loudest element on screen. Pastel fills rotate through pale blue `#E1EAF6`, lavender `#EAE5FA`, cream `#FBF1CE`, mint `#DFF3E7` and pink `#F9E1E4`. Ratings are yellow `#FFC94D`. Footer is near-black navy `#12262E` with white text.
- **Hierarchy:** section openers are centred, bold display type (~56–72px); supporting copy is 16–18px regular; feature titles are 18px semibold above short body; stats and percentages are set at display size so the numbers themselves act as headlines.
- **Emphasis devices:** one italic word inside the hero headline; coloured highlight pills behind three key nouns in the hero paragraph; yellow highlighter behind the punchiest sentence of each testimonial; a hand-drawn yellow underline on one phrase of a section heading. Use each sparingly — one per zone.
- **Type:** a single rounded geometric sans (Sofia Pro / Poppins-like) across all weights; scale roughly 72 / 48 / 24 / 18 / 16; italics only for emphasis words and quotes; no serif faces.
- **Shape & depth:** everything flat — no borders, no drop shadows. Cards use large radii (~16–24px) on flat pastel fills; photos get ~12px radius with small white pill labels overlapping their top edge; buttons are solid green, ~8px radius, navy label.
- **Rhythm & density:** alternate split sections (text left, media right), centred proof blocks, and full-width pastel bands; give every section 96–120px vertical padding; repeat the identical green CTA after every proof moment so the conversion path never breaks. Density increases down the page: airy hero → chip cloud and carousels mid-page → photo quartet and FAQ tightening the grid → the footer as the densest block, with small-type link columns.
- **Imagery:** flat doodle spot-illustrations (stars, faces, tiny objects) sprinkled beside headings and device mockups rather than full illustrations; photography is warm natural-light lifestyle shots, cropped portrait/rounded; catalogue artwork (covers) is allowed to be loud and colourful because everything else is quiet.
- **Motion & interaction:** horizontal carousels with arrow buttons and dash pagination; accordion rows expanding with chevron rotation; chips and cards with subtle hover lift; inline audio-player bars implying play/scrub states.

## Never
- Never reproduce the reference site's name, wordmark, logo, tagline or any of its copy (e.g. "Learn something new every day", "Join 31+ million people…").
- Never use the specific book covers, podcast artwork, reviewer quotes, expert names or partner logos (TikTok, Microsoft, LinkedIn, etc.) shown in the reference; generate your own catalogue content and use the user's own or placeholder logos.
- Never copy the doodle illustrations or lifestyle photography; create an original illustration style and use the user's own imagery.
- Never present the result as the reference product or imply any affiliation with it.