## 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/ravio/21fc8fab-2ae9-4a70-87c8-10ebee6c9a8e-1789141806972-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/ravio/21fc8fab-2ae9-4a70-87c8-10ebee6c9a8e-1789141803180.webp
- Design on Kage: https://kage.design/designs/ravio-landing-page

## Before you start
Ask the user what product they are building, who it is for (the buyer's role and seniority), and what brand assets they already have — name, wordmark, colours, typefaces, photography, product screenshots. Wait for the answers. Every rule below is then applied to *their* product, not to the reference site.

## Page structure
1. **Top nav** — slim bar on the page background: serif wordmark left; four dropdown labels plus two plain links centre; 'Sign in' text link and one black pill CTA right; hairline bottom border.
2. **Hero** — fully centred: a small pill badge with a coloured status dot and short eyebrow text, a two-line serif display headline, one sentence of sans subcopy, then two CTAs side by side (solid black pill + white pill with hairline border). Faint spreadsheet-style hairline grid lines sit behind the text and fade out at the edges.
3. **Logo strip** — one row of 6–7 customer wordmarks in muted grey, evenly spaced, no cards or boxes.
4. **Tabbed product showcase** — four short horizontal tab labels; the active tab gets a blue underline rule/dot; below, a large product screenshot floats on a softly tinted panel with rounded corners and no heavy shadow.
5. **Atmosphere band** — full-bleed photographic band (sky/clouds) carrying a centred serif headline, one sentence of subcopy and a single black pill button.
6. **Stats band** — three columns separated by hairlines, each a giant serif numeral over a small grey label, framed by hairline rules above and below.
7. **Customer stories** — left-aligned two-line serif headline with a black pill button at the right; a strip of small client wordmarks; then a three-panel row: (a) metric card with logo, big percentage, caption and a 'Read the case study →' outline button, (b) wide quote card with logo, quote paragraphs and name/role attribution, (c) full-bleed portrait photograph.
8. **How it works** — small grey eyebrow label and a large serif headline, then a two-card row: each card holds an illustration or data visual (an org-matching diagram; a donut chart with compensation legend) on a tinted panel, with a bold sans title and one paragraph beneath the card.
9. **Second product screenshot** — a wide analytics screenshot with KPI tiles, a distribution chart with colour-zoned bands, a tooltip and filter pills, followed by a bold title and a single explanatory paragraph.
10. **Integrations** — centred: a 'Live' pill with status dot, serif headline, one sentence of copy, an outline 'Learn more' button, and a loose grid of six partner wordmarks resting on faint hairline grid lines.
11. **Closing CTA** — two columns: left, serif headline, short paragraph and black pill button; right, a floating data card (avatar, role, level badge, large compensation figure, mini breakdown) with small level chips strung along a subtle curve.
12. **Footer** — near-black: newsletter row (left-aligned heading, right email input + light button), a seven-column link grid across two rows, brand wordmark with social icon and copyright bottom-left, compliance badges bottom-right.

## Design language
- **Type pairing**: a high-contrast editorial serif for display only — hero ~72–88px, section heads ~44–56px, stat numerals ~64–72px, tight leading (~1.05) — paired with a neutral grotesque sans for nav, body (15–16px), labels (13–14px), buttons and all UI. Never set paragraphs in the serif.
- **Colour**: warm cream page background `#F6F4EC`; ink `#141414` for text and primary buttons; muted grey `#6E6C62` for secondary copy and logos; hairlines `#E4E1D6`; one saturated blue accent `#2C63E8` for status dots, active tabs and chart highlights. Data visualisation may use soft tints — pale blue `#E3EEF7`, pale pink `#F6E3E4`, pale yellow `#F3E7C6` — and these tints never leak into layout chrome.
- **Buttons**: fully rounded pills. Primary = solid black, white text; secondary = white with 1px hairline border, black text. No gradients, no shadows on buttons.
- **Borders, radius, shadow**: 1px hairlines in `#E4E1D6` do the structural work — dividing stats columns, framing footer rows, and doubling as a faint background grid (spreadsheet motif) behind hero and integrations. Panels and screenshots use generous radius (~16–24px) with soft tinted fills instead of drop shadows.
- **Rhythm and density**: alternate airy, centred-text chapters with dense, data-heavy ones (screenshots, logo strips, link grid) so each claim gets breathing room; use full-bleed bands — photo, stats, dark footer — as chapter breaks. Each section states one idea: eyebrow or pill → serif headline → one short sans sentence → a single CTA.
- **Imagery**: product screenshots sit on tinted panels, never raw on the background; photography appears exactly twice as full-bleed relief (one atmospheric band, one portrait) to break the cream monotony.
- **Motion and interaction**: restrained — status dots, tab underline, hover darkening on pills, arrows on 'read more' links; no parallax, no large-scale animation.
- **Closing contrast**: flip to near-black `#1B1B1B` with cream text in the footer so the page ends on a strong tonal shift; separate the newsletter row from the link grid with lighter-grey hairlines.

## Never
- Do not use Ravio's name, wordmark, logo, copy, customer logos, testimonials, illustrations, photography or icon set anywhere in the result.
- Do not clone the compensation-benchmarking content or data; apply the layout system and visual language to the user's own product and domain.
- Never present the output as Ravio or imply any connection to it.