AI & Productivity · AI models

Mistral AI brand colors, fonts & UI tokens

The palette, type, corner geometry and surface tones behind Mistral AI’s website, with contrast ratios and tokens you can paste into Tailwind, CSS or Figma.

Technical · 4-6 pxDark carbonLast scanned 11 Nov 2026

Scan your own site

primary

Mistral Orange

#FA500F

rgb(250, 80, 15)

hsl(17 96% 52%)

secondary

Cream

#FAFAF4

rgb(250, 250, 244)

hsl(60 37% 97%)

accent

Mistral Yellow

#FFAF01

rgb(255, 175, 1)

hsl(41 100% 50%)

surface

Steel 950

#101013

rgb(16, 16, 19)

hsl(240 9% 7%)

text

Cream

#FAFAF4

rgb(250, 250, 244)

hsl(60 37% 97%)

muted

Zinc 400

#A1A1AA

rgb(161, 161, 170)

hsl(240 5% 65%)

border

Slate

#364153

rgb(54, 65, 83)

hsl(217 21% 27%)

Tangerine #FF8204Red #E51300Light Surface #FBFBF8

Typography

Headings: ALTMistral
Body: Inter
Monospace: DM Mono
Free stand-in: Inter / DM Mono

ALTMistral is a custom display face without public licensing details. Inter and DM Mono are open source (SIL OFL).

Geometry & surface

Radius style: Technical · 4-6 px
Controls: 6px
Cards: 16px
Scale: 2px · 6px · 16px

Canvas

#101013

Card

#1A1A1E

Hairline

#364153

Design language

The pixel M steps through five warm bands from yellow (#FFAF01) to dark red (#C4001D); the brand page asks to prefer this version and never recolor it.
The site runs dark-first on near-black #101013 with cream type (#FAFAF4), keeping the orange family for brand moments.
Compact 6 px buttons, with a custom ALTMistral display face over Inter text.

Live UI preview

Mistral AI’s palette, type and corner geometry on a navbar, hero, pricing table, form field and toast. Switch to the WCAG-fixed palette or dark mode to compare.

Brand surface

Mistral AI

New

Frontier AI models and assistants

Plan, track and release work with your team in one place. Start free and upgrade when you grow.

Open tasks

128

Revenue

12,480.00

Members

24

Workspace ready

Your team can sign in now. Invite links expire in 7 days.

Simple pricing

Every plan includes the core workspace.

Starter

For individuals

$0/ month

3 projects
Basic reporting
Community support

Team

Technical SEO snapshot

mistral.ai · scanned 11 Nov 2026

score / 100

12 of 14 checks pass · sitemap with 564 URLs · JSON-LD Organization, WebSite

passTitle tag58 chars: “Mistral | #1 in Sovereign AI: Frontier Open Models You Own”
passMeta description127 chars
failSingle H1 headingNo H1 found
passCanonical URLhttps://mistral.ai/
passHTML lang attributelang="en"
passMobile viewportwidth=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0
passOpen Graph tags3/3 of og:title, og:description, og:image
passTwitter / X cardsummary_large_image
passStructured data (JSON-LD)Organization, WebSite
passHTTPSServed over HTTPS
passIndexable (robots meta)No robots restrictions
passXML sitemap564 URLs · https://mistral.ai/sitemap-index.xml
warnFavicon / touch iconNo icon link tags
passImage alt text100% of 74 images

WCAG contrast ratios

Pairing	Colors	Ratio	WCAG AA
Body text on surface	#FAFAF4 / #101013	18.13:1	Pass
Secondary text on surface	#A1A1AA / #101013	7.41:1	Pass
Primary as link/text on surface	#FA500F / #101013	5.63:1	Pass
Button label on primary	#111113 / #FA500F	5.59:1	Pass
Accent on surface	#FFAF01 / #101013	10.30:1	Pass
White on secondary	#FFFFFF / #FAFAF4	1.05:1	Fail
Body text on white	#FAFAF4 / #FFFFFF	1.05:1	Fail
Dark mode: text on canvas	#F5F5F7 / #120C0C	17.80:1	Pass
Dark mode: primary on canvas	#FA500F / #120C0C	5.74:1	Pass

Use the Mistral AI system in SuiteAnvil

Each tool opens with Mistral AI preloaded as the active BrandProfile.

StyleExtract ProToken exports and a modular PDF audit, preloaded with Mistral AI.

Doc EngineWhitepaper, brief and print card templates, preloaded with Mistral AI.

Asset Converter28-file press kit and social banners, preloaded with Mistral AI.

Sitemap BotA widget themed in this geometry, preloaded with Mistral AI.

Mistral AI tokens for Tailwind CSS v4

Paste into your global stylesheet, or open StyleExtract for CSS variables, Figma tokens, DESIGN.md and .cursorrules.

mistral.theme.css

/* Mistral AI design tokens, extracted from https://mistral.ai
   Generated by SuiteAnvil StyleExtract · https://suiteanvil.com */
@import "tailwindcss";

@theme {
  /* Brand roles */
  --color-brand: #FA500F;
  --color-brand-foreground: #111113;
  --color-secondary: #FAFAF4;
  --color-accent: #FFAF01;
  --color-surface: #101013;
  --color-ink: #FAFAF4;
  --color-ink-muted: #A1A1AA;
  --color-line: #364153;

  /* Surfaces (UI vibe: Dark carbon) */
  --color-canvas: #101013;
  --color-card: #1A1A1E;
  --color-hairline: #364153;

  /* Primary tonal scale */
  --color-brand-50: #FFF6F3;
  --color-brand-100: #FEEAE2;
  --color-brand-200: #FED3C3;
  --color-brand-300: #FDB093;
  --color-brand-400: #FC8557;
  --color-brand-500: #FA500F;
  --color-brand-600: #D6460F;
  --color-brand-700: #AD3A0E;
  --color-brand-800: #822D0E;
  --color-brand-900: #5E230D;
  --color-brand-950: #3F190D;

  /* Typography: brand family first, free stand-in second */
  --font-heading: ALTMistral, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "DM Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Shape (UI vibe: Technical · 4-6 px) */
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 16px;
  --radius-button: 6px;
  --radius-control: 6px;
  --radius-card: 16px;
}

/* Dark mode overrides (toggle with <html data-theme="dark">) */
@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));

[data-theme="dark"] {
  --color-brand: #FA500F;
  --color-brand-foreground: #111113;
  --color-accent: #FFAF01;
  --color-surface: #120C0C;
  --color-canvas: #120C0C;
  --color-card: #1C1516;
  --color-hairline: #2A2424;
  --color-ink: #F5F5F7;
  --color-ink-muted: #A1A1AA;
  --color-line: #2A2424;
}

SuiteAnvil extracts publicly visible design tokens, logos, and font references for workflow automation. You are responsible for ensuring you hold valid commercial rights or client authorization for any proprietary fonts, trademarks, and brand assets before commercial publication. Licensing notice

FAQ

What is Mistral AI’s primary brand color?

Mistral AI’s primary color is #FA500F (rgb(250, 80, 15)), used for primary actions and emphasis. Text is set in #FAFAF4 on a #101013 surface.

What font does Mistral AI use?

Mistral AI uses ALTMistral for headings and Inter for body text, with DM Mono for code. ALTMistral is a custom display face without public licensing details. Inter and DM Mono are open source (SIL OFL).

What is a free alternative to Mistral AI’s font?

Inter is a close free alternative for headings, and DM Mono works for monospace.

What corner radius does Mistral AI use?

Mistral AI reads as technical · 4-6 px: controls use 6px, cards about 16px, on a dark carbon canvas (#101013).

Do Mistral AI’s brand colors meet WCAG contrast?

7 of 9 key pairings pass WCAG 2.1 AA. White on secondary is 1.05:1; Body text on white is 1.05:1

More in AI & Productivity

OpenAIOpenAI Anthropic Notion Figma Loom All 60 brands

Reference snapshot of Mistral AI’s public website styling for educational and interoperability purposes, scanned 11 Nov 2026. Mistral AI and its logo are trademarks of their owner, shown for identification only; SuiteAnvil is not affiliated with or endorsed by Mistral AI.

Compare your website with Mistral AI

Scan your own site and see its palette, fonts, corner radius, WCAG contrast and SEO score next to Mistral AI's, side by side.

Audit & kit: mistral.ai brand and SEO audit Mistral AI brand kit and logo downloads
Comparisons: Mistral AI vs Anthropic
Tools: StyleExtract Pro Doc Engine Asset Converter Sitemap Bot
Guides: Brand guidelines extractor Client audit PDF generator Markdown to branded whitepaper Business cards & email signatures SVG to press kit & favicons