# Design System
Inspired by 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