## 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/mintlify-com/71224961-d985-451b-9e35-e02eddcee178-1789060616-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/mintlify-com/71224961-d985-451b-9e35-e02eddcee178-1789060076586.webp
- Design on Kage: https://kage.design/designs/mintlify-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, brand colours, typefaces). Wait for the answers before writing any code. Every rule below is applied to *their* product — the reference page is only the source of the design language.

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

1. **Top nav** — logo left; three dropdown items plus one plain text link centre-right; a ghost "Sign in" link and a solid black button right. Thin hairline border below.
2. **Hero (split)** — left column: a small pill badge (label + chevron), a two-line display headline, a one-line subhead with bolded nouns, and a CTA row (solid black primary + outlined secondary). Right column: a framed, slightly cropped product screenshot — a docs-style UI with icon sidebar, top tabs, content heading, step cards, and a small floating "Ask assistant" chip. Thin gradient thread-lines sweep across the background from the right edge.
3. **Logo wall** — left column: one sentence of social proof plus a solid black button; right: a 2×4 bento of hairline-bordered tiles, each holding one customer wordmark.
4. **Live stats ticker** — a thin full-width strip: bold label on the left, then five metric pairs (small grey label + green tabular numeral) spread across; wraps to two lines on narrow screens.
5. **Platform bento** — heading in black with a second line in grey sans, primary button right-aligned; bento grid: one wide + one narrow card on top, three equal cards in the middle, one full-width card at the bottom. Each card pins a short label to its bottom-left with generous empty media space above.
6. **Enterprise carousel** — heading + grey subline, prev/next arrow buttons and a black button right; horizontally scrolling cards ~60% viewport wide, each split into a brand-tinted panel (white logo, claim headline, two huge stat numerals with captions, outlined "Read the story" button) and a photograph.
7. **Scale section** — heading + grey subline + button, a wide decorative wavy thread-line graphic, then a 3-column stat row: tiny icon, huge numeral, one-line caption.
8. **Startup carousel** — heading citing credibility stats, arrows + black button right; cards of vivid full-bleed gradient tiles with a centred white app-icon card, caption line and a coloured "Read … story" link below each tile.
9. **Testimonials** — heading + "Read more" button; a 2×3 grid of cream cards: small logo chip, name and role on top, short quote paragraph below.
10. **Latest updates** — heading + "All posts" button; three blog cards: square visual (mix one light, two dark for contrast), then a category + date meta row and a title.
11. **Pre-footer CTA** — large serif headline left, "Talk to sales" ghost + primary black button right, thread-lines faintly behind.
12. **Footer** — logo left; five link columns (e.g. Explore / Resources / Documentation / Company / Legal); a status line with a green dot ("All systems normal"); small icon row at the very bottom.

## Design language
- **Canvas:** warm off-white `#FAFAF7` page background; card fills `#F5F3EE` to `#EFEDE6`; hairline borders `#E5E2DA` at 1px. Text near-black `#111110`; secondary grey `#6F6E68`. One accent: green `#16A34A` reserved for numerals, links, and the status dot — never for large surfaces. Vivid colour appears only inside customer-story and blog card artwork.
- **Type pairing:** display headlines mix a transitional serif (first line, tight leading, ~48–64px) with a neutral geometric sans (second line, same size, set in grey) — this black-serif + grey-sans pairing is the page's core identity device. Body 14–16px sans, generous line height. All statistics use tabular/mono-flavoured numerals in green or black at 12–40px depending on context.
- **Buttons:** solid near-black rectangles with 6–8px radius, 13–14px label plus a chevron; secondary buttons are 1px-border ghosts on the cream background; carousel arrows are small bordered squares. No drop shadows on buttons.
- **Cards:** 1px hairline border, 10–14px radius, flat fill, no or barely-there shadow, roomy internal padding (~24–32px), labels and captions pinned to card edges rather than centred.
- **Rhythm:** alternate density — dense hero and stat strip → airy bento → full-bleed colour carousels → calm grid sections → compact CTA and footer. Full-bleed tinted panels against hairline cream cards create the page's beat; never place two identical card treatments back to back.
- **Texture:** thin 1px gradient thread-lines (green → teal → yellow, low opacity) sweeping behind the hero, the scale section, and the footer CTA only — never over text-heavy sections.
- **Motion:** subtle only — carousel slides, hover borders that darken, small arrow nudges. No parallax or heavy animation.
- **Numbers as design:** treat metrics as first-class visual elements (badge pill, ticker, oversized carousel stats, stat row) — label in grey, value in green tabular type.

## Never
Do not reuse the Mintlify name, logo, or wordmark; do not copy its headline or any on-page copy; do not reproduce the Microsoft, Anthropic, Coinbase, Solana, Vercel, HubSpot, Zapier, Axiom, Lovable, Kalshi, Decagon or Replit logos or testimonial text; do not clone the thread-line artwork or the docs-UI screenshot verbatim; never present the result as being Mintlify.