## 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/beehiiv-com/23eb8ac3-d7aa-449f-95ad-92bcd925810d-1789067406-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/beehiiv-com/23eb8ac3-d7aa-449f-95ad-92bcd925810d-1789067369298.webp
- Design on Kage: https://kage.design/designs/beehiiv-landing-page

## Before you start
Ask the user what product they are building, who the audience is, and what brand assets they already have (name, colours, fonts, existing UI screenshots). Wait for the answers before writing code. Everything below is applied to *their* product, not to the reference site.

## Page structure
Build a single dark landing page with these sections, top to bottom:
1. **Top nav** — dark bar: wordmark left; 5–6 text links (Product, Solutions, Resources, Enterprise, Ad Network, Pricing); right side: text "Log in", an outlined "Get a demo" button, and a solid white pill "Sign up for free".
2. **Hero** — two columns. Left: a 4-line ALL-CAPS display headline (one concept per line, each ending in a period), with the final line in accent purple; one-sentence subhead; a star-rating row with a small avatar cluster and "4.9/5 from N customers"; two CTAs — a solid purple "Sign up with Google" with provider icon and an outlined "Sign up with email"; reassurance microcopy underneath. Right: a collage of floating dark product panels (KPI numbers, a chart, notification cards) overlapping each other. A small floating chat-assistant pill sits at the bottom-right of the viewport.
3. **Logo strip** — small-caps eyebrow "TRUSTED BY THE WORLD'S TOP PUBLISHERS, CREATORS, AND BRANDS" above a single row of monochrome brand logos.
4. **Feature bento** — split intro: giant caps statement on the left ("EVERYTHING YOU NEED TO…"), supporting paragraph on the right. Then a 2×3 bento grid of deep-indigo cards (first row: one wide + one narrow; second row: narrow + wide; third row: wide + narrow). Each card: bold title, one-line description, a small "+" button top-right, and a realistic product-UI screenshot floating on a purple radial gradient, sometimes bleeding past the card edge.
5. **Customers mosaic** — centred pink eyebrow "CUSTOMERS", caps heading, short paragraph. A two-row grid mixing portrait-photo cards (person + their newsletter name), big-number stat cards ("3X", "2M+", "60%", "75%"), and brand-logo tiles. Ends with a centred "See all customer stories →" link.
6. **Pricing** — eyebrow "PRICING", caps heading "BUILD YOUR WAY.", an interactive subscriber-count slider with a value tooltip, and a Monthly/Yearly segmented toggle. Four equal columns (Launch $0, Scale $43, Max $96, Enterprise custom): plan name, price, tag line, CTA (outlined for free/enterprise, solid purple for paid), then a dense checkmark feature list. "See full feature comparison →" below.
7. **Quote panel** — one full-width rounded dark-indigo panel: large centred quote, avatar, name, role, a "Read the story →" pill, and carousel arrows beneath the panel.
8. **Stats band** — caps heading "THE NUMBERS TELL THE STORY." and four cards, each with a huge hot-pink numeral ("44%", "2.75X", "135K+", "400M+") over a one-line caption.
9. **Integrations** — caps heading and paragraph left, solid CTA button right; two full-width rows of rounded dark tiles holding colourful integration icons; "See all integrations →".
10. **FAQ** — split layout: caps heading "HAVE A QUESTION?" left, accordion right — divided rows, question text left, chevron right.
11. **Final CTA** — centred caps "WHAT ARE YOU WAITING FOR?" above one solid button.
12. **Footer** — subscribe row ("Get updates delivered to your inbox", email input, consent microcopy); five link columns (Company, Product, Solutions, Resources, Connect with social links); legal link row + copyright; small logo mark right.

## Design language
- **Canvas & surfaces:** near-black page background `#0A0A12`; feature and quote cards in deep indigo `#14142E` with soft radial purple gradients glowing toward `#2B2153`; 1px borders at `rgba(255,255,255,0.08)`; card radius 16–24px, buttons 8–10px, no drop shadows — depth comes from gradients, not shadow.
- **Accent system:** electric indigo `#5D5FEF` for primary buttons and the highlighted headline word; hot pink `#FF4FD0` for small-caps section eyebrows and giant stat numerals; pure white for display type; muted lavender-grey `#A6A9C0` for body copy. Never more than one accent doing a job per section.
- **Type:** one heavy grotesque family throughout. Display lines are ALL CAPS, very bold, tight line-height (~1.0), each ending in a period — this staccato punctuation is the signature voice. Section eyebrows are ~11px letter-spaced small caps in pink. Body is 15–16px regular. Scale jumps are huge (display 64–96px vs body), so let whitespace carry the hierarchy.
- **Hierarchy rules:** every section opens with a caps statement (sometimes a colour-highlighted final line); eyebrows signal section type (PRICING, CUSTOMERS); colour — not weight — marks emphasis inside headlines.
- **Rhythm down the page:** alternate density deliberately — airy hero → compact logo strip → dense bento → dense mosaic → structured pricing → one airy quote → punchy stat band → medium icon grid → airy FAQ → punchy CTA → dense footer. Also alternate alignment: left-aligned statement sections vs centred social-proof sections.
- **Product UI as imagery:** every feature card embeds a believable product screenshot (white chrome on the dark cards) cropped and floating, slightly overlapping card edges. Show the product; don't describe it.
- **Buttons:** solid indigo primary, outlined secondary on dark, solid white pill reserved for the nav; consistent height, small radius, generous horizontal padding.
- **Social proof layering:** rating under the hero CTA, logo strip immediately after, creator photo mosaic, one long-form quote, then quantified stats — proof appears in a different visual form each time.
- **Motion:** restrained — card hover lift, accordion expand, draggable pricing slider, floating assistant pill; no parallax or heavy animation.
- **Pricing specifics:** four equal dark columns; micro-tags "Most popular"/"Best value"; free and enterprise tiers get outlined CTAs, paid tiers solid; feature lists are dense with small check icons and tight line-height.

## Never
Do not use the beehiiv name, logo, wordmark, or any of its copy, illustrations, or photography. Do not reproduce the press logos (TIME, Newsweek, Pinterest, Boston Globe, etc.) or the creator photos. Do not clone the exact stats, testimonial text, or pricing numbers. Never present the result as beehiiv — apply this design language to the user's own product and brand.