## 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/oku-club/e710a983-c1d6-4177-b014-2738acd07d09-1789146208773-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/oku-club/e710a983-c1d6-4177-b014-2738acd07d09-1789146204438.webp
- Design on Kage: https://kage.design/designs/oku-club-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, logo, colours, typefaces). Wait for the answers before writing any code. Everything below is a design language to apply to *their* product — not a page to reproduce.

## Page structure
1. **Top bar** — slim, background-less: logo mark + wordmark left; five text links centred; right side a thin-bordered pill `Sign in` and a solid black pill `Join`. No border or shadow beneath the bar.
2. **Hero** — two columns on the paper background. Left: a ~64px serif headline of one short sentence over two lines, two CTAs (solid black pill + a black store-badge-style button), then one small line `Already a member? Sign in.` with an underlined link. Right: a black-ink hand-drawn illustration bleeding off the right edge. No gradients, no product screenshot in the hero.
3. **Feature panel A (full width)** — a large-radius light-gray panel with a centred serif H2 (~40px, two lines) plus a one-line sans subtext; below, a desktop browser mockup of the app with a phone mockup overlapping it, both cropped by the panel's bottom edge.
4. **Feature pair** — two half-width gray cards in one row. Left: phone mockup (goal/progress screen) cropped at the top, centred serif H3 + one subline beneath. Right card mirrors it: heading + subline on top, phone mockup (social feed) below, cropped at the bottom.
5. **Feature panel B (full width)** — same construction: centred serif H2 about personalised stats, and a browser mockup of a stats dashboard — four stat tiles (books / authors / pages / languages) above a `books read by year` bar chart with a two-item legend.
6. **Second feature pair** — left card: phone mockup of a custom collection with heading about creating collections; right card: two overlapping phone mockups (completion flow + reviews) with a heading about community reviews.
7. **Social proof** — back on white, two columns. Left: serif H2 + a short paragraph containing one concrete statistic. Right: two tweet-style cards (white, 1px hairline border, ~8px radius, avatar, name/handle, body, timestamp, small platform icon top-right), staggered vertically.
8. **Community activity strip** — full-bleed horizontal row of small cards: book-cover thumbnail with a tiny avatar badge, username, relative timestamp and an action line (`Finished …`, `Reading …`, `Added to …`). Cards are cut at both viewport edges, implying a slow marquee.
9. **Q&A rows** — three stacked rows separated by hairline rules: a small bold label in the left third (`Looking to switch?`, `Data & Privacy`, `Is this sustainable?`), and on the right a bold sans subhead plus two or three lines with one underlined inline link.
10. **Team** — centred serif H2 + centred paragraph, then three columns: circular-cropped black-and-white illustrated portraits with name and city captions.
11. **Final CTA** — a gentle curved top edge decorated with scattered small ink book spot-illustrations; centred serif H2, a two-line paragraph, and a single solid black pill button.
12. **Footer** — one row: text links left, plain copyright line right. Nothing else.

## Design language
- **Palette**: warm paper white `#FAFAF7` page background; ink black `#111111` for text, buttons and illustrations; light warm gray `#F1F1EE` feature panels; muted gray `#6B6B6B` body copy and captions; hairline borders `#E5E5E1`. The UI stays strictly monochrome — colour enters only through user content (covers, avatars).
- **Type pairing**: a high-contrast text serif (Lora-like) for every heading — regular weight, leading ≈1.15, never bold, never uppercase — paired with a neutral grotesque sans (Inter-like) for body, buttons and UI at 14–16px, line-height ≈1.6. Scale: hero ≈64px, section H2 ≈40px, card H3 ≈28px, body 16px, captions 13px.
- **Hierarchy by tone and type, not decoration**: rhythm comes from alternating white → gray panel → white and full-width panel → half-width pair; each section makes one point and supporting copy stays under ~20 words.
- **Shape system**: fully rounded pill buttons; feature panels with ~24px radius; mockup screens ~10px; testimonial cards ~8px with 1px hairline borders. Shadows are near-absent — panels rely on tone contrast; only device mockups may carry a soft diffuse shadow.
- **Illustration**: personality comes from black-ink hand-drawn line art on the paper background, never photography — circular crops for portraits, small spot illustrations scattered sparingly (hero, pre-CTA divider).
- **Motion**: essentially static; the activity strip suggests slow horizontal auto-scroll; buttons darken subtly on hover; inline links are underlined rather than coloured.
- **Density**: airy — 64–96px vertical padding between sections, ~64px internal panel padding, and mockups that intentionally overflow and get clipped by card edges to imply a living product.

## Never
- Do not reuse the Oku name, logo, wordmark, its hand-drawn illustrations, portraits or spot drawings.
- Do not copy the reference copy, tweet testimonials, usernames, book covers, statistics or team bios — write original content for the user's product.
- Never present the result as the reference product.