Design System inspired by Mistral AI

AI models. Bold orange on white, geometric patterns, technical aesthetic.

Usage

npx getdesign@latest add mistral

Run this command from your project root, then ask your AI assistant to use DESIGN.md for UI work.

Installs

Bookmarked

Not an official Mistral AI design system. A curated starting point for building Mistral AI-like UIs with your AI coding agent.

AI models. Bold orange on white, geometric patterns, technical aesthetic.

Preview

mistral.design.md

Brand System Catalog

DESIGN SYSTEM INSPIRATION OF MISTRAL AI

AI models. Bold orange on white, geometric patterns, technical aesthetic.

Explore the system View tokens

Color Palette

AI models. Bold orange on white, geometric patterns, technical aesthetic.

Primary

Mistral Orange

#f54e00

Brand color

Black

#000000

Brand color

White

#ffffff

Brand color

Light BG

#faf9f7

Brand color

Dark BG

#1a1a1a

Brand color

Gray

#6b6b6b

Brand color

Warm Gray

#e5e2de

Brand color

Typography

A type system inspired by Mistral AI.

Inter

Inter, Inter

IBM Plex Mono

IBM Plex Mono, Inter

DISPLAY / 64px / 700 / 1.1

EVERYONE

H1 / 48px / 700 / 1.2

A disciplined editorial voice

H2 / 32px / 600 / 1.3

Section heading

BODY / 16px / 400 / 1.6

Body copy reads at the size and rhythm extracted from the source spec. Lorem ipsum dolor sit amet.

SMALL / 14px / 400 / 1.5

Small

CODE / 14px / 400 / 1.6

Code

Buttons

Buttons, cards, and inputs follow the brand's visual language with consistent use of the primary color palette and border-radius conventions.

Not detected on this URL

Cards

Card patterns inspired by Mistral AI.

Not detected on this URL

Components

Other component primitives mapped from the Mistral AI spec.

Not detected on this URL

Design System Inspired by Mistral AI

1. Visual Theme & Atmosphere

AI models. Bold orange on white, geometric patterns, technical aesthetic.

Key Characteristics:

Bold orange (#F54E00) as signature brand color

Geometric patterns and grid-based layouts

Technical documentation-style aesthetic

Code blocks and API reference prominence

European AI brand identity

2. Color Palette & Roles

Primary

Mistral Orange (#F54E00): Brand color
Black (#000000): Brand color
White (#FFFFFF): Brand color
Light BG (#FAF9F7): Brand color
Dark BG (#1A1A1A): Brand color
Gray (#6B6B6B): Brand color
Warm Gray (#E5E2DE): Brand color

3. Typography Rules

Font Family

Display & UI: Inter, IBM Plex Mono

Hierarchy

Role	Size	Weight	Line Height
Display	64px	700	1.1
H1	48px	700	1.2
H2	32px	600	1.3
Body	16px	400	1.6
Small	14px	400	1.5
Code	14px	400	1.6

4. Component Stylings

Buttons, cards, and inputs follow the brand's visual language with consistent use of the primary color palette and border-radius conventions.

5. Layout Principles

Base unit: 4-8px
Max container: 1100-1200px
Consistent section spacing: 80-120px vertical

6. Depth & Elevation

Depth is communicated through background color shifts and subtle shadows or borders.

7. Do's and Don'ts

Do

Follow the established color palette strictly
Maintain typographic hierarchy
Use brand-consistent border-radius

Don't

Introduce off-brand colors
Use inconsistent spacing
Override the established visual language

8. Responsive Behavior

Breakpoint	Width
Mobile	<640px
Tablet	640-1024px
Desktop	>1024px

9. Agent Prompt Guide

Quick Color Reference

Mistral Orange: #F54E00
Black: #000000
White: #FFFFFF
Light BG: #FAF9F7
Dark BG: #1A1A1A
Gray: #6B6B6B

Typography

Font: Inter, IBM Plex Mono