laowang/awesome-design-md
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
necatiozmen
2026-03-31 19:37:25 +03:00
commit 1145c998a1
128 changed files with 51549 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

261
design-md/mistral.ai/DESIGN.md Normal file
View File

@@ -0,0 +1,261 @@
# Design System: Mistral AI
## 1. Visual Theme & Atmosphere
Mistral AI's interface is a sun-drenched landscape rendered in code — a warm, bold, unapologetically European design that trades the typical blue-screen AI aesthetic for golden amber, burnt orange, and the feeling of late-afternoon light in southern France. Every surface glows with warmth: backgrounds fade from pale cream to deep amber, shadows carry golden undertones (`rgba(127, 99, 21, ...)`), and the brand's signature orange (`#fa520f`) burns through the page like a signal fire.
The design language is maximalist in its warmth but minimalist in its structure. Huge display headlines (82px) crash into the viewport with aggressive negative tracking (-2.05px), creating text blocks that feel like billboards or protest posters — declarations rather than descriptions. The typography uses Arial (likely a custom font with Arial as fallback) at extreme sizes, creating a raw, unadorned voice that says "we build frontier AI" with no decoration needed.
What makes Mistral distinctive is the complete commitment to a warm color temperature. The signature "block" identity — a gradient system flowing from bright yellow (`#ffd900`) through amber (`#ffa110`) to burnt orange (`#fa520f`) — creates a visual identity that's immediately recognizable. Even the shadows are warm, using amber-tinted blacks instead of cool grays. Combined with dramatic landscape photography in golden tones, the design feels less like a tech company and more like a European luxury brand that happens to build language models.
**Key Characteristics:**
- Golden-amber color universe: every tone from pale cream (#fffaeb) to burnt orange (#fa520f)
- Massive display typography (82px) with aggressive negative letter-spacing (-2.05px)
- Warm golden shadow system using amber-tinted rgba values
- The Mistral "M" block identity — a gradient from yellow to orange
- Dramatic landscape photography in warm golden tones
- Uppercase typography used strategically for section labels and CTAs
- Near-zero border-radius — sharp, architectural geometry
- French-European confidence: bold, warm, declarative
## 2. Color Palette & Roles
### Primary
- **Mistral Orange** (`#fa520f`): The core brand color — a vivid, saturated orange-red that anchors the entire identity. Used for primary emphasis, the brand block, and the highest-signal moments.
- **Mistral Flame** (`#fb6424`): A slightly warmer, lighter variant of the brand orange used for secondary brand moments and hover states.
- **Block Orange** (`#ff8105`): A pure orange used in the gradient block system — warmer and less red than Mistral Orange.
### Secondary & Accent
- **Sunshine 900** (`#ff8a00`): Deep golden amber — the darkest sunshine tone, used for strong accent moments.
- **Sunshine 700** (`#ffa110`): Warm amber-gold — the core sunshine accent for backgrounds and interactive elements.
- **Sunshine 500** (`#ffb83e`): Medium golden — balanced warmth for mid-level emphasis.
- **Sunshine 300** (`#ffd06a`): Light golden — for subtle warm tints and secondary backgrounds.
- **Block Gold** (`#ffe295`): Pale gold — soft background accents and gentle warmth.
- **Bright Yellow** (`#ffd900`): The brightest tone in the gradient — used at the "top" of the block identity.
### Surface & Background
- **Warm Ivory** (`#fffaeb`): The lightest page background — barely tinted with warmth, the foundation canvas.
- **Cream** (`#fff0c2`): The primary warm surface and secondary button background — noticeably golden.
- **Pure White** (`#ffffff`): Used for maximum contrast elements and popover surfaces.
- **Mistral Black** (`#1f1f1f`): The primary dark surface for buttons, text, and dark sections.
- **Accent Orange** (defined as `hsl(17, 96%, 52%)`): The functional accent color for interactive states.
### Neutrals & Text
- **Mistral Black** (`#1f1f1f`): Primary text color and dark button backgrounds — a near-black that's warmer than pure #000.
- **Black Tint** (defined as `hsl(0, 0%, 24%)`): A medium dark gray for secondary text on light backgrounds.
- **Pure White** (`#ffffff`): Text on dark surfaces and CTA labels.
### Semantic & Accent
- **Input Border** (defined as `hsl(240, 5.9%, 90%)`): A cool-tinted light gray for form borders — one of the few cool tones in the system.
- **White Overlay** (`oklab(1, 0, 0 / 0.088–0.1)`): Semi-transparent white for frosted glass effects and button overlays.
### Gradient System
- **Mistral Block Gradient**: The signature identity — a multi-step gradient flowing through Yellow (`#ffd900`) → Gold (`#ffe295`) → Amber (`#ffa110`) → Orange (`#ff8105`) → Flame (`#fb6424`) → Mistral Orange (`#fa520f`). This gradient appears in the logo blocks, section backgrounds, and decorative elements.
- **Golden Landscape Wash**: Photography and backgrounds use warm amber overlays creating a consistent golden temperature across the page.
- **Warm Shadow Cascade**: Multi-layered golden shadows that build depth with amber-tinted transparency rather than gray.
## 3. Typography Rules
### Font Family
- **Primary**: Likely a custom font (Font Source detected) with `Arial` as fallback, and extended stack: `ui-sans-serif, system-ui, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji`
### Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display / Hero | Arial (custom) | 82px (5.13rem) | 400 | 1.00 (tight) | -2.05px | Maximum impact, billboard scale |
| Section Heading | Arial (custom) | 56px (3.5rem) | 400 | 0.95 (ultra-tight) | normal | Feature section anchors |
| Sub-heading Large | Arial (custom) | 48px (3rem) | 400 | 0.95 (ultra-tight) | normal | Secondary section titles |
| Sub-heading | Arial (custom) | 32px (2rem) | 400 | 1.15 (tight) | normal | Card headings, feature names |
| Card Title | Arial (custom) | 30px (1.88rem) | 400 | 1.20 (tight) | normal | Mid-level headings |
| Feature Title | Arial (custom) | 24px (1.5rem) | 400 | 1.33 | normal | Small headings |
| Body / Button | Arial (custom) | 16px (1rem) | 400 | 1.50 | normal | Standard body, button text |
| Button Uppercase | Arial (custom) | 16px (1rem) | 400 | 1.50 | normal | Uppercase CTA labels |
| Caption / Link | Arial (custom) | 14px (0.88rem) | 400 | 1.43 | normal | Metadata, secondary links |
### Principles
- **Single weight, maximum impact**: The entire system uses weight 400 (regular) — even at 82px. This creates a surprisingly elegant effect where the size alone carries authority without needing bold weight.
- **Ultra-tight at scale**: Line-heights of 0.95–1.00 at display sizes create text blocks where ascenders nearly touch descenders from the line above — creating dense, poster-like composition.
- **Aggressive tracking on display**: -2.05px letter-spacing at 82px compresses the hero text into a monolithic block.
- **Uppercase as emphasis**: Strategic `text-transform: uppercase` on button labels and section markers creates a formal, European signage quality.
- **No weight variation**: Unlike most systems that use 300–700 weight range, Mistral uses 400 everywhere. Hierarchy comes from size and color, never weight.
## 4. Component Stylings
### Buttons
**Cream Surface**
- Background: Cream (`#fff0c2`)
- Text: Mistral Black (`#1f1f1f`)
- No visible border
- The warm, inviting secondary CTA
**Dark Solid**
- Background: Mistral Black (`#1f1f1f`)
- Text: Pure White (`#ffffff`)
- Padding: 12px (all sides)
- No visible border
- The primary action button — dark on warm
**Ghost / Transparent**
- Background: transparent with slight dark overlay (`oklab(0, 0, 0 / 0.1)`)
- Text: Mistral Black (`#1f1f1f`)
- Opacity: 0.4
- For secondary/de-emphasized actions
**Text / Underline**
- Background: transparent
- Text: Mistral Black (`#1f1f1f`)
- Padding: 8px 0px 0px (top-only)
- Minimal styling — text link as button
- For tertiary navigation actions
### Cards & Containers
- Background: Warm Ivory (`#fffaeb`), Cream (`#fff0c2`), or Pure White
- Border: minimal to none — containers defined by background color
- Radius: near-zero — sharp, architectural corners
- Shadow: warm golden multi-layer (`rgba(127, 99, 21, 0.12) -8px 16px 39px, rgba(127, 99, 21, 0.1) -33px 64px 72px, rgba(127, 99, 21, 0.06) -73px 144px 97px, ...`) — a dramatic, cascading warm shadow
- Distinctive: the golden shadow creates a "golden hour" lighting effect
### Inputs & Forms
- Border: `hsl(240, 5.9%, 90%)` — the sole cool-toned element
- Focus: accent color ring
- Minimal styling consistent with sparse aesthetic
### Navigation
- Transparent nav overlaying the warm hero
- Logo: Mistral "M" wordmark
- Links: Dark text (white on dark sections)
- CTA: Dark solid button or cream surface button
- Minimal, wide-spaced layout
### Image Treatment
- Dramatic landscape photography in warm golden tones
- The winding road through golden hills — a recurring visual motif
- The Mistral "M" rendered at large scale on golden backgrounds
- Warm color grading on all photography
- Full-bleed sections with photography
### Distinctive Components
**Mistral Block Identity**
- A row of colored blocks forming the gradient: yellow → amber → orange → burnt orange
- Each block gets progressively more orange/red
- The visual DNA of the brand — recognizable at any size
**Golden Shadow Cards**
- Cards elevated with warm amber multi-layered shadows
- 5 layers of shadow from 16px to 400px offset
- Creates a "floating in golden light" effect unique to Mistral
**Dark Footer Gradient**
- Footer transitions from warm amber to dark through a dramatic gradient
- Creates a "sunset" effect as the page ends
## 5. Layout Principles
### Spacing System
- Base unit: 8px
- Scale: 2px, 4px, 8px, 10px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 64px, 80px, 98px, 100px
- Button padding: 12px or 8px 0px (compact)
- Section vertical spacing: very generous (80px–100px)
### Grid & Container
- Max container width: approximately 1280px, centered
- Hero: full-width with massive typography overlaying warm backgrounds
- Feature sections: wide-format layouts with dramatic imagery
- Card grids: 2–3 column layouts
### Whitespace Philosophy
- **Bold declarations**: Huge headlines surrounded by generous whitespace create billboard-like impact — each statement gets its own breathing space.
- **Warm void**: Empty space itself feels warm because the backgrounds are tinted ivory/cream rather than pure white.
- **Photography as space-filler**: Large landscape images serve double duty as content and decorative whitespace.
### Border Radius Scale
- Near-zero: The dominant radius — sharp, architectural corners on most elements
- This extreme sharpness contrasts with the warmth of the colors, creating a tension between soft color and hard geometry.
## 6. Depth & Elevation
| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Page backgrounds, text blocks |
| Golden Float (Level 1) | Multi-layer warm shadow (5 layers, 12%→0% opacity, amber-tinted) | Feature cards, product showcases, elevated content |
**Shadow Philosophy**: Mistral uses a single but extraordinarily complex shadow — **five cascading layers** of amber-tinted shadow (`rgba(127, 99, 21, ...)`) that build from a close 16px offset to a distant 400px offset. The result is a rich, warm, "golden hour" lighting effect that makes elevated elements look like they're bathed in afternoon sunlight. This is the most distinctive shadow system in any major AI brand.
## 7. Do's and Don'ts
### Do
- Use the warm color spectrum exclusively: ivory, cream, amber, gold, orange
- Keep display typography at 82px+ with -2.05px letter-spacing for hero sections
- Use the Mistral block gradient (yellow → amber → orange) for brand moments
- Apply warm golden shadows (amber-tinted rgba) for elevated elements
- Use Mistral Black (#1f1f1f) for text — never pure #000000
- Keep font weight at 400 throughout — let size and color carry hierarchy
- Use sharp, architectural corners — near-zero border-radius
- Apply uppercase on button labels and section markers for European formality
- Use warm landscape photography with golden color grading
### Don't
- Don't introduce cool colors (blue, green, purple) — the palette is exclusively warm
- Don't use bold (700+) weight — 400 is the only weight
- Don't round corners — the sharp geometry is intentional
- Don't use cool-toned shadows — shadows must carry amber warmth
- Don't use pure white as a page background — always warm-tinted (#fffaeb minimum)
- Don't reduce hero text below 48px on desktop — the billboard scale is core
- Don't use more than 2 font weights — size variation replaces weight variation
- Don't add gradients outside the warm spectrum — no blue-to-purple, no cool transitions
- Don't use generic gray for text — even neutrals should be warm-tinted
## 8. Responsive Behavior
### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <640px | Single column, stacked everything, hero text reduces to ~32px |
| Tablet | 640–768px | Minor layout adjustments |
| Small Desktop | 768–1024px | 2-column layouts begin |
| Desktop | 1024–1280px | Full layout with maximum typography scale |
### Touch Targets
- Buttons use generous padding (12px minimum)
- Navigation elements adequately spaced
- Cards serve as large touch targets
### Collapsing Strategy
- **Navigation**: Collapses to hamburger on mobile
- **Hero text**: 82px → 56px → 48px → 32px progressive scaling
- **Feature sections**: Multi-column → stacked
- **Photography**: Scales proportionally, may crop on mobile
- **Block identity**: Scales down proportionally
### Image Behavior
- Landscape photography scales proportionally
- Warm color grading maintained at all sizes
- Block gradient elements resize fluidly
- No art direction changes — same warm composition at all sizes
## 9. Agent Prompt Guide
### Quick Color Reference
- Brand Orange: "Mistral Orange (#fa520f)"
- Page Background: "Warm Ivory (#fffaeb)"
- Warm Surface: "Cream (#fff0c2)"
- Primary Text: "Mistral Black (#1f1f1f)"
- Sunshine Amber: "Sunshine 700 (#ffa110)"
- Bright Gold: "Bright Yellow (#ffd900)"
- Text on Dark: "Pure White (#ffffff)"
### Example Component Prompts
- "Create a hero section on Warm Ivory (#fffaeb) with a massive headline at 82px Arial weight 400, line-height 1.0, letter-spacing -2.05px. Mistral Black (#1f1f1f) text. Add a dark solid CTA button (#1f1f1f bg, white text, 12px padding, sharp corners) and a cream secondary button (#fff0c2 bg)."
- "Design a feature card on Cream (#fff0c2) with sharp corners (no border-radius). Apply the golden shadow system: rgba(127, 99, 21, 0.12) -8px 16px 39px as the primary layer. Title at 32px weight 400, body at 16px."
- "Build the Mistral block identity: a row of colored blocks from Bright Yellow (#ffd900) through Sunshine 700 (#ffa110) to Mistral Orange (#fa520f). Sharp corners, no gaps."
- "Create a dark footer section on Mistral Black (#1f1f1f) with Pure White (#ffffff) text. Footer links at 14px. Add a warm gradient from Sunshine 700 (#ffa110) at the top fading to Mistral Black."
### Iteration Guide
1. Keep the warm temperature — "shift toward amber" not "shift toward gray"
2. Use size for hierarchy — 82px → 56px → 48px → 32px → 24px → 16px
3. Never add border-radius — sharp corners only
4. Shadows are always warm: "golden shadow with amber tones"
5. Font weight is always 400 — describe emphasis through size and color

25
design-md/mistral.ai/README.md Normal file
View File

@@ -0,0 +1,25 @@
# Mistral.ai — Design System
> Design.md extracted from the public [mistral.ai](https://mistral.ai.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files
| File | Description |
|------|-------------|
| `DESIGN.md` | Complete design system documentation (9 sections) |
| `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Mistral.ai design language.
## Preview
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
### Dark Mode
![Mistral.ai Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/mistral.ai/preview-dark-screenshot.png)
### Light Mode
![Mistral.ai Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/mistral.ai/preview-screenshot.png)

813
design-md/mistral.ai/preview-dark.html Normal file
View File

@@ -0,0 +1,813 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Mistral AI (Dark)</title>
<style>
:root {
--color-mistral-orange: #fa520f;
--color-flame: #fb6424;
--color-block-orange: #ff8105;
--color-sunshine-900: #ff8a00;
--color-sunshine-700: #ffa110;
--color-sunshine-500: #ffb83e;
--color-sunshine-300: #ffd06a;
--color-block-gold: #ffe295;
--color-bright-yellow: #ffd900;
--color-warm-ivory: #fffaeb;
--color-cream: #fff0c2;
--color-white: #ffffff;
--color-mistral-black: #1f1f1f;
--color-black-tint: hsl(0, 0%, 24%);
--color-input-border: hsl(240, 5.9%, 90%);
--font-primary: Arial, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
/* Dark mode */
--bg-page: #1f1f1f;
--bg-card: #2a2a2a;
--bg-nav: rgba(31, 31, 31, 0.92);
--text-primary: #ffffff;
--text-secondary: rgba(255, 255, 255, 0.7);
--text-muted: rgba(255, 255, 255, 0.4);
--border-color: rgba(255, 161, 16, 0.15);
--border-subtle: rgba(255, 161, 16, 0.08);
--section-label-color: var(--color-sunshine-700);
--golden-shadow: -8px 16px 39px rgba(127, 99, 21, 0.18),
-33px 64px 72px rgba(127, 99, 21, 0.14),
-73px 144px 97px rgba(127, 99, 21, 0.08);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: var(--bg-page);
color: var(--text-primary);
font-family: var(--font-primary);
font-size: 16px;
font-weight: 400;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/* NAV */
.nav {
position: sticky;
top: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 40px;
background: var(--bg-nav);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border-color);
}
.nav-brand {
font-family: var(--font-primary);
font-size: 18px;
font-weight: 400;
letter-spacing: -0.3px;
display: flex;
align-items: center;
gap: 10px;
color: var(--text-primary);
}
.nav-brand .mistral-block {
display: flex;
gap: 2px;
}
.nav-brand .mistral-block span {
width: 6px;
height: 18px;
display: inline-block;
}
.nav-links { display: flex; gap: 32px; align-items: center; }
.nav-links a {
color: var(--text-secondary);
text-decoration: none;
font-size: 14px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: color 0.2s;
}
.nav-links a:hover { color: var(--color-mistral-orange); }
.nav-cta {
background: var(--color-cream);
color: var(--color-mistral-black);
padding: 12px 24px;
border: none;
border-radius: 0;
font-size: 14px;
font-family: var(--font-primary);
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.5px;
cursor: pointer;
}
/* HERO */
.hero {
position: relative;
text-align: center;
padding: 120px 40px 100px;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 700px;
height: 700px;
transform: translate(-50%, -50%);
background: radial-gradient(circle, rgba(250, 82, 15, 0.10) 0%, rgba(255, 161, 16, 0.06) 40%, transparent 70%);
pointer-events: none;
}
.hero h1 {
font-family: var(--font-primary);
font-size: 82px;
font-weight: 400;
line-height: 1.0;
letter-spacing: -2.05px;
margin-bottom: 24px;
position: relative;
}
.hero h1 span { color: var(--color-mistral-orange); }
.hero p {
color: var(--text-secondary);
font-size: 18px;
line-height: 1.5;
margin-bottom: 40px;
position: relative;
}
.hero-buttons { display: flex; gap: 16px; justify-content: center; position: relative; }
/* MISTRAL BLOCK IDENTITY */
.block-identity {
display: flex;
gap: 3px;
justify-content: center;
margin-bottom: 40px;
position: relative;
}
.block-identity span {
width: 48px;
height: 12px;
display: inline-block;
}
/* BUTTONS */
.btn-cream {
background: var(--color-cream);
color: var(--color-mistral-black);
padding: 12px 24px;
border: none;
border-radius: 0;
font-size: 16px;
font-family: var(--font-primary);
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.5px;
cursor: pointer;
}
.btn-dark {
background: var(--color-white);
color: var(--color-mistral-black);
padding: 12px 24px;
border: none;
border-radius: 0;
font-size: 16px;
font-family: var(--font-primary);
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.5px;
cursor: pointer;
}
.btn-ghost {
background: transparent;
color: var(--text-primary);
padding: 12px 24px;
border: none;
border-radius: 0;
font-size: 16px;
font-family: var(--font-primary);
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.5px;
opacity: 0.5;
cursor: pointer;
}
.btn-text {
background: transparent;
color: var(--text-primary);
padding: 8px 0 0 0;
border: none;
border-radius: 0;
font-size: 16px;
font-family: var(--font-primary);
font-weight: 400;
text-decoration: underline;
cursor: pointer;
}
/* SECTIONS */
.section {
max-width: 1280px;
margin: 0 auto;
padding: 80px 40px;
}
.section-title {
font-family: var(--font-primary);
font-size: 14px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 2.52px;
color: var(--section-label-color);
margin-bottom: 12px;
}
.section-heading {
font-family: var(--font-primary);
font-size: 56px;
font-weight: 400;
line-height: 0.95;
letter-spacing: normal;
margin-bottom: 48px;
}
.section-divider {
border: none;
border-top: 1px solid var(--border-subtle);
margin: 0 40px;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
}
/* COLOR PALETTE */
.color-group { margin-bottom: 40px; }
.color-group-title {
font-size: 20px;
font-weight: 400;
line-height: 1.2;
margin-bottom: 20px;
color: var(--text-secondary);
}
.color-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 16px;
}
.color-swatch {
border: 1px solid var(--border-color);
border-radius: 0;
overflow: hidden;
}
.color-swatch-block {
height: 80px;
position: relative;
}
.color-swatch-info {
padding: 12px;
background: var(--bg-card);
}
.color-swatch-name { font-size: 13px; font-weight: 400; margin-bottom: 2px; }
.color-swatch-hex { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; letter-spacing: 0.5px; }
.color-swatch-role { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
/* TYPOGRAPHY */
.type-sample { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-subtle); }
.type-sample:last-child { border-bottom: none; }
.type-sample-text { margin-bottom: 8px; }
.type-sample-label {
font-size: 12px;
color: var(--text-muted);
}
/* BUTTONS SECTION */
.button-row {
display: flex;
flex-wrap: wrap;
gap: 20px;
align-items: flex-start;
}
.button-demo { text-align: center; }
.button-demo-label {
font-size: 11px;
color: var(--text-muted);
margin-top: 10px;
text-transform: uppercase;
letter-spacing: 0.55px;
}
/* CARDS */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.card {
background: var(--bg-card);
border-radius: 0;
padding: 28px;
}
.card-standard { border: none; }
.card-golden {
box-shadow: var(--golden-shadow);
}
.card-bordered {
background: #333333;
border: 1px solid var(--border-color);
}
.card h3 {
font-family: var(--font-primary);
font-size: 32px;
font-weight: 400;
line-height: 1.15;
margin-bottom: 12px;
}
.card p { color: var(--text-secondary); font-size: 15px; line-height: 1.63; }
.card-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.55px;
color: var(--color-sunshine-700);
margin-bottom: 16px;
}
/* SPACING */
.spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.spacing-item { text-align: center; }
.spacing-box {
background: rgba(250, 82, 15, 0.18);
border: 1px solid rgba(250, 82, 15, 0.35);
border-radius: 0;
margin-bottom: 8px;
}
.spacing-label {
font-size: 11px;
color: var(--text-muted);
}
/* RADIUS */
.radius-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.radius-item { text-align: center; }
.radius-box {
width: 80px;
height: 80px;
background: var(--bg-card);
border: 1px solid var(--border-color);
margin-bottom: 8px;
}
.radius-label {
font-size: 11px;
color: var(--text-muted);
}
.radius-context {
font-size: 11px;
color: var(--text-muted);
margin-top: 2px;
}
/* ELEVATION */
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; }
.elevation-card {
background: var(--bg-card);
border-radius: 0;
padding: 28px;
min-height: 160px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.elevation-flat {
border: none;
background: var(--bg-page);
box-shadow: none;
}
.elevation-golden {
box-shadow: -8px 16px 39px rgba(127, 99, 21, 0.18),
-33px 64px 72px rgba(127, 99, 21, 0.14),
-73px 144px 97px rgba(127, 99, 21, 0.08),
-130px 257px 131px rgba(127, 99, 21, 0.03),
-203px 400px 143px rgba(127, 99, 21, 0.01);
}
.elevation-name { font-size: 18px; font-weight: 400; margin-bottom: 8px; }
.elevation-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.elevation-level {
font-size: 11px;
color: var(--color-sunshine-700);
text-transform: uppercase;
letter-spacing: 0.55px;
margin-top: 16px;
}
/* GRADIENT STRIP */
.gradient-strip {
height: 64px;
margin-top: 48px;
background: linear-gradient(to right, #ffd900, #ffe295, #ffa110, #ff8105, #fb6424, #fa520f);
border-radius: 0;
}
.gradient-label {
font-size: 12px;
color: var(--text-muted);
margin-top: 8px;
text-align: center;
}
/* RESPONSIVE */
@media (max-width: 768px) {
.nav { padding: 12px 20px; }
.nav-links a:not(.nav-cta-wrapper) { display: none; }
.hero { padding: 80px 20px 60px; }
.hero h1 { font-size: 48px; letter-spacing: -1px; }
.section { padding: 60px 20px; }
.section-heading { font-size: 36px; }
.color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.card-grid { grid-template-columns: 1fr; }
.hero-buttons { flex-direction: column; align-items: center; }
.button-row { flex-direction: column; align-items: flex-start; }
}
</style>
</head>
<body>
<!-- NAV -->
<nav class="nav">
<div class="nav-brand">
<div class="mistral-block">
<span style="background: #ffd900;"></span>
<span style="background: #ffa110;"></span>
<span style="background: #ff8105;"></span>
<span style="background: #fb6424;"></span>
<span style="background: #fa520f;"></span>
</div>
Mistral AI
</div>
<div class="nav-links">
<a href="#colors">Colors</a>
<a href="#typography">Typography</a>
<a href="#buttons">Buttons</a>
<a href="#cards">Cards</a>
<a href="#spacing">Spacing</a>
<a href="#elevation">Elevation</a>
<button class="nav-cta">Get Started</button>
</div>
</nav>
<!-- HERO -->
<section class="hero">
<div class="block-identity">
<span style="background: #ffd900;"></span>
<span style="background: #ffe295;"></span>
<span style="background: #ffa110;"></span>
<span style="background: #ff8105;"></span>
<span style="background: #fb6424;"></span>
<span style="background: #fa520f;"></span>
</div>
<h1>Design System Preview:<br><span>Mistral AI</span></h1>
<p>Warm golden tokens from the sunshine gradient design system</p>
<div class="hero-buttons">
<button class="btn-cream">Explore Tokens</button>
<button class="btn-ghost">VIEW SOURCE</button>
</div>
</section>
<hr class="section-divider">
<!-- COLORS -->
<section class="section" id="colors">
<div class="section-title">01 / Color Palette</div>
<h2 class="section-heading">Color Palette & Roles</h2>
<div class="color-group">
<h3 class="color-group-title">Primary</h3>
<div class="color-grid">
<div class="color-swatch">
<div class="color-swatch-block" style="background: #fa520f;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Mistral Orange</div>
<div class="color-swatch-hex">#fa520f</div>
<div class="color-swatch-role">Core brand color, primary emphasis, signal fire</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #fb6424;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Mistral Flame</div>
<div class="color-swatch-hex">#fb6424</div>
<div class="color-swatch-role">Hover states, secondary brand moments</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #ff8105;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Block Orange</div>
<div class="color-swatch-hex">#ff8105</div>
<div class="color-swatch-role">Gradient block system, warm pure orange</div>
</div>
</div>
</div>
</div>
<div class="color-group">
<h3 class="color-group-title">Sunshine Spectrum</h3>
<div class="color-grid">
<div class="color-swatch">
<div class="color-swatch-block" style="background: #ffd900;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Bright Yellow</div>
<div class="color-swatch-hex">#ffd900</div>
<div class="color-swatch-role">Top of block identity gradient</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #ffe295;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Block Gold</div>
<div class="color-swatch-hex">#ffe295</div>
<div class="color-swatch-role">Pale gold, soft background accents</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #ffd06a;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Sunshine 300</div>
<div class="color-swatch-hex">#ffd06a</div>
<div class="color-swatch-role">Subtle warm tints, secondary backgrounds</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #ffb83e;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Sunshine 500</div>
<div class="color-swatch-hex">#ffb83e</div>
<div class="color-swatch-role">Medium golden, mid-level emphasis</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #ffa110;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Sunshine 700</div>
<div class="color-swatch-hex">#ffa110</div>
<div class="color-swatch-role">Core sunshine accent, interactive elements</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #ff8a00;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Sunshine 900</div>
<div class="color-swatch-hex">#ff8a00</div>
<div class="color-swatch-role">Deep golden amber, strong accent</div>
</div>
</div>
</div>
</div>
<div class="color-group">
<h3 class="color-group-title">Surface & Background</h3>
<div class="color-grid">
<div class="color-swatch">
<div class="color-swatch-block" style="background: #1f1f1f; border: 1px solid rgba(255,161,16,0.2);"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Mistral Black</div>
<div class="color-swatch-hex">#1f1f1f</div>
<div class="color-swatch-role">Dark mode page background</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #2a2a2a; border: 1px solid rgba(255,161,16,0.2);"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Card Surface</div>
<div class="color-swatch-hex">#2a2a2a</div>
<div class="color-swatch-role">Dark mode card background</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #fffaeb;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Warm Ivory</div>
<div class="color-swatch-hex">#fffaeb</div>
<div class="color-swatch-role">Light mode page background</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #fff0c2;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Cream</div>
<div class="color-swatch-hex">#fff0c2</div>
<div class="color-swatch-role">Primary warm surface, button backgrounds</div>
</div>
</div>
</div>
</div>
<div class="color-group">
<h3 class="color-group-title">Neutrals & Text</h3>
<div class="color-grid">
<div class="color-swatch">
<div class="color-swatch-block" style="background: #ffffff; border: 1px solid rgba(255,161,16,0.15);"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Pure White</div>
<div class="color-swatch-hex">#ffffff</div>
<div class="color-swatch-role">Primary text on dark surfaces</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: rgba(255,255,255,0.7); border: 1px solid rgba(255,161,16,0.15);"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">White 70%</div>
<div class="color-swatch-hex">rgba(255,255,255,0.7)</div>
<div class="color-swatch-role">Secondary text on dark surfaces</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #1f1f1f;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Mistral Black</div>
<div class="color-swatch-hex">#1f1f1f</div>
<div class="color-swatch-role">Primary text on light surfaces</div>
</div>
</div>
</div>
</div>
<!-- Gradient Strip -->
<div class="gradient-strip"></div>
<div class="gradient-label">Mistral Block Gradient: Yellow &rarr; Gold &rarr; Amber &rarr; Orange &rarr; Flame &rarr; Mistral Orange</div>
</section>
<hr class="section-divider">
<!-- TYPOGRAPHY -->
<section class="section" id="typography">
<div class="section-title">02 / Typography Scale</div>
<h2 class="section-heading">Typography Rules</h2>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-primary); font-size: 82px; font-weight: 400; line-height: 1.0; letter-spacing: -2.05px;">Display Hero</div>
<div class="type-sample-label">Display / Hero &mdash; 82px / 400 / 1.00 / -2.05px &mdash; Arial</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-primary); font-size: 56px; font-weight: 400; line-height: 0.95;">Section Heading</div>
<div class="type-sample-label">Section Heading &mdash; 56px / 400 / 0.95 / normal &mdash; Arial</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-primary); font-size: 48px; font-weight: 400; line-height: 0.95;">Sub-heading Large</div>
<div class="type-sample-label">Sub-heading Large &mdash; 48px / 400 / 0.95 / normal &mdash; Arial</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-primary); font-size: 32px; font-weight: 400; line-height: 1.15;">Sub-heading</div>
<div class="type-sample-label">Sub-heading &mdash; 32px / 400 / 1.15 / normal &mdash; Arial</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-primary); font-size: 30px; font-weight: 400; line-height: 1.20;">Card Title</div>
<div class="type-sample-label">Card Title &mdash; 30px / 400 / 1.20 / normal &mdash; Arial</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-primary); font-size: 24px; font-weight: 400; line-height: 1.33;">Feature Title</div>
<div class="type-sample-label">Feature Title &mdash; 24px / 400 / 1.33 / normal &mdash; Arial</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-primary); font-size: 16px; font-weight: 400; line-height: 1.50;">Body text for standard paragraphs, navigation links, and button labels. Arial delivers raw, unadorned clarity across all UI copy.</div>
<div class="type-sample-label">Body / Button &mdash; 16px / 400 / 1.50 / normal &mdash; Arial</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-primary); font-size: 16px; font-weight: 400; line-height: 1.50; text-transform: uppercase; letter-spacing: 0.5px;">UPPERCASE BUTTON LABEL</div>
<div class="type-sample-label">Button Uppercase &mdash; 16px / 400 / 1.50 / uppercase &mdash; Arial</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-primary); font-size: 14px; font-weight: 400; line-height: 1.43; color: var(--text-secondary);">Caption and metadata text for secondary links</div>
<div class="type-sample-label">Caption / Link &mdash; 14px / 400 / 1.43 / normal &mdash; Arial</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-primary); font-size: 14px; font-weight: 400; line-height: 1.43; text-transform: uppercase; letter-spacing: 2.52px; color: var(--color-sunshine-700);">SECTION LABEL TAG</div>
<div class="type-sample-label">Section Label &mdash; 14px / 400 / 2.52px / uppercase &mdash; Arial</div>
</div>
</section>
<hr class="section-divider">
<!-- BUTTONS -->
<section class="section" id="buttons">
<div class="section-title">03 / Button Variants</div>
<h2 class="section-heading">Buttons</h2>
<div class="button-row">
<div class="button-demo">
<button class="btn-cream">GET STARTED</button>
<div class="button-demo-label">Cream Surface</div>
</div>
<div class="button-demo">
<button class="btn-dark">LEARN MORE</button>
<div class="button-demo-label">White Solid</div>
</div>
<div class="button-demo">
<button class="btn-ghost">SECONDARY</button>
<div class="button-demo-label">Ghost / Transparent</div>
</div>
<div class="button-demo">
<button class="btn-text">Read Article</button>
<div class="button-demo-label">Text / Underline</div>
</div>
</div>
</section>
<hr class="section-divider">
<!-- CARDS -->
<section class="section" id="cards">
<div class="section-title">04 / Card Examples</div>
<h2 class="section-heading">Cards & Containers</h2>
<div class="card-grid">
<div class="card card-standard">
<div class="card-label">DARK SURFACE</div>
<h3>Standard Dark Card</h3>
<p>Standard content card on dark surface with sharp architectural corners. Containers defined by background color shifts rather than borders.</p>
</div>
<div class="card card-golden">
<div class="card-label">GOLDEN FLOAT</div>
<h3>Golden Shadow Card</h3>
<p>Elevated card with the signature five-layer warm amber shadow system. The golden glow radiates warmly against the dark background.</p>
</div>
<div class="card card-bordered">
<div class="card-label">BORDERED SURFACE</div>
<h3>Bordered Dark Card</h3>
<p>Elevated dark card with subtle golden border. Used for distinguishing content areas within dark sections.</p>
</div>
</div>
</section>
<hr class="section-divider">
<!-- SPACING -->
<section class="section" id="spacing">
<div class="section-title">05 / Spacing Scale</div>
<h2 class="section-heading">Spacing System</h2>
<p style="color: var(--text-secondary); margin-bottom: 32px;">Base unit: 8px. Scale builds from 2px to 100px.</p>
<div class="spacing-row">
<div class="spacing-item"><div class="spacing-box" style="width: 8px; height: 8px;"></div><div class="spacing-label">2px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 16px; height: 16px;"></div><div class="spacing-label">4px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 32px; height: 32px;"></div><div class="spacing-label">8px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 40px; height: 40px;"></div><div class="spacing-label">10px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 48px; height: 48px;"></div><div class="spacing-label">12px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 64px; height: 64px;"></div><div class="spacing-label">16px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 80px; height: 80px;"></div><div class="spacing-label">20px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 96px; height: 96px;"></div><div class="spacing-label">24px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 128px; height: 128px;"></div><div class="spacing-label">32px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 160px; height: 160px;"></div><div class="spacing-label">40px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 192px; height: 192px;"></div><div class="spacing-label">48px</div></div>
</div>
</section>
<hr class="section-divider">
<!-- BORDER RADIUS -->
<section class="section">
<div class="section-title">06 / Border Radius Scale</div>
<h2 class="section-heading">Border Radius</h2>
<p style="color: var(--text-secondary); margin-bottom: 32px;">Sharp, architectural geometry. Near-zero radius is the signature.</p>
<div class="radius-row">
<div class="radius-item"><div class="radius-box" style="border-radius: 0px;"></div><div class="radius-label">0px</div><div class="radius-context">Sharp (default)</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius: 0px; background: #333; border: 2px solid var(--color-sunshine-700);"></div><div class="radius-label">0px</div><div class="radius-context">Accent sharp</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius: 0px; box-shadow: var(--golden-shadow);"></div><div class="radius-label">0px</div><div class="radius-context">Elevated sharp</div></div>
</div>
</section>
<hr class="section-divider">
<!-- ELEVATION -->
<section class="section" id="elevation">
<div class="section-title">07 / Elevation & Depth</div>
<h2 class="section-heading">Depth & Elevation</h2>
<div class="elevation-grid">
<div class="elevation-card elevation-flat">
<div>
<div class="elevation-name">Flat</div>
<div class="elevation-desc">No shadow, no border. Dark page backgrounds and inline text blocks sitting directly on the Mistral Black canvas.</div>
</div>
<div class="elevation-level">LEVEL 0</div>
</div>
<div class="elevation-card elevation-golden">
<div>
<div class="elevation-name">Golden Float</div>
<div class="elevation-desc">Five-layer cascading warm shadow with amber-tinted transparency. The golden glow radiates warmly even against the dark background.</div>
</div>
<div class="elevation-level">LEVEL 1</div>
</div>
</div>
</section>
<div style="height: 80px;"></div>
</body>
</html>

812
design-md/mistral.ai/preview.html Normal file
View File

@@ -0,0 +1,812 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Mistral AI (Light)</title>
<style>
:root {
--color-mistral-orange: #fa520f;
--color-flame: #fb6424;
--color-block-orange: #ff8105;
--color-sunshine-900: #ff8a00;
--color-sunshine-700: #ffa110;
--color-sunshine-500: #ffb83e;
--color-sunshine-300: #ffd06a;
--color-block-gold: #ffe295;
--color-bright-yellow: #ffd900;
--color-warm-ivory: #fffaeb;
--color-cream: #fff0c2;
--color-white: #ffffff;
--color-mistral-black: #1f1f1f;
--color-black-tint: hsl(0, 0%, 24%);
--color-input-border: hsl(240, 5.9%, 90%);
--font-primary: Arial, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
/* Light mode */
--bg-page: #fffaeb;
--bg-card: #fff0c2;
--bg-nav: rgba(255, 250, 235, 0.92);
--text-primary: #1f1f1f;
--text-secondary: hsl(0, 0%, 24%);
--text-muted: #7f6315;
--border-color: rgba(127, 99, 21, 0.15);
--border-subtle: rgba(127, 99, 21, 0.08);
--section-label-color: var(--color-mistral-orange);
--golden-shadow: -8px 16px 39px rgba(127, 99, 21, 0.12),
-33px 64px 72px rgba(127, 99, 21, 0.10),
-73px 144px 97px rgba(127, 99, 21, 0.06);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: var(--bg-page);
color: var(--text-primary);
font-family: var(--font-primary);
font-size: 16px;
font-weight: 400;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/* NAV */
.nav {
position: sticky;
top: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 40px;
background: var(--bg-nav);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border-color);
}
.nav-brand {
font-family: var(--font-primary);
font-size: 18px;
font-weight: 400;
letter-spacing: -0.3px;
display: flex;
align-items: center;
gap: 10px;
}
.nav-brand .mistral-block {
display: flex;
gap: 2px;
}
.nav-brand .mistral-block span {
width: 6px;
height: 18px;
display: inline-block;
}
.nav-links { display: flex; gap: 32px; align-items: center; }
.nav-links a {
color: var(--text-secondary);
text-decoration: none;
font-size: 14px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: color 0.2s;
}
.nav-links a:hover { color: var(--color-mistral-orange); }
.nav-cta {
background: var(--color-mistral-black);
color: var(--color-white);
padding: 12px 24px;
border: none;
border-radius: 0;
font-size: 14px;
font-family: var(--font-primary);
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.5px;
cursor: pointer;
}
/* HERO */
.hero {
position: relative;
text-align: center;
padding: 120px 40px 100px;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 700px;
height: 700px;
transform: translate(-50%, -50%);
background: radial-gradient(circle, rgba(255, 161, 16, 0.10) 0%, rgba(250, 82, 15, 0.05) 40%, transparent 70%);
pointer-events: none;
}
.hero h1 {
font-family: var(--font-primary);
font-size: 82px;
font-weight: 400;
line-height: 1.0;
letter-spacing: -2.05px;
margin-bottom: 24px;
position: relative;
}
.hero h1 span { color: var(--color-mistral-orange); }
.hero p {
color: var(--text-secondary);
font-size: 18px;
line-height: 1.5;
margin-bottom: 40px;
position: relative;
}
.hero-buttons { display: flex; gap: 16px; justify-content: center; position: relative; }
/* MISTRAL BLOCK IDENTITY */
.block-identity {
display: flex;
gap: 3px;
justify-content: center;
margin-bottom: 40px;
position: relative;
}
.block-identity span {
width: 48px;
height: 12px;
display: inline-block;
}
/* BUTTONS */
.btn-dark {
background: var(--color-mistral-black);
color: var(--color-white);
padding: 12px 24px;
border: none;
border-radius: 0;
font-size: 16px;
font-family: var(--font-primary);
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.5px;
cursor: pointer;
}
.btn-cream {
background: var(--color-cream);
color: var(--color-mistral-black);
padding: 12px 24px;
border: none;
border-radius: 0;
font-size: 16px;
font-family: var(--font-primary);
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.5px;
cursor: pointer;
}
.btn-ghost {
background: transparent;
color: var(--color-mistral-black);
padding: 12px 24px;
border: none;
border-radius: 0;
font-size: 16px;
font-family: var(--font-primary);
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.5px;
opacity: 0.6;
cursor: pointer;
}
.btn-text {
background: transparent;
color: var(--color-mistral-black);
padding: 8px 0 0 0;
border: none;
border-radius: 0;
font-size: 16px;
font-family: var(--font-primary);
font-weight: 400;
text-decoration: underline;
cursor: pointer;
}
/* SECTIONS */
.section {
max-width: 1280px;
margin: 0 auto;
padding: 80px 40px;
}
.section-title {
font-family: var(--font-primary);
font-size: 14px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 2.52px;
color: var(--section-label-color);
margin-bottom: 12px;
}
.section-heading {
font-family: var(--font-primary);
font-size: 56px;
font-weight: 400;
line-height: 0.95;
letter-spacing: normal;
margin-bottom: 48px;
}
.section-divider {
border: none;
border-top: 1px solid var(--border-subtle);
margin: 0 40px;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
}
/* COLOR PALETTE */
.color-group { margin-bottom: 40px; }
.color-group-title {
font-size: 20px;
font-weight: 400;
line-height: 1.2;
margin-bottom: 20px;
color: var(--text-secondary);
}
.color-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 16px;
}
.color-swatch {
border: 1px solid var(--border-color);
border-radius: 0;
overflow: hidden;
}
.color-swatch-block {
height: 80px;
position: relative;
}
.color-swatch-info {
padding: 12px;
background: var(--bg-card);
}
.color-swatch-name { font-size: 13px; font-weight: 400; margin-bottom: 2px; }
.color-swatch-hex { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; letter-spacing: 0.5px; }
.color-swatch-role { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
/* TYPOGRAPHY */
.type-sample { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-subtle); }
.type-sample:last-child { border-bottom: none; }
.type-sample-text { margin-bottom: 8px; }
.type-sample-label {
font-size: 12px;
color: var(--text-muted);
}
/* BUTTONS SECTION */
.button-row {
display: flex;
flex-wrap: wrap;
gap: 20px;
align-items: flex-start;
}
.button-demo { text-align: center; }
.button-demo-label {
font-size: 11px;
color: var(--text-muted);
margin-top: 10px;
text-transform: uppercase;
letter-spacing: 0.55px;
}
/* CARDS */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.card {
background: var(--bg-card);
border-radius: 0;
padding: 28px;
}
.card-standard { border: none; }
.card-golden {
box-shadow: var(--golden-shadow);
}
.card-white {
background: var(--color-white);
border: 1px solid var(--border-color);
}
.card h3 {
font-family: var(--font-primary);
font-size: 32px;
font-weight: 400;
line-height: 1.15;
margin-bottom: 12px;
}
.card p { color: var(--text-secondary); font-size: 15px; line-height: 1.63; }
.card-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.55px;
color: var(--color-sunshine-700);
margin-bottom: 16px;
}
/* SPACING */
.spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.spacing-item { text-align: center; }
.spacing-box {
background: rgba(250, 82, 15, 0.12);
border: 1px solid rgba(250, 82, 15, 0.3);
border-radius: 0;
margin-bottom: 8px;
}
.spacing-label {
font-size: 11px;
color: var(--text-muted);
}
/* RADIUS */
.radius-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.radius-item { text-align: center; }
.radius-box {
width: 80px;
height: 80px;
background: var(--bg-card);
border: 1px solid var(--border-color);
margin-bottom: 8px;
}
.radius-label {
font-size: 11px;
color: var(--text-muted);
}
.radius-context {
font-size: 11px;
color: var(--text-muted);
margin-top: 2px;
}
/* ELEVATION */
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; }
.elevation-card {
background: var(--bg-card);
border-radius: 0;
padding: 28px;
min-height: 160px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.elevation-flat {
border: none;
background: var(--bg-page);
box-shadow: none;
}
.elevation-golden {
box-shadow: -8px 16px 39px rgba(127, 99, 21, 0.12),
-33px 64px 72px rgba(127, 99, 21, 0.10),
-73px 144px 97px rgba(127, 99, 21, 0.06),
-130px 257px 131px rgba(127, 99, 21, 0.02),
-203px 400px 143px rgba(127, 99, 21, 0.00);
}
.elevation-name { font-size: 18px; font-weight: 400; margin-bottom: 8px; }
.elevation-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.elevation-level {
font-size: 11px;
color: var(--color-sunshine-700);
text-transform: uppercase;
letter-spacing: 0.55px;
margin-top: 16px;
}
/* GRADIENT STRIP */
.gradient-strip {
height: 64px;
margin-top: 48px;
background: linear-gradient(to right, #ffd900, #ffe295, #ffa110, #ff8105, #fb6424, #fa520f);
border-radius: 0;
}
.gradient-label {
font-size: 12px;
color: var(--text-muted);
margin-top: 8px;
text-align: center;
}
/* RESPONSIVE */
@media (max-width: 768px) {
.nav { padding: 12px 20px; }
.nav-links a:not(.nav-cta-wrapper) { display: none; }
.hero { padding: 80px 20px 60px; }
.hero h1 { font-size: 48px; letter-spacing: -1px; }
.section { padding: 60px 20px; }
.section-heading { font-size: 36px; }
.color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.card-grid { grid-template-columns: 1fr; }
.hero-buttons { flex-direction: column; align-items: center; }
.button-row { flex-direction: column; align-items: flex-start; }
}
</style>
</head>
<body>
<!-- NAV -->
<nav class="nav">
<div class="nav-brand">
<div class="mistral-block">
<span style="background: #ffd900;"></span>
<span style="background: #ffa110;"></span>
<span style="background: #ff8105;"></span>
<span style="background: #fb6424;"></span>
<span style="background: #fa520f;"></span>
</div>
Mistral AI
</div>
<div class="nav-links">
<a href="#colors">Colors</a>
<a href="#typography">Typography</a>
<a href="#buttons">Buttons</a>
<a href="#cards">Cards</a>
<a href="#spacing">Spacing</a>
<a href="#elevation">Elevation</a>
<button class="nav-cta">Get Started</button>
</div>
</nav>
<!-- HERO -->
<section class="hero">
<div class="block-identity">
<span style="background: #ffd900;"></span>
<span style="background: #ffe295;"></span>
<span style="background: #ffa110;"></span>
<span style="background: #ff8105;"></span>
<span style="background: #fb6424;"></span>
<span style="background: #fa520f;"></span>
</div>
<h1>Design System Preview:<br><span>Mistral AI</span></h1>
<p>Warm golden tokens from the sunshine gradient design system</p>
<div class="hero-buttons">
<button class="btn-dark">Explore Tokens</button>
<button class="btn-cream">View Source</button>
</div>
</section>
<hr class="section-divider">
<!-- COLORS -->
<section class="section" id="colors">
<div class="section-title">01 / Color Palette</div>
<h2 class="section-heading">Color Palette & Roles</h2>
<div class="color-group">
<h3 class="color-group-title">Primary</h3>
<div class="color-grid">
<div class="color-swatch">
<div class="color-swatch-block" style="background: #fa520f;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Mistral Orange</div>
<div class="color-swatch-hex">#fa520f</div>
<div class="color-swatch-role">Core brand color, primary emphasis, signal fire</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #fb6424;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Mistral Flame</div>
<div class="color-swatch-hex">#fb6424</div>
<div class="color-swatch-role">Hover states, secondary brand moments</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #ff8105;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Block Orange</div>
<div class="color-swatch-hex">#ff8105</div>
<div class="color-swatch-role">Gradient block system, warm pure orange</div>
</div>
</div>
</div>
</div>
<div class="color-group">
<h3 class="color-group-title">Sunshine Spectrum</h3>
<div class="color-grid">
<div class="color-swatch">
<div class="color-swatch-block" style="background: #ffd900;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Bright Yellow</div>
<div class="color-swatch-hex">#ffd900</div>
<div class="color-swatch-role">Top of block identity gradient</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #ffe295;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Block Gold</div>
<div class="color-swatch-hex">#ffe295</div>
<div class="color-swatch-role">Pale gold, soft background accents</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #ffd06a;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Sunshine 300</div>
<div class="color-swatch-hex">#ffd06a</div>
<div class="color-swatch-role">Subtle warm tints, secondary backgrounds</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #ffb83e;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Sunshine 500</div>
<div class="color-swatch-hex">#ffb83e</div>
<div class="color-swatch-role">Medium golden, mid-level emphasis</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #ffa110;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Sunshine 700</div>
<div class="color-swatch-hex">#ffa110</div>
<div class="color-swatch-role">Core sunshine accent, interactive elements</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #ff8a00;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Sunshine 900</div>
<div class="color-swatch-hex">#ff8a00</div>
<div class="color-swatch-role">Deep golden amber, strong accent</div>
</div>
</div>
</div>
</div>
<div class="color-group">
<h3 class="color-group-title">Surface & Background</h3>
<div class="color-grid">
<div class="color-swatch">
<div class="color-swatch-block" style="background: #fffaeb; border: 1px solid rgba(127,99,21,0.15);"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Warm Ivory</div>
<div class="color-swatch-hex">#fffaeb</div>
<div class="color-swatch-role">Page background, lightest canvas</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #fff0c2;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Cream</div>
<div class="color-swatch-hex">#fff0c2</div>
<div class="color-swatch-role">Primary warm surface, button backgrounds</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #ffffff; border: 1px solid rgba(127,99,21,0.15);"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Pure White</div>
<div class="color-swatch-hex">#ffffff</div>
<div class="color-swatch-role">Maximum contrast, popover surfaces</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #1f1f1f;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Mistral Black</div>
<div class="color-swatch-hex">#1f1f1f</div>
<div class="color-swatch-role">Dark buttons, text, dark sections</div>
</div>
</div>
</div>
</div>
<div class="color-group">
<h3 class="color-group-title">Neutrals & Text</h3>
<div class="color-grid">
<div class="color-swatch">
<div class="color-swatch-block" style="background: #1f1f1f;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Mistral Black</div>
<div class="color-swatch-hex">#1f1f1f</div>
<div class="color-swatch-role">Primary text on light surfaces</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: hsl(0, 0%, 24%);"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Black Tint</div>
<div class="color-swatch-hex">hsl(0, 0%, 24%)</div>
<div class="color-swatch-role">Secondary text on light backgrounds</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #ffffff; border: 1px solid rgba(127,99,21,0.15);"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Pure White</div>
<div class="color-swatch-hex">#ffffff</div>
<div class="color-swatch-role">Text on dark surfaces, CTA labels</div>
</div>
</div>
</div>
</div>
<!-- Gradient Strip -->
<div class="gradient-strip"></div>
<div class="gradient-label">Mistral Block Gradient: Yellow &rarr; Gold &rarr; Amber &rarr; Orange &rarr; Flame &rarr; Mistral Orange</div>
</section>
<hr class="section-divider">
<!-- TYPOGRAPHY -->
<section class="section" id="typography">
<div class="section-title">02 / Typography Scale</div>
<h2 class="section-heading">Typography Rules</h2>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-primary); font-size: 82px; font-weight: 400; line-height: 1.0; letter-spacing: -2.05px;">Display Hero</div>
<div class="type-sample-label">Display / Hero &mdash; 82px / 400 / 1.00 / -2.05px &mdash; Arial</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-primary); font-size: 56px; font-weight: 400; line-height: 0.95;">Section Heading</div>
<div class="type-sample-label">Section Heading &mdash; 56px / 400 / 0.95 / normal &mdash; Arial</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-primary); font-size: 48px; font-weight: 400; line-height: 0.95;">Sub-heading Large</div>
<div class="type-sample-label">Sub-heading Large &mdash; 48px / 400 / 0.95 / normal &mdash; Arial</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-primary); font-size: 32px; font-weight: 400; line-height: 1.15;">Sub-heading</div>
<div class="type-sample-label">Sub-heading &mdash; 32px / 400 / 1.15 / normal &mdash; Arial</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-primary); font-size: 30px; font-weight: 400; line-height: 1.20;">Card Title</div>
<div class="type-sample-label">Card Title &mdash; 30px / 400 / 1.20 / normal &mdash; Arial</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-primary); font-size: 24px; font-weight: 400; line-height: 1.33;">Feature Title</div>
<div class="type-sample-label">Feature Title &mdash; 24px / 400 / 1.33 / normal &mdash; Arial</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-primary); font-size: 16px; font-weight: 400; line-height: 1.50;">Body text for standard paragraphs, navigation links, and button labels. Arial delivers raw, unadorned clarity across all UI copy.</div>
<div class="type-sample-label">Body / Button &mdash; 16px / 400 / 1.50 / normal &mdash; Arial</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-primary); font-size: 16px; font-weight: 400; line-height: 1.50; text-transform: uppercase; letter-spacing: 0.5px;">UPPERCASE BUTTON LABEL</div>
<div class="type-sample-label">Button Uppercase &mdash; 16px / 400 / 1.50 / uppercase &mdash; Arial</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-primary); font-size: 14px; font-weight: 400; line-height: 1.43; color: var(--text-secondary);">Caption and metadata text for secondary links</div>
<div class="type-sample-label">Caption / Link &mdash; 14px / 400 / 1.43 / normal &mdash; Arial</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-primary); font-size: 14px; font-weight: 400; line-height: 1.43; text-transform: uppercase; letter-spacing: 2.52px; color: var(--color-mistral-orange);">SECTION LABEL TAG</div>
<div class="type-sample-label">Section Label &mdash; 14px / 400 / 2.52px / uppercase &mdash; Arial</div>
</div>
</section>
<hr class="section-divider">
<!-- BUTTONS -->
<section class="section" id="buttons">
<div class="section-title">03 / Button Variants</div>
<h2 class="section-heading">Buttons</h2>
<div class="button-row">
<div class="button-demo">
<button class="btn-dark">GET STARTED</button>
<div class="button-demo-label">Dark Solid</div>
</div>
<div class="button-demo">
<button class="btn-cream">LEARN MORE</button>
<div class="button-demo-label">Cream Surface</div>
</div>
<div class="button-demo">
<button class="btn-ghost">SECONDARY</button>
<div class="button-demo-label">Ghost / Transparent</div>
</div>
<div class="button-demo">
<button class="btn-text">Read Article</button>
<div class="button-demo-label">Text / Underline</div>
</div>
</div>
</section>
<hr class="section-divider">
<!-- CARDS -->
<section class="section" id="cards">
<div class="section-title">04 / Card Examples</div>
<h2 class="section-heading">Cards & Containers</h2>
<div class="card-grid">
<div class="card card-standard">
<div class="card-label">CREAM SURFACE</div>
<h3>Warm Cream Card</h3>
<p>Standard content card on cream background with sharp architectural corners. Containers defined by background color, not borders. The warm void breathes naturally.</p>
</div>
<div class="card card-golden">
<div class="card-label">GOLDEN FLOAT</div>
<h3>Golden Shadow Card</h3>
<p>Elevated card with the signature five-layer warm amber shadow system. The golden hour lighting effect makes content feel bathed in afternoon sunlight.</p>
</div>
<div class="card card-white">
<div class="card-label">WHITE SURFACE</div>
<h3>Pure White Card</h3>
<p>Maximum contrast card on pure white with subtle golden border. Used for popover surfaces and moments requiring the highest visual clarity.</p>
</div>
</div>
</section>
<hr class="section-divider">
<!-- SPACING -->
<section class="section" id="spacing">
<div class="section-title">05 / Spacing Scale</div>
<h2 class="section-heading">Spacing System</h2>
<p style="color: var(--text-secondary); margin-bottom: 32px;">Base unit: 8px. Scale builds from 2px to 100px.</p>
<div class="spacing-row">
<div class="spacing-item"><div class="spacing-box" style="width: 8px; height: 8px;"></div><div class="spacing-label">2px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 16px; height: 16px;"></div><div class="spacing-label">4px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 32px; height: 32px;"></div><div class="spacing-label">8px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 40px; height: 40px;"></div><div class="spacing-label">10px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 48px; height: 48px;"></div><div class="spacing-label">12px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 64px; height: 64px;"></div><div class="spacing-label">16px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 80px; height: 80px;"></div><div class="spacing-label">20px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 96px; height: 96px;"></div><div class="spacing-label">24px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 128px; height: 128px;"></div><div class="spacing-label">32px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 160px; height: 160px;"></div><div class="spacing-label">40px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 192px; height: 192px;"></div><div class="spacing-label">48px</div></div>
</div>
</section>
<hr class="section-divider">
<!-- BORDER RADIUS -->
<section class="section">
<div class="section-title">06 / Border Radius Scale</div>
<h2 class="section-heading">Border Radius</h2>
<p style="color: var(--text-secondary); margin-bottom: 32px;">Sharp, architectural geometry. Near-zero radius is the signature.</p>
<div class="radius-row">
<div class="radius-item"><div class="radius-box" style="border-radius: 0px;"></div><div class="radius-label">0px</div><div class="radius-context">Sharp (default)</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius: 0px; background: var(--color-cream); border: 2px solid var(--color-sunshine-700);"></div><div class="radius-label">0px</div><div class="radius-context">Accent sharp</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius: 0px; box-shadow: var(--golden-shadow);"></div><div class="radius-label">0px</div><div class="radius-context">Elevated sharp</div></div>
</div>
</section>
<hr class="section-divider">
<!-- ELEVATION -->
<section class="section" id="elevation">
<div class="section-title">07 / Elevation & Depth</div>
<h2 class="section-heading">Depth & Elevation</h2>
<div class="elevation-grid">
<div class="elevation-card elevation-flat">
<div>
<div class="elevation-name">Flat</div>
<div class="elevation-desc">No shadow, no border. Page backgrounds and inline text blocks sitting directly on the warm ivory canvas.</div>
</div>
<div class="elevation-level">LEVEL 0</div>
</div>
<div class="elevation-card elevation-golden">
<div>
<div class="elevation-name">Golden Float</div>
<div class="elevation-desc">Five-layer cascading warm shadow with amber-tinted transparency. The signature golden hour lighting effect unique to Mistral.</div>
</div>
<div class="elevation-level">LEVEL 1</div>
</div>
</div>
</section>
<div style="height: 80px;"></div>
</body>
</html>