cdragon 0.1.0

package/skills/to-html/designs/miro.DESIGN.md

@@ -0,0 +1,272 @@
+---
+id: miro
+name: Miro
+country: US
+category: design-tools
+homepage: "https://miro.com"
+primary_color: "#ffd02f"
+logo:
+  type: simpleicons
+  slug: miro
+verified: "2026-05-15"
+omd: "0.1"
+ds:
+  name: Mirotone
+  url: "https://mirotone.xyz"
+  type: system
+  description: Miro's CSS component library for apps built on the Miro platform.
+  og_image: "https://www.mirotone.xyz/cover.png"
+---
+
+# Design System Inspiration of Miro
+
+## 1. Visual Theme & Atmosphere
+
+Miro's website is a clean, collaborative-tool-forward platform that communicates "visual thinking" through generous whitespace, pastel accent colors, and a confident geometric font. The design uses a predominantly white canvas with near-black text (`#1c1c1e`) and a distinctive pastel color palette — coral, rose, teal, orange, yellow, moss — each representing different collaboration contexts.
+
+The typography uses Roobert PRO Medium as the primary display font with OpenType character variants (`"blwf", "cv03", "cv04", "cv09", "cv11"`) and negative letter-spacing (-1.68px at 56px). Noto Sans handles body text with its own stylistic set (`"liga" 0, "ss01", "ss04", "ss05"`). The design is built with Framer, giving it smooth animations and modern component patterns.
+
+**Key Characteristics:**
+- White canvas with near-black (`#1c1c1e`) text
+- Roobert PRO Medium with multiple OpenType character variants
+- Pastel accent palette: coral, rose, teal, orange, yellow, moss (light + dark pairs)
+- Blue 450 (`#5b76fe`) as primary interactive color
+- Success green (`#00b473`) for positive states
+- Generous border-radius: 8px–50px range
+- Framer-built with smooth motion patterns
+- Ring shadow border: `rgb(224,226,232) 0px 0px 0px 1px`
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Near Black** (`#1c1c1e`): Primary text
+- **White** (`#ffffff`): `--tw-color-white`, primary surface
+- **Blue 450** (`#5b76fe`): `--tw-color-blue-450`, primary interactive
+- **Actionable Pressed** (`#2a41b6`): `--tw-color-actionable-pressed`
+
+### Pastel Accents (Light/Dark pairs)
+- **Coral**: Light `#ffc6c6` / Dark `#600000`
+- **Rose**: Light `#ffd8f4` / Dark (implied)
+- **Teal**: Light `#c3faf5` / Dark `#187574`
+- **Orange**: Light `#ffe6cd`
+- **Yellow**: Dark `#746019`
+- **Moss**: Dark `#187574`
+- **Pink** (`#fde0f0`): Soft pink surface
+- **Red** (`#fbd4d4`): Light red surface
+- **Dark Red** (`#e3c5c5`): Muted red
+
+### Semantic
+- **Success** (`#00b473`): `--tw-color-success-accent`
+
+### Neutral
+- **Slate** (`#555a6a`): Secondary text
+- **Input Placeholder** (`#a5a8b5`): `--tw-color-input-placeholder`
+- **Border** (`#c7cad5`): Button borders
+- **Ring** (`rgb(224,226,232)`): Shadow-as-border
+
+## 3. Typography Rules
+
+### Font Families
+- **Display**: `Roobert PRO Medium`, fallback: Placeholder — `"blwf", "cv03", "cv04", "cv09", "cv11"`
+- **Display Variants**: `Roobert PRO SemiBold`, `Roobert PRO SemiBold Italic`, `Roobert PRO`
+- **Body**: `Noto Sans` — `"liga" 0, "ss01", "ss04", "ss05"`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing |
+|------|------|------|--------|-------------|----------------|
+| Display Hero | Roobert PRO Medium | 56px | 400 | 1.15 | -1.68px |
+| Section Heading | Roobert PRO Medium | 48px | 400 | 1.15 | -1.44px |
+| Card Title | Roobert PRO Medium | 24px | 400 | 1.15 | -0.72px |
+| Sub-heading | Noto Sans | 22px | 400 | 1.35 | -0.44px |
+| Feature | Roobert PRO Medium | 18px | 600 | 1.35 | normal |
+| Body | Noto Sans | 18px | 400 | 1.45 | normal |
+| Body Standard | Noto Sans | 16px | 400–600 | 1.50 | -0.16px |
+| Button | Roobert PRO Medium | 17.5px | 700 | 1.29 | 0.175px |
+| Caption | Roobert PRO Medium | 14px | 400 | 1.71 | normal |
+| Small | Roobert PRO Medium | 12px | 400 | 1.15 | -0.36px |
+| Micro Uppercase | Roobert PRO | 10.5px | 400 | 0.90 | uppercase |
+
+## 4. Component Stylings
+
+### Buttons
+
+**Blue Primary**
+- Background: `#5b76fe` (`--tw-color-blue-450`)
+- Text: `#ffffff`
+- Radius: 8px
+- Padding: 7px 12px
+- Font: 17.5px / 700 / Roobert PRO Medium
+- Hover: `#2a41b6` (`--tw-color-actionable-pressed`)
+- Use: Primary CTA — implied from interactive blue
+
+**Outlined**
+- Background: transparent
+- Text: `#1c1c1e`
+- Border: 1px solid `#c7cad5`
+- Radius: 8px
+- Padding: 7px 12px
+- Font: 17.5px / 700 / Roobert PRO Medium
+- Use: Secondary outlined button
+
+**White Circle**
+- Background: `#ffffff`
+- Radius: 50%
+- Padding: 12px (icon button)
+- Shadow: `rgb(224,226,232) 0px 0px 0px 1px` (ring shadow)
+- Use: Circular icon button
+
+### Inputs
+
+**Default**
+- Background: `#ffffff`
+- Text: `#1c1c1e`
+- Border: 1px solid `#e9eaef`
+- Radius: 8px
+- Padding: 16px
+- Font: 16px / 400 / Noto Sans
+- Placeholder: `#a5a8b5` (`--tw-color-input-placeholder`)
+- Use: Standard input
+
+### Cards
+
+**Standard**
+- Background: `#ffffff`
+- Radius: 12px
+- Padding: 16px
+- Shadow: `rgb(224,226,232) 0px 0px 0px 1px` (ring shadow)
+- Use: Default card with ring-shadow border
+
+**Pastel Surface**
+- Background: pastel accent (e.g., `#ffc6c6` Coral, `#c3faf5` Teal, `#ffe6cd` Orange, `#fde0f0` Pink)
+- Text: `#1c1c1e`
+- Radius: 12-24px
+- Padding: 24px
+- Use: Feature card with pastel surface
+
+**Large Panel**
+- Background: `#ffffff`
+- Radius: 24px
+- Padding: 32px
+- Shadow: `rgb(224,226,232) 0px 0px 0px 1px`
+- Use: Large containers
+
+### Badges
+
+**Default**
+- Background: `#5b76fe`
+- Text: `#ffffff`
+- Radius: 8px
+- Padding: 4px 8px
+- Font: 12px / 400 / Roobert PRO Medium
+- Use: Inferred from §1-§2 baseline (no explicit DS variant in source).
+
+**Success**
+- Background: `#00b473` (`--tw-color-success-accent`)
+- Text: `#ffffff`
+- Radius: 8px
+- Padding: 4px 8px
+- Use: Inferred from §1-§2 baseline (no explicit DS variant in source).
+
+## 5. Layout Principles
+- Spacing: 1–24px base scale
+- Radius: 8px (buttons), 10px–12px (cards), 20px–24px (panels), 40px–50px (large containers)
+- Ring shadow: `rgb(224,226,232) 0px 0px 0px 1px`
+
+## 6. Depth & Elevation
+Minimal — ring shadow + pastel surface contrast
+
+## 7. Do's and Don'ts
+### Do
+- Use pastel light/dark pairs for feature sections
+- Apply Roobert PRO with OpenType character variants
+- Use Blue 450 (#5b76fe) for interactive elements
+### Don't
+- Don't use heavy shadows
+- Don't mix more than 2 pastel accents per section
+
+## 8. Responsive Behavior
+Breakpoints: 425px, 576px, 768px, 896px, 1024px, 1200px, 1280px, 1366px, 1700px, 1920px
+
+## 9. Agent Prompt Guide
+### Quick Color Reference
+- Text: Near Black (`#1c1c1e`)
+- Background: White (`#ffffff`)
+- Interactive: Blue 450 (`#5b76fe`)
+- Success: `#00b473`
+- Border: `#c7cad5`
+### Example Component Prompts
+- "Create hero: white background. Roobert PRO Medium 56px, line-height 1.15, letter-spacing -1.68px. Blue CTA (#5b76fe). Outlined secondary (1px solid #c7cad5, 8px radius)."
+
+## 10. Voice & Tone
+
+Miro's voice is **collaboration-warm and workshop-confident.** "AI 이노베이션 워크스페이스" (homepage 2026-05) — brand evolution from "online whiteboard" to "AI innovation workspace". Marketing copy emphasizes team workshops + collaborative moments. Yellow `#fde050` CTA signals "playful, sticky-note inspired."
+
+| Context | Tone |
+|---|---|
+| CTA | Verb. "Sign up free", "Save your spot", "Start free" |
+| Marketing | Workshop-language. Customer co-creation moments |
+| Documentation | Visual-heavy, screenshot-driven |
+| Error | Specific. "Board permissions changed. Refresh to see updates." |
+
+**Voice samples**
+- Marketing CTA: *"SAVE YOUR SPOT"* <!-- verified: miro.com/ko homepage 2026-05 -->
+
+**Forbidden phrases.** "Revolutionary whiteboard". Aggressive Mural-comparison framing.
+
+## 11. Brand Narrative
+
+Miro was founded **2011 as RealtimeBoard** in **Perm, Russia** (~1,150 km east of Moscow) by **Andrey Khusid** and **Oleg Shardin** ([Miro — Wikipedia](https://en.wikipedia.org/wiki/Miro_(collaboration_platform)), [bne IntelliNews — Miro $17.5B](https://www.intellinews.com/founded-in-russia-11-years-ago-the-miro-visual-collaboration-software-startup-is-now-valued-at-17-5bn-231861/)). Khusid + Shardin had previously **founded the design agency Vitamin Group in 2005** offering web/product/app design services; **2012 they left Vitamin to focus on RealtimeBoard full-time**. Funding ladder: **$25M Series A (2018)** led by **Accel** with Altair Capital + Scale Venture Partners → **$50M Series B (April 2020)**, after which user base grew **5×** (5M → 30M) and paying customers **5.5×** (20K → 130K) → **$400M Series C (January 2022)** co-led by **ICONIQ Growth + Accel + Atlassian + Dragoneer + GIC + Scale Venture Partners** at **$17.5B post-money valuation**, total funding ~**$476M** ([Miro Newsroom — $400M Series C](https://miro.com/newsroom/miro-series-c/), [BusinessWire — Series B $50M April 2020](https://www.businesswire.com/news/home/20200427005109/en/Miro-Secures-%2450-Million-in-Series-B-Funding-for-Virtual-Whiteboarding-for-Remote-Teams)). **Rebranded RealtimeBoard → Miro in 2019** reflecting a global identity. Strong adoption in design teams, agile workshops, and consulting. AI features added 2024-2025 to position Miro as the **"AI innovation workspace"** (live `miro.com/ko` page-title confirms 2026-05).
+
+## 12. Principles
+
+1. **Yellow signals action.** `#fde050` CTA inherited from sticky-note culture. *UI implication:* primary actions yellow on white.
+2. **Roobert PRO is the type voice.** Medium weight throughout. *UI implication:* don't substitute system fonts.
+3. **Workshop > toolbox.** *UI implication:* product positioning treats Miro as a meeting/workshop space, not a static design tool.
+4. **Generous radius for warmth.** *UI implication:* 8px+ on cards, 16px+ on hero modules.
+5. **AI as workshop participant.** *UI implication:* AI features framed as joining the workshop, not replacing humans.
+
+## 13. Personas
+
+*Personas are fictional archetypes informed by Miro user segments (UX designers, agile coaches, consulting partners), not individual people.*
+
+**Yuki Tanaka, 32, Tokyo.** UX designer at agency. Runs client workshops in Miro 3× per week.
+
+**Marcus Chen, 41, San Francisco.** Agile coach at Series C SaaS. Sprint planning + retros in Miro.
+
+**Sofia Russo, 36, Milan.** Independent design consultant. Miro for client research + brainstorming.
+
+## 14. States
+
+| State | Treatment |
+|---|---|
+| **Empty (no boards)** | "Create your first board" CTA + template gallery |
+| **Empty (no team)** | "Invite teammates" with email picker |
+| **Loading (board opening)** | Skeleton with sticky-note placeholders |
+| **Loading (cursor sync)** | Cursor avatars appear with name labels |
+| **Error (sync)** | Banner + retry; never block editing |
+| **Error (permission)** | "Read-only — request edit access" inline link |
+| **Success (saved)** | Implicit; auto-save with subtle indicator |
+| **Success (export)** | Download triggered + toast confirmation |
+| **Skeleton (board grid)** | Yellow-tinted placeholders |
+| **Disabled (free plan limit)** | Upgrade link |
+| **Loading (long export)** | Persistent progress chip |
+
+## 15. Motion & Easing
+
+| Token | Value | Use |
+|---|---|---|
+| `motion-instant` | 0ms | Selection |
+| `motion-fast` | 150ms | Hover |
+| `motion-standard` | 250ms | Modal, panel |
+| `motion-cursor` | continuous | Live cursor sync |
+
+Standard cubic-bezier; minimal bounce. Cursor sync motion is signature. `prefers-reduced-motion: reduce` removes hover transitions; cursor sync becomes step-discrete.
+
+---
+
+**Verified:** 2026-05-08 (omd:migrate run 38 — Apple-tier)
+**Tier 1 sources:** miro.com/ko home + /pricing (live DOM via playwright — **three-color 8px Primary**: Yellow banner `#fde050` 40px / 16px·**900** ALL CAPS (banner-only) + Charcoal `#1c1c1e` 42-44px / 16px·**600** (canonical default) + Miro Blue `#3859ff` 48px / 18px·600 (featured-tier accent); Outline transparent / Charcoal text).
+**Tier 2 sources:** styles.refero.design / getdesign.md — no record.
+**Tier 2 (Philosophy/founders/funding):** Wikipedia (Miro), bne IntelliNews ($17.5B), Crunchbase, Miro Newsroom (Series C $400M Jan 2022), BusinessWire (Series B $50M Apr 2020), Contrary Research, EWDN.
+**Style ref:** `notion`. **Conflicts unresolved:** none. **Earlier mistake reverted:** prior footer captured Yellow banner only; canonical default Primary is **Charcoal `#1c1c1e`** with Miro Blue `#3859ff` featured-tier accent — three-color discipline was undocumented.

package/skills/to-html/designs/mistral.ai.DESIGN.md

@@ -0,0 +1,353 @@
+---
+id: mistral.ai
+name: Mistral AI
+country: FR
+category: ai
+homepage: "https://mistral.ai"
+primary_color: "#ff7000"
+logo:
+  type: simpleicons
+  slug: mistralai
+verified: "2026-05-15"
+omd: "0.1"
+ds:
+  name: Mistral Brand
+  url: "https://mistral.ai/brand"
+  type: brand
+  description: Mistral AI's logo, colors, typography, and brand asset kit.
+  og_image: "https://mistral.ai/-/brand/opengraph-image-1robrb.png"
+---
+
+# Design System Inspiration of 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
+
+## 10. Voice & Tone
+
+Mistral AI's voice is **European frontier-AI-confident** — measured, research-oriented, never breathless. The brand positions itself as the European alternative to American AI labs (OpenAI, Anthropic), with a focus on open-weights models and enterprise sovereignty. Copy stays restrained even when announcing major model releases.
+
+| Context | Tone |
+|---|---|
+| CTA | Verb. "Discover Le Chat", "Discover Vibe", "Contact Sales" |
+| Marketing | Product-named (Le Chat is the consumer product). European register |
+| Documentation | Code-first, model-spec heavy |
+| Error | Specific. Never wrapped in apology |
+
+**Voice samples**
+- Product CTAs: *"Discover Le Chat"*, *"Discover Vibe"* <!-- verified: mistral.ai homepage 2026-05 -->
+
+**Forbidden phrases.** "AGI", "superintelligence". Casual emoji.
+
+## 11. Brand Narrative
+
+Mistral AI was founded **April 2023** in **Paris** by **Arthur Mensch (CEO, former Google DeepMind)**, **Guillaume Lample (former Meta AI)**, and **Timothée Lacroix (former Meta AI)** — the trio first met **as students at École Polytechnique** ([Mistral AI — Wikipedia](https://en.wikipedia.org/wiki/Mistral_AI), [École polytechnique — Mistral AI raised €500M in 2023](https://www.polytechnique.edu/en/news/mistral-ai-french-ai-nugget-co-founded-two-x-alumni-raised-eu500-mlns-2023)). The founding observation: Europe needed a sovereign AI option that didn't depend on American hyperscalers. Funding ladder: **€105M ($117M) seed (June 2023)** with **Lightspeed Venture Partners, Eric Schmidt, Xavier Niel, JCDecaux** → **€385M ($428M) Series A (Dec 10 2023)** with **Andreessen Horowitz, BNP Paribas, Salesforce** → continuing rounds bringing **valuation past $14B** as of 2025 ([Arthur Mensch — Wikipedia](https://en.wikipedia.org/wiki/Arthur_Mensch), [Tracxn — Mistral AI](https://tracxn.com/d/companies/mistralai/__SLZq7rzxLYqqA97jtPwO09jLDeb76RVJVb306OhciWU)). The three founders became **France's first AI billionaires** ([Crain Currency — first AI billionaires France](https://www.craincurrency.com/investing/mistrals-3-founders-timothee-lacroix-arthur-mensch-and-guillaume-lample-become-first-ai), [Bloomberg Law — first AI billionaires](https://news.bloomberglaw.com/private-equity/first-ai-billionaires-emerge-from-french-homegrown-startup)). Quickly became one of Europe's most-funded AI startups, with strong **open-weights model releases (Mistral 7B, Mixtral 8x7B)** alongside enterprise-only frontier models. The 0px-radius aesthetic + warm golden shadows reflect the Parisian design sensibility — sharp corners signal "frontier research", warm shadows signal "European craftsmanship".
+
+## 12. Principles
+
+1. **0px radius is intentional.** Sharp corners signal frontier research. *UI implication:* never round corners on Mistral chrome.
+2. **Warm golden shadows.** *UI implication:* shadows always warm-toned; never cool-blue.
+3. **Weight 400 throughout.** *UI implication:* emphasis via size + color, not weight.
+4. **European register.** *UI implication:* avoid American startup hype; confident but understated.
+5. **Open-weights ↔ Enterprise tension.** *UI implication:* both audiences served — open-source community + enterprise.
+
+## 13. Personas
+
+*Personas are fictional archetypes informed by Mistral user segments (European enterprise architects, ML researchers, sovereignty-conscious infrastructure leads), not individual people.*
+
+**Catherine Dubois, 44, Paris.** CTO at French enterprise. Mistral as the sovereign AI option her board approved.
+
+**Heinz Müller, 38, Berlin.** ML researcher. Uses open-weights Mistral models for fine-tuning experiments.
+
+**Aisha Khan, 32, Dubai.** AI infrastructure lead. Evaluating Mistral vs OpenAI for region-specific deployment.
+
+## 14. States
+
+| State | Treatment |
+|---|---|
+| **Empty (no API keys)** | "Generate first API key" CTA |
+| **Empty (no projects)** | "Try Le Chat" link |
+| **Loading (model inference)** | Per-token streaming |
+| **Error (model unavailable)** | Specific model name + region |
+| **Error (rate limit)** | Tier limit + upgrade |
+| **Success (generation)** | Result inline + copy/save |
+| **Success (deployment)** | Endpoint visible |
+| **Skeleton (deployments)** | 0px-radius placeholders |
+| **Disabled (insufficient plan)** | Upgrade link |
+| **Loading (long task)** | Persistent progress |
+| **Loading (model loading)** | Initialization status |
+
+## 15. Motion & Easing
+
+| Token | Value | Use |
+|---|---|---|
+| `motion-instant` | 0ms | Toggle |
+| `motion-fast` | 150ms | Hover |
+| `motion-standard` | 250ms | Modal |
+
+Standard cubic-bezier; no bounce — the precision register dislikes overshoot. `prefers-reduced-motion: reduce` removes hover transitions.
+
+---
+
+**Verified:** 2026-05-08 (omd:migrate run 39 — Apple-tier)
+**Tier 1 sources:** mistral.ai home + /products (live DOM via playwright — Primary `#1f1f1f` Mistral Charcoal 0px sharp / 36px / 12px-square / 16px·400; **Secondary canvas-aware `oklab()`**: `oklab(0.999994 / 0.1)` (dark canvas) + `oklab(0.955114 -0.00188443 0.0614298 / 0.5)` Cream (light canvas); Cream `#fff0c2` accent. **`oklab()` color-space canonical** — most modern DS adopter in corpus).
+**Tier 2 sources:** styles.refero.design / getdesign.md — no record.
+**Tier 2 (Philosophy/founders/funding):** Wikipedia (Mistral AI + Arthur Mensch), École polytechnique (X alumni origin), Crain Currency / Bloomberg Law (first AI billionaires France), Tracxn, Crunchbase.
+**Style ref:** `claude` (research-tech precision). **Conflicts unresolved:** none. **Earlier addition:** canvas-aware `oklab()` Secondary variants + Cream `#fff0c2` accent + oklab() canonical convention missed by prior pass.