AI Assistants / iOS / Android / Web

Mistral Vibe

Mistral pairs a sober editorial page with blocks of hot orange, so the brand reads as heat against otherwise restrained, square-cornered layout.

Download
  • #FF5229
  • #FF8204
  • #E51300
  • #C4001D
  • #151524
  • #FBFBF8

Color

Every color token in the file, grouped by role.

Brand

  • primary#09090B
  • on primary#FAFAFA
  • brand#FF5229
  • brand orange#FF8204
  • brand red#E51300
  • brand crimson#C4001D
  • ink secondary#71717B
  • dark ink secondary#A1A1AA

Surfaces

  • canvas#FBFBF8
  • surface#F5F4EF
  • dark canvas#101013
  • dark surface#1A1A1E

Text

  • ink#18181B
  • ink body#27272A
  • dark ink#FAFAF4

Lines

  • border#E4E3DE
  • dark border#27272B

More

  • panel#151524

Typography

Each style is set with the file's own family, size, weight and spacing.

  • ALTMistralALTMistral is private and not available in open fonts. Shown in Hanken Grotesk, the closest open match.
  • InterOpen font, shown as published.
  • headline56px / 500 / 60px

    Mistral Vibe

  • title44px / 500 / 52px

    Mistral Vibe

  • body16px / 400 / 24px

    The quick brown fox jumps over the lazy dog

  • button14px / 500 / 20px

    Continue to checkout

Shape

Corner radius tokens.

  • none0px
  • radius 44px
  • radius 66px
  • radius 88px
  • radius 1212px
  • radius 1616px

Spacing

The spacing scale, drawn to size.

  • space 88px
  • space 1212px
  • space 1616px

Components

Component tokens drawn with the colors, type and corners they name.

  • button primary
    button-primary
  • band dark
    band-dark
  • tile warm
    tile-warm
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 88 lines
version: alpha
name: Mistral-Vibe-design-analysis
description: "An AI assistant, formerly Le Chat, drawn on warm off-white (#fbfbf8) with near-black panels, a hot orange and red color stack led by #ff5229, tight ALT Mistral headlines over Inter and small 6px corners."
status: Draft
appVersion: "measured in a browser from mistral.ai, 2026-11-01"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#09090b"
  on-primary: "#fafafa"
  brand: "#ff5229"
  brand-orange: "#ff8204"
  brand-red: "#e51300"
  brand-crimson: "#c4001d"
  panel: "#151524"
  canvas: "#fbfbf8"
  surface: "#f5f4ef"
  ink: "#18181b"
  ink-body: "#27272a"
  ink-secondary: "#71717b"
  border: "#e4e3de"
  dark-canvas: "#101013"
  dark-surface: "#1a1a1e"
  dark-ink: "#fafaf4"
  dark-ink-secondary: "#a1a1aa"
  dark-border: "#27272b"

typography:
  # Font note: "ALTMistral" is a private font and is not available in open fonts. Closest open alternative: "Hanken Grotesk".
  headline:
    fontFamily: "ALTMistral, sans-serif"
    fontSize: 56px
    fontWeight: 500
    lineHeight: 60px
    letterSpacing: -0.56px
  title:
    fontFamily: "ALTMistral, sans-serif"
    fontSize: 44px
    fontWeight: 500
    lineHeight: 52px
    letterSpacing: -0.44px
  body:
    fontFamily: "Inter, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  button:
    fontFamily: "ALTMistral, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 20px
    letterSpacing: 0.28px

rounded:
  none: 0px
  radius-4: 4px
  radius-6: 6px
  radius-8: 8px
  radius-12: 12px
  radius-16: 16px

spacing:
  space-8: 8px
  space-12: 12px
  space-16: 16px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.radius-6}"
    height: 40px
    padding: 8px 12px
  band-dark:
    backgroundColor: "{colors.panel}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
  tile-warm:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    width: 339px
    height: 156px

Overview

Mistral Vibe is Mistral AI's assistant, listed on the App Store as Vibe by Mistral (ex-Le Chat). Mistral's public site is warm and restrained, with hairline rules and tight headlines, then breaks into bands of orange and red. [Measured]

What defines the look:

  1. A hot color stack. #ff5229, #ff8204, #e51300 and #c4001d appear as adjoining bands. [Measured]
  2. Warm paper. #fbfbf8 and #f5f4ef carry most pages. [Measured]
  3. Small corners. Controls use 6, not pills. [Measured]
  4. Tight display type. ALT Mistral 500 with Inter for reading. [Measured]
  5. Hairlines as structure. Dozens of 1px #e4e3de rules divide the page. [Measured]

Source for this file: the mistral.ai home, Vibe product and pricing pages, measured in a browser at 1440 and 390 wide on 2026-11-01 with a dark color scheme pass. The assistant itself sits behind an account. No app captures were used. See Known Gaps.

Core

Colors

RoleValueWhere
Brand stack#ff5229, #ff8204, #e51300, #c4001dfull width bands, product hero [Measured]
Near-black#09090b, text #fafafaLogin button [Measured]
Dark panel#151524product sections [Measured]
Page#fbfbf8, #f5f4efpage and sections [Measured]
Text#18181b, #27272a, #3f3f46, #71717bink steps [Measured]
Border#e4e3derules [Measured]
Soft button#07070b at 5 percentGet in touch [Measured]
Darkpage #101013, section #1a1a1e, text #fafaf4, #a1a1aa, rules #27272bbrand bands stay the same [Measured]

Typography

RoleDesktopMobileFace and weight
Display96not measuredALT Mistral 500, line height not measured [Measured]
Headline56 on 6028 on 40ALT Mistral 500 [Measured]
Title44 on 5224 on 28ALT Mistral 500 [Measured]
Footer title32 on 40not measuredALT Mistral 500 [Measured]
Body16 on 24sameInter 400 [Measured]
Button14 on 20not measuredALT Mistral 500, tracking 0.28 [Measured]

Space Mono also loads at the mobile width. Its role was not separated. [Measured]

Shape and spacing

Controls use 6, and dark bands and warm tiles are square at 0. Radii of 4 to 16 also appear on smaller parts. Pills do not appear on buttons. [Measured]

Iconography and motion

Not measured. [Inferred]

Themes

Light and dark, following the system setting. Brand bands keep their colors in dark. [Measured]

Platform: iOS

How the Mistral Vibe app looks and behaves was not captured. Tokens a website ships are evidence for the web only, so every item below is inferred. No device capture was done.

Back and up navigation

Expected on iOS: Chevron plus previous title, swipe from the left edge.

Not measured. [Inferred]

Primary navigation

Expected on iOS: Bottom tab bar, about five items.

Not measured. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

Not measured. [Inferred]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

Not measured. [Inferred]

Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Not measured. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

Not measured. [Inferred]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not measured. [Inferred]

Insets and system bars

Expected on iOS: Safe areas, status bar.

Not measured. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-11-01 against the public web only.

Platform conformance

Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates.

The app is expected to share warm neutrals, the hot orange stack and small corners with the web. [Inferred]

Platform: Android

How the Mistral Vibe app looks and behaves was not captured. Tokens a website ships are evidence for the web only, so every item below is inferred. No device capture was done.

Back and up navigation

Expected on Android: System back and gesture, up arrow in the top bar.

Not measured. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

Not measured. [Inferred]

Main action

Expected on Android: Floating action button.

Not measured. [Inferred]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

Not measured. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Not measured. [Inferred]

Text sizing

Expected on Android: Font scale.

Not measured. [Inferred]

Touch and pointer targets

Expected on Android: 48dp minimum.

Not measured. [Inferred]

Insets and system bars

Expected on Android: Edge to edge, system bars.

Not measured. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on Android: Account deletion and data safety requirements. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-11-01 against the public web only.

Platform conformance

Expected on Android: For each important component: what Android expects, what this app does, and why it deviates.

The app is expected to share warm neutrals, the hot orange stack and small corners with the web. [Inferred]

Platform: Web

The home, Vibe product and pricing pages, measured at 1440 and 390 wide.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Browser back. [Observed]

Primary navigation

Expected on Web: Top nav or sidebar.

A top bar of text menus 73 high, 57 high rows inside a MENU panel at the mobile width. [Measured]

Main action

Expected on Web: Page-level button.

Login is a #09090b fill with #fafafa ALT Mistral text, 40 high at 6 radius, 48 high and square at the mobile width. Get in touch is the same size in a 5 percent tint. [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Not measured. [Inferred]

Controls

Expected on Web: Native or custom.

Not measured. [Inferred]

Text sizing

Expected on Web: Browser zoom.

Fixed pixels that step down at the mobile width. [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Buttons are 40 high and menu rows 57 to 73. [Measured]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

Not measured. [Inferred]

Account and sign-in rules

Expected on Web: Not applicable unless the product has accounts.

The assistant needs an account. Other rules were not checked. [Observed]

Platform conformance

Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates.

A responsive site whose orange bands stay full width at both sizes. [Measured]

Cross-platform consistency

Consistent across platforms: warm neutrals, the hot orange stack and small corners. [Measured for web, Inferred for the apps]

Intentionally different: not measured. [Inferred]

Do's and Don'ts

Do

  • Use orange and red as adjoining bands, not as small accents only.
  • Keep controls at 6 radius.
  • Divide sections with hairlines.
  • Set headlines tight in the display face.

Don't

  • Don't use pills on buttons.
  • Don't use cool white pages.
  • Don't put white small text on the orange. It reaches only about 3 to 1.

Known Gaps

  • The assistant itself was not measured, so this file describes the public site and not the chat.
  • The iOS and Android apps were not captured, so every mobile topic is inferred.
  • Many colors are declared in a perceptual color space. They were converted to hex here, so small rounding is possible.
  • No tokens are published, so spacing beyond button padding is not measured.
  • Icons, motion and dialogs were not measured.
  • ALTMistral is private. Hanken Grotesk is within 1 percent at 96px. Outfit matched width but looks heavier and rounder.
  • Account deletion and store sign-in rules were not verified.