Hermes Agent — Implementation Notes
The original site uses proprietary fonts. For self-contained HTML output, use these CDN substitutes: - Primary:
Inter| Mono:JetBrains Mono- Font stack (CSS):font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;- Mono stack (CSS):font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;html <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">Usewrite_fileto create HTML, serve viagenerative-widgetsskill (cloudflared tunnel). Verify visual accuracy withbrowser_visionafter generating.
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
#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.#fb6424): A slightly warmer, lighter variant of the brand orange used for secondary brand moments and hover states.#ff8105): A pure orange used in the gradient block system — warmer and less red than Mistral Orange.#ff8a00): Deep golden amber — the darkest sunshine tone, used for strong accent moments.#ffa110): Warm amber-gold — the core sunshine accent for backgrounds and interactive elements.#ffb83e): Medium golden — balanced warmth for mid-level emphasis.#ffd06a): Light golden — for subtle warm tints and secondary backgrounds.#ffe295): Pale gold — soft background accents and gentle warmth.#ffd900): The brightest tone in the gradient — used at the "top" of the block identity.#fffaeb): The lightest page background — barely tinted with warmth, the foundation canvas.#fff0c2): The primary warm surface and secondary button background — noticeably golden.#ffffff): Used for maximum contrast elements and popover surfaces.#1f1f1f): The primary dark surface for buttons, text, and dark sections.hsl(17, 96%, 52%)): The functional accent color for interactive states.#1f1f1f): Primary text color and dark button backgrounds — a near-black that's warmer than pure #000.hsl(0, 0%, 24%)): A medium dark gray for secondary text on light backgrounds.#ffffff): Text on dark surfaces and CTA labels.hsl(240, 5.9%, 90%)): A cool-tinted light gray for form borders — one of the few cool tones in the system.oklab(1, 0, 0 / 0.088–0.1)): Semi-transparent white for frosted glass effects and button overlays.#ffd900) → Gold (#ffe295) → Amber (#ffa110) → Orange (#ff8105) → Flame (#fb6424) → Mistral Orange (#fa520f). This gradient appears in the logo blocks, section backgrounds, and decorative elements.Arial as fallback, and extended stack: ui-sans-serif, system-ui, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji| 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 |
text-transform: uppercase on button labels and section markers creates a formal, European signage quality.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
#fffaeb), Cream (#fff0c2), or Pure Whitergba(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 shadowhsl(240, 5.9%, 90%) — the sole cool-toned elementMistral 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
| 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.
| 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 |