--- 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 | Role | Value | Where | |------|-------|-------| | Brand stack | `#ff5229`, `#ff8204`, `#e51300`, `#c4001d` | full width bands, product hero [Measured] | | Near-black | `#09090b`, text `#fafafa` | Login button [Measured] | | Dark panel | `#151524` | product sections [Measured] | | Page | `#fbfbf8`, `#f5f4ef` | page and sections [Measured] | | Text | `#18181b`, `#27272a`, `#3f3f46`, `#71717b` | ink steps [Measured] | | Border | `#e4e3de` | rules [Measured] | | Soft button | `#07070b` at 5 percent | Get in touch [Measured] | | Dark | page `#101013`, section `#1a1a1e`, text `#fafaf4`, `#a1a1aa`, rules `#27272b` | brand bands stay the same [Measured] | ### Typography | Role | Desktop | Mobile | Face and weight | |------|---------|--------|-----------------| | Display | 96 | not measured | ALT Mistral 500, line height not measured [Measured] | | Headline | 56 on 60 | 28 on 40 | ALT Mistral 500 [Measured] | | Title | 44 on 52 | 24 on 28 | ALT Mistral 500 [Measured] | | Footer title | 32 on 40 | not measured | ALT Mistral 500 [Measured] | | Body | 16 on 24 | same | Inter 400 [Measured] | | Button | 14 on 20 | not measured | ALT 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.