Design System Preview:
Mistral AI

Warm golden tokens from the sunshine gradient design system

01 / Color Palette

Color Palette & Roles

Primary

Mistral Orange
#fa520f
Core brand color, primary emphasis, signal fire
Mistral Flame
#fb6424
Hover states, secondary brand moments
Block Orange
#ff8105
Gradient block system, warm pure orange

Sunshine Spectrum

Bright Yellow
#ffd900
Top of block identity gradient
Block Gold
#ffe295
Pale gold, soft background accents
Sunshine 300
#ffd06a
Subtle warm tints, secondary backgrounds
Sunshine 500
#ffb83e
Medium golden, mid-level emphasis
Sunshine 700
#ffa110
Core sunshine accent, interactive elements
Sunshine 900
#ff8a00
Deep golden amber, strong accent

Surface & Background

Mistral Black
#1f1f1f
Dark mode page background
Card Surface
#2a2a2a
Dark mode card background
Warm Ivory
#fffaeb
Light mode page background
Cream
#fff0c2
Primary warm surface, button backgrounds

Neutrals & Text

Pure White
#ffffff
Primary text on dark surfaces
White 70%
rgba(255,255,255,0.7)
Secondary text on dark surfaces
Mistral Black
#1f1f1f
Primary text on light surfaces
Mistral Block Gradient: Yellow → Gold → Amber → Orange → Flame → Mistral Orange
02 / Typography Scale

Typography Rules

Display Hero
Display / Hero — 82px / 400 / 1.00 / -2.05px — Arial
Section Heading
Section Heading — 56px / 400 / 0.95 / normal — Arial
Sub-heading Large
Sub-heading Large — 48px / 400 / 0.95 / normal — Arial
Sub-heading
Sub-heading — 32px / 400 / 1.15 / normal — Arial
Card Title
Card Title — 30px / 400 / 1.20 / normal — Arial
Feature Title
Feature Title — 24px / 400 / 1.33 / normal — Arial
Body text for standard paragraphs, navigation links, and button labels. Arial delivers raw, unadorned clarity across all UI copy.
Body / Button — 16px / 400 / 1.50 / normal — Arial
UPPERCASE BUTTON LABEL
Button Uppercase — 16px / 400 / 1.50 / uppercase — Arial
Caption and metadata text for secondary links
Caption / Link — 14px / 400 / 1.43 / normal — Arial
SECTION LABEL TAG
Section Label — 14px / 400 / 2.52px / uppercase — Arial
03 / Button Variants

Buttons

Cream Surface
White Solid
Ghost / Transparent
Text / Underline
04 / Card Examples

Cards & Containers

DARK SURFACE

Standard Dark Card

Standard content card on dark surface with sharp architectural corners. Containers defined by background color shifts rather than borders.

GOLDEN FLOAT

Golden Shadow Card

Elevated card with the signature five-layer warm amber shadow system. The golden glow radiates warmly against the dark background.

BORDERED SURFACE

Bordered Dark Card

Elevated dark card with subtle golden border. Used for distinguishing content areas within dark sections.

05 / Spacing Scale

Spacing System

Base unit: 8px. Scale builds from 2px to 100px.

2px
4px
8px
10px
12px
16px
20px
24px
32px
40px
48px
06 / Border Radius Scale

Border Radius

Sharp, architectural geometry. Near-zero radius is the signature.

0px
Sharp (default)
0px
Accent sharp
0px
Elevated sharp
07 / Elevation & Depth

Depth & Elevation

Flat
No shadow, no border. Dark page backgrounds and inline text blocks sitting directly on the Mistral Black canvas.
LEVEL 0
Golden Float
Five-layer cascading warm shadow with amber-tinted transparency. The golden glow radiates warmly even against the dark background.
LEVEL 1