Mistral AI

version alpha

name Mistral AI

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}"

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

Colors

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 fo