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.

About Mistral AI DESIGN.md

Curated by Dov AzencotUpdated May 12, 2026Source mistral.ai

AI & LLM Platforms

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 41 color tokens, 19 typography styles, 12 spacing values, 7 corner radii, and 38 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

Live at mistral.ai

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

mistral.ai

Explore Mistral AI

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Mistral AI design system FAQ

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

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

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Mistral AI homepage

The live brand surface — Frontier AI hero, Le Studio, sunset stripe band, all in production.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

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

Get Pro — Save 33%·Ends in --:--:--→