Mistral AI

Overview

Mistral AI is a frontier AI platform designed for enterprises seeking to build, customize, and deploy autonomous AI systems at scale. The brand embodies a philosophy of **Energetic Minimalism**—a design movement that pairs vibrant, saturated accent colors (vivid orange-red and golden yellow) with a clean, light neutral canvas (cream-white surfaces) to convey both technical sophistication and accessible power. The UI evokes a sense of controlled energy: bold, purposeful, and unafraid of color, yet grounded in clarity and precision. The emotional response is one of confidence and forward momentum—the interface feels like the frontier itself, where cutting-edge capability meets practical usability.

The brand voice is direct, authoritative, and unadorned. Mistral speaks in declarative statements without hedging: "Frontier AI. In your hands." The vocabulary emphasizes agency, capability, and scale—words like "customize," "deploy," "autonomous," and "enterprise" dominate the messaging. Tone is never breathless or hyperbolic; instead, it's matter-of-fact and grounded in technical credibility. Example sentence in brand voice: "Deploy multimodal AI agents that scale to your infrastructure, not the other way around."

Colors

The Mistral color system is built on a **high-contrast, accent-driven palette** that prioritizes visual clarity and brand distinctiveness. Primary (#ff5229, a vivid orange-red) is the signature accent color used exclusively on call-to-action buttons, interactive elements, and brand-critical highlights. This warm, energetic hue commands attention without aggression, appearing frequently in hero sections and throughout the interface as the primary interactive layer. Secondary (#ffaf01, a golden yellow) provides a complementary accent for supporting highlights, badges, and secondary information layers, creating visual rhythm and depth. Tertiary (#0082e6, a vibrant blue) is reserved for links, status indicators, and data visualization accents, offering a cool counterpoint to the warm primary p

Typography

The Mistral typography system uses **Inter as the primary typeface**, a geometric sans-serif that conveys technical precision and modern clarity. The type hierarchy spans eight levels from display (96px, 500 weight, -0.02em tracking) down to label-sm (12px, 500 weight, 0.02em tracking), with each level calibrated for its specific use case. Display and headline-lg sizes (96px and 72px respectively) are reserved for hero statements and major section breaks, using tight negative letter-spacing (-0.02em) to create visual impact and reduce perceived weight. Body text (16px, 400 weight, -0.01em tracking) is set at 24px line-height to ensure comfortable reading at standard viewing distances. Labels and buttons use 500 weight to signal interactivity and draw focus. When small labels (12px) appear

Layout

Mistral uses a **12-column fluid grid system** with a maximum container width of 1280px, allowing content to breathe on large displays while maintaining focus on medium screens. The spacing scale is semantic and hierarchical: unit (8px) serves as the base increment, with sm (12px) for tight component spacing, md (24px) for standard section gutters, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. White-space is used generously—sections are separated by lg spacing (40px) to create visual rest and guide the eye through content hierarchy. The gutter (24px) is applied consistently to left/right margins on all container elements, ensuring a uniform 24px breathing room from viewport edges on desktop. Hero sections use xl spacing (64px) above and below to est

Elevation & Depth

Depth in Mistral is achieved through a **subtle shadow and layering system** that avoids heavy drop-shadows in favor of refined, contextual elevation. Level 1 (Base/Surface) uses no shadow, relying on the warm cream background (#fbfbf8) as the foundation. Level 2 (Standard Cards and Containers) applies elevation.sm (0 1px 2px rgba(0, 0, 0, 0.06)), a barely-perceptible shadow that separates the card from the background without visual weight. Level 3 (Elevated Cards, Modals, and Hover States) uses elevation.md (0 4px 12px rgba(0, 0, 0, 0.08)), a soft, diffuse shadow that creates clear separation

Shapes

Mistral employs a **Soft-Technical** shape philosophy that balances geometric precision with subtle approachability. Border-radius values are conservative and consistent: sm (0.25rem / 4px) is used for small, densely-packed components like badges and inline buttons; DEFAULT (0.5rem / 8px) is applied to standard input fields and small cards; md (0.75rem / 12px) is used for medium-sized containers and list items; lg (1rem / 16px) is the default for primary cards and larger interactive surfaces; xl (1.5rem / 24px) is reserved for hero sections, modals, and prominent containers; full (9999px) is u

Components

Action Elements Buttons are the primary interactive layer and come in three variants. **Button-primary** (background: #ff5229, text: white, 40px height, 8px 24px padding, 0.5rem radius) is the dominant call-to-action, used for "Start building" and "Contact sales" actions. On hover, the background shifts to #e51300 (a deeper red) with a 150ms transition, creating responsive feedback without animation lag. **Button-secondary** uses the same styling as primary but is reserved for secondary actions within modals or card footers. **Button-ghost** (background: rgba(7, 7, 11, 0.05), 1px outline-variant border, 40px height) is used for tertiary actions and navigation links; on hover, the background increases to rgba(7, 7, 11, 0.08) with the same 150ms transition. All buttons use label-md typog

Do's and Don'ts

**Do**

• Do use primary (#ff5229) exclusively for high-priority CTAs and interactive states—it's the brand's signature accent and should command attention.
• Do maintain the 24px gutter spacing on all container edges to ensure consistent breathing room and visual rhythm across pages.
• Do apply the 150ms cubic-bezier(0.4, 0, 0.2, 1) transition to all interactive state changes (hover, focus, active) for responsive, fluid feedback.
• Do use the full rounded scale (sm through xl) to create visual hierarchy—smaller components use tighter radii, larger surfaces use softer radii.
• Do pair headline text with negative letter-spacing (-0.02em to -0.01em) to create visual impact and reinforce the premium, technical brand voice.

**Don't**

• Don't use primary (#ff5229) for body text, backgrounds, or non-interactive elements—reserve it exclusively for CTAs and interactive highlights.
• Don't apply shadows heavier than elevation.lg (0 20px 30px rgba(0, 0, 0, 0.1))—the brand favors subtle, refined depth over dramatic drop-shadows.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full)—consistency in shape language reinforces brand coherence.
• Don't set body text smaller than 16px or larger than 20px without explicit design justification—the type system is calibrated for readability and hierarchy.
• Don't mix typefaces—Inter is the sole primary typeface; avoid system-ui, sans-serif, or other fallbacks in component definitions.