---
version: alpha
name: Mistral AI
description: "Warm paper and black type, set alight by a pixel-mosaic of orange, amber and blue."
colors:
  on-surface: "#000000"
  surface: "#FBFBF8"
  outline: "#E4E3DE"
  primary: "#FF5229"
  cream: "#F5F4EF"
  white: "#FFFFFF"
  near-black: "#07070B"
  midnight: "#151524"
  amber: "#FF8204"
  gold: "#FFAF01"
  signal-blue: "#0082E6"
  sky: "#55B3FB"
  border-dark: "#31313A"
typography:
  caption:
    fontFamily: ALTMistral
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  small:
    fontFamily: ALTMistral
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0em
  body:
    fontFamily: ALTMistral
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  lead:
    fontFamily: ALTMistral
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  heading:
    fontFamily: ALTMistral
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0em
  title:
    fontFamily: ALTMistral
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0em
  display:
    fontFamily: ALTMistral
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.01em
rounded:
  chips-tags-small-tiles: 4px
  buttons-inputs-links: 6px
  cards-menus: 8px
  large-rounded-panels-feature-cards: 32px
  mosaic-tiles: 0px
spacing:
  2xs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 40px
---
# Mistral AI — Style Reference
> Warm paper and black type, set alight by a pixel-mosaic of orange, amber and blue.

**Theme:** light

Mistral's identity is the tension between two opposites: a calm, almost analog canvas — warm off-white paper (`#FBFBF8`), a slightly deeper cream (`#F5F4EF`), pure black text — and the loud, blocky **pixel mosaic** that erupts across it. That mosaic is the brand: grids of hard-edged tiles gradating through the "flame" ramp of `#FF5229` → `#FF8204` → `#FFAF01`, cut with a cool `#0082E6` → `#55B3FB` blue for the technical sections. The type does the same double act — a custom geometric display face (`ALTMistral`) carries the headlines with confident, slightly retro-futurist weight, while `Space Mono` marks anything literal or computational. There is almost no ornament between: no drop shadows, no gradients-as-decoration, no rounded softness beyond a functional 6–8px on controls. Surfaces are flat blocks separated by hairline warm borders (`#E4E3DE`) or, in the dark sections, near-black panels (`#07070B`, `#151524`) edged in `#31313A`. The result feels like a European engineering brochure that a demoscene coder redesigned — precise, warm, and pixel-proud.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Paper | `#FBFBF8` | `--color-bg` | The page. A warm, barely-tinted off-white — the default canvas behind everything. |
| Cream | `#F5F4EF` | `--color-surface` | The first surface step: card fills, alternating sections, quiet panels. |
| White | `#FFFFFF` | `--color-paper` | Pure white — crisp panels, product screenshots, and cards that need to sit above the paper. |
| Ink | `#000000` | `--color-text` | All body and heading text. Mistral writes in true black on paper, not a softened grey. |
| Near Black | `#07070B` | `--color-ink-solid` | The primary button/CTA fill and dark solid blocks — a hair off pure black. |
| Midnight | `#151524` | `--color-bg-dark` | The dark-section canvas (footer, "autonomous coding" panels) — a deep blue-black. |
| Flame Orange | `#FF5229` | `--color-accent` | THE Mistral signature — the hottest tile in the mosaic, the primary brand accent. |
| Amber | `#FF8204` | `--color-accent-2` | The mosaic's mid step — secondary warm accent, gradients from flame toward yellow. |
| Gold | `#FFAF01` | `--color-accent-3` | The coolest warm tile — highlights, the "infrastructure" yellow field, chart fills. |
| Signal Blue | `#0082E6` | `--color-info` | The technical counter-accent — the "AI application development" blue mosaic and links in code contexts. |
| Sky | `#55B3FB` | `--color-info-soft` | The blue mosaic's light step — soft technical highlights and gradient tiles. |
| Border | `#E4E3DE` | `--color-border` | The default warm hairline dividing paper surfaces. |
| Border Dark | `#31313A` | `--color-border-dark` | The hairline used inside dark sections, edging near-black panels. |

## Tokens — Typography
### ALTMistral — the display and UI voice; a custom geometric sans carrying everything from 12px labels to the 40px+ hero · `--font-sans`
- **Substitute:** "ALT Mistral", "Space Grotesk", "Neue Haas Grotesk", Inter, -apple-system, system-ui, sans-serif
- **Weights:** 400 (regular — body), 500 (medium — labels, buttons), 600 (semibold — headings, from `loadedFonts`)
- **Sizes:** 12, 13, 16, 20, 24, 28, 40px
- **Line height:** ~1.0–1.1 on the large display, ~1.5 on body
- **Letter spacing:** near-zero; the face is already confident and wide — it does not need tracking
- **Role:** The brand's whole spoken register. Note the italic cuts also load (`ALTMistral 400/500/600 italic`) — used for emphasis in prose.
### Inter — the neutral fallback / dense UI text where the custom face isn't loaded · `--font-sans-fallback`
- **Substitute:** Inter, -apple-system, "Helvetica Neue", system-ui, sans-serif
- **Weights:** 400
- **Sizes:** 13, 16px
- **Role:** A quiet workhorse behind `ALTMistral` for long-form and dense secondary UI.
### Space Mono — code, model names, IDs, and anything literal/computational · `--font-mono`
- **Substitute:** "Space Mono", "IBM Plex Mono", "SF Mono", ui-monospace, monospace
- **Weights:** 400
- **Sizes:** 12, 13px
- **Role:** The technical tell — inline `code`, model identifiers, and the retro-computational captions that reinforce the pixel-mosaic theme.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Caption | 12px | 1.4 | 0 | `--text-caption` |
| Small | 13px | 1.45 | 0 | `--text-sm` |
| Body | 16px | 1.5 | 0 | `--text-base` |
| Lead | 20px | 1.4 | 0 | `--text-lg` |
| Heading | 24px | 1.25 | 0 | `--text-xl` |
| Title | 28px | 1.2 | 0 | `--text-2xl` |
| Display | 40px | 1.05 | -0.01em | `--text-3xl` |

## Tokens — Spacing & Shapes
**Base unit:** 4px   **Density:** comfortable

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 2xs | 4px | `--space-1` |
| xs | 8px | `--space-2` |
| sm | 12px | `--space-3` |
| md | 16px | `--space-4` |
| lg | 24px | `--space-6` |
| xl | 32px | `--space-8` |
| 2xl | 40px | `--space-10` |

### Border Radius
| Element | Value |
|---------|-------|
| Chips / tags / small tiles | 4px |
| Buttons, inputs, links | 6px |
| Cards, menus | 8px |
| Large rounded panels / feature cards | 32px |
| Mosaic tiles | 0px (hard pixel edges) |

### Shadows
Mistral uses **no drop shadows** — the scan reports none. Depth is done entirely with flat fills and hairline borders, in keeping with the pixel-block aesthetic. *(inferred: any elevation is a border or a lighter surface, never a blur)*

### Layout
- **Page max-width:** ~1200px content column, generously margined on the paper canvas.
- **Section rhythm:** large full-width alternating bands (paper → cream → dark) with the mosaic used as a section-header device.
- **Card padding:** 16–24px.
- **Element gap:** 8–12px within groups; the mosaic tiles butt edge-to-edge with no gap.

## Components
### Primary Button ("Start building")
**Role:** The single highest-intent CTA in the chrome.
Solid `#07070B` near-black fill with white text, 6px radius, ~8px/12px padding, `ALTMistral` 500 at 16px. Flat — no shadow, no gradient. The one dark object floating on the warm paper.

### Secondary / Ghost Button ("Contact sales")
**Role:** Low-emphasis action beside the primary.
Transparent or paper fill with a `#E4E3DE` hairline border, `#000000` label, 6px radius. On the dark sections it inverts: near-transparent on `#151524` with a `#31313A` border.

### Text Link
**Role:** Inline navigation and in-content links.
Black `ALTMistral`/`Inter` 400 at 16px, no underline at rest; in code and technical contexts the link picks up `#0082E6`. In the dark sections links sit as near-black pills (`#07070B`, 6px radius, 8px/12px padding).

### Card / Feature Tile
**Role:** Groups a product capability on the canvas.
`#F5F4EF` cream (or `#FFFFFF` white) fill, 8px radius on standard cards and up to 32px on the large rounded feature panels, 16–24px padding, `#E4E3DE` hairline. No shadow — separation comes from the surface step and border alone.

### Mosaic Block / Section Header
**Role:** The signature brand device — a grid of hard-edged tiles.
A tight grid of 0-radius squares gradating across the warm ramp (`#FF5229` → `#FF8204` → `#FFAF01`) or the blue ramp (`#0082E6` → `#55B3FB`). Used as hero art, section dividers, and behind product diagrams. Tiles are equal-size, butted edge-to-edge, animating in a subtle shuffle. This is Mistral's whole visual identity in one component.

### Logo Mark
**Role:** Brand identity in the nav and footer.
The pixelated "M" — a solid black mark built from the same tile grid, rendered on paper at rest and reversed to paper on the dark footer.

### Model / Code Chip
**Role:** Marks a model name or literal value in prose.
`Space Mono` at 12–13px on a `#F5F4EF` fill with a `#E4E3DE` hairline, 4px radius — the retro-computational tell that names a product (`Mistral Large`, `Codestral`) or an API value.

### Text Input
**Role:** Text entry in forms and search.
White or paper fill, 6px radius, `#E4E3DE` hairline, 16px `#000000` text. On focus the border can deepen or pick up `#FF5229`. *(inferred: focus accent follows the brand orange)*

### Nav Bar
**Role:** Top-level site navigation.
A slim paper bar — wordmark left, a row of `ALTMistral` 500 links (Products · Solutions · Research · Developers · Company) center, and the near-black "Start building" CTA plus a bordered "Contact sales" right. Dissolves to the dark palette in the footer.

## Do's and Don'ts
### Do
- Start from warm paper (`#FBFBF8`), step to cream (`#F5F4EF`) and white (`#FFFFFF`) for surfaces, and write in true black (`#000000`).
- Treat the pixel mosaic as the hero: hard-edged, equal, gap-less tiles gradating `#FF5229` → `#FF8204` → `#FFAF01` (warm) or `#0082E6` → `#55B3FB` (cool).
- Keep flame orange `#FF5229` as the primary brand accent; let amber and gold extend it as a ramp, not as separate competing accents.
- Reserve the blue pair (`#0082E6`, `#55B3FB`) for technical/product contexts — it's the "code" counter-voice to the warm brand ramp.
- Set headlines in `ALTMistral` and anything literal in `Space Mono` — the two-voice split is core to the identity.
- Separate surfaces with flat fills and hairline borders (`#E4E3DE` on light, `#31313A` on dark). Stay flat.
- Use the near-black `#07070B` for the one solid CTA per view; keep everything else on paper.

### Don't
- Don't add drop shadows or soft glows — Mistral is resolutely flat; depth is border + surface only.
- Don't round the mosaic tiles; their hard 0px pixel edges are the point. Rounding them kills the brand.
- Don't let the warm ramp and the blue fight as two equal accents — orange leads, blue is the technical aside.
- Don't soften the black — body text is true `#000000` on paper, not a grey.
- Don't over-round; controls stay at 6–8px and only the large feature panels reach 32px.
- Don't reach for gradients-as-decoration outside the tile mosaic — smooth gradients read foreign against the pixel language.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Paper | `#FBFBF8` | The page background behind everything. |
| 1 | Cream | `#F5F4EF` | Cards, alternating sections, quiet panels. |
| 2 | White | `#FFFFFF` | Crisp panels and product screenshots that lift off the paper. |
| — | Midnight | `#151524` | The inverted dark-section canvas. |
| — | Near Black | `#07070B` | Solid CTA fills and the darkest blocks. |

## Elevation
Mistral has essentially no z-axis. There are no shadows in the system; a surface is "above" another purely because it is a different flat tone (cream on paper, white on cream) or because a hairline border traces its edge. In the dark sections the same logic inverts — near-black panels (`#07070B`) sit on the midnight canvas (`#151524`) separated by a `#31313A` line. The pixel mosaic reinforces this flatness: it reads as a printed grid, not a lit object. The whole system behaves like ink on paper — layers by tone, never by blur.

## Imagery
The pixel mosaic is the primary imagery — hard-edged tile grids in the warm and cool ramps, used as hero art, section headers, and abstract backdrops for diagrams. Beyond it: clean product screenshots (the chat, the console, code panels) on white; simple line diagrams for infrastructure and "agentic workflows"; and partner/customer logos in flat monochrome rows (HSBC, IBM, ASML in the scanned page). Almost no photography of people or places — the brand's world is computational and typographic. When color appears it is always the mosaic ramp, never stock gradients.

## Layout
The site is a sequence of full-width bands alternating paper, cream, and dark, each introduced by a mosaic or a large `ALTMistral` heading ("Do it all with Mistral", "Autonomous work", "Autonomous coding"). Content sits in a ~1200px column with generous margins. The hero pairs a big display headline ("Frontier AI. In your hands.") with a warm mosaic block. Feature sections marry a heading + short paragraph to a screenshot or diagram on cream/white cards, some rounded to 32px. The footer flips to the midnight palette with the reversed logo and dense `ALTMistral` link columns. Rhythm is calm and editorial; the mosaic supplies all the energy.

## Typography Signature
Mistral speaks in two fonts that mean two different things. `ALTMistral` — the custom geometric display face — is the brand's voice: confident, slightly retro-futurist, wide enough to hold a headline as a single object at 40px, and precise enough to label a 12px chip. It never needs tracking; the letterforms already sit with authority. Against it, `Space Mono` is the sound of the machine — every model name, API value, and technical caption switches to the fixed-width face, so the eye instantly separates "brand" from "computation." That split is the signature: warm human display for what Mistral says, retro mono for what the system does. Weight carries hierarchy (400 body → 500 labels → 600 headings) rather than dramatic size jumps, keeping the pages feeling even and editorial rather than shouty.

## Agent Prompt Guide
## Quick Color Reference
- background: `#FBFBF8` (paper) / text: `#000000` / surface: `#F5F4EF` cream, `#FFFFFF` white / border: `#E4E3DE` / brand accent: `#FF5229` flame (ramp `#FF8204` amber → `#FFAF01` gold) / technical accent: `#0082E6` blue (`#55B3FB` light) / primary action: `#07070B` near-black fill, white text / dark sections: `#151524` canvas, `#31313A` border

## Example Component Prompts
1. **Pixel mosaic hero**: Render a tight grid of equal, hard-edged (0px radius) square tiles, gap-less, gradating across `#FF5229` → `#FF8204` → `#FFAF01`. Place it on a `#FBFBF8` paper canvas beside a 40px `ALTMistral` 600 headline in `#000000`. No shadows.
2. **Primary CTA**: A `#07070B` near-black button, white label in `ALTMistral` 500 at 16px, 6px radius, 8px/12px padding, flat (no shadow). Sits alone on the paper.
3. **Feature card**: A `#F5F4EF` cream card (or `#FFFFFF` white), 8px radius (or 32px for a large panel), 20px padding, `#E4E3DE` hairline border, a 24px `ALTMistral` 600 heading and 16px `#000000` body. No shadow.
4. **Model chip**: Wrap a model name in `Space Mono` 12px, `#000000` on a `#F5F4EF` fill with a `1px solid #E4E3DE` border, 4px radius, 2px/6px padding.
5. **Dark footer band**: A `#151524` full-width band, reversed pixelated "M" logo, dense columns of `ALTMistral` 400 links in near-white, near-black `#07070B` pill buttons with `#31313A` borders, 6px radius.

## Similar Brands
- **Hugging Face** — the other open-weights AI house; warm, playful, emoji-and-color forward against clean type.
- **Vercel** — flat surfaces, hairline borders, and a screenshot-led product marketing rhythm.
- **Stripe** — editorial band-by-band marketing layout with confident display type and product imagery on light.
- **Cohere** — enterprise-AI positioning with a warm, type-driven, restrained palette.
- **Framer** — bold display type and blocky, colorful hero devices on a crisp canvas.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors — Surfaces */
  --color-bg: #FBFBF8;
  --color-surface: #F5F4EF;
  --color-paper: #FFFFFF;
  --color-bg-dark: #151524;
  --color-ink-solid: #07070B;

  /* Colors — Text */
  --color-text: #000000;

  /* Colors — Brand ramp (warm) */
  --color-accent: #FF5229;
  --color-accent-2: #FF8204;
  --color-accent-3: #FFAF01;

  /* Colors — Technical ramp (cool) */
  --color-info: #0082E6;
  --color-info-soft: #55B3FB;

  /* Colors — Borders */
  --color-border: #E4E3DE;
  --color-border-dark: #31313A;

  /* Typography — Families */
  --font-sans: 'ALTMistral', 'Space Grotesk', 'Neue Haas Grotesk', Inter, -apple-system, system-ui, sans-serif;
  --font-sans-fallback: Inter, -apple-system, 'Helvetica Neue', system-ui, sans-serif;
  --font-mono: 'Space Mono', 'IBM Plex Mono', 'SF Mono', ui-monospace, monospace;

  /* Typography — Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Typography — Scale */
  --text-caption: 12px;
  --text-sm: 13px;
  --text-base: 16px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 28px;
  --text-3xl: 40px;
  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-normal: 1.5;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* Border Radius */
  --radius-chip: 4px;
  --radius-control: 6px;
  --radius-card: 8px;
  --radius-panel: 32px;
  --radius-tile: 0px;
}
```
### Tailwind v4
```css
@theme {
  /* Colors — Surfaces */
  --color-bg: #FBFBF8;
  --color-surface: #F5F4EF;
  --color-paper: #FFFFFF;
  --color-bg-dark: #151524;
  --color-ink-solid: #07070B;

  /* Colors — Text */
  --color-text: #000000;

  /* Colors — Brand ramp (warm) */
  --color-accent: #FF5229;
  --color-accent-2: #FF8204;
  --color-accent-3: #FFAF01;

  /* Colors — Technical ramp (cool) */
  --color-info: #0082E6;
  --color-info-soft: #55B3FB;

  /* Colors — Borders */
  --color-border: #E4E3DE;
  --color-border-dark: #31313A;

  /* Typography — Families */
  --font-sans: 'ALTMistral', 'Space Grotesk', 'Neue Haas Grotesk', Inter, -apple-system, system-ui, sans-serif;
  --font-mono: 'Space Mono', 'IBM Plex Mono', 'SF Mono', ui-monospace, monospace;

  /* Typography — Scale */
  --text-caption: 12px;
  --text-sm: 13px;
  --text-base: 16px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 28px;
  --text-3xl: 40px;

  /* Spacing */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;

  /* Border Radius */
  --radius-chip: 4px;
  --radius-control: 6px;
  --radius-card: 8px;
  --radius-panel: 32px;
  --radius-tile: 0px;
}
```