What is Mistral AI's primary brand color?

Mistral's primary brand color is the saturated orange #fa520f, paired with a deeper pressed-state variant at #cc3a05. The orange carries primary CTAs, active segmented-tab underlines, inline links, and the leading stop of the sunset stripe band that closes every page. It sits inside a wider sunset palette — Sunshine 300 #ffd06a, 500 #ffb83e, 700 #ffa110, 800 #ff8105, 900 #ff8a00, plus pure brand yellow #ffd900 — that powers the gradient atmospherics on the hero photography and the closing stripe.

What typography does Mistral AI use?

Mistral pairs PP Editorial Old (a near-serif elegant display face) for hero displays with Inter for everything else. The hero token runs at 84px / 400 weight with -1.5px letter-spacing and 1.05 line-height — magazine-grade tightness. Inter carries the 36px heading-2 down through 14px body-sm, button labels, and 11px section eyebrows. JetBrains Mono handles code blocks at 14px on the #1c1c1e dark surface. The editorial/sans contrast is the brand voice; substituting Inter for hero displays kills the character.

What is the sunset stripe band?

The sunset stripe is Mistral's most recognizable signature element — a horizontal multi-stop gradient band that closes every page just above the footer. It runs from #fa520f through #ffa110, #ffb83e, #ffd900, into cream #fff8e0, with #spacing.lg (20px) of vertical padding and full-width spread. It appears on the homepage, Le Studio, Coding solutions, news articles, contact form, and services page without exception. The DESIGN.md captures it as the sunset-stripe-band component.

Does Mistral AI have a dark mode?

Mistral's public marketing site has not shipped a published dark-mode palette. Canvas is #ffffff with cream-yellow #fff8e0 form panels and footer; ink text runs #1f1f1f. Dark surfaces appear only inside code blocks and IDE mockups (#1c1c1e with #ffffff text and #a8a8a8 muted) on the Le Studio product page and agent demos. The Known Gaps section of the spec notes the absent dark-mode tokens — if you build a dark variant against this DESIGN.md, you're extending it, not replicating it.

Why doesn't Mistral use pill-shaped buttons?

Mistral's geometry is sober and editorial, not playful. Buttons render at 8px radius (rounded.md), cards and panels at 12px (rounded.lg), with larger feature emphases at 16px or 20px. The fully rounded 9999px radius is reserved for status badges and the occasional pill tab — never for primary CTAs. The contrast with Miro, Mintlify, or Stripe's softer button geometry is intentional; the editorial radius scale matches the PP Editorial Old display voice.

How do I use this DESIGN.md in a React project?

Feed the file to Claude, Cursor, or GitHub Copilot — the agent will reproduce Mistral's tokens (orange #fa520f primary, cream #fff8e0 panels, 8px button radius, 12px card radius, PP Editorial Old hero displays) inside a Tailwind + shadcn/ui project rather than a generic SaaS theme. Or reference the tokens directly: every color hex, font name, radius, and spacing value is a quoted value you can paste into Tailwind config, CSS variables, or your own component library. Always include the sunset-stripe-band component at the foot of every page mockup — it's the brand's continuity element.

Mistral AI Design System

Mistral AI's design system as a DESIGN.md file. Orange #fa520f, PP Editorial Old, 36 colors, 42 components. For React, Next.js, and AI tools.

Get Pro Download DESIGN.md

Add shadcn.io to your AI agent. · Pro It installs blocks, icons and templates in your design system from a prompt, with Pro.

Set up MCP

Primary: #fa520f
Typeface: Inter
Shape: Mixed
Base radius: 8px
Colors: 36
Type tokens: 19
Components: 42
Spacing values: 12

About

About Mistral AI DESIGN.md

Curated by Dov Azencot · Updated May 12, 2026 · Source mistral.ai (opens in a new tab)

Mistral AI's brand reads like a magazine spread that happens to ship a frontier model. The homepage opens with "Frontier AI. In your hands." set in PP Editorial Old at 84px / 400 weight with -1.5px letter-spacing, layered over a photographic mountain landscape bathed in mustard-orange sunset light. Below the fold, every page closes with the same horizontal band — a sunset-stripe gradient running from "#fa520f" through "#ffa110" and "#ffd900" into "#fff8e0" cream, sitting just above the cream-tinted footer. The stripe is the brand's continuity element; it appears on the homepage, Le Studio, the Coding solutions page, news articles, the contact form, and the services tier page without exception.

This DESIGN.md file packages the entire system into 36 colors tokens, 19 typography styles, 12 spacing values, 7 corner radii, and 42 components — built against Google Labs' open DESIGN.md specification. Inside: the saturated "#fa520f" primary CTA, the "#fff8e0" cream surface that anchors form panels and feature cards, the deep-orange pressed state at "#cc3a05", the JetBrains Mono code blocks rendered on a "#1c1c1e" canvas, plus the pricing-card-featured variant with its 2px "#fa520f" border on cream. Every token quoted, every component traced to a real Mistral page.

Feed the file to Claude, Cursor, GitHub Copilot, or any AI tool that reads structured tokens. The agent will reproduce Mistral's editorial restraint — PP Editorial Old hero displays, 8px button radii, cream form panels, the sunset stripe at every page bottom — rather than a generic SaaS theme. The discipline worth studying here is the editorial/sans pairing: PP Editorial Old anchors a frontier-AI brand without resorting to the heavy geometric sans every other LLM company defaults to.

What makes it distinct

Sunset stripe banda multi-stop gradient from #fa520f through #ffa110 to #fff8e0 closes every single page above the footer
Editorial display voicePP Editorial Old at 84px / 400 / -1.5px tracking carries the hero, Inter handles every other surface
Sober radius scalebuttons at 8px and cards at 12px; pill shapes (9999px) are reserved for badges, never primary CTAs
Cream-yellow form panels#fff8e0 surfaces with #e6d5a8 1px borders anchor the contact form, services tiers, and feature tiles
Single-voltage orange#fa520f carries primary CTAs, active tab underlines, and footer links, with no second accent allowed

mistral.ai

Live at mistral.ai

A snapshot of the brand in production. Scroll the frame to see the whole page.

Visit mistral.ai

Colors

36 colors

Mistral AI's system runs on #fa520f as its primary voltage, used in 6 of 42 components. Type is set in Inter across 19 tokens from 11px to 84px, weights 400–600. Shape language is mixed across 42 components, blending pills, soft rounds, and squarer corners.

Brand & Accent

Sparing, CTA-only voltage · 2

Surface

Page and card backgrounds · 5

Text

Headlines, body, captions · 8

Borders & Hairlines

Dividers, outlines, rules · 3

Other

Specialty colors · 18

Typography

19 type tokens

Set in Inter across 19 tokens, from 11px to 84px, weights 400–600. Shown in its own stack: where the font isn't installed, the fallback the file names stands in.

hero-display84px · weight 400 · lh 1.05 · tracking -1.5pxThe quick brown fox jumps over the lazy dog
display-lg64px · weight 400 · lh 1.1 · tracking -1pxThe quick brown fox jumps over the lazy dog
heading-152px · weight 400 · lh 1.15 · tracking -0.5pxThe quick brown fox jumps over the lazy dog
heading-236px · weight 500 · lh 1.2 · tracking -0.5pxThe quick brown fox jumps over the lazy dog
heading-328px · weight 500 · lh 1.25The quick brown fox jumps over the lazy dog
heading-422px · weight 500 · lh 1.3The quick brown fox jumps over the lazy dog
heading-518px · weight 500 · lh 1.4The quick brown fox jumps over the lazy dog
subtitle18px · weight 400 · lh 1.5The quick brown fox jumps over the lazy dog
body-md16px · weight 400 · lh 1.55The quick brown fox jumps over the lazy dog
body-md-medium16px · weight 500 · lh 1.55The quick brown fox jumps over the lazy dog
body-sm14px · weight 400 · lh 1.5The quick brown fox jumps over the lazy dog
body-sm-medium14px · weight 500 · lh 1.5The quick brown fox jumps over the lazy dog
caption13px · weight 400 · lh 1.4The quick brown fox jumps over the lazy dog
caption-bold13px · weight 600 · lh 1.4The quick brown fox jumps over the lazy dog
micro12px · weight 500 · lh 1.4The quick brown fox jumps over the lazy dog
micro-uppercase11px · weight 600 · lh 1.4 · tracking 1pxThe quick brown fox jumps over the lazy dog
button-md14px · weight 500 · lh 1.3The quick brown fox jumps over the lazy dog
stat-display56px · weight 400 · lh 1.1 · tracking -1pxThe quick brown fox jumps over the lazy dog
code-md14px · weight 400 · lh 1.5The quick brown fox jumps over the lazy dog

Layout

Radii and spacing

7 corner radii and 12 spacing values. Shape language: mixed.

Radii

xs4px
sm6px
md8px
lg12px
xl16px
xxl20px
full9999px

Spacing

xxs4px
xs8px
sm12px
md16px
lg20px
xl24px
xxl32px
xxxl40px
section-sm48px
section64px
section-lg96px
hero120px

Components

42 components

Each rendered from its tokens (color, type, radius, padding) on Mistral AI's own canvas.

Button Primary
button-primaryButton Primary
Button Primary Pressed
button-primary-pressedButton Primary Pressed
Button Primary Disabled
button-primary-disabledButton Primary Disabled
Button Cream
button-creamButton Cream
Button Dark
button-darkButton Dark
Button Secondary
button-secondaryButton Secondary
Button On Cream
button-on-creamButton On Cream
Button Link
button-linkButton Link
Card Base
card-baseCard Base
Card Feature
card-featureCard Feature
Card Cream
card-creamCard Cream
Card Cream Soft
card-cream-softCard Cream Soft
Card Feature Product
card-feature-productCard Feature Product
Card Photographic
card-photographicCard Photographic
Pricing Card
pricing-cardPricing Card
Pricing Card Featured
pricing-card-featuredPricing Card Featured
Type here…
text-inputText Input
Type here…
text-input-focusedText Input Focused
Text Area
text-areaText Area
Contact Form Panel
contact-form-panelContact Form Panel
Pill Tab
pill-tabPill Tab
Pill Tab Active
pill-tab-activePill Tab Active
Segmented Tab
segmented-tabSegmented Tab
Segmented Tab Active
segmented-tab-activeSegmented Tab Active
Badge Orange
badge-orangeBadge Orange
Badge Cream
badge-creamBadge Cream
Badge Dark
badge-darkBadge Dark
Promo Banner
promo-bannerPromo Banner
Hero Band Sunset
hero-band-sunsetHero Band Sunset
Sunset Stripe Band
sunset-stripe-bandSunset Stripe Band
Cta Banner Cream
cta-banner-creamCta Banner Cream
Code Block
code-blockCode Block
Code Block Header
code-block-headerCode Block Header
Feature Icon Tile
feature-icon-tileFeature Icon Tile
Industry Tile
industry-tileIndustry Tile
Stat Cell
stat-cellStat Cell
Customer Testimonial Card
customer-testimonial-cardCustomer Testimonial Card
Logo Wall Item
logo-wall-itemLogo Wall Item
Faq Accordion Item
faq-accordion-itemFaq Accordion Item
Footer Region
footer-regionFooter Region
Footer Link
footer-linkFooter Link
App Store Badge
app-store-badgeApp Store Badge

In use

The system, in use

Mistral AI's tokens on the kind of product it builds.

Build something people actually use.

A short paragraph of marketing copy that previews how the brand's display tier and body tier read together. Two sentences is usually enough.

Get startedLearn more

Marketing heroHeadline, sub-copy, primary CTA — the universal homepage opener.

FAQ

Mistral AI design system FAQ

Common questions about Mistral AI's tokens, components, and how to use this DESIGN.md in your project.

Use Mistral AI in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Download the DESIGN.md
One machine-readable file: every color, type, radius, spacing, and component token of Mistral AI.
Feed it to your AI tool
Drop it into Claude, Cursor, or GitHub Copilot. The agent writes React components and Tailwind classes that match Mistral AI's visual language.
Reference the tokens directly
Or paste the values into your Tailwind config, CSS variables, or component library: every color, size and radius is a quoted, ready-to-copy value.

Read the full DESIGN.md: overview, rationale, do’s and don’ts

Overview

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)
Horizontal "sunset stripe" band ({colors.primary} → {colors.sunshine-700} → {colors.yellow-saturated} → {colors.cream}) at every page bottom
Cream-yellow surfaces ({colors.cream}, {colors.cream-soft}) for form panels and feature cards
PP Editorial Old (or similar near-serif) for hero displays; Inter for everything else
{rounded.md} (8px) buttons and {rounded.lg} (12px) cards — less playful, more editorial geometry
Saturated orange primary CTA ({colors.primary}) carries every action call

Known Gaps

Specific dark-mode token values not surfaced; the brand has not shipped a published dark-mode palette
Animation/transition timings not extracted; recommend 150–200ms ease for hover/focus state transitions
Form validation success state not explicitly captured beyond defaults
Sunset stripe band gradient stops are approximations — the actual values may vary slightly across pages but the visual rhythm is consistent

AI & LLM Platforms

More systems like this

More DESIGN.md files in AI & LLM Platforms.

All 65 in AI & LLM Platforms

Pricing

Build it with Pro

The DESIGN.md files are free. Pro adds 6,000+ blocks, premium templates and the MCP server, so your AI editor builds in your system for you.

See full pricing

4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.

Billing

Billed once a year in USD. Cancel anytime.

How many people can use the license.
Client work, SaaS products and anything you charge for.
Production-ready React sections: hero, pricing, features, dashboards and more.
Complete multi-page sites you can ship as they are.
React icons from every major library, installable with one command.
Presets that restyle every block, in light and dark.
Lets your AI editor search, preview and install blocks for you.
Priority requests are answered first.

Individual

For personal projects & open source

$32instead of $49/mo

$389 billed yearly

Seats: 1 seat
Commercial use: Personal & open source only
Pro blocks: 6,000+ blocks
Templates: All 14 templates
React icons: 294k+ icons
Themes: All 59 themes
MCP server: Basic usage
Support: Standard

Team

Organization

For companies with larger teams

$132instead of $199/mo

$1,589 billed yearly

Seats: Unlimited seats
Commercial use: Included
Pro blocks: 6,000+ blocks
Templates: All 14 templates
React icons: 294k+ icons
Themes: All 59 themes
MCP server: Unlimited usage
Support: Priority

Billed once a year in USD. Cancel anytime.

Individual

For personal projects & open source

$32instead of $49/mo

$389 billed yearly

How many people can use the license.Seats: 1 seat
Client work, SaaS products and anything you charge for.Commercial use: Personal & open source only
Production-ready React sections: hero, pricing, features, dashboards and more.Pro blocks: 6,000+ blocks
Complete multi-page sites you can ship as they are.Templates: All 14 templates
React icons from every major library, installable with one command.React icons: 294k+ icons
Presets that restyle every block, in light and dark.Themes: All 59 themes
Lets your AI editor search, preview and install blocks for you.MCP server: Basic usage
Priority requests are answered first.Support: Standard

Team

Organization

For companies with larger teams

$132instead of $199/mo

$1,589 billed yearly

Everything in Team, plus

How many people can use the license.Seats: Unlimited seats
Lets your AI editor search, preview and install blocks for you.MCP server: Unlimited usage

Secure checkout via Stripe
Code lives in your repo
Keep what you've shipped if you cancel
License terms

Your system, built for you

Every block, template and icon, installed by your AI agent in your design system. The DESIGN.md files stay free.

Get Pro

Mistral AI Design System

About Mistral AI DESIGN.md

What makes it distinct

Live at mistral.ai

36 colors

Brand & Accent

Surface

Text

Borders & Hairlines

Other

19 type tokens

Radii and spacing

Radii

Spacing

42 components

The system, in use

Mistral AI design system FAQ

What is Mistral AI's primary brand color?

What typography does Mistral AI use?

What is the sunset stripe band?

Does Mistral AI have a dark mode?

Why doesn't Mistral use pill-shaped buttons?

How do I use this DESIGN.md in a React project?

Related reading

Use Mistral AI in your project

Download the DESIGN.md

Feed it to your AI tool

Reference the tokens directly

Overview

Known Gaps

More systems like this

Build it with Pro

Individual

Team

Organization

Individual

Team

Organization

Your system, built for you