## 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/public-com/cb41c975-325f-4844-b439-84e9d28bd7b7-1789146490836-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/public-com/cb41c975-325f-4844-b439-84e9d28bd7b7-1789146484316.webp
- Design on Kage: https://kage.design/designs/public-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, typefaces, logo). Wait for their answers. Everything below is a design language to apply to *their* product — never reproduce the reference site's brand, copy or assets.

## Page structure
1. **Top nav** — small wordmark left; 3–4 dropdown nav items (Products, Agents, Tools & Resources, Company style); right-aligned solid-black pill 'Log in' and outlined pill 'Sign up'. Slim height, cream background, no border.
2. **Hero** — left-aligned oversized serif headline over two lines; below it a horizontal row of three small icon+label callouts (product capabilities) on the left and one black pill CTA with an arrow on the right.
3. **Media band** — full-width near-black panel containing a product screenshot on a device, shown at an angle with a green line chart and small annotation callouts pinned to the UI.
4. **Product index** — a typographic table of contents: 4 lines of large serif words separated by small dot/asterisk marks, with tiny rounded chips for numbers (yields, APY, match %). Pure type on cream, no cards.
5. **AI feature suite** — centered eyebrow label + centered serif headline, then alternating layout: one wide centered block (intro paragraph, 'Learn more →', full-width product mockup), then a 2-column pair of captioned mockups, another wide block, another 2-column pair. Captions sit above each mockup, centered, ~2 sentences + arrow link.
6. **Dark trading band** — black full-bleed section: centered micro-label + two-line serif headline (second line italic); three columns of dark cards each with a heading, short copy, a distinct artifact (data table comparing competitors, a 3D-rendered stat cube with a lowest-rate figure, a syntax-highlighted code snippet with app icons), plus 'Learn more' and a tiny 'Disclosures' link.
7. **Features band** — back to cream: centered serif headline with a gray parenthetical sub-line, then two-column mockup pairs (portfolio card with green chart; monthly income bar chart), a centered wide 'parameter builder' mockup where inline values are highlighted as small colored tokens, another two-column pair with dense tables (event calendar, order queue), closing with a centered stat: small bolt icon, two-line serif stat where the second line is gray.
8. **Concierge band** — black section, split layout: left micro-label + serif question headline + short paragraph; right a dark card titled 'Your benefits include' with checkmark list and a pill button.
9. **Trust band** — dark section with an abstract 3D visual in a corner; serif two-line headline ('Secure by design.' / italic second line); a 2×3 grid of trust facts — small sans heading, 2–3 lines of gray copy, some with tiny certification logos or inline links.
10. **Conversion close** — dark section: serif headline, outline pill CTA, a 5-star row with a short review quote and small-print attribution; right side a collage of laptop + phone product mockups.
11. **Footer** — light background: 5-column link grid (product links, resources, quick links, contact with email + social icons, brand column with regulatory blurb and app-store badges); below it a long small-print legal block of many short gray paragraphs with inline links, separated from the link grid by generous whitespace.

## Design language
- **Canvas and ink**: warm cream background (#F7F5F1), near-black ink (#111111). Dark bands are true near-black (#0B0B0B) with white headings and #9A9A9A secondary text; on light bands secondary text is #6F6F6F.
- **Type pairing**: one high-contrast editorial serif for all display headlines (48–110px, tight leading, italics used as an accent for second lines), one neutral sans for everything functional (nav, body 14–15px, captions, tables). Micro-labels/eyebrows are 12–13px sans in gray, never uppercase-heavy.
- **Hierarchy by scale, not weight**: enormous serif vs. small quiet sans; no bold shouting. Section rhythm alternates centered editorial captions with dense artifact mockups so each feature block 'breathes' before the next.
- **Colour discipline**: green (#14B872-ish) is reserved exclusively for market data — charts, positive deltas, highlights; red only for negative deltas; occasional blue/violet tokens inside UI mockups. Marketing surfaces stay black/white/cream; all colour lives inside the product artifacts.
- **Chips and markers**: tiny rounded pills (10–20% gray fill, 11–12px) for numeric claims like yields; dot/asterisk separators instead of bullets in the typographic index.
- **Buttons**: pill radius everywhere — solid black with white text + arrow on light, white or outlined on dark; secondary CTAs are plain 'Learn more →' text links.
- **Cards and mockups**: 8–14px radius, hairline borders (#E7E4DE on light, #1F1F1F on dark), essentially flat — shadows are barely visible; realism comes from dense, plausible data (tables, order queues, agent lists) not decoration.
- **Motion**: restrained — arrow-shift hovers on links/buttons, no parallax or loud animation; the drama comes from the light/dark band alternation.
- **Density contrast**: marketing copy stays sparse (one headline, two sentences); all density is pushed into mockups, tables and the legal footer, which is very small (11–12px) and gray.

## Never
- Do not use the reference's name, wordmark, logo, ticker names, review quotes, illustrations, photography, 3D renders or icon set.
- Do not copy any headline, section title or marketing sentence from the reference — write original copy for the user's product.
- Never present the result as being affiliated with or produced by the reference company.