JOIN MISTRAL AI MAKERS — Build the future of AI Apply now →

# Design System Inspiration of Mistral AI

Atmospheric mountain-sunset gradients with editorial near-serif hero displays.

## Color Palette

Saturated orange primary anchored by warm cream-yellow surfaces and a multi-stop "sunset" gradient that closes every page bottom.

### Brand & Sunset Spectrum

Mistral Orange
#fa520f
Primary CTA
Orange Deep
#cc3a05
Pressed-state orange
Sunshine 900
#ff8a00
Deep sunset
Sunshine 800
#ff8105
Block 7
Sunshine 700
#ffa110
Mid sunset
Sunshine 500
#ffb83e
Mid spectrum
Sunshine 300
#ffd06a
Light atmospheric
Yellow Saturated
#ffd900
Pure brand yellow

### Cream / Warm Neutral

Cream
#fff8e0
Form panels, footer
Cream Soft
#fffaeb
Quiet cream
Cream Deeper
#fff0c2
Tag chip background
Beige Deep
#e6d5a8
Cream surface borders

### Surface

Canvas White
#ffffff
Page + card background
Surface
#fafafa
Subtle background
Surface Code
#1c1c1e
IDE mockup, code
Hairline
#e5e5e5
Borders
Hairline Strong
#c7c7c7
Input borders

### Text

Ink
#1f1f1f
Headlines, body
Charcoal
#2c2c2c
Body emphasis
Slate
#4a4a4a
Secondary text
Steel
#6a6a6a
Tertiary, captions
Stone
#8a8a8a
Muted labels
Muted
#a8a8a8
Disabled

## Sunset Stripe Band

THE brand's most recognizable signature element — a horizontal multi-stop gradient that closes every page bottom (red → orange → yellow → cream).

linear-gradient(90deg, #fa520f 0%, #ffa110 25%, #ffb83e 50%, #ffd900 75%, #fff8e0 100%)

## Typography Scale

Editorial / sans pairing — DM Serif Display (near-serif elegant) for hero displays, Inter (geometric sans) for everything else, JetBrains Mono for code.

hero-displayDM Serif / 84px / 1.05 / -1.5px
Frontier AI
display-lgDM Serif / 64px / 1.10 / -1px
In your hands.
heading-1DM Serif / 52px / 1.15 / -0.5px
Get in touch with the team.
stat-displayDM Serif / 56px / 1.10 / -1px
75%
heading-2Inter / 36px / 500 / 1.20
Build with freedom
heading-3Inter / 28px / 500 / 1.25
Card title
subtitleInter / 18px / 400 / 1.50
Hero subtitle and lead body type
body-mdInter / 16px / 400 / 1.55
Primary body text used across documentation prose, marketing copy, and feature descriptions. Generous body leading creates editorial readability.
body-smInter / 14px / 400 / 1.50
Secondary body, table cells, navigation
caption-boldInter / 13px / 600 / 1.40
BADGE LABEL / TAG CHIP
code-mdJetBrains Mono / 14px / 400 / 1.50
const mistral = new MistralClient(api_key);
button-mdInter / 14px / 500 / 1.30
BUTTON LABEL

## Button Variants

Editorial-sober geometry — `rounded-md` (8px) buttons, NOT pills. Dark and orange dominate as primary CTAs.

button-primarySaturated orange CTA
button-darkDark CTA on cream
button-creamWarm cream secondary
button-secondaryOutlined secondary
button-on-creamWhite on cream surface
button-linkInline orange link
button-primary-disabledDisabled state

## Badges & Status

Pill-shaped status indicators in orange, cream, and dark. Reserved for badges only — buttons don't use pill shapes.

New Beta Available
JOIN MISTRAL AI MAKERS — Build the future of AI Apply now →

promo-banner — sticky black strip above the top nav

## Cards & Containers

White feature cards, warm cream-tinted panels, dark photographic cards. 12px corners across the family.

#### Standard Card

White canvas with hairline border and 12px corners. Used for documentation cards.

#### Feature Panel

Larger feature card with 32px padding for grouped content.

#### Cream Feature Card

Warm cream-yellow tinted card with beige border. Used for service tiers and warm callouts.

#### Cream Soft Card

Lighter cream variant for quieter feature regions.

#### Product Feature Card

White card with subtle shadow elevation. Used for product showcase moments.

#### Deployed in production

Dark canvas card for code mockups and IDE imagery.

## Pricing Tiers

3-tier pricing with the featured tier (Lift Off) highlighted on cream background with orange border.

Free
$0/mo

Get started with le Chat and explore.

- Basic le Chat access
- Community support
- Limited API calls

Pro
$24/mo

For developers building production applications.

- Unlimited API calls
- All Mistral models
- Priority support
- Advanced features

Enterprise
Contact us

Custom enterprise plans tailored to your team.

- Dedicated support
- Custom contracts
- SOC2 compliance
- SSO + admin

## Contact Form

Cream-tinted form panel — Mistral's signature contact UI with editorial heading and dark CTA submit button.

### Contact sales.

Let's start your journey to the frontier.

First name *
Last name *
Email *
Role *
Tell us about your project

## Tabs & Navigation

Underline-style segmented tabs with orange active indicator. Pill tabs reserved for top-level switching.

### Segmented Tabs

### Pill Tabs

## Code Components

Dark code blocks with JetBrains Mono. Used in Le Studio product page mockups and agent demos.

example.py Copy code
from mistralai import Mistral
client = Mistral(api_key="your_api_key")
response = client.chat.complete(
model="mistral-medium-3.5",
messages=[{"role": "user", "content": "Hello!"}]
)

## Industry Tiles

3-up industry-vertical grid — small icon-zone + heading + description.

⚡

##### Knowing, Models, and Infrastructure

Deployable in any environment with full control.

🔒

##### Self-contained private deployment

Run Mistral on your private infrastructure.

🎯

##### Deeply engaged mentoring and deep velocity

Partner with our team to ship faster.

## Stat Row

Stat-row callouts with PP Editorial Old display type at 56px. Cream surface anchors the row.

75%More productivity
80%Faster code completion
100%Deployable on premise

## Customer Testimonials

White testimonial cards with quote + photo + attribution. Used inside Le Studio and Solutions pages.

"Mistral models gave us the freedom to deploy AI inside our private infrastructure with full control over data residency."

Verified buyer
Engineering Lead

"The model quality combined with on-premise deployability solved our compliance concerns immediately."

Customer Success
Tech Architect

## Logo Wall

Customer logo grid — wordmark presentation in trust-row sections.

Veolia
BNP Paribas
IFP
KLEIDI
Octave
Aurora

## FAQ Accordion

Frequently-asked-questions panel. Collapsed by default; chevron toggle.

How do Mistral pricing plans work? ⌃
Mistral offers a Free tier, Pro at $24/month, and Custom enterprise plans with SOC2 compliance and dedicated support.
Can I deploy Mistral on premise? ⌄
Yes — Mistral supports full on-premise deployment with custom infrastructure tailored to your requirements.
Is Mistral SOC 2 compliant? ⌄
Yes — Mistral is SOC 2 Type II certified for enterprise plans.

## CTA Banner Cream

Page-bottom CTA banner on cream surface with editorial display headline.

#### The next chapter of AI is yours.

Start building today with le Chat or talk to our sales team.

## Spacing Scale

4px base unit, 8px primary increment. Section rhythm runs from 48px to 120px.

4xxs
8xs
12sm
16md
20lg
24xl
32xxl
40xxxl
48section-sm
64section
96section-lg
120hero

## Border Radius Scale

8px buttons, 12px cards. Pills reserved for badges only — Mistral's geometry is editorial-sober.

4pxxs
6pxsm
8pxmd
12pxlg
16pxxl
20pxxxl
pillfull

## Elevation & Depth

Predominantly flat. Strategic atmospheric depth from photography and IDE mockups.

Level 0 — Flatborder + hairline
Level 1 — Subtlergba(0,0,0,0.04) 0 1px 2px
Level 2 — Cardrgba(0,0,0,0.04) 0 4px 12px
Level 3 — Mockuprgba(0,0,0,0.08) 0 12px 24px -4px
Level 4 — Modalrgba(0,0,0,0.12) 0 16px 48px -8px

## Responsive Behavior

Hero scales from 84px → 40px on mobile. Pricing tiers stack from 3-column to 1-up. Documentation grid collapses to drawer.

Breakpoint | Width | Key Changes
--- | --- | ---
Mobile (small) | < 480px | Single column. Hero 40px. Pill nav collapses to hamburger. Pricing tiers stack 1-up.
Mobile (large) | 480 – 767px | Feature tiles 2-up. Hero 52px.
Tablet | 768 – 1023px | 2-column feature grids. Pill-tab nav returns. Hero 64px.
Desktop | 1024 – 1279px | Multi-column. Hero 76px.
Wide Desktop | ≥ 1280px | Full 84px hero presentation.

### Device Ladder

375px
480px
768px
1024px
1280+

### Touch Targets

- Buttons render at 40–44px height — at WCAG AAA floor.
- Form inputs render at 44px height.
- Pill tabs: ~32px → 44px on mobile.

### Collapsing Strategy

- Promo banner stays full-width; truncates at < 480px.
- Top nav below 1024px collapses to hamburger.
- Hero band: 2-column hero stacks at < 1024px.
- Pricing tiers: 3-column → 2-column tablet → 1-column mobile.
- Hero typography: 84px → 64px → 52px → 40px.
- Sunset stripe band stays full-width on all breakpoints.