## 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/speechmark/77b904ee-7a59-4d24-b7d4-3e274188b21e-1789106544280-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/speechmark/77b904ee-7a59-4d24-b7d4-3e274188b21e-1789106538366.webp
- Design on Kage: https://kage.design/designs/speechmark-landing-page

## Before you start

Ask the user what they are building, who it is for, and what brand assets they already have (product name, logo, colour palette, fonts). Wait for the answers before writing any code. Everything below is a design language to apply to *their* product, not the reference site.

## Page structure

Build a single long marketing page in this order:

1. **Top nav** — logo lockup (small rounded-square mark + lowercase wordmark) left; four quiet text links plus one solid blue pill button right. White background, no border until scroll.
2. **Hero** — two columns. Left: a tracked uppercase eyebrow with a leading em-dash, a very large serif headline where the second line flips to italic and takes the accent blue, a serif body paragraph, a primary pill button + a ghost 'watch how it works' link with play icon, and a fine-print row of specs separated by middots (price, OS version, privacy note). Right: a real product screenshot with a soft, wide drop shadow. Across the bottom of the band run a faint, fading audio-waveform strip — the page's single decorative motif.
3. **How it works** — pale blue-grey band. Eyebrow, serif headline with an italic second line. Three numbered columns (01 CAPTURE / 02 LISTEN / 03 WRITE): number in blue, small caps label, serif column heading, sans body copy, hairline vertical rules between columns.
4. **Integration section** — white band. Left column: eyebrow with a tiny icon, serif headline with italic emphasis, prose, then a numbered 01–03 list where each lead phrase is bold and the rest is regular. Right: a product-card mockup of a chat exchange — a blue user bubble and a white answer card with bulleted, bold-highlighted findings and small citation footnotes.
5. **Comparison table** — pale band. Headline, then a minimal four-column table: feature name left in sans, two competitor columns of grey square 'x' marks, own-product column where each row carries a soft blue pill with a white check. Hairline row dividers, generous row height. Close with a two-line footnote and an inline sentence of linked comparison articles.
6. **Testimonial band** — full-bleed saturated blue section. Large white italic serif quote (4–5 lines), then a small circular avatar with name and role in lighter blue. Optional faint oversized quotation-mark shapes bleeding off the edges.
7. **Audience section** — white band. Headline, then a split: left a vertical list of 4 personas in sans (active one indented with a short left border rule); right the active persona's copy with a small '03 / 04' counter above it.
8. **Privacy diagram** — pale band. Headline over a horizontal three-part diagram: left a solid blue rounded card labelled 'YOUR MAC' containing a waveform and a caption, a padlock badge pinned to its corner; centre an arrow annotated 'TRANSCRIPT TEXT ONLY' with an opt-in note; right a dashed-border card labelled 'THE CLOUD' containing a flat-line graphic and caption 'Audio never arrives.' Below, a three-column × two-row checklist of short checkmark claims, then a right-arrow link to the full policy.
9. **FAQ** — white band. Headline with the word 'plainly', then a narrow accordion: first question open with a serif answer paragraph, remaining five collapsed with chevrons, hairline dividers.
10. **Closing CTA** — dark navy band, centred. A small rounded tile containing a quotation glyph, serif headline, one-line reassurance sub-copy, a white pill button, and a specs line (version · size · OS). Below, an optional single-line email capture (label, underlined input, small button, fine print about no marketing) and a feedback link.
11. **Footer** — same dark navy. Brand column (mark, one-sentence tagline, version), four link columns with small-caps headings (Product, Compare, Guides, Legal & contact), a badge row, and a copyright line.

## Design language

- **Type carries the page.** Use a text serif (e.g. Source Serif 4 or similar) for headlines *and* body copy; use a quiet sans only for eyebrows, nav, buttons, tables and checklists. Headlines are large (~56–72px) roman, with a signature move: the second line or a key word flips to *italic* and takes the accent colour. Eyebrows are ~11px uppercase, letter-spaced, prefixed with an em-dash.
- **Colour palette.** Ink navy for text and headlines (#16324a–#1d3a5c); accent blue for buttons, numbers, italic emphasis and pills (#2f6be4); a brighter band blue for the testimonial (#2b63d9); pale blue-grey section background (#eef2f7); white between bands; deep navy for the closing CTA and footer (#122741); one tiny warm accent (orange, ~#e8590c) used at most once. Grey hairlines #d9e1ec.
- **Section rhythm.** Alternate white and pale-blue-grey bands to create pacing without cards. Reserve two saturated colour moments — one full-bleed blue quote band mid-page and the dark navy CTA/footer — so the page darkens as it converges on the download. Reduce decoration as you go: hero is visual, middle sections are typographic, the end is centred and quiet.
- **Buttons.** Fully rounded pills. Primary = accent blue fill, white text. Secondary = ghost text with a small icon. On dark bands, invert to white fill, navy text. Always a middot-separated fine-print row under the primary CTA (price, requirements, privacy promise).
- **Numbers and lists.** Numbered features as oversized blue numerals + small-caps labels + hairline vertical rules; numbered prose lists as '01' + bold lead phrase + regular continuation.
- **Tables and checks.** Tables are borderless except hairline row dividers; the own-product column is the only coloured one (soft blue pills). Checkmarks in claims lists are simple, sans, one short line each.
- **Cards and diagrams.** Screenshots and mockups get a large soft shadow and ~12px radius; concept cards use radius + tint or dashed borders to contrast 'safe' vs 'external' (solid blue vs dashed grey). Pin small icon badges to card corners where a status matters.
- **Motion.** Keep it minimal: accordion open/close, tab switching with the left-border indicator, hover states that darken pills slightly. No parallax, no autoplaying animation beyond a static waveform image.
- **Density.** Generous padding (~120px vertical per band), single narrow content column (~680px) for prose sections, wider (~1100px) for hero, table and diagram.

## Never

- Do not reuse Speechmark's name, wordmark, logo, quotation-mark icon, or any of its copy, headlines, testimonial quotes, FAQ text, comparison rows or link labels.
- Do not copy its app screenshots, chat mockup contents, waveform artwork or icon set.
- Never present the result as Speechmark or imply it was made by them; the design language is applied to the user's own product and brand.