Mistral AI — Design System

Color Palette

Background Colors

Beige (White)

#FFFAEB · ×953

Pure White

#FFFFFF · ×376

Light Yellow

#FFF0C2 · ×24

Dark Gray

#1F1F1F · ×487

Black

#000000 · ×426

Orange (Brand)

#FA520F · ×206

Footer Gradient Band

Yellow

#FFD900

Orange 5

#FFAE00

Orange 6

#FF8205

Orange

#FA520F

Red

#E00400

Full gradient

Band gradient

Text, Border & Fill Colors

Dark Gray 2 (Text)

#3C3C3C

Light Yellow 2 (Border)

#ECDAA2

Orange 2 (Fill)

#9F521A

Orange 3 (Fill)

#D3812F

Orange 4 (Fill)

#B35D20

Dark Yellow (Shadow)

rgba(127,99,21,0.12)

Warm-tinted system — no neutral grays

Mistral's palette is built on a warm beige base (#FFFAEB) instead of pure white — the most-used color at ×953. The entire palette flows from amber-yellow through orange to red. Even the shadows use a warm amber tint (rgba(127,99,21,...)) rather than black. There are no cool colors or grays — identity is built entirely on the warm spectrum from cream to flame.

Typography

SOLE FONT · ARIAL

Arial

Frontier AI — LLMs, assistants, agents, services. The most capable open-weight models.

Regular · 400 No bold · single weight only

TYPE SYSTEM NOTE

No second family

Mistral defines only one font family (Arial) and one weight (regular 400). Scale and contrast come entirely from size — from 14px body to 82px display — and from the −2.05px letter-spacing token applied at large sizes.

14px – 82px range −2.05px letter-spacing

Mistral

Display 82px · Regular 400 · line-height: 82px · letter-spacing: −2.05px

Frontier AI

Display 56px · Regular · line-height: 57.6px · letter-spacing: −2.05px

LLMs, assistants, agents

Heading XL 48px · Regular · line-height: 53.2px

Open models. Open weights.

Heading 32px · Regular · line-height: 36px

Build with the best AI

Heading 30px · Regular · line-height: 36px

State-of-the-art language models for developers and enterprises.

Subheading 24px · Regular · line-height: 36.8px

Deploy on-prem, in your cloud, or via our serverless API. Built for speed and efficiency.

Body 16px · Regular · line-height: 24px

Last updated 3 minutes ago · v24.0 · context window 128k tokens

Caption 14px · Regular · line-height: 21px

Line Heights — 10 tokens

Tight

20px

Snug

21px

Normal

24px

Relaxed

32px

Loose

36px

LH-6

36.8px

LH-7

45.6px

LH-8

48px

LH-9

53.2px

LH-10

82px

Letter Spacing — 1 token (−2.05px)

Display type

--letter-spacing-tight

−2.05px · the most negative display tracking in this series · applied to all large headings

Body copy runs at zero tracking — no letter-spacing token applied to smaller text.

No body tracking token

Body copy uses browser default (0px) · only display type uses the −2.05px token

Spacing

Spacing Scale

22 tokens — 2px → 318px

54.5

100

150

172.9

318

Borders

Border Radius

sm (Pill)

≈ 9999px · ×3

Mistral defines only one border-radius token — --radius-sm: 1.67772e+07px — the same "full pill" approach as Lovable and YC. All rounded elements (badges, buttons, pills) use this maximum pill value. There are no intermediate radius steps.

Border Width

--border-width-hairline

1px · ×29

Single border width used throughout. Used sparingly (×29 total) — Mistral separates content primarily through background color differences (beige vs white vs light-yellow) rather than borders.

Shadow / Elevation

Shadow Tokens

1 token — warm amber-tinted, multi-stop directional

sm — 5-stop amber directional shadow

×14

All 5 stops use rgba(127,99,21,...) — warm amber-brown, not black. Unique in this set. Offsets are negative-x (left-reaching), creating a dramatic directional sweep at scale — probably used for page-wide hero shadows and editorial card highlights. No other shadow token exists.

Z-Index

5 layers — including INT_MAX (2147483647) for absolute-top overlays, mirroring Miro's approach.

Layer	Value	Usage
z-1 (Background)	-10	Canvas backgrounds, decorative elements buried below content
z-2 (Navigation)	10	Sticky headers, floating navigation bars
z-3 (Overlay)	20	Dropdowns, popovers, tooltips above content
z-4 (Modal)	999	Modal dialogs, drawers, full-screen overlays
z-5 (Absolute Top)	2,147,483,647	INT_MAX — critical global alerts, system-level overlays, cursor trackers

Breakpoints

📱

640px

Mobile → tablet threshold

📲

768px

Tablet portrait

💻

1024px

Tablet landscape / small desktop

🖥️

1280px

Desktop / widescreen

Opacity

Opacity Tokens

4 tokens — 0.4 → 0.8

--opacity-40

40% · ×1

--opacity-50

50% · ×1

--opacity-70

70% · ×1

--opacity-80

80% · ×9

Accessibility

WCAG 2.1: AA ≥ 4.5:1 · AA Large ≥ 3:1 · AAA ≥ 7:1

Text Color	Background Color	Ratio	WCAG Rating
#3C3C3C (Dark Gray 2)	#FFFAEB (Beige / White)	10.57:1	AAA
#3C3C3C (Dark Gray 2)	#1F1F1F (Dark Gray)	1.49:1	Fail
#3C3C3C (Dark Gray 2)	#000000 (Black)	1.9:1	Fail
#3C3C3C (Dark Gray 2)	#FFFFFF (Pure White)	11.03:1	AAA
#3C3C3C (Dark Gray 2)	#FA520F (Orange)	3.3:1	AA Large
#1F1F1F (Dark Gray)	#FFFAEB (Beige)	17.2:1	AAA
#1F1F1F (Dark Gray)	#FFFFFF (White)	18.1:1	AAA
#FFFAEB (Beige)	#FA520F (Orange)	3.4:1	AA Large
#FFFFFF (White)	#FA520F (Orange)	3.6:1	AA Large
#FFFFFF (White)	#000000 (Black)	21:1	AAA

CSS Variables Reference

Color Palette

Beige "White" (Background)--color-white#FFFAEB · ×953

Pure White--color-white-2#FFFFFF · ×376

Light Yellow (Surface)--color-light-yellow#FFF0C2 · ×24

Dark Gray (Dark bg)--color-dark-gray#1F1F1F · ×487

Black--color-black#000000 · ×426

Orange (Brand Primary)--color-orange#FA520F · ×206

Yellow (Footer Band 2)--color-yellow#FFD900

Orange 5 (Footer Band 3)--color-orange-5#FFAE00

Orange 6 (Footer Band 4)--color-orange-6#FF8205

Red (Destructive / Band 6)--color-red#E00400

Dark Gray 2 (Text)--color-dark-gray-2#3C3C3C

Light Yellow 2 (Border)--color-light-yellow-2#ECDAA2

Orange 2 (Dark fill)--color-orange-2#9F521A

Orange 3 (Mid fill)--color-orange-3#D3812F

Orange 4 (Medium fill)--color-orange-4#B35D20

Dark Yellow (Shadow 12%)--color-dark-yellowrgba(127,99,21,0.12)

Dark Orange (Shadow 10%)--color-dark-orangergba(127,99,21,0.1)

Dark Yellow 2 (Shadow 6%)--color-dark-yellow-2rgba(127,99,21,0.06)

Typography

Arial (sole font family)--font-family-baseArial

Regular (sole weight)--font-weight-regular400

Caption / Label (2xs)--font-size-2xs14px

Body (xs)--font-size-xs16px

Subheading (sm)--font-size-sm24px

Heading (base)--font-size-base30px

Heading (lg)--font-size-lg32px

Display (xl)--font-size-xl48px

Display (2xl)--font-size-2xl56px

Hero (3xl)--font-size-3xl82px

Tight (Display)--letter-spacing-tight−2.05px (most negative in set)

Tight → LH-1020px → 82px10 line-height tokens

Spacing (selected)

Space 1--space-12px · ×4

Space 3--space-38px · ×37

Space 5--space-512px · ×102

Space 6--space-616px · ×87

Space 12--space-1232px · ×103

Space 20--space-2040px · ×47

Space 32--space-3254.5px · ×20

Space 48--space-4864px · ×4

Space 64--space-6472px · ×45

Space 80--space-8080px · ×23

Space 128--space-128100px · ×11

Space 160--space-160150px · ×1

Space 256--space-256318px · ×2

Motion, Opacity, Z-Index & Borders

Instant (150ms)--duration-instant0.15s · ×155

Fast (200ms)--duration-fast0.2s · ×32

Normal (300ms)--duration-normal0.3s · ×103

Slow (500ms)--duration-slow0.5s · ×7

No easing function token defined—none detected

Fade (40%)--opacity-400.4 · ×1

Dim (50%)--opacity-500.5 · ×1

Muted (70%)--opacity-700.7 · ×1

Strong (80%)--opacity-800.8 · ×9

Hairline--border-width-hairline1px · ×29

Pill / Full (only radius)--radius-sm~9999px · ×3

Background Layer--z-1−10

Navigation--z-210

Overlay--z-320

Modal--z-4999

Absolute Top (INT_MAX)--z-52,147,483,647

Mistral AI Design System · Generated 15/04/2026 · 18 color tokens · 1 font family · 1 font weight · 8 font sizes · 10 line heights · 1 letter-spacing · 22 spacing steps · 1 radius · 1 border width · 1 shadow · 4 durations · 0 easings · 5 z-index layers · 4 breakpoints · 4 opacity tokens