---
title: "Mistral design system"
variant: extended
source: https://mistral.ai/
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/mistral-ai)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Mistral · Design System

> Warm minimalism, punctuated by vivid geometric color.

**Theme:** light · **Industry:** ai · **Source:** https://mistral.ai/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Mistral’s homepage pairs an airy, warm-white canvas and confident typography with vivid geometric illustrations that signal its open AI identity. A modular sequence of product stories, customer proof, and a dark editorial resource band turns a complex AI platform into a clear, navigable narrative.

## North star

Keep the interface quiet and spacious, and reserve vivid color for purposeful illustration and key moments.

## Overview

The page is anchored by a warm off-white canvas (#fbfbf8), with dark ink typography and fine grey rules providing structure without visual heaviness. Bright orange and red hues are used as small, high-impact accents, especially in the hero’s geometric pixel-art scene; they are not the general surface palette. ALTMistral gives display and heading text a distinctive, compact editorial voice, while Inter keeps body copy and interface labels practical and readable. The opening hero uses generous negative space around a centered headline, then hands off to a horizontally segmented customer-logo strip. Subsequent sections alternate restrained warm-neutral storytelling with tightly organized product panels and colorful illustrative media. A nearly black (#151524) resource band creates a deliberate late-page contrast before the light footer returns. Borders and square-edged panel divisions do most of the component work; avoid relying on shadows or decorative gradients.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery Warmth | `#fbfbf8` | `--color-gallery-warmth` | brand | Primary page canvas, hero, logo strip, and most content and footer sections. |
| Ink Black | `#18181b` | `--color-ink-black` | neutral | Main headlines, navigation, body copy, and dark-text button labels. |
| Soft Rule | `#e4e3de` | `--color-soft-rule` | neutral | Fine borders and hairlines separating cards, navigation cells, and section content. |
| Oat Surface | `#f5f4ef` | `--color-oat-surface` | surface | Warm alternate section band and light card surfaces, including the sovereignty story. |
| Midnight Panel | `#151524` | `--color-midnight-panel` | surface | Dark background for the lower resource and discovery section. |
| Muted Ink | `#27272a` | `--color-muted-ink` | neutral | Secondary body text and subdued copy against light surfaces. |
| Slate Caption | `#71717b` | `--color-slate-caption` | neutral | Low-emphasis labels, category navigation, and supporting link text. |
| Signal Vermilion | `#ff5229` | `--color-signal-vermilion` | accent | Vivid orange-red geometric illustration accent, especially around the hero. |
| Ember Orange | `#ff8204` | `--color-ember-orange` | accent | Warm orange illustration blocks; primarily artwork rather than a general UI color. |
| Cinder Red | `#e51300` | `--color-cinder-red` | accent | Strong red elements in the hero and product artwork, not a broad interface fill. |
| Deep Signal | `#c4001d` | `--color-deep-signal` | accent | Occasional deep-red illustration color; treat as artwork detail rather than a UI semantic. |
| Graphite Text | `#3f3f47` | `--color-graphite-text` | neutral | Occasional darker heading or footer text where softer contrast is visible. |
| Near-Black | `#09090b` | `--color-near-black` | semantic | High-contrast login control and small dark interface elements. |
| Mist Border | `#eeeeec` | `--color-mist-border` | neutral | Subtle navigation or link surface detail; secondary to the main border color. |

### Semantic aliases

`--color-canvas` → `#fbfbf8` (Gallery Warmth) · `--color-surface` → `#f5f4ef` (Oat Surface) · `--color-surface-2` → `#151524` (Midnight Panel) · `--color-text` → `#18181b` (Ink Black) · `--color-text-muted` → `#fbfbf8` (Gallery Warmth) · `--color-text-subtle` → `#27272a` (Muted Ink) · `--color-border` → `#e4e3de` (Soft Rule) · `--color-accent` → `#ff5229` (Signal Vermilion) · `--color-accent-2` → `#ff8204` (Ember Orange) · `--color-accent-3` → `#e51300` (Cinder Red)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#18181b` | `#fbfbf8` | 17.09:1 | AAA |
| `#18181b` | `#f5f4ef` | 16.09:1 | AAA |
| `#18181b` | `#151524` | 1.02:1 | fail |
| `#fbfbf8` | `#f5f4ef` | 1.06:1 | fail |
| `#fbfbf8` | `#151524` | 17.39:1 | AAA |
| `#27272a` | `#fbfbf8` | 14.37:1 | AAA |
| `#27272a` | `#f5f4ef` | 13.53:1 | AAA |
| `#27272a` | `#151524` | 1.21:1 | fail |
| `#ff5229` | `#fbfbf8` | 3.12:1 | AA-large |
| `#ff5229` | `#f5f4ef` | 2.94:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| ALTMistral | `--font-display` | webfont | 500 | Display, headings, navigation, and captions. | Inter |
| Inter | `--font-body` | webfont | 400, 500 | Body copy and some button and interface text. | Inter |

- **ALTMistral:** Medium weight; tight negative tracking on large headings, natural case, and no all-caps treatment.
- **Inter:** Regular body weight with relaxed leading; use clear, compact UI labels and restrained emphasis.

### Type scale — Augmented Fourth (ratio ≈ 1.431, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 96px | 500 | 1 | -0.02em | — | ALTMistral | Oversized brand or campaign statements where present. |
| h1 | 56px | 500 | 1.07 | -0.01em | — | ALTMistral | Primary hero headline and major page-level title. |
| h2 | 44px | 500 | 1.18 | -0.01em | — | ALTMistral | Large section headings and prominent narrative statements. |
| h3 | 32px | 500 | 1.25 | 0 | — | ALTMistral | Feature-panel and resource-card titles. |
| h4 | 24px | 500 | 1.33 | 0 | — | ALTMistral | Smaller content-group headings and supporting feature titles. |
| body | 16px | 400 | 1.5 | 0 | — | Inter | Descriptions, customer stories, and explanatory copy. |
| caption | 14px | 500 | 1.43 | 0.02em | — | ALTMistral | Eyebrows, compact metadata, and small labels. |
| nav | 16px | 500 | 1.5 | 0 | — | ALTMistral | Primary header links and navigation controls. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 8, 12, 16, 24, 40, 128 px.
- Section rhythm 40px · element gap 16px · card padding — · max content width 1360px.

Use a centered content frame with a measured maximum width of 1360px and a comfortable density. The hero is a broad single-column stage with centered type and substantial breathing room; its logo strip divides into repeated bordered cells. Content below shifts between full-width section bands, a two-column product-story area, and multi-column resources and footer navigation. Maintain a clear vertical rhythm using the measured 8px base spacing scale, with larger section separation than within-card gaps.

## Shape & elevation

- Radius: button `6px` · card `12px` · nav `6px` · link `6px` · xs `4px` · sm `6px` · md `8px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The visual system is mostly flat. Thin #e4e3de rules separate navigation cells, cards, and content blocks, while background bands distinguish sections. Use little or no shadow; let contrast, illustration, and crisp panel boundaries create hierarchy. The dark resource band is a deliberate surface change, not a floating overlay.

## Imagery

Illustration, rather than photography, defines the page: the hero uses vivid geometric blocks and small pixel-art details, while product panels show colorful, block-based visualizations and interface imagery. Keep these images contained within their grid cells and let the surrounding warm canvas remain quiet. Customer logos are monochrome and evenly presented; avoid adding photographic treatments that compete with the brand artwork.

## Components

### Header navigation

A compact light header with dark Inter links, fine cell dividers, and a near-black login control.

### Hero statement

Large centered ALTMistral headline on warm off-white, framed by vivid geometric pixel-art details and generous empty space.

### Customer logo strip

A horizontal row of evenly divided light cells with monochrome customer marks and subtle hairline borders.

### Feature story panels

Product narratives arranged in a two-column editorial grid, pairing concise text and links with bold colorful artwork.

### Customer proof card

A bordered case-study layout with category navigation, concise customer evidence, and a high-contrast quote panel.

### Resource cards

Three columns on a midnight surface, using light titles and copy, subtle borders, and compact read-more actions.

### Footer navigation

Light, rule-separated columns for grouped links, followed by social, app, locale, and brand details.

### Measured component styles

- **Primary button** (“Discover Research”): background #f4f4f5 · text #18181b · radius 6px · padding 8px 16px · 400 16px Inter
- **Secondary button** (“Login Studio Vibe”): background #09090b · text #ffffff · radius 0px · padding 0px 16px · 500 16px Inter
- **Link** (“Read more”): background #21212f · text #e4e4e7 · radius 6px · padding 8px 16px · 400 16px Inter
- **Card** (“5 of the world's largest energy companie”): transparent background · text #18181b · border 1px solid #e4e3de · radius 0px · padding 0px · 400 16px Inter
- **Navigation item** (“Research Sovereign AI Cloud Customers Co”): transparent background · text #18181b · radius 0px · padding 0px · 400 16px Inter

## Do

- Use #fbfbf8 as the dominant canvas.
- Set major headings in ALTMistral or a close substitute.
- Keep large headline blocks surrounded by open space.
- Use thin #e4e3de rules to define grid cells.
- Reserve vivid reds and oranges for selected artwork.
- Alternate light content with a purposeful midnight resource band.

## Don't

- Do not turn the page into a saturated orange interface.
- Do not add heavy shadows to flat editorial panels.
- Do not make every section a rounded card.
- Do not crowd the hero with supporting copy or controls.
- Do not use colorful customer logos when monochrome marks suit the strip.
- Do not replace the warm off-white canvas with stark white.

## Agent prompt

Build a new Mistral-style AI page with a warm #fbfbf8 canvas, Ink Black #18181b typography, and restrained Soft Rule #e4e3de dividers. Use a distinctive display sans for headlines and Inter for readable body copy. Give the hero generous whitespace and a centered, confident statement; use vivid Signal Vermilion #ff5229, Ember Orange #ff8204, and Cinder Red #e51300 as controlled illustration accents, not as broad interface fills. Organize the page in clear modular bands: customer proof, editorial product features, and a contrasting Midnight Panel #151524 for deeper resources. Prefer crisp grid edges, light surfaces, and simple links over shadows, gradients, or pill-heavy UI. Keep copy concise, align media deliberately with its text, and preserve a clear rhythm between sections.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Single-column hero with centered oversized headline, geometric artwork at the edges, and one compact featured link. | primary announcement link, scroll-led discovery | warm canvas, oversized headline, pixel-art geometry, outlined link control |
| 2 | logo-cloud | Horizontal strip of repeated, equally divided logo cells beneath the hero. | customer recognition, horizontal logo browsing | monochrome logos, hairline cell dividers, light background |
| 3 | other | Full-width warm-neutral story band with a centered statement and fine-line artwork. | brand-positioning statement | oat surface, centered headline, delicate line illustration |
| 4 | other | Centered, single-column headline on the light canvas. | section transition | centered heading, open whitespace |
| 5 | feature-grid | Two-column editorial feature area with alternating text and media arrangements. | capability discovery, contextual links | modular panels, illustrated product media, compact feature navigation |
| 6 | testimonials | Two-column customer proof area with category list beside evidence and a prominent quote. | industry selection, customer evidence | light bordered panels, muted category labels, red quote block |
| 7 | feature-grid | Three-column resource section on a dark full-width band. | resource browsing, read-more navigation | midnight surface, divided columns, light text |
| 8 | footer | Three-column link groups with aligned headings and compact lists on the light canvas. | grouped site navigation | three columns, fine dividers, small link lists |
| 9 | footer | Two-part lower footer with social and app links, brand details, and locale controls. | social navigation, app download, language selection | compact icon links, small legal text, locale control |
| 10 | other | Full-width decorative closing strip beneath the footer. | visual sign-off | horizontal color bands, pixel-art detail |

## Source CSS custom properties (selected)

```css
--text-display: 6rem;
--text-display--line-height: 6rem;
--text-h1: 4.5rem;
--text-h1--line-height: 4.5rem;
--text-h2: 3.5rem;
--text-h2--line-height: 3.75rem;
--text-h3: 2.75rem;
--text-h3--line-height: 3.25rem;
--text-h4: 2rem;
--text-h4--line-height: 2.5rem;
--text-body-large: 1.25rem;
--text-body-large--line-height: 1.75rem;
--text-button-large: 1rem;
--text-button-small: .875rem;
--text-eyebrow: .8125rem;
--text-eyebrow--line-height: 1.25rem;
--text-eyebrow-small: .6875rem;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/mistral-ai