## 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/mistral-ai/b4bd1aa3-e31c-42a6-8066-6d42fc3e7f45-1789073922-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/mistral-ai/b4bd1aa3-e31c-42a6-8066-6d42fc3e7f45-1789073694097.webp
- Design on Kage: https://kage.design/designs/mistral-landing-page

## Before you start
Ask the user what they are building, who it is for, and what brand assets they already have, including the product name, colours, typefaces, logos, and imagery. Wait for their answers before designing. Apply everything below to their product, not to the reference site.

## Page structure
1. **Persistent top navigation** — Use a slim, white, full-width navigation bar with a small brand mark at left, compact links across the center, and two right-aligned actions: a light secondary action and a black primary action.
2. **Hero split panel** — Create a large two-column hero. Put an oversized, tightly set headline on the left over white; place a short explanatory paragraph on the right. Directly below, continue the left column with a wide, vivid geometric/pixel-art visual while the right column contains small directional controls and a featured-news card.
3. **Whitespace transition** — Leave a deliberately large quiet white interval after the hero/news module so the following content feels like a new chapter rather than a continuous feed.
4. **Customer logo strip** — Present several customer or partner marks in equal-width cells separated by thin vertical rules, centered vertically with generous padding.
5. **Customer story carousel** — Use a pale off-white section containing a horizontal carousel of large rounded image cards. Each card combines a dark photographic or graphic treatment, partner label, category pill, large story title, and a small light CTA. Add pagination and arrow controls beneath the cards.
6. **Capability overview** — Center a large heading above a diagram-like product ecosystem. Arrange multiple bordered white cards in an offset composition around a larger central stack, with small coloured square marks and very faint geometric background shapes.
7. **Capability detail stack** — Build a narrow, bordered content column containing, in order: “Autonomous work,” “Autonomous coding,” “AI application development,” “Custom model development,” “Infrastructure for training and inference,” and “Advanced R&D.” Each row begins with a title and right-side discovery button, followed by a short description, a large visual demo panel, and a line of small uppercase capability labels. Vary the visuals between orange grid art, dark navy code UI, cyan application UI, orange model-training art, yellow infrastructure diagrams, and a pale connected-services diagram.
8. **Expert partnership section** — Return to a bright white/off-white section with a large left-aligned heading, short supporting sentence, and right-aligned service CTA. Below, use four equal vertical cards with tiny coloured pixel-style marks and large bottom-aligned labels.
9. **Dark deployment section** — Switch to near-black navy. Center a small privacy eyebrow, a few tiny provider marks, and a large centered statement. Below, place three equal bordered columns titled “Self-hosted,” “Mistral cloud,” and “Cloud providers,” each with a small icon and compact explanatory copy.
10. **Orange final CTA** — Use a full-width saturated orange band with a small uppercase eyebrow, a large multiline statement on the left, and two contrasting buttons on the right.
11. **Footer navigation** — Follow with a white four-column link directory separated by vertical rules: product, solutions, company/about, and legal/company information.
12. **Footer utility row** — Add social icons on the left, app-store badges on the right, then a spacious bottom utility area with copyright, a large cropped abstract brand glyph, and language/accessibility/theme controls.

## Design language
- Build hierarchy through scale and spacing rather than decoration: use very large black sans-serif headlines, compact body copy, tiny uppercase labels, and strong alignment to a visible column grid.
- Keep the primary surface white or warm off-white, approximately `#fbfbf8` and `#f4f4ef`; use thin low-contrast rules around `#e3e3de` to divide nearly every module.
- Use a high-energy accent system for product visuals: orange `#ff4b1f`, red `#e60022`, yellow `#ffc928`, cyan `#12a9e8`, and deep navy `#171827`. Keep accents concentrated inside illustrations, demo panels, and the final CTA rather than sprinkling them through ordinary UI.
- Pair a neutral grotesk sans-serif with a utilitarian monospace or condensed uppercase treatment for eyebrow labels, metadata, and capability tags. Use an oversized hero and section scale, medium card headings, and restrained 14–18px body text.
- Treat the page as a sequence of bordered modules: use square or barely rounded corners for diagrams and content cards, with modest rounding only on photographic story cards and buttons. Avoid heavy shadows; use hairline borders, slight off-white fills, and occasional soft button elevation.
- Change rhythm down the page: begin with sparse editorial whitespace, move into a denser capability matrix and stacked detail panels, then create contrast with a dark three-column deployment section and a saturated orange closing CTA.
- Make visuals feel systematic and proprietary without relying on photography everywhere: favour pixel mosaics, faint grid lines, connected diagrams, small square marks, interface mockups, and abstract geometric compositions.
- Keep controls compact and understated. Use small pill-like category labels, light rectangular buttons with simple arrow affordances, minimal carousel pagination, and a persistent small utility/navigation rail only where it supports exploration.
- Where motion is added, use restrained horizontal carousel movement, gentle panel reveals, and subtle hover transitions on bordered cards and buttons; never let animation disrupt the editorial pacing or dense information hierarchy.

## Never
- Do not copy the reference site's logos, wordmarks, product names, copy, illustrations, photography, icon sets, partner marks, or exact branded diagrams.
- Do not present the result as Mistral or imply an affiliation with it.
- Do not reproduce the reference content literally; translate its grid, pacing, contrast, modular cards, and pixel-art visual language into the user's own product and brand.