Design System — Mistral AI Design System

Visual Theme & Atmosphere

Mistral AI carries itself with a singular, almost cinematographic visual signature — the homepage opens with "Frontier AI. In your hands." rendered in elegant near-serif display type over a photographic mountain landscape bathed in mustard-orange sunset light. Below the hero, every page closes with the same recognizable element: a horizontal "sunset stripe" gradient band running red→orange→yellow→cream that wraps the foot of the page just above the footer. This stripe is THE brand recognizer — it appears on the homepage, products/studio, solutions/coding, news articles, contact form, and services tier page without exception.

The system pairs PP Editorial Old (a near-serif elegant display face) for hero displays with Inter for everything else (body, headings, UI). Cream-yellow surfaces ({colors.cream}, {colors.surface-cream-soft}) anchor form panels and feature cards; saturated orange ({colors.primary}) carries primary CTAs; the deep mountain photography on the homepage and the dark code mockups inside Le Studio create photographic depth. Cards are rectangular with {rounded.lg} (12px) corners — distinctly less playful than Miro's or Mintlify's pill-buttons-everywhere approach. Buttons are also {rounded.md} (8px), not pills — Mistral's geometry is more sober and editorial than its peers.

Key Characteristics:

Atmospheric mountain-sunset hero photography (orange-red-yellow gradient sky)
...

Live Visual Theme Representation:

Visual Theme Example

Color Palette & Roles

> Source pages: mistral.ai/ (homepage), /products/studio (Le Studio product), /solutions/coding (coding solution), /news/vibe-remote-agents-mistral-medium-3-5 (news), /contact (contact form), /services (services tiers). Token coverage was identical across all six pages.

Brand & Accent

Mistral Orange ({colors.primary}): Primary CTA color, brand orange
Orange Deep ({colors.primary-deep}): Pressed-state and emphasis variant
...

Cream / Neutral Warm

Cream ({colors.cream}): Warm yellow-cream surface for form panels, feature cards, footer
Cream Soft ({colors.cream-soft}): Lighter cream variant
...

Surface

Canvas White ({colors.canvas}): Page background and card surface
Surface ({colors.surface}): Subtle quieter background
...

Text

Ink ({colors.ink}): Primary headlines and body text
Ink Tint ({colors.ink-tint}): Slightly softer black for hero overlay text
...

Semantic

Link ({colors.link}): Inline link color (matches primary orange)

primary

#fa520f

primary-deep

#cc3a05

on-primary

#ffffff

sunshine-300

#ffd06a

sunshine-500

#ffb83e

sunshine-700

#ffa110

sunshine-800

#ff8105

sunshine-900

#ff8a00

yellow-saturated

#ffd900

cream

#fff8e0

cream-light

#fffaeb

cream-deeper

#fff0c2

beige-deep

#e6d5a8

block-5

#ffe295

block-6

#ffd900

block-7

#ff8105

ink

#1f1f1f

ink-tint

#3d3d3d

charcoal

#2c2c2c

slate

#4a4a4a

steel

#6a6a6a

stone

#8a8a8a

muted

#a8a8a8

hairline

#e5e5e5

hairline-soft

#ededed

hairline-strong

#c7c7c7

canvas

#ffffff

surface

#fafafa

surface-cream

#fff8e0

surface-cream-soft

#fffaeb

surface-code

#1c1c1e

on-dark

#ffffff

on-dark-muted

#a8a8a8

on-cream

#1f1f1f

footer-cream

#fff8e0

link

#fa520f

Typography Rules

Font Family

PP Editorial Old (display): Mistral's signature near-serif elegant display typeface used for hero displays, large numbers, and editorial section openers. Carries a slightly classical, intelligent character that contrasts the contemporary product positioning. Fallbacks: 'Times New Roman', Georgia, serif.

Inter (UI prose): Variable typeface for body, navigation, buttons, labels, captions. Fallbacks: ui-sans-serif, system-ui, -apple-system, sans-serif.

JetBrains Mono (code): Monospace for code blocks and IDE mockups. Fallbacks: 'SF Mono', Menlo, Consolas, monospace.

Hierarchy

Token	Size	Weight	Line Height	Letter Spacing	Family	Use
...	...	...	...	...	...	...