Design System Preview: Mistral AI (Light)

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

Warm Ivory

#fffaeb

Page background, lightest canvas

Cream

#fff0c2

Primary warm surface, button backgrounds

Pure White

#ffffff

Maximum contrast, popover surfaces

Mistral Black

#1f1f1f

Dark buttons, text, dark sections

Neutrals & Text

Mistral Black

#1f1f1f

Primary text on light surfaces

Black Tint

hsl(0, 0%, 24%)

Secondary text on light backgrounds

Pure White

#ffffff

Text on dark surfaces, CTA labels

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

Dark Solid

Cream Surface

Ghost / Transparent

Text / Underline

04 / Card Examples

Cards & Containers

CREAM SURFACE

Warm Cream Card

Standard content card on cream background with sharp architectural corners. Containers defined by background color, not borders. The warm void breathes naturally.

GOLDEN FLOAT

Golden Shadow Card

Elevated card with the signature five-layer warm amber shadow system. The golden hour lighting effect makes content feel bathed in afternoon sunlight.

WHITE SURFACE

Pure White Card

Maximum contrast card on pure white with subtle golden border. Used for popover surfaces and moments requiring the highest visual clarity.

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. Page backgrounds and inline text blocks sitting directly on the warm ivory canvas.

LEVEL 0

Golden Float

Five-layer cascading warm shadow with amber-tinted transparency. The signature golden hour lighting effect unique to Mistral.

LEVEL 1

Design System Preview:Mistral AI