# Mistral AI — Design System
> Frontier AI platform for enterprise-grade model customization, deployment, and autonomous agents.
- **Canonical:** https://uiuxskills.com/library/mistral-ai
- **Source:** https://mistral.ai
- **Category:** AI & LLM Platforms
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:14:07.462Z

---

---
version: alpha
name: Mistral AI
description: Frontier AI platform for enterprise-grade model customization, deployment, and autonomous agents.
tone: Authoritative, precise, innovative, and enterprise-focused.
color-scheme: light
colors:
  primary: "#FFAF01"
  secondary: "#0082E6"
  surface: "#FFFFFF"
  surface-invert: "#000000"
  on-surface: "#1A1A1A"
  on-surface-invert: "#FFFFFF"
  outline: "#E5E5E5"
  error: "#E51300"
  action-ghost: "#F5F5F5"
  brand-accent: "#FF8204"
typography:
  display-lg:
    fontFamily: Inter, sans-serif
    fontSize: 3rem
  headline-lg:
    fontFamily: Inter, sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: Inter, sans-serif
    fontSize: 1.5rem
  body-md:
    fontFamily: Inter, sans-serif
    fontSize: 1rem
  body-sm:
    fontFamily: Inter, sans-serif
    fontSize: 0.875rem
  label-md:
    fontFamily: Inter, sans-serif
    fontSize: 0.875rem
  label-sm:
    fontFamily: Inter, sans-serif
    fontSize: 0.75rem
rounded:
  sm: 2px
  md: 4px
  lg: 8px
  xl: 12px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "{colors.brand-accent}"
  button-secondary:
    backgroundColor: "{colors.action-ghost}"
    textColor: "{colors.on-surface}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface-invert}"
    textColor: "{colors.on-surface-invert}"
    typography: "{typography.body-md}"
  input-field:
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.primary}"
  link:
    textColor: "{colors.secondary}"
  link-hover:
    textColor: "{colors.primary}"
  badge:
    backgroundColor: "{colors.action-ghost}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-surface-invert}"
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 4px 6px rgba(0,0,0,0.10)
  lg: 0 10px 15px rgba(0,0,0,0.12)
---

## Overview

Mistral AI presents a sophisticated, high-performance aesthetic that balances technical precision with enterprise accessibility. The visual language is clean and authoritative, utilizing a bold, high-contrast color palette to signal innovation and reliability in the AI space.

## Colors

The color strategy focuses on high-contrast, functional clarity, using a signature orange to draw attention to primary actions while maintaining a neutral, professional foundation.

*   Primary (#FFAF01): Brand signature orange used for primary actions and highlights.
*   Secondary (#0082E6): Accent blue used for secondary actions and technical indicators.
*   Surface (inferred) (#FFFFFF): Primary background color for clean, high-contrast content presentation.
*   Surface-invert (#000000): Inverted surface color for high-impact dark sections.
*   On-surface (inferred) (#1A1A1A): Primary text color for readability on light surfaces.
*   On-surface-invert (inferred) (#FFFFFF): Text color for readability on dark surfaces.
*   Outline (inferred) (#E5E5E5): Subtle border color for structural separation.
*   Error (#E51300): Semantic error color for alerts and validation.
*   Action-ghost (#F5F5F5): Background for secondary/ghost buttons.
*   Brand-accent (#FF8204): Secondary brand orange for hover states and gradients.

## Typography

The typography uses the Inter typeface to ensure high legibility and a clean, modern aesthetic across all enterprise applications.

*   Display-lg (inferred): Used for hero headlines to establish authority.
*   Headline-lg (inferred): Used for section headers.
*   Headline-md (inferred): Used for card titles.
*   Body-md (inferred): Standard body text for readability.
*   Body-sm (inferred): Used for secondary descriptions and metadata.
*   Label-md (inferred): Used for button labels and UI controls.
*   Label-sm (inferred): Used for small UI labels and eyebrow text.

## Layout

The site utilizes a responsive grid system with a focus on centered, readable content blocks. Spacing is consistent, relying on a 4px base unit for margins and padding. The layout is mobile-first, with sections stacking vertically on smaller viewports and expanding to multi-column grids on desktop. The section order follows: nav, hero, news, social-proof, features, and footer.

## Elevation & Depth

Subtle single-layer shadows are used to provide depth, applied sparingly to differentiate interactive elements from the background.

*   elevation.sm: Subtle lift for small UI elements.
*   elevation.md: Standard lift for dropdowns or popovers.
*   elevation.lg: Pronounced lift for cards and modal overlays.

## Shapes

The design language favors a clean, slightly rounded aesthetic. Corner radii are consistent across components, creating a modern, approachable feel without being overly soft.

The `{rounded.md}` token is reserved for input fields and smaller UI components, while `{rounded.lg}` is applied to container cards to provide a cohesive, structured look.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
Buttons use `{typography.label-md}` and are defined by clear state changes. Use `button-primary` for main actions, which transitions to `button-primary-hover` using `{colors.brand-accent}`. Use `button-secondary` for ghost-style actions that require less visual weight.

### Card
Cards are the primary container for content, utilizing `{rounded.lg}` and `{colors.outline}` for borders. Use `card` for standard content blocks on light surfaces, or `card-elevated` for high-impact sections requiring the `{colors.surface-invert}` background.

### Input Field
Input fields utilize `{rounded.md}` and `{colors.outline}` to maintain a clean, enterprise-ready form style. Ensure the `input-field-focus` state is applied correctly with `{colors.primary}` to provide clear visual feedback during interaction.

### Badge
Badges are used for categorization and status indicators. Use the standard `badge` for neutral labels or `badge-error` for critical alerts, ensuring the typography remains `{typography.label-sm}`.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for primary call-to-action buttons. | Avoid using `{colors.primary}` for secondary or tertiary buttons. |
| Apply `{rounded.lg}` to all container cards. | Avoid mixing different border-radius values on the same component. |
| Use `{typography.headline-lg}` for main page titles. | Do not use `{typography.display-lg}` for body text. |
| Maintain consistent `{spacing.md}` between content sections. | Do not use excessive shadows that clash with the flat design language. |
| Use `{colors.secondary}` for text links to differentiate from body text. | Avoid using low-contrast text on `{colors.surface-invert}` backgrounds. |
| Apply `{colors.outline}` for all structural dividers. | Do not use `{colors.error}` for non-critical UI elements. |
| Use `{rounded.md}` for `input-field` components. | Do not use `elevation.lg` on non-interactive, flat content. |
| Use `{typography.label-md}` for button text. | Do not use `body-sm` for primary call-to-action labels. |

## Content Style

CTA style: Labels are imperative and action-oriented, using concise verbs like "Discover" or "Start" to drive immediate engagement.

Heading tone: Headlines are direct, benefit-driven, and concise, designed to communicate value propositions instantly.

Copy density: Content is scannable and rhythmic, utilizing short paragraphs and frequent bullet points to break down complex technical features for enterprise users.

## Imagery & Icons

Imagery combines abstract 3D graphics, clean product screenshots, and high-contrast iconography. Icons are simple, line-based, and consistent with the brand's technical focus, ensuring they remain legible at small scales while reinforcing the innovative nature of the platform.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Mistral AI, a minimal enterprise AI platform with an authoritative, precise tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its YAML token name — `{colors.primary}`, `{typography.body-md}`, `{spacing.lg}` — never hardcode hex values, font sizes, or pixel values.
2. Respect the components block exactly. `button-primary`, `button-secondary`, `card`, `card-elevated`, `input-field`, `badge`, and `badge-error` are the only defined variants; do not invent others.
3. Apply shapes per the Shapes narrative: `{rounded.md}` for input fields and small UI, `{rounded.lg}` for container cards. Do not mix radii on a single component.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it — e.g. using `{colors.primary}` on a secondary button — surface the conflict before proceeding.
5. Tokens marked "(inferred)" are visual approximations. If an authoritative source (theme file, Storybook, component metadata) exists, it supersedes the spec.

## Output contract

**Must:**
- Use named tokens for every color, spacing, radius, typography, and elevation value.
- Implement all defined states: `button-primary-hover` on hover, `input-field-focus` on focus, `badge-error` for critical alerts.
- Follow the 4px base spacing rhythm using `{spacing.xs}` through `{spacing.2xl}`.
- Use `{typography.label-md}` for button labels and `{typography.label-sm}` for badges.
- Apply `elevation.sm`/`elevation.md`/`elevation.lg` only on interactive or elevated elements per the Elevation narrative.

**Must NOT:**
- Invent colors, font sizes, or radii absent from the spec.
- Substitute generic utility defaults when a brand token exists.
- Add emoji, filler copy, or unsolicited marketing language.
- Use `elevation.lg` on flat, non-interactive content.
- Rewrite page copy, button labels, headings, or navigation items.
- Alter page section order (nav → hero → news → social-proof → features → footer).

## When in doubt
- Ask before introducing any token not present in the spec.
- Prefer composing existing components over adding new tokens.
- For ambiguous backgrounds use `{colors.surface}`; for text on light surfaces use `{colors.on-surface}`; for text on dark surfaces use `{colors.on-surface-invert}`.
- For unspecified breakpoints, default to mobile-first with one breakpoint at 768px per the Layout narrative.
- Inferred tokens are approximations; defer to any authoritative design system file if available.