Skip to content

Mistral AI Design System

Mistral AI's warm orange #fa520f and PP Editorial Old serif, captured as a DESIGN.md with colors, type and components for React, Next.js and AI tools.

Get ProDownload DESIGN.md
Primary color
#fa520f
Typeface
Inter
Shape
Mixed
Base radius
8px
Colors
36
Type tokens
19
Components
42
Spacing values
12

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

5 highlights

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

Live at mistral.ai

Mistral AI in production, as captured. Scroll the window to see the whole page.

Visit mistral.ai (opens in a new tab)
Mistral AI's website at mistral.ai

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

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

Radii and spacing

7 corner radii and 12 spacing values. Shape language: mixed, on a 8px base radius.

Radii7

  • xs4px
  • sm6px
  • md8px
  • lg12px
  • xl16px
  • xxl20px
  • full9999px

Spacing12

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

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

The system, in use

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

Marketing heroThe homepage: its nav, a headline and the main call to action.
Mistral AI
Try it free

Think bigger with an AI at your side

Ask anything, write and analyze, and build with an assistant that understands your work.

Try it freeTalk to sales
Mistral AIS
Summarize this quarter's results in three points.
Revenue grew 18% on last year, churn fell to 2.1%, and two new markets opened in March.
Turn that into a short note for the team.
Ask anything

Mistral AI design system FAQ

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

What are the color tokens in the Mistral AI DESIGN.md?

Mistral AI's DESIGN.md has 36 color tokens: primary (#fa520f), primary-deep (#cc3a05), on-primary (#ffffff), sunshine-300 (#ffd06a), sunshine-500 (#ffb83e), sunshine-700 (#ffa110) and 30 more. Every value is a quoted hex you can copy.

What is Mistral AI's primary color hex code?

The color token `primary` is #fa520f, used by 6 components. The surface behind it is `canvas` (#ffffff).

How do I use Mistral AI's colors in Tailwind CSS?

Map the tokens to your CSS variables: `primary` (#fa520f) to `--primary`, `canvas` (#ffffff) to `--background`, `ink` (#1f1f1f) to `--foreground`. shadcn/ui's Tailwind setup maps them to classes such as `bg-primary` and `text-foreground`, so they then use Mistral AI's palette.

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.

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.

Related reading

Specs, directories and component libraries that pair with this design system.

Use Mistral AI in your project

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

Download DESIGN.md

  1. Download the DESIGN.md

    One machine-readable file: every color, type, radius, spacing, and component token of Mistral AI.

  2. 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.

  3. 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

More systems like this

Algolia, Anthropic, Arc and 61 more in AI & LLM Platforms: each brand's colors, type and components in one file your AI agent builds from.

All 65 in AI & LLM Platforms

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.

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

4.9 out of 5 from 150+ developers

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
  • Cancel anytime
  • Keep what you've shipped