Design Language Extracted

Frontier AI. In your hands.

https://mistral.ai/ · 2026-05-14 · designlang v12.10.0
Intent: landing · 0.29 Library: shadcn/ui · 0.65 Material: flat Voice: friendly · you-only Headings: Sentence case · tight Stack: self-hosted + Google Fonts (15 files)
12
Colors
3
Font families
9
Spacing
1
Shadow
1
Radius
6
Components
100%
WCAG score
94/100
Design score · A

Color palette

12 unique colors. A warm-beige page anchored on #fffaeb with black text and the iconic #fa520f mistral-orange accent. Lines and dividers are sunshine-tinted (#ffe295) — not gray — which keeps the system warm at every layer.

Brand

#fffaeb
background · mistral-beige
page surface
#1f1f1f
ink · mistral-black-matt
primary text · hsl 0 0% 12%
#fa520f
accent · mistral-orange
CTAs · hsl 17 96% 52%

Sunshine ramp · beige → yellow

#fffaeb
beige · bg
#fff0c2
sunshine-50
#ffe295
sunshine-100 · line
#ffdd8a
sunshine-200
#ffd06a
sunshine-300
#ffd900
secondary · sun

Orange & red ramp · the warm end

#ffae00
amber · accent-deep
#ff8a00
sunshine-900
#ff8205
bright · orange
#fa520f
mistral-orange
#e00400
mistral-red · destructive
#000000
deep-black · rare

The footer band

Mistral's signature six-stop stripe. It runs full-width above the footer — six horizontal rows with hard edges, stacked from band-1 (cream) at the top to band-6 (red) at the bottom.

Six discrete tokens · stacked rows, not a smooth gradient

band-1 · #ffe295 · hsl(45, 100%, 88%)
band-2 · #ffd900 · hsl(51, 100%, 50%)
band-3 · #ffae00 · hsl(41, 100%, 50%)
band-4 · #ff8205 · hsl(30, 100%, 51%)
band-5 · #fa520f · hsl(17, 96%, 52%)
band-6 · #e00400 · hsl(1, 100%, 44%)

The six stops map to --mistral-footer-band-1 through --mistral-footer-band-6. They are not a smooth gradient — each row is an equal-height slice with a hard edge. That's what makes the band feel printed (a flag, a thermal strip) rather than rendered (a smooth CSS gradient).

Typography

Arial carries the entire system (977 uses) — display, body, UI. No serif. The monos Pixelbasel and FragmentMono ("font-vibe") are bespoke, falling back to ui-monospace here. All headings are weight 400 — size and color carry the hierarchy, not boldness.

Font families

Arial 977× Times 9× Rubik 1× Pixelbasel mono · custom FragmentMono mono · custom

Type scale · 11 sizes detected

103pxArial · display-md Frontier AI. 400 · lh 97.85 · H0-md
82pxArial · H1 In your hands. 400 · lh 82
56pxArial · H2 Deployed in production. 400 · lh 53.2
48pxArial · H3-md What Mistral AI can do for you. 400 · lh 45.6
32pxArial · subtitle-md Powered by a deeply configurable AI platform. 400 · lh 36.8
24pxArial · subtitle Your AI future belongs in your hands. 400 · lh 27.6
16pxArial · body Frontier-grade models, deployed where you need them — open, configurable, and built for production. 400 · base
14pxArial · ui Discover Le Chat, Vibe, Studio, Forge, and Applied AI. 400 · ui
13pxPixelbasel · mono npm install mistral · ax mistral-large-latest 400 · code
11pxPixelbasel · eyebrow FRONTIER AI · IN YOUR HANDS 700 · uppercase

Spacing scale

9 detected spacing values around a 2px base unit. After the 32px jump, increments grow large — 64, 72, 80, 98 — suggesting section-scale rhythm rather than tight component spacing. The 392px outlier is likely a hero-height token.
s0 · 2px
base
s1 · 32px
16×
s2 · 48px
24×
s3 · 64px
32×
s4 · 72px
36×
s5 · 80px
40×
s6 · 98px
49×
s7 · 173px
86×
s8 · 392px
196×

Elevation

One shadow token — and it's distinctive. Mistral tints its shadow warm (rgba(127, 99, 21, ...)), so cards never throw a cool gray drop on the beige page. Five stacked layers smear the falloff over 400px.
sm · 39px blur
sm · 2 layers
sm · full 5-layer stack

Border radii

A brutalist system: 0px is the default — sharp corners on everything from cards to modals to buttons. The only radius token in the cascade is 4px for small controls like input fields and tag chips.
0px
default · cards, modals, buttons
4px
sm · inputs, chips

Components

6 detected patterns rendered live with extracted tokens. Mistral's set is intentionally narrow: buttons (primary + outline), inputs, links, navigation, modal, footer. No tabs, no segmented controls, no badges. The reduced surface lets the footer band do all the chromatic work.

Buttons

4 variants · orange primary · solid-black secondary · outline · ghost

Cards · product showcase

0px radius · warm shadow on hover · orange eyebrow tag
Le Chat

Conversational AI

The fastest open AI assistant — for individuals and teams.

Studio

Build with our models

Customize, fine-tune, and deploy frontier models from a single workspace.

Forge

Autonomous agents

Production-grade agentic systems with full control over tooling, prompts, and policy.

Inputs

4px radius · orange focus ring (3px halo) · ink-2 default border

Modal

0 radius · warm 5-layer shadow · footer-aligned actions

Start building with Mistral AI

Get an API key and ship your first call in under 60 seconds. Free tier includes mistral-small-latest and 1M tokens / month.

Navigation

2 nav regions on mistral.ai · 100px desktop height · 88px mobile
Mistral AI
Products Solutions Research Blog Customers Company

Voice & content

Friendly. You-only pronoun posture. Sentence-case, tight headings — often a two-line break: subject + claim. The signature CTA verb is discover (6 uses), pointing at each product family.

Sample headings

Frontier AI. In your hands.
Your AI future belongs in your hands.
Deployed in production.
Powered by a deeply configurable AI platform.
AI deployments designed for privacy.

CTA verbs

discover 6× go 2× view 1× start 1× talk 1×

Button patterns (signature)

Discover Le Chat Discover Vibe Discover Studio Discover Forge Discover Applied AI

Voice metadata

Tone
Friendly
Pronoun
you-only
Heading case
Sentence case
Heading length
Tight
Emphasis style
none inline · the footer band carries chromatic weight
Buttons detected
15
Headings detected
16

Page anatomy

8 sections detected in reading order. Mistral leads with a "testimonial" frame around the hero (a banner-style claim), then a logo-wall of customers, two product hero blocks, and a footer with the signature band.
testimonial"Frontier AI. In your hands." · 18 CTAs0.80
logo-wallCustomer logos · 16 cards0.85
navProducts · Solutions · Research · Blog · Customers · Company0.90
hero"Deployed in production." · 2 CTAs0.40
content"Powered by a deeply configurable AI platform."0.30
hero"AI deployments designed for privacy." · 1 CTA0.40
footerWhy Mistral · Explore · Build · Legal0.95
navWhy Mistral · 22 footer links0.90

Accessibility

100% WCAG contrast score. Mistral's restraint here is part of why — they paint black text on warm beige (12.5:1) and reserve the orange for control surfaces, never as body text on the page background.
100%
WCAG contrast score
All detected pairs pass AA · 0 failing
Aa Sample
#1f1f1f on #fffaeb
12.5:1 AAA
Aa Sample
#3c3c3c on #fffaeb · muted text
8.6:1 AAA
Aa Sample
#ffffff on #fa520f · primary CTA
4.5:1 AA
Aa Sample
#fffaeb on #1f1f1f · secondary CTA
15.4:1 AAA
designlang v12.10.0 · extracted 2026-05-14