Mistral AI — Design System
Mistral sets 'Frontier AI. In your hands.' in its custom ALT Mistral face at 96px/500 on warm paper #FBFBF8, with Inter at 13-16px and near-black 6px-radius buttons. The signature pixel-flag oranges and cat mascot inject Gallic wit into benchmark tables — Europe's frontier lab dressing open-weight seriousness with just enough mischief.
This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/ds/mistral-ai.
Tokens
Mistral AI's decoded design system: background #FBFBF8, text #000000, accent #F4F4F5, link #000000, primary #000000; type scale h1 16px / h2 16px / body 20px; 4px spacing base; 0px base radius. The single interactive/action color is #F4F4F5 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.
Color roles
| Role | Value |
|---|---|
| bg | #FBFBF8 |
| surface | #EBEBE9 |
| border | #D5D5D2 |
| text | #000000 |
| text_muted | #5F5F5E |
| primary | #000000 |
| accent | #F4F4F5 |
| link | #000000 |
| button_bg | #F4F4F5 |
| button_text | #18181B |
Using these colors
- Action color
#F4F4F5— the single interactive color; only on things you click or must notice, never large fills. primary,linkare all#000000— one role, not several (the action color).accent,button_bgare all#F4F4F5— one role, not several (the action color).- accent
#F4F4F5— THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.
Typography
- Heading: Inter
- Body: Inter
- Mono: Space Mono
- h1: 16px
- h2: 16px
- body: 20px
Spacing
- base unit: 4px
- scale: 2px, 4px, 6px, 8px, 12px, 16px, 24px, 32px
Radii
- base: 0px
- button: 6px
Per-section tokens (8)
Export: DESIGN.md
# Mistral AI — Design System > light, professional, medium, tailwind Mistral sets 'Frontier AI. In your hands.' in its custom ALT Mistral face at 96px/500 on warm paper #FBFBF8, with Inter at 13-16px and near-black 6px-radius buttons. The signature pixel-flag oranges and cat mascot inject Gallic wit into benchmark tables — Europe's frontier lab dressing open-weight seriousness with just enough mischief. ## Colors | Role | Value | |------|-------| | bg | `#FBFBF8` | | surface | `#EBEBE9` | | border | `#D5D5D2` | | text | `#000000` | | text_muted | `#5F5F5E` | | primary | `#000000` | | accent | `#F4F4F5` | | link | `#000000` | | button_bg | `#F4F4F5` | | button_text | `#18181B` | **Using these colors** - **Action color** `#F4F4F5` — the single interactive color; it appears only on things you click or must notice (buttons, key highlights), never on large fills or backgrounds. - `primary`, `link` are all `#000000` — one role, not several. - `accent`, `button_bg` are all `#F4F4F5` — one role, not several (your action color). - **accent** `#F4F4F5` — THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed. ## Typography - Heading: **Inter** - Body: **Inter** - Mono: **Space Mono** - h1: 16px - h2: 16px - body: 20px > **Fonts —** Inter — free, on Google. ## Spacing - base unit: 4px - scale: 2px, 4px, 6px, 8px, 12px, 16px, 24px, 32px ## Radius - base: 0px - button: 6px ## Primary button - bg `#F4F4F5` · text `#18181B` · radius 6px ## How to apply Paste the Tailwind `@theme` (or CSS variables) as your base, then build each section to its spec — verify every color, radius, and font against these tokens.
Export: Tailwind v4 (@theme)
@theme {
/* action color #F4F4F5 — the one interactive color; buttons/links/emphasis only, never large fills. */
--color-bg: #FBFBF8;
--color-surface: #EBEBE9;
--color-border: #D5D5D2;
--color-text: #000000;
--color-text-muted: #5F5F5E;
--color-primary: #000000; /* ≈ the text color — a foreground/text color, not an action color (action = #F4F4F5). */
--color-accent: #F4F4F5; /* THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed. */
--color-link: #000000; /* reads as a neutral UI color, not a link accent — verify against the reference (action = #F4F4F5). */
--color-button-bg: #F4F4F5; /* primary-button fill — the main call-to-action color. */
--color-button-text: #18181B;
/* fonts: Inter — free, on Google. */
--font-heading: "Inter", system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-body: "Inter", system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-mono: "Space Mono", ui-monospace, monospace;
--text-h1: 16px;
--text-h2: 16px;
--text-body: 20px;
--radius-base: 0px;
--radius-button: 6px;
--spacing-1: 2px;
--spacing-2: 4px;
--spacing-3: 6px;
--spacing-4: 8px;
--spacing-5: 12px;
--spacing-6: 16px;
--spacing-7: 24px;
--spacing-8: 32px;
}Export: CSS variables
:root {
/* action color #F4F4F5 — the one interactive color; buttons/links/emphasis only, never large fills. */
--bg: #FBFBF8;
--surface: #EBEBE9;
--border: #D5D5D2;
--text: #000000;
--text-muted: #5F5F5E;
--primary: #000000; /* ≈ the text color — a foreground/text color, not an action color (action = #F4F4F5). */
--accent: #F4F4F5; /* THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed. */
--link: #000000; /* reads as a neutral UI color, not a link accent — verify against the reference (action = #F4F4F5). */
--button-bg: #F4F4F5; /* primary-button fill — the main call-to-action color. */
--button-text: #18181B;
--font-heading: "Inter", system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-body: "Inter", system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-mono: "Space Mono", ui-monospace, monospace;
--radius: 0px;
--radius-button: 6px;
}
/* fonts: Inter — free, on Google. */