W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Mistral AI
Mistral AI is a Paris-based AI research company and the maker of open-weight large language models including Mistral 7B, Mixtral 8x7B/8x22B, and the Mistral Large family. The brand voice is precise, European-engineering-confident, and unapologetically technical — research-paper density over marketing gloss. Visually, Mistral is dark-first and warm: a near-black "Matt" canvas, a signature Sunshine ramp that travels from pale yellow through pumpkin to ember-red, and a horizontal rainbow stripe rendered across the site footer as the identity's optical signature. Typography is the proprietary Pixelbasel display face paired with FragmentMono for code.
1 palette 3 fonts 0 assets 9 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/mistral/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/mistral/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Mistral AI
Mistral AI is a Paris-based AI research company and the maker of open-weight large language models including Mistral 7B, Mixtral 8x7B/8x22B, and the Mistral Large family. The brand voice is precise, European-engineering-confident, and unapologetically technical — research-paper density over marketing gloss. Visually, Mistral is dark-first and warm: a near-black "Matt" canvas, a signature Sunshine ramp that travels from pale yellow through pumpkin to ember-red, and a horizontal rainbow stripe rendered across the site footer as the identity's optical signature. Typography is the proprietary Pixelbasel display face paired with FragmentMono for code.
Tags: mistral, ai, llm, open-weight, brand, dark-first, orange, european
Atoms
Palette
Mistral AI · [email protected] · Proprietary — All Rights Reserved
Mistral AI's brand palette as captured from the live marketing site (mistral.ai). The brand is dark-first: a near-black "Matt" canvas with a warm cream "Beige" inverse, fronted by Mistral's signature "Sunshine" ramp — a six-stop orange-to-coral arc that travels from sunshine yellow (#FFD900) through marigold and pumpkin to deep ember-red (#E10500). The brand's footer band renders the full Sunshine ramp as a horizontal stripe, which is the visual signature of the identity. Mistral is dark-first; the light mode used on documentation and reading surfaces flips Matt-black to a warm Beige canvas with near-black text.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
Geist Mono ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
matt-deep |
Matt Deep | #000000 |
matt-black |
Matt Black | #1F1F1F |
matt-black-tint |
Matt Black Tint | #3D3D3D |
beige-light |
Beige Light | #FFF7E0 |
beige-deep |
Beige Deep | #FCEFC6 |
beige-deeper |
Beige Deeper | #E6D2A0 |
sunshine-50 |
Sunshine 50 | #FFF0C3 |
sunshine-100 |
Sunshine 100 | #FFE295 |
sunshine-200 |
Sunshine 200 | #FFDD8A |
sunshine-300 |
Sunshine 300 | #FFD06A |
sunshine-400 |
Sunshine 400 | #FFC452 |
sunshine-500 |
Sunshine 500 | #FFB83E |
sunshine-600 |
Sunshine 600 | #FFAD2E |
sunshine-700 |
Sunshine 700 | #FFA110 |
sunshine-750 |
Sunshine 750 | #F2920B |
sunshine-800 |
Sunshine 800 | #FF9500 |
sunshine-900 |
Sunshine 900 | #FF8A00 |
sunshine-950 |
Sunshine 950 | #FF7F00 |
mistral-orange |
Mistral Orange | #FA500F |
mistral-orange-bright |
Mistral Orange Bright | #FF6D05 |
mistral-red |
Mistral Red | #E10500 |
footer-yellow |
Footer Band Yellow | #FFD800 |
footer-marigold |
Footer Band Marigold | #FFAF00 |
gray-100 |
Gray 100 | #F3F4F6 |
gray-300 |
Gray 300 | #D1D5DC |
gray-500 |
Gray 500 | #6A7282 |
gray-700 |
Gray 700 | #364153 |
gray-900 |
Gray 900 | #101828 |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
beige-light |
#FFF7E0 |
surface |
beige-deep |
#FCEFC6 |
surface-elevated |
beige-light |
#FFF7E0 |
text-primary |
matt-black |
#1F1F1F |
text-secondary |
gray-700 |
#364153 |
text-tertiary |
gray-500 |
#6A7282 |
primary |
mistral-orange |
#FA500F |
primary-hover |
sunshine-750 |
#F2920B |
accent |
mistral-orange |
#FA500F |
accent-hover |
sunshine-750 |
#F2920B |
warning |
sunshine-700 |
#FFA110 |
warning-hover |
sunshine-800 |
#FF9500 |
error |
mistral-red |
#E10500 |
success |
sunshine-500 |
#FFB83E |
border |
beige-deeper |
#E6D2A0 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
matt-black |
#1F1F1F |
surface |
matt-black-tint |
#3D3D3D |
surface-elevated |
matt-black-tint |
#3D3D3D |
text-primary |
beige-light |
#FFF7E0 |
text-secondary |
beige-deep |
#FCEFC6 |
text-tertiary |
gray-300 |
#D1D5DC |
primary |
mistral-orange |
#FA500F |
primary-hover |
sunshine-700 |
#FFA110 |
accent |
mistral-orange |
#FA500F |
accent-hover |
sunshine-700 |
#FFA110 |
warning |
sunshine-500 |
#FFB83E |
warning-hover |
sunshine-600 |
#FFAD2E |
error |
mistral-red |
#E10500 |
success |
sunshine-400 |
#FFC452 |
border |
matt-black-tint |
#3D3D3D |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
matt-black |
#1F1F1F |
on-identity |
beige-light |
#FFF7E0 |
primary |
mistral-orange |
#FA500F |
primary-hover |
sunshine-750 |
#F2920B |
accent |
mistral-orange |
#FA500F |
accent-hover |
sunshine-700 |
#FFA110 |
mark |
mistral-orange |
#FA500F |
success |
sunshine-400 |
#FFC452 |
warning |
sunshine-500 |
#FFB83E |
error |
mistral-red |
#E10500 |
text-primary-light |
matt-black |
#1F1F1F |
text-primary-dark |
beige-light |
#FFF7E0 |
background-light |
beige-light |
#FFF7E0 |
background-dark |
matt-black |
#1F1F1F |
surface-light |
beige-deep |
#FCEFC6 |
surface-dark |
matt-black-tint |
#3D3D3D |
text-secondary-light |
gray-700 |
#364153 |
text-tertiary-light |
gray-500 |
#6A7282 |
border-light |
beige-deeper |
#E6D2A0 |
border-dark |
matt-black-tint |
#3D3D3D |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (6)
contrastRatio → text-primary
- against:
background - minRatio:
7 - standard:
WCAG-AAA
Beige Light (#FFF7E0) on Matt Black (#1F1F1F) gives roughly 16:1 — clears AAA decisively in both modes. The brand's dense, research-paper reading posture justifies an AAA target rather than the AA floor.
colorChoice → roles.colors.primary
- allowed: mistral-orange, mistral-orange-bright, sunshine-700, sunshine-750
- forbidden: mistral-red, sunshine-50, sunshine-100, footer-yellow, footer-marigold
Mistral Orange (#FA500F) is the brand's documented primary — it is the action color on buttons and the dominant accent on mistral.ai. Sunshine-700 / 750 are valid hover/pressed variants. Mistral-red is reserved for the deepest endpoint of the Sunshine arc and footer-band stops, not as the interactive primary. The pale Sunshine 50 / 100 tints lack enough contrast on either canvas to serve as primary.
colorChoice → roles.colors.identity
- allowed: matt-black, matt-deep
- forbidden: mistral-orange, mistral-red, sunshine-500, beige-light
Mistral is dark-first by construction. The identity surface is the Matt-black canvas (#1F1F1F) or the deeper #000000 variant — the Sunshine ramp colors flow ACROSS it as gradient and accent, but the brand's identity ground is always the dark Matt.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, on-busy-photo, low-contrast-fill
Mistral's wordmark and the rainbow-stripe footer band are precise typographic and chromatic artifacts. Recoloring, skewing, or applying drop-shadow to the mark conflicts with the brand's exact-engineering posture.
contextRestriction → roles.colors.error
- forbiddenContexts: large-fill, background, hero
- allowedContexts: error-state, destructive-action, data-viz-negative
Mistral Red (#E10500) is the deepest endpoint of the Sunshine arc — it reads as alarm and as the destructive- action color. Large background fills in Mistral Red conflict with the documented brand posture where the dark Matt canvas is the ground.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The brand's dark-first composition with the bright Sunshine accent clears AA effortlessly; consumers must preserve the property when composing Sunshine tints against the Matt canvas.
⚠️ warning (2)
enumMembership → typography.heading.fontWeight
- allowed: 400, 500, 600, 700
Mistral's marketing site uses Regular (400) for body, Medium (500) and SemiBold (600) for emphasis, and Bold (700) for hero headings — the typical variable-font cut. Display weights outside this band are not in the licensed Pixelbasel delivery on mistral.ai.
fontPairing → typography.display
- requires:
code - minSizeRatio:
1.5
The Pixelbasel display face pairs with FragmentMono for code and inline-technical contexts on mistral.ai. A 1.5× minimum display-to-mono size ratio preserves the typographic hierarchy when both faces appear adjacent in research tables, model spec sheets, and CLI illustrations.
💡 recommendation (1)
compositionConstraint → roles.colors.primary
- pairsWith: matt-black, matt-deep, beige-light, beige-deep
- doesNotPairWith: mistral-red, footer-yellow
Mistral Orange reads cleanest on the Matt-black canvas or the warm Beige canvas. Placing it adjacent to Mistral Red or Footer Yellow creates a Sunshine-ramp chromatic conflict — they belong together AS the ramp, not as competing foreground/background pairs.
Provenance
- Source: https://mistral.ai/
- License:
Proprietary — All Rights Reserved - Attribution: Mistral AI — visual identity captured from the deployed stylesheet on mistral.ai (--color-mistral-sunshine-, --mistral-beige-, --mistral-black-matt-, --mistral-orange, --mistral-red, --mistral-footer-band- token families). Mistral, Mistral AI, and associated marks are property of Mistral AI.
- Imported:
2026-05-18 - Notes: Derived from live site CSS at https://mistral.ai/ on 2026-05-18; no public brand guide located. The proprietary display face Pixelbasel and proprietary mono FragmentMono are declared on mistral.ai via @font-face but are not publicly distributed. This atom references inter@1 as the open-source rendering substitute for the sans/display role and geist-mono@1 as the open-source rendering substitute for the mono role.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Mistral AI
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Mistral AI
A clear hierarchy in Mistral AI's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ mistral-orange #FA500F accent-hover
→ sunshine-700 #FFA110 background-dark
→ matt-black #1F1F1F background-light
→ beige-light #FFF7E0 border-dark
→ matt-black-tint #3D3D3D border-light
→ beige-deeper #E6D2A0 error
→ mistral-red #E10500 identity
→ matt-black #1F1F1F mark
→ mistral-orange #FA500F on-identity
→ beige-light #FFF7E0 primary
→ mistral-orange #FA500F primary-hover
→ sunshine-750 #F2920B success
→ sunshine-400 #FFC452 surface-dark
→ matt-black-tint #3D3D3D surface-light
→ beige-deep #FCEFC6 text-primary-dark
→ beige-light #FFF7E0 text-primary-light
→ matt-black #1F1F1F text-secondary-light
→ gray-700 #364153 text-tertiary-light
→ gray-500 #6A7282 warning
→ sunshine-500 #FFB83E Typography
code
→ mono Geist Mono display
→ heading Inter prose
→ body Inter Palette mode mappings (from mistral)
Light mode (15 roles)
accent
→ mistral-orange accent-hover
→ sunshine-750 background
→ beige-light border
→ beige-deeper error
→ mistral-red primary
→ mistral-orange primary-hover
→ sunshine-750 success
→ sunshine-500 surface
→ beige-deep surface-elevated
→ beige-light text-primary
→ matt-black text-secondary
→ gray-700 text-tertiary
→ gray-500 warning
→ sunshine-700 warning-hover
→ sunshine-800 Dark mode (15 roles)
accent
→ mistral-orange accent-hover
→ sunshine-700 background
→ matt-black border
→ matt-black-tint error
→ mistral-red primary
→ mistral-orange primary-hover
→ sunshine-700 success
→ sunshine-400 surface
→ matt-black-tint surface-elevated
→ matt-black-tint text-primary
→ beige-light text-secondary
→ beige-deep text-tertiary
→ gray-300 warning
→ sunshine-500 warning-hover
→ sunshine-600 Rules (9 typed constraints)
error · 6 rules
contrastRatio text-primary against background minRatio 7 standard WCAG-AAA Beige Light (#FFF7E0) on Matt Black (#1F1F1F) gives roughly 16:1 — clears AAA decisively in both modes. The brand's dense, research-paper reading posture justifies an AAA target rather than the AA floor.
colorChoice roles.colors.primary allowed mistral-orange, mistral-orange-bright, sunshine-700, sunshine-750 forbidden mistral-red, sunshine-50, sunshine-100, footer-yellow, footer-marigold Mistral Orange (#FA500F) is the brand's documented primary — it is the action color on buttons and the dominant accent on mistral.ai. Sunshine-700 / 750 are valid hover/pressed variants. Mistral-red is reserved for the deepest endpoint of the Sunshine arc and footer-band stops, not as the interactive primary. The pale Sunshine 50 / 100 tints lack enough contrast on either canvas to serve as primary.
colorChoice roles.colors.identity allowed matt-black, matt-deep forbidden mistral-orange, mistral-red, sunshine-500, beige-light Mistral is dark-first by construction. The identity surface is the Matt-black canvas (#1F1F1F) or the deeper #000000 variant — the Sunshine ramp colors flow ACROSS it as gradient and accent, but the brand's identity ground is always the dark Matt.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, on-busy-photo, low-contrast-fill Mistral's wordmark and the rainbow-stripe footer band are precise typographic and chromatic artifacts. Recoloring, skewing, or applying drop-shadow to the mark conflicts with the brand's exact-engineering posture.
contextRestriction roles.colors.error forbiddenContexts large-fill, background, hero allowedContexts error-state, destructive-action, data-viz-negative Mistral Red (#E10500) is the deepest endpoint of the Sunshine arc — it reads as alarm and as the destructive- action color. Large background fills in Mistral Red conflict with the documented brand posture where the dark Matt canvas is the ground.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The brand's dark-first composition with the bright Sunshine accent clears AA effortlessly; consumers must preserve the property when composing Sunshine tints against the Matt canvas.
warning · 2 rules
enumMembership typography.heading.fontWeight allowed 400, 500, 600, 700 Mistral's marketing site uses Regular (400) for body, Medium (500) and SemiBold (600) for emphasis, and Bold (700) for hero headings — the typical variable-font cut. Display weights outside this band are not in the licensed Pixelbasel delivery on mistral.ai.
fontPairing typography.display requires code minSizeRatio 1.5 The Pixelbasel display face pairs with FragmentMono for code and inline-technical contexts on mistral.ai. A 1.5× minimum display-to-mono size ratio preserves the typographic hierarchy when both faces appear adjacent in research tables, model spec sheets, and CLI illustrations.
recommendation · 1 rule
compositionConstraint roles.colors.primary pairsWith matt-black, matt-deep, beige-light, beige-deep doesNotPairWith mistral-red, footer-yellow Mistral Orange reads cleanest on the Matt-black canvas or the warm Beige canvas. Placing it adjacent to Mistral Red or Footer Yellow creates a Sunshine-ramp chromatic conflict — they belong together AS the ramp, not as competing foreground/background pairs.
Provenance
- Source
- https://mistral.ai/
- License
Proprietary — All Rights Reserved- Attribution
- Mistral AI — visual identity captured from the deployed stylesheet on mistral.ai (--color-mistral-sunshine-*, --mistral-beige-*, --mistral-black-matt-*, --mistral-orange, --mistral-red, --mistral-footer-band-* token families). Mistral, Mistral AI, and associated marks are property of Mistral AI.
- Imported
2026-05-18- Notes
- Derived from live site CSS at https://mistral.ai/ on 2026-05-18; no public brand guide located. The proprietary display face Pixelbasel and proprietary mono FragmentMono are declared on mistral.ai via @font-face but are not publicly distributed. This atom references inter@1 as the open-source rendering substitute for the sans/display role and geist-mono@1 as the open-source rendering substitute for the mono role.