Mistral

A sharp-cornered, editorial-engineering interface built on a warm off-white canvas (#fbfbf8) with pure-black ink and a single high-voltage orange (#ff5229) carried almost entirely through a pixel-grid hero artwork. The system reads as precise and technical — zero border-radius on buttons, cards, and inputs, a flat near-shadowless surface treatment, monospaced micro-labels over imagery, and a large geometric display face (ALTMistral) set against compact Inter body text. Brand voltage comes from the orange tile-grid and the hard-edged, grid-ruled layout rather than from color washes or soft cards.

mistral.ai

Works with Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit

↓ .md ↓ All files

loading…

Color Palette

Accent

Neutrals

Typography

display 32px · 500 · 1.25

The quick brown fox jumps

heading 16px · 400 · 1.5

The quick brown fox jumps

body 16px · 400 · 1.5

The quick brown fox jumps

button 16px · 400 · 1.5

The quick brown fox jumps

Spacing & Shape

Spacing

Name	Value	Preview
xxs	4px
xs	8px
sm	12px
md	16px
lg	24px
xl	32px
xxl	40px
xxxl	48px
huge	56px
section	80px
section-xl	128px

Border Radius

Name	Value	Preview
none	0px
xs	4px
sm	6px
md	8px
lg	12px
xl	32px

FAQ

What colors does Mistral use?: Mistral's core palette includes #000000, #000000, #07070b, #fbfbf8, #f5f4ef. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the Mistral DESIGN.md.
What font does Mistral use?: Mistral's primary typeface is ALTMistral. The complete type scale (sizes, weights, line-height and letter-spacing per role), with an open substitute where the original is licensed, is documented in the DESIGN.md.
What is the Mistral design system?: A sharp-cornered, editorial-engineering interface built on a warm off-white canvas (#fbfbf8) with pure-black ink and a single high-voltage orange (#ff5229) carried almost entirely through a pixel-gri…

More like this

↓ .md ↓ All files

loading…