## 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/omnea-co/444fd721-a6f8-467e-8179-cf278abe5ec1-1789141735165-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/omnea-co/444fd721-a6f8-467e-8179-cf278abe5ec1-1789141728678.webp
- Design on Kage: https://kage.design/designs/omnea-landing-page

## Before you start
Ask the user what they are building, who it is for, and what brand assets they already have (name, colours, type). Wait for the answers. Everything below is applied to *their* product, not to the reference.

## Page structure
Build a single long marketing landing page, top to bottom:

1. **Header** — slim, logo left, centred nav links, right-aligned "Log in" text link plus a solid dark pill "Book a demo" button. Light background, subtle or no border.
2. **Hero** — full-width, tall, centred. Small uppercase eyebrow label above, two-line large serif headline, one short supporting paragraph, single dark pill CTA. Add a faint dot/line generative texture behind the type for depth.
3. **Logo strip** — small uppercase "backed by…" caption, then a single row of 5–6 muted grey customer logos, low contrast, generous whitespace.
4. **Platform section** — eyebrow label + centred serif heading + one-line subcopy. Below, a fan/scatter of small coloured dots labelled with feature names, then a 4-column bento row of outlined cards, each with a title, one-line description and 3–4 list items with arrows. Close with a centred text link.
5. **Proof section** — "Our proudest achievement" caption, huge serif headline ("99% customer retention"), then a two-column row: large editorial photo card (physical brand object) beside a quote card with attribution. Underneath, a 3-column stat grid: logo, oversized serif number, small caption.
6. **Why-us bento** — left-aligned serif heading with a coloured emphasised phrase, then a 2×2 asymmetric bento grid of UI-mockup cards (screenshots/recreations of product UI with small annotation chips) plus a 3-column icon-and-caption row (integrations, actions, renewals).
7. **Testimonial cards row** — heading, then a horizontal row of 4 photo/quote cards with logos and attributions.
8. **Stats band** — one line intro, then three oversized serif percentages (e.g. 4.2% / 45% / 96%) with tiny captions beneath.
9. **Dark section break** — full-bleed near-black section: eyebrow, centred serif headline, subcopy, then a dark UI panel (product architecture diagram/table) barely visible against black. Follow with a sub-section ("You're not on your own") in the same dark block with supporting imagery.
10. **Customer story** — eyebrow, serif heading, two key stats inline, "Read the story" button right, then a full-width editorial video/photo with a large pull-quote and attribution beneath.
11. **Enterprise readiness** — heading split left/right, then a 3-column grid of outlined tiles each with a geometric line-drawing, title and caption. Below, a highlighted paragraph about governance, and a row of outlined compliance badge tiles (SOC 2, GDPR, etc. as generic abstract badges).
12. **Testimonial wall** — heading + "View all stories" pill, then a masonry-style 3-column grid of quote cards (logo, quote, name, role).
13. **Blog/articles** — "Featured news and insights" heading with "View all posts" pill, 3 article cards: image, title, author row.
14. **Newsletter** — centred "Subscribe to our newsletter" with an inline email input + dark pill Subscribe button.
15. **Closing CTA** — dark full-bleed block: serif headline, subcopy, two pill buttons (primary dark/white, secondary outline).
16. **Footer** — dark, multi-column link lists, logo and compliance badges bottom-left.

## Design language
- Palette: warm off-white/beige background (#F5F3EE–#FAF9F6), near-black text (#141414), grey for secondary (#6B6B6B); one dark full-bleed section (#111111) with white text to break rhythm. Use one muted accent (soft green or similar) sparingly for emphasis words and eyebrow dots.
- Type: one expressive serif (e.g. a display serif) for ALL headlines and large numerals; a clean grotesque sans for body, nav, labels and UI mockups. Headline scale ~56–72px hero, ~40px section, ~28px cards; body 14–16px with relaxed line-height.
- Eyebrow system: every section opens with an 11px uppercase letterspaced label preceded by a small dot or "+", anchoring the page rhythm.
- Hierarchy: contrast serif/sans and huge/small, not colour. Stats set in 72–96px serif against 11px captions.
- Cards: 1px hairline borders (#E5E2DA), 8–12px radius, no or extremely subtle shadows; bento grids with 12–16px gutters.
- Photography: real, warm, editorial (hands, objects, people at work), never stock-blue; UI mockups rendered as light cards with tiny annotation pills.
- Buttons: pill-shaped, solid near-black with white text; secondary as outline or text link.
- Motion: assume gentle fade/slide-up on scroll for sections, subtle hover lift on cards, none flashy.
- Dark sections: keep layout identical to light sections but invert; make the dark panel content low-contrast so the headline carries.

## Never
- Do not use Omnea's name, logo, wordmark, customer logos (PayPal, TeamViewer, Proofpoint, Adecco), copy, quotes, photography or icon sets.
- Never present the result as Omnea or reference procurement unless the user's product is procurement software.