# Mistral — Marketing Site Design Spec > 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). ## 1. Visual Theme & Atmosphere 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. ## 2. Color Palette & Roles ### Surfaces (light) | Token | Hex | Role / usage | |---|---|---| | canvas | `#fbfbf8` | Page background | | surface | `#f5f4ef` | Sections, panels, right rail | | surface-2 | `#ebe9e0` | Insets, hover fills | | white | `#ffffff` | Cards, popovers | ### Text | 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 | ### Accent — the flame ramp (mosaic only) | 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) | ### Secondary (product mosaics) | 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. ## 3. Typography Rules - Display: `ALTMistral, sans-serif` — headings + hero, medium weight (500). - Mono: `"Space Mono", ui-monospace, monospace` — eyebrows/labels, UPPERCASE. - Body/UI: `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. ## 4. Component Stylings ### Buttons - **Primary (black rectangle)**: bg `#00001e`, text `#ffffff`, radius `0px` (sharp square), height `48px`, padding `0 16px`, Inter 14, often paired with a small caret/chevron icon block on the right. - **Rounded variant**: same black fill with radius `6px`, height `40px`, padding `8px 12px` (used inline). - **Secondary (faint)**: bg `rgba(7,7,11,.05)`, text `#00001e`, radius `6px`, height `40px`. - Hover: subtle darken / fill shift. ### Inputs - Not captured on homepage (La Plateforme behind login) — `not captured`. ### Cards / panels - Sharp corners (`0px` radius), white or `#f5f4ef` fill, hairline `rgba(0,0,0,.1)` borders. Featured-news card: thumbnail + title in ALTMistral + mono meta, with share/expand icon buttons on the right edge. ### Nav - Fixed top bar, warm-white, hairline bottom border. Pixel-M logo mark (orange) left; text links (Products, Solutions, Research, Developers, Blog, Customers, Company); right: "Start building" (ghost, caret) + "Contact sales" (black square button, caret icon). ### Mosaic - The signature surface: a grid of equal square tiles filled from the flame ramp forming the Mistral flame; monospace labels ("FRONTIER AI", "IN YOUR HANDS") overlaid in the tile gutters. ## 5. Layout Principles - Split hero: left column is the full-bleed pixel mosaic; right rail (`#f5f4ef`) holds the ALTMistral statement + a "FEATURED NEWS" card, separated by a hard vertical rule. - Everything sits on a visible module grid; sections divided by hairlines, generous vertical rhythm. - Content max-width wide; footer warm-white multi-column. ## 6. Depth & Elevation - Radii: `0px` for the brand/cards/primary CTA (square is the identity); `6px` only on inline/rounded button variants. - Control height: 48px (nav square) / 40px (rounded). - Nearly flat — hairline borders over warm-white, minimal shadow; the mosaic supplies all visual weight. ## 7. Motion - Restrained: hover color/fill micro-transitions, short durations. Mosaic tiles may animate/shuffle on load or scroll (pattern present; library `not captured`). No heavy parallax observed. ## 8. Backgrounds, Effects & WebGL - Warm off-white flat canvas. Signature effect: the **pixel-tile flame mosaic** — a CSS/canvas grid of square cells filled from the amber→brick ramp (e.g. tiles of `#ffaf01`,`#ff8204`,`#ff5229`,`#d0021b`,`#a52318`). A parallel blue mosaic (`#0082e6`→`#b9daff`) appears for product sections. No blur/glass; hairline rules do the dividing. WebGL `not captured`. ## 9. Do's and Don'ts ### Do - Use a warm off-white canvas (`#fbfbf8`) with near-black navy ink (`#00001e`), never pure black/white. - Set headings in ALTMistral at a medium 500 weight; keep tracking normal. - Put every eyebrow/label in Space Mono, UPPERCASE. - Concentrate colour in a square-tile mosaic using the flame ramp (amber→orange→red→brick). - Keep corners sharp (`0px`) — square is the brand; make the primary CTA a flat black rectangle. - Divide with hairline rules and a visible module grid. ### Don't - Don't use pure black `#000` or a cool gray canvas — it is warm off-white with navy ink. - Don't round the cards or primary buttons (square identity; 6px is the exception). - Don't set headings bold (700) — ALTMistral stays at 500. - Don't scatter the flame colours as UI accents; they belong in the mosaic. ## 10. Responsive Behavior - Not captured (desktop 1512px only). Split hero likely stacks (mosaic over rail); nav collapses to a menu (pattern present, not verified). ## 11. Agent Prompt Guide Quick token reference: - Canvas `#fbfbf8` · Text `#00001e` · Surface `#f5f4ef` · Border `rgba(0,0,0,.1)` · Accent flame `#ff5229` - Font: `ALTMistral` display 500, `Space Mono` labels UPPER, `Inter` body/16px · Radius 0px card+CTA / 6px inline · Button height 48px - Primary button: flat black rectangle `#00001e` text `#fff`, 0px radius, caret icon Use the Mistral design language: a warm off-white canvas (#fbfbf8, sections #f5f4ef/#ebe9e0) with near-black NAVY ink (#00001e) — never pure black or white. Headings are set in the custom ALTMistral face at a medium 500 weight with normal tracking; every eyebrow and label is Space Mono in UPPERCASE; body and UI are Inter at 16px/400. The identity is a strict module grid with sharp SQUARE corners (0px radius) everywhere — cards, panels and the primary CTA are flat black rectangles (#00001e, white text, optional caret icon). All colour is concentrated in the signature pixel-mosaic of Mistral's flame: a grid of equal square tiles filled from an amber→orange→red→brick ramp (#ffaf01, #ff8204, #ff5229, #d0021b, #a52318); a parallel blue mosaic (#0082e6→#b9daff) is used only for product sections. Elevation is nearly flat: hairline rules over warm-white, no glass or drop shadows. Feels: warm, editorial, gridded, brutalist. Avoid: pure-black/cool-gray canvas, rounded cards or buttons (6px is a rare exception), bold 700 headings, or spraying the flame colours around as loose UI accents.