Warm editorial-brutalist frontier-AI lab: a warm off-white canvas with near-black navy ink, custom ALTMistral display set at 500, Space Mono uppercase labels, sharp square geometry with flat black CTAs, and a signature pixel-tile flame mosaic in an amber-to-brick ramp holding all the colour.
Browse Mistral in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: mistral.ai (live DOM, computed styles), 2026-07-15 (desktop 1512px). Coverage: homepage (nav, split hero, pixel-mosaic flame, featured-news card, CTAs). Console/La Plateforme: behind login (needs-dashboard). Responsive: breakpoints not captured (desktop only).
Warm, editorial and quietly brutalist — a frontier-AI lab that dresses its homepage like a printed broadsheet built on a strict tile grid. The canvas is a warm off-white (#fbfbf8); ink is a near-black navy (#00001e), never pure black. The whole page is organised on a hard grid with sharp square corners, hairline rules and monospace (Space Mono) labels set in caps, giving an infra/terminal register. All the colour is concentrated in the signature element: a full-height pixel-mosaic of Mistral's flame rendered as square tiles in an amber→orange→brick-red ramp. Display type is the custom ALTMistral face at a medium 500 weight; body/UI is Inter. Buttons are flat black rectangles. It feels like a serious research house that expresses warmth through one incandescent gradient rather than decoration. Feels: warm, editorial, gridded, brutalist.
| Token | Hex | Role / usage |
|---|---|---|
| canvas | #fbfbf8 | Page background |
| surface | #f5f4ef | Sections, panels, right rail |
| surface-2 | #ebe9e0 | Insets, hover fills |
| white | #ffffff | Cards, popovers |
| Token | Hex | Role / usage |
|---|---|---|
| ink | #00001e | Primary text, headings, black buttons |
| ink-90 | #151524 | Secondary heading ink |
| muted | #07070b @ .55 | Secondary body / captions |
| faint | #07070b @ .05 | Subtle button fills / hover |
| Token | Hex | Role / usage |
|---|---|---|
| amber | #ffaf01 | Ramp top (hottest) |
| orange | #ff8204 | Ramp upper-mid |
| orange-red | #ff5229 | Ramp mid, primary brand orange |
| red | #d0021b | Ramp lower |
| brick | #a52318 | Ramp base (coolest) |
| Token | Hex | Role |
|---|---|---|
| blue | #0082e6 | Alt mosaic (product tiles) |
| blue-light | #55b3fb | Alt mosaic tint |
| blue-pale | #b9daff | Alt mosaic wash |
Rule: chrome stays warm-white + ink + hairlines. Colour lives almost entirely inside the tile mosaic; the flame ramp (amber→brick) is the primary identity, blue appears only in product-specific mosaics.
ALTMistral, sans-serif — headings + hero, medium weight (500)."Space Mono", ui-monospace, monospace — eyebrows/labels, UPPERCASE.Inter, sans-serif — running text, buttons, small print.| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Hero / display | 32–56 / 40–1.05 | 500 | normal |
| Section (h2) | 32 / 40 | 500 | normal |
| Nav item | 32 (nav pill) / 16 UI | 500 / 400 | normal |
| Eyebrow (mono) | 12–14 | 400 | normal, UPPERCASE, ink |
| Body | 16 / 24 | 400 | normal |
| Button / UI | 14–16 | 400 | normal |
| Caption / mono | 12 | 400 | UPPERCASE |
Patterns: ALTMistral stays at 500 — no heavy bold. Space Mono carries every label/eyebrow in caps. Tracking is left at normal; the grid, not letter-spacing, does the structuring.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.