Home
DESIGN.mdStar on GitHub

Frontier AI.
In your hands.

Frontier AI LLMs, assistants and agents — open, portable, and customizable, from Le Chat to La Plateforme.

Colors
Primary
surface-brand#FF5229Actions, brand fill
orange-600#FA500FHover, emphasis
tangerine-500#FF8204text-brand-5
Surfaces
surface-primary#FBFBF8Page (cream)
surface-secondary#F5F4EFCards, panels
surface-tertiary#EBE9E0Fills, hover
navy-950#151524Dark canvas
navy-900#242433Dark surface
border-primary#E4E3DEDividers (light)
Text (zinc — approx. from oklch)
text-primary#18181Bzinc-900
text-secondary#27272Azinc-800
text-muted#71717Azinc-500
text-invert#FAFAFAzinc-50 (on dark)
Semantic
blue-600#0082E6Info, text-brand-2
green-500#44BA82Success
red-600#E61300Danger
yellow-500#FFAF01Attention
Typography · Space Grotesk ≈ ALTMistral · Space Mono
display
600 · −0.03em
Frontier AI. In your hands.
40px600
h2
600 · −0.01em
Build and deploy AI apps with complete control
28px600
h3
500
Open, portable, customizable models
24px500
body-large
Inter · 400
Frontier-scale infrastructure for training and inference, from Le Chat to La Plateforme.
16px400
eyebrow
600 · uppercase
Research · Products · Solutions
12px600
mono
Space Mono · 400
model="mistral-large-latest" · temp=0.7 · 42 tok/s
12pxmono
La Plateforme · Chat completion playground
You
user
What makes Mistral models a good fit for building agents?
assistant
Press Run to stream a completion.
mistral-large-latestlatency —tokens —
Python · mistralai
# pip install mistralai from mistralai import Mistral client = Mistral(api_key=API_KEY) resp = client.chat.complete( model="mistral-large-latest", messages=[ {"role": "user", "content": "Why Mistral for agents?"}, ], temperature=0.7, ) print(resp.choices[0].message.content)
Components
Buttons
Input & model badges
Mistral Large Codestral Open weights Fine-tune
Spacing
space-1
4px
space-2
8px
space-3
12px
space-4
16px
space-6
24px
space-8
32px
space-12
48px
Guardrails
DO
Anchor light UI on the cream surfaces (#FBFBF8 → #EBE9E0) — the warm tint is identity, not plain white
Keep the flame mark's six colors fixed and in top-warm→bottom-cool order
Use orange #FF5229 as the single brand action color; blue/green/red carry info/success/danger
Pair Space Grotesk (display) with Space Mono (code, model IDs, metrics) — one role each
Use navy #151524, not black, as the dark canvas
DON'T
Blend the flame squares into a smooth gradient — they are discrete pixels
Use brand orange on large surfaces — it's an accent, not a background
Use pure #000000 / #FFFFFF for text or page — use zinc on cream/navy
Mix font roles (mono for headings, display for code)
Recolor the logo mark to a single hue — its multicolor is the brand