Mistral-AI-design-analysisDESIGN.md alpha
Mistral AI brands itself with a singular signature — atmospheric sunset gradients (mustard, orange, deep red) layered over photography of mountains, plus a horizontal 'sunset stripe' bar that closes every page. The system pairs warm cream-yellow surfaces ({colors.cream}) with a saturated orange primary CTA ({colors.primary}) and uses an elegant near-serif voice for hero displays. Coverage spans homepage (Frontier AI hero), Le Studio product page, Coding solutions, news article surfaces, contact form, and services tier page — all anchored by the signature gradient closing band.
Color Palette
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Corner Radius
Spacing
Base: 4pxMistral AI brands itself with a singular signature — atmospheric sunset gradients (mustard, orange, deep red) layered over photography of mountains, plus a horizontal 'sunset stripe' bar that closes every page. The system pairs warm cream-yellow surfaces ({colors.cream}) with a saturated orange primary CTA ({colors.primary}) and uses an elegant near-serif voice for hero displays. Coverage spans homepage (Frontier AI hero), Le Studio product page, Coding solutions, news article surfaces, contact form, and services tier page — all anchored by the signature gradient closing band.
Components
Buttons
Elevation & Depth
Do's & Don'ts
Do
Don't
Responsive Behavior
### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile (small) | < 480px | Single column. Hero scales to 40px (PP Editorial). Pill nav collapses to hamburger. Pricing tiers stack 1-up. |
| Mobile (large) | 480 – 767px | Feature tiles 2-up. Hero scales to 52px. |
| Tablet | 768 – 1023px | 2-column feature grids. Pill-tab nav returns. Hero 64px. |
| Desktop | 1024 – 1279px | Multi-column layouts. Hero 76px. Stat row at full width. |
| Wide Desktop | ≥ 1280px | Full 84px hero presentation. |
### Touch Targets
• Buttons render at 40–44px effective height — at WCAG AAA floor with 10px 20px padding
• Form inputs render at 44px height
• Pill tabs render at ~32px tall — bumps to 44px on mobile
### Collapsing Strategy
• Promo banner stays full-width; truncates at < 480px
• Top nav below 1024px collapses to hamburger
• Hero band: 2-column hero (text + photography) collapses to stacked at < 1024px
• Pricing tiers: 4-column desktop → 2-column tablet → 1-column mobile
• Stat row: 3-column → stacked at < 768px
• Hero typography: 84px → 64px → 52px → 40px
• Footer: 5-column desktop → 3-column tablet → 1-column accordion mobile
• Sunset stripe band stays full-width on all breakpoints
### Image Behavior
• Mountain-sunset photography uses 16:9 ratio with full-bleed scaling
• IDE mockup images maintain aspect ratio across breakpoints
• Customer logo wall presents wordmarks at consistent 60–80px height
Iteration Guide
1. Focus on ONE component at a time
2. Reference component names and tokens directly ({colors.primary}, {component-name}-pressed)
3. Run npx @google/design.md lint DESIGN.md after edits
4. Add new variants as separate components: entries
5. Default to {typography.body-md} for body and {typography.subtitle} for emphasis. Hero displays use {typography.hero-display} (PP Editorial Old).
6. Keep {colors.primary} confined to primary CTAs, active states, and the sunset stripe band
7. Cards use {rounded.lg} (12px), buttons use {rounded.md} (8px). Pills ({rounded.full}) reserved for badges only.
8. Always include the sunset-stripe-band component at the foot of every page mockup.
Known Gaps
• Specific dark-mode token values not surfaced; the brand has not shipped a published dark-mode palette
• Animation/transition timings not extracted; recommend 150–200ms ease for hover/focus state transitions
• Form validation success state not explicitly captured beyond defaults
• Sunset stripe band gradient stops are approximations — the actual values may vary slightly across pages but the visual rhythm is consistent
Use with MCP
Don't have the MCP? Install it here