Design System Inspiration of Mistral AI

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

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

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

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.

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

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.

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

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.

Design System Inspiration of Mistral AI

Color Palette

Brand & Sunset Spectrum

Cream / Warm Neutral

Surface

Text

Sunset Stripe Band

Typography Scale

Button Variants

Badges & Status

Cards & Containers

Standard Card

Feature Panel

Cream Feature Card

Cream Soft Card

Product Feature Card

Deployed in production

Pricing Tiers

Contact Form

Contact sales.

Tabs & Navigation

Segmented Tabs

Pill Tabs

Code Components

Industry Tiles

Knowing, Models, and Infrastructure

Self-contained private deployment

Deeply engaged mentoring and deep velocity

Stat Row

Customer Testimonials

Logo Wall

FAQ Accordion

CTA Banner Cream

The next chapter of AI is yours.

Spacing Scale

Border Radius Scale

Elevation & Depth

Responsive Behavior

Device Ladder

Touch Targets

Collapsing Strategy