Mistral-AI Design System

---

version: alpha

name: Mistral-AI-design-analysis

description: Mistral AI brands itself with a singular signature — atmospheric sunset gradients (mustard, orange, deep red) layered over photography of mountains, plus a horizontal "sunset stripe" bar that closes every page. The system pairs warm cream-yellow surfaces ({colors.cream}) with a saturated orange primary CTA ({colors.primary}) and uses an elegant near-serif voice for hero displays. Coverage spans homepage (Frontier AI hero), Le Studio product page, Coding solutions, news article surfaces, contact form, and services tier page — all anchored by the signature gradient closing band.

colors:

primary: "#fa520f"

primary-deep: "#cc3a05"

on-primary: "#ffffff"

sunshine-300: "#ffd06a"

sunshine-500: "#ffb83e"

sunshine-700: "#ffa110"

sunshine-800: "#ff8105"

sunshine-900: "#ff8a00"

yellow-saturated: "#ffd900"

cream: "#fff8e0"

cream-light: "#fffaeb"

cream-deeper: "#fff0c2"

beige-deep: "#e6d5a8"

block-5: "#ffe295"

block-6: "#ffd900"

block-7: "#ff8105"

ink: "#1f1f1f"

ink-tint: "#3d3d3d"

charcoal: "#2c2c2c"

slate: "#4a4a4a"

steel: "#6a6a6a"

stone: "#8a8a8a"

muted: "#a8a8a8"

hairline: "#e5e5e5"

hairline-soft: "#ededed"

hairline-strong: "#c7c7c7"

canvas: "#ffffff"

surface: "#fafafa"

surface-cream: "#fff8e0"

surface-cream-soft: "#fffaeb"

surface-code: "#1c1c1e"

on-dark: "#ffffff"

on-dark-muted: "#a8a8a8"

on-cream: "#1f1f1f"

footer-cream: "#fff8e0"

link: "#fa520f"

typography:

hero-display:

fontFamily: PP Editorial Old

fontSize: 84px

fontWeight: 400

lineHeight: 1.05

letterSpacing: -1.5px

display-lg:

fontFamily: PP Editorial Old

fontSize: 64px

fontWeight: 400

lineHeight: 1.10

letterSpacing: -1px

heading-1:

fontFamily: PP Editorial Old

fontSize: 52px

fontWeight: 400

lineHeight: 1.15

letterSpacing: -0.5px

heading-2:

fontFamily: Inter

fontSize: 36px

fontWeight: 500

lineHeight: 1.20

letterSpacing: -0.5px

heading-3:

fontFamily: Inter

fontSize: 28px

fontWeight: 500

lineHeight: 1.25

heading-4:

fontFamily: Inter

fontSize: 22px

fontWeight: 500

lineHeight: 1.30

heading-5:

fontFamily: Inter

fontSize: 18px

fontWeight: 500

lineHeight: 1.40

subtitle:

fontFamily: Inter

fontSize: 18px

fontWeight: 400

lineHeight: 1.50

body-md:

fontFamily: Inter

fontSize: 16px

fontWeight: 400

lineHeight: 1.55

body-md-medium:

fontFamily: Inter

fontSize: 16px

fontWeight: 500

lineHeight: 1.55

body-sm:

fontFamily: Inter

fontSize: 14px

fontWeight: 400

lineHeight: 1.50

body-sm-medium:

fontFamily: Inter

fontSize: 14px

fontWeight: 500

lineHeight: 1.50

caption:

fontFamily: Inter

fontSize: 13px

fontWeight: 400

lineHeight: 1.40

caption-bold:

fontFamily: Inter

fontSize: 13px

fontWeight: 600

lineHeight: 1.40

micro:

fontFamily: Inter

fontSize: 12px

fontWeight: 500

lineHeight: 1.40

micro-uppercase:

fontFamily: Inter

fontSize: 11px

fontWeight: 600

lineHeight: 1.40

letterSpacing: 1px

button-md:

fontFamily: Inter

fontSize: 14px

fontWeight: 500

lineHeight: 1.30

stat-display:

fontFamily: PP Editorial Old

fontSize: 56px

fontWeight: 400

lineHeight: 1.10

letterSpacing: -1px

code-md:

fontFamily: JetBrains Mono

fontSize: 14px

fontWeight: 400

lineHeight: 1.50

rounded:

xs: 4px

sm: 6px

md: 8px

lg: 12px

xl: 16px

xxl: 20px

full: 9999px

spacing:

xxs: 4px

xs: 8px

sm: 12px

md: 16px

lg: 20px

xl: 24px

xxl: 32px

xxxl: 40px

section-sm: 48px

section: 64px

section-lg: 96px

hero: 120px

components:

button-primary:

backgroundColor: "{colors.primary}"

textColor: "{colors.on-primary}"

typography: "{typography.button-md}"

rounded: "{rounded.md}"

padding: "10px 20px"

button-primary-pressed:

backgroundColor: "{colors.primary-deep}"

textColor: "{colors.on-primary}"

button-primary-disabled:

backgroundColor: "{colors.hairline}"

textColor: "{colors.muted}"

button-cream:

backgroundColor: "{colors.cream}"

textColor: "{colors.ink}"

typography: "{typography.button-md}"

rounded: "{rounded.md}"

padding: "10px 20px"

border: "1px solid {colors.beige-deep}"

button-dark:

backgroundColor: "{colors.ink}"

textColor: "{colors.on-dark}"

typography: "{typography.button-md}"

rounded: "{rounded.md}"

padding: "10px 20px"

button-secondary:

backgroundColor: "transparent"

textColor: "{colors.ink}"

typography: "{typography.button-md}"

rounded: "{rounded.md}"

padding: "10px 20px"

border: "1px solid {colors.hairline-strong}"

button-on-cream:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.button-md}"

rounded: "{rounded.md}"

padding: "10px 20px"

border: "1px solid {colors.beige-deep}"

button-link:

backgroundColor: "transparent"

textColor: "{colors.primary}"

typography: "{typography.body-sm-medium}"

padding: "0"

card-base:

backgroundColor: "{colors.canvas}"

rounded: "{rounded.lg}"

padding: "{spacing.xl}"

border: "1px solid {colors.hairline-soft}"

card-feature:

backgroundColor: "{colors.canvas}"

rounded: "{rounded.lg}"

padding: "{spacing.xxl}"

border: "1px solid {colors.hairline-soft}"

card-cream:

backgroundColor: "{colors.cream}"

textColor: "{colors.ink}"

rounded: "{rounded.lg}"

padding: "{spacing.xxl}"

border: "1px solid {colors.beige-deep}"

card-cream-soft:

backgroundColor: "{colors.surface-cream-soft}"

textColor: "{colors.ink}"

rounded: "{rounded.lg}"

padding: "{spacing.xxl}"

card-feature-product:

backgroundColor: "{colors.canvas}"

rounded: "{rounded.lg}"

padding: "{spacing.xxl}"

border: "1px solid {colors.hairline-soft}"

shadow: "rgba(0, 0, 0, 0.04) 0px 4px 12px"

card-photographic:

backgroundColor: "{colors.surface-code}"

textColor: "{colors.on-dark}"

rounded: "{rounded.lg}"

padding: "0"

pricing-card:

backgroundColor: "{colors.canvas}"

rounded: "{rounded.lg}"

padding: "{spacing.xxl}"

border: "1px solid {colors.hairline-soft}"

pricing-card-featured:

backgroundColor: "{colors.cream}"

rounded: "{rounded.lg}"

padding: "{spacing.xxl}"

border: "2px solid {colors.primary}"

text-input:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body-md}"

rounded: "{rounded.md}"

padding: "{spacing.sm} {spacing.md}"

border: "1px solid {colors.hairline-strong}"

height: 44px

text-input-focused:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

border: "2px solid {colors.primary}"

text-area:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body-md}"

rounded: "{rounded.md}"

padding: "{spacing.md}"

border: "1px solid {colors.hairline-strong}"

contact-form-panel:

backgroundColor: "{colors.cream}"

rounded: "{rounded.lg}"

padding: "{spacing.xxl}"

border: "1px solid {colors.beige-deep}"

pill-tab:

backgroundColor: "{colors.canvas}"

textColor: "{colors.steel}"

typography: "{typography.body-sm-medium}"

rounded: "{rounded.full}"

padding: "{spacing.xs} {spacing.md}"

border: "1px solid {colors.hairline}"

pill-tab-active:

backgroundColor: "{colors.ink}"

textColor: "{colors.on-dark}"

rounded: "{rounded.full}"

border: "1px solid {colors.ink}"

segmented-tab:

backgroundColor: "transparent"

textColor: "{colors.steel}"

typography: "{typography.body-sm-medium}"

padding: "{spacing.sm} {spacing.md}"

border: "0 0 2px transparent solid"

segmented-tab-active:

backgroundColor: "transparent"

textColor: "{colors.primary}"

typography: "{typography.body-sm-medium}"

border: "0 0 2px {colors.primary} solid"

badge-orange:

backgroundColor: "{colors.primary}"

textColor: "{colors.on-primary}"

typography: "{typography.caption-bold}"

rounded: "{rounded.full}"

padding: "4px 10px"

badge-cream:

backgroundColor: "{colors.cream-deeper}"

textColor: "{colors.ink}"

typography: "{typography.caption-bold}"

rounded: "{rounded.full}"

padding: "4px 10px"

badge-dark:

backgroundColor: "{colors.ink}"

textColor: "{colors.on-dark}"

typography: "{typography.caption-bold}"

rounded: "{rounded.full}"

padding: "4px 10px"

promo-banner:

backgroundColor: "{colors.ink}"

textColor: "{colors.on-dark}"

typography: "{typography.body-sm-medium}"

padding: "{spacing.sm} {spacing.md}"

hero-band-sunset:

backgroundColor: "{colors.sunshine-700}"

textColor: "{colors.ink}"

rounded: "0"

padding: "{spacing.hero}"

sunset-stripe-band:

backgroundColor: "{colors.primary}"

textColor: "{colors.on-primary}"

rounded: "0"

padding: "{spacing.lg} 0"

cta-banner-cream:

backgroundColor: "{colors.cream}"

textColor: "{colors.ink}"

rounded: "{rounded.lg}"

padding: "{spacing.section}"

code-block:

backgroundColor: "{colors.surface-code}"

textColor: "{colors.on-dark}"

typography: "{typography.code-md}"

rounded: "{rounded.md}"

padding: "{spacing.md}"

code-block-header:

backgroundColor: "{colors.surface-code}"

textColor: "{colors.on-dark-muted}"

typography: "{typography.caption}"

padding: "{spacing.xs} {spacing.md}"

border: "0 0 1px rgba(255,255,255,0.08) solid"

feature-icon-tile:

backgroundColor: "{colors.cream}"

rounded: "{rounded.md}"

padding: "{spacing.md}"

border: "1px solid {colors.beige-deep}"

industry-tile:

backgroundColor: "{colors.canvas}"

rounded: "{rounded.lg}"

padding: "{spacing.xl}"

border: "1px solid {colors.hairline-soft}"

stat-cell:

backgroundColor: "transparent"

textColor: "{colors.ink}"

typography: "{typography.stat-display}"

padding: "{spacing.lg}"

customer-testimonial-card:

backgroundColor: "{colors.canvas}"

rounded: "{rounded.lg}"

padding: "{spacing.xxl}"

border: "1px solid {colors.hairline-soft}"

logo-wall-item:

backgroundColor: "transparent"

textColor: "{colors.steel}"

typography: "{typography.body-md-medium}"

padding: "{spacing.lg}"

faq-accordion-item:

backgroundColor: "{colors.canvas}"

rounded: "{rounded.md}"

padding: "{spacing.xl}"

border: "0 0 1px {colors.hairline} solid"

footer-region:

backgroundColor: "{colors.footer-cream}"

textColor: "{colors.ink}"

typography: "{typography.body-sm}"

padding: "{spacing.section} {spacing.xxl}"

footer-link:

backgroundColor: "transparent"

textColor: "{colors.primary}"

typography: "{typography.body-sm}"

padding: "{spacing.xxs} 0"

app-store-badge:

backgroundColor: "{colors.ink}"

textColor: "{colors.on-dark}"

typography: "{typography.caption-bold}"

rounded: "{rounded.md}"

padding: "{spacing.sm} {spacing.md}"

---

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:**

> Source pages: mistral.ai/ (homepage), /products/studio (Le Studio product), /solutions/coding (coding solution), /news/vibe-remote-agents-mistral-medium-3-5 (news), /contact (contact form), /services (services tiers). Token coverage was identical across all six pages.

**PP Editorial Old** (display): Mistral's signature near-serif elegant display typeface used for hero displays, large numbers, and editorial section openers. Carries a slightly classical, intelligent character that contrasts the contemporary product positioning. Fallbacks: 'Times New Roman', Georgia, serif.

**Inter** (UI prose): Variable typeface for body, navigation, buttons, labels, captions. Fallbacks: ui-sans-serif, system-ui, -apple-system, sans-serif.

**JetBrains Mono** (code): Monospace for code blocks and IDE mockups. Fallbacks: 'SF Mono', Menlo, Consolas, monospace.

| Token | Size | Weight | Line Height | Letter Spacing | Family | Use |

|---|---|---|---|---|---|---|

| `{typography.hero-display}` | 84px | 400 | 1.05 | -1.5px | PP Editorial Old | Hero ("Frontier AI. In your hands.") |

| `{typography.display-lg}` | 64px | 400 | 1.10 | -1px | PP Editorial Old | Section openers |

| `{typography.heading-1}` | 52px | 400 | 1.15 | -0.5px | PP Editorial Old | Page headlines ("Get in touch with the team.") |

| `{typography.stat-display}` | 56px | 400 | 1.10 | -1px | PP Editorial Old | Stat callouts ("75%") |

| `{typography.heading-2}` | 36px | 500 | 1.20 | -0.5px | Inter | Subsection headlines |

| `{typography.heading-3}` | 28px | 500 | 1.25 | 0 | Inter | Card titles |

| `{typography.heading-4}` | 22px | 500 | 1.30 | 0 | Inter | Feature tile titles |

| `{typography.heading-5}` | 18px | 500 | 1.40 | 0 | Inter | Smaller card titles |

| `{typography.subtitle}` | 18px | 400 | 1.50 | 0 | Inter | Hero subtitle, lead body |

| `{typography.body-md}` | 16px | 400 | 1.55 | 0 | Inter | Primary body text |

| `{typography.body-md-medium}` | 16px | 500 | 1.55 | 0 | Inter | Body emphasis |

| `{typography.body-sm}` | 14px | 400 | 1.50 | 0 | Inter | Secondary body |

| `{typography.body-sm-medium}` | 14px | 500 | 1.50 | 0 | Inter | Active sidebar, button labels |

| `{typography.caption}` | 13px | 400 | 1.40 | 0 | Inter | Helper text |

| `{typography.caption-bold}` | 13px | 600 | 1.40 | 0 | Inter | Badge labels |

| `{typography.micro}` | 12px | 500 | 1.40 | 0 | Inter | Footer microcopy |

| `{typography.micro-uppercase}` | 11px | 600 | 1.40 | 1px | Inter | Section eyebrows |

| `{typography.button-md}` | 14px | 500 | 1.30 | 0 | Inter | Button labels |

| `{typography.code-md}` | 14px | 400 | 1.50 | 0 | JetBrains Mono | Code blocks |

Marketing surfaces give content generous breathing room — `{spacing.hero}` (120px) hero padding lets the mountain-sunset photography fill the frame. Form pages tighten dramatically: contact form panel uses `{spacing.xxl}` (32px) internal padding, fields stack on `{spacing.md}` (16px) gap.

The system runs predominantly flat with strategic atmospheric depth from photography.

| Level | Treatment | Use |

|---|---|---|

| 0 (flat) | No shadow; `{colors.hairline-soft}` border | Default cards, table rows, form inputs |

| 1 (subtle) | `rgba(0, 0, 0, 0.04) 0px 1px 2px 0px` | Hover-elevated tiles |

| 2 (card) | `rgba(0, 0, 0, 0.04) 0px 4px 12px 0px` | Standard feature cards |

| 3 (mockup) | `rgba(0, 0, 0, 0.08) 0px 12px 24px -4px` | IDE mockup, code editor frames |

| 4 (modal) | `rgba(0, 0, 0, 0.12) 0px 16px 48px -8px` | Modals, dropdowns |

| Token | Value | Use |

|---|---|---|

| `{rounded.xs}` | 4px | Small chips, micro-controls |

| `{rounded.sm}` | 6px | Discount badges, compact UI |

| `{rounded.md}` | 8px | Buttons, inputs, search-pill, code blocks |

| `{rounded.lg}` | 12px | Cards, modals, panels (the dominant card radius) |

| `{rounded.xl}` | 16px | Larger feature panels |

| `{rounded.xxl}` | 20px | Featured emphasis cards |

| `{rounded.full}` | 9999px | Status badges, pill tabs (used sparingly — most buttons are NOT pills) |

The radius scale is sober and editorial — Mistral does NOT use pill buttons. `{rounded.md}` (8px) for buttons, `{rounded.lg}` (12px) for cards, `{rounded.full}` reserved for badges and the rare pill tab.

> Per the no-hover policy, hover states are NOT documented. Default and pressed/active states only.

**`button-primary`** — Saturated-orange primary CTA, the dominant action.

**`button-cream`** — Warm cream-yellow secondary action, common on cream-surface sections.

**`button-dark`** — Dark/black primary CTA on cream surfaces.

**`button-secondary`** — Outlined secondary action.

**`button-on-cream`** — White button on cream-tinted backgrounds.

**`button-link`** — Inline orange text link.

**`card-base`** — Standard content card.

**`card-feature`** — White feature card with larger padding.

**`card-cream`** — Warm cream-yellow feature card (services tiers, perk callouts).

**`card-cream-soft`** — Lighter cream variant.

**`card-feature-product`** — Product showcase card with subtle elevation.

**`card-photographic`** — Photographic product card with dark background.

**`pricing-card`** — Standard pricing tier card.

**`pricing-card-featured`** — Featured pricing tier (cream background + orange border).

**`text-input`** — Standard text field.

**`text-input-focused`** — Activated state.

**`text-area`** — Multi-line text area for contact form.

**`contact-form-panel`** — Cream-tinted form container on the contact page.

**`pill-tab`** + **`pill-tab-active`** — Pill-style tab nav (used sparingly on product pages).

**`segmented-tab`** + **`segmented-tab-active`** — Underline-style tab navigation.

**`badge-orange`** — Saturated orange badge.

**`badge-cream`** — Cream-tinted tag chip.

**`badge-dark`** — Dark/black status badge.

**`promo-banner`** — Sticky black promo strip ABOVE the top nav.

**`code-block`** — Syntax-highlighted IDE-style code block (Le Studio page mockup, agent demos).

**`code-block-header`** — Header bar above the code block.

**`feature-icon-tile`** — Cream-yellow feature icon callout.

**`industry-tile`** — Industry-vertical tile in solutions page grid.

**`stat-cell`** — Stat-row cell ("75% more / 80% better").

**`customer-testimonial-card`** — Customer quote card (used inside Le Studio and Solutions pages).

**`logo-wall-item`** — Customer logo wordmark cell.

**`faq-accordion-item`** — FAQ panel.

**`app-store-badge`** — App Store / Google Play download badge.

**Top Navigation (Marketing)** — Sticky white bar.

**`hero-band-sunset`** — Atmospheric sunset hero band.

**`sunset-stripe-band`** — Horizontal closing band at the foot of every page.

**`cta-banner-cream`** — Page-bottom CTA band on cream surface.

**`footer-region`** — Cream-tinted multi-column footer.

**`footer-link`** — Individual footer link.

| Name | Width | Key Changes |

|---|---|---|

| Mobile (small) | < 480px | Single column. Hero scales to 40px (PP Editorial). Pill nav collapses to hamburger. Pricing tiers stack 1-up. |

| Mobile (large) | 480 – 767px | Feature tiles 2-up. Hero scales to 52px. |

| Tablet | 768 – 1023px | 2-column feature grids. Pill-tab nav returns. Hero 64px. |

| Desktop | 1024 – 1279px | Multi-column layouts. Hero 76px. Stat row at full width. |

| Wide Desktop | ≥ 1280px | Full 84px hero presentation. |

1. Focus on ONE component at a time

2. Reference component names and tokens directly (`{colors.primary}`, `{component-name}-pressed`)

3. Run `npx @google/design.md lint DESIGN.md` after edits

4. Add new variants as separate `components:` entries

5. Default to `{typography.body-md}` for body and `{typography.subtitle}` for emphasis. Hero displays use `{typography.hero-display}` (PP Editorial Old).

6. Keep `{colors.primary}` confined to primary CTAs, active states, and the sunset stripe band

7. Cards use `{rounded.lg}` (12px), buttons use `{rounded.md}` (8px). Pills (`{rounded.full}`) reserved for badges only.

8. Always include the sunset-stripe-band component at the foot of every page mockup.