What is Mistral AI on explainx.ai?

### Mistral AI - Open-weight LLM provider. - French-engineered minimalism, purple-toned - description: Mistral AI brands itself with a singular signature — atmospheric sunset gradients (mustard, orange, deep red) layered over phot Listed under category “AI & LLM Platforms”. explainx.ai mirrors the full DESIGN.md document so assistants can cite stable tokens and prose in one place.

DESIGN.md blends YAML design tokens—colors, typography, spacing, radii—with markdown that explains intent. Google documents this pattern for agent-driven UI work under Stitch (stitch.withgoogle.com).

How do I use this with ChatGPT, Cursor, Claude Code, or another IDE agent?

Paste the DESIGN.md into your repo root or attach it to the agent conversation, then ask explicitly for layouts, spacing, palette, type scale, and component tone that follow the document. Refresh from this listing when upstream authors publish changes.

Where is the source repo?

Maintainers link to github.com/VoltAgent/awesome-design-md. Community listings on explainx.ai may reference popular aesthetic names for inspiration; that does not imply official endorsement by any trademark holder.

How current is this DESIGN.md?

Explainx snapshots the file at import time. Recorded last update on this listing: May 4, 2026.

Need a fresh DESIGN.md from scratch?

Use the explainx.ai DESIGN.md generator to describe your product and audience; it returns Stitch-style YAML plus narrative guidance you can publish or submit to the registry afterward.

Mistral AI — DESIGN.md | explainx.ai

explainx.ainewsletter3.5k

workshops ↗

Mistral AI — DESIGN.md | explainx.ai | explainx.ai

DESIGN.md (markdown body)

version	alpha
name	Mistral AI
description	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.
colors	primary: "#fa520f" primary-deep: "#cc3a05" on-primary: "#ffffff" sunshine-300: "#ffd06a" sunshine-500: "#ffb83e" sunshine-700: "#ffa110" sunshine-800: "#ff8105" sunshine-900: "#ff8a00" yellow-saturated: "#ffd900" cream: "#fff8e0" cream-light: "#fffaeb" cream-deeper: "#fff0c2" beige-deep: "#e6d5a8" block-5: "#ffe295" block-6: "#ffd900" block-7: "#ff8105" ink: "#1f1f1f" ink-tint: "#3d3d3d" charcoal: "#2c2c2c" slate: "#4a4a4a" steel: "#6a6a6a" stone: "#8a8a8a" muted: "#a8a8a8" hairline: "#e5e5e5" hairline-soft: "#ededed" hairline-strong: "#c7c7c7" canvas: "#ffffff" surface: "#fafafa" surface-cream: "#fff8e0" surface-cream-soft: "#fffaeb" surface-code: "#1c1c1e" on-dark: "#ffffff" on-dark-muted: "#a8a8a8" on-cream: "#1f1f1f" footer-cream: "#fff8e0" link: "#fa520f"
typography	hero-display: fontFamily: PP Editorial Old fontSize: 84px fontWeight: 400 lineHeight: 1.05 letterSpacing: -1.5px display-lg: fontFamily: PP Editorial Old fontSize: 64px fontWeight: 400 lineHeight: 1.10 letterSpacing: -1px heading-1: fontFamily: PP Editorial Old fontSize: 52px fontWeight: 400 lineHeight: 1.15 letterSpacing: -0.5px heading-2: fontFamily: Inter fontSize: 36px fontWeight: 500 lineHeight: 1.20 letterSpacing: -0.5px heading-3: fontFamily: Inter fontSize: 28px fontWeight: 500 lineHeight: 1.25 heading-4: fontFamily: Inter fontSize: 22px fontWeight: 500 lineHeight: 1.30 heading-5: fontFamily: Inter fontSize: 18px fontWeight: 500 lineHeight: 1.40 subtitle: fontFamily: Inter fontSize: 18px fontWeight: 400 lineHeight: 1.50 body-md: fontFamily: Inter fontSize: 16px fontWeight: 400 lineHeight: 1.55 body-md-medium: fontFamily: Inter fontSize: 16px fontWeight: 500 lineHeight: 1.55 body-sm: fontFamily: Inter fontSize: 14px fontWeight: 400 lineHeight: 1.50 body-sm-medium: fontFamily: Inter fontSize: 14px fontWeight: 500 lineHeight: 1.50 caption: fontFamily: Inter fontSize: 13px fontWeight: 400 lineHeight: 1.40 caption-bold: fontFamily: Inter fontSize: 13px fontWeight: 600 lineHeight: 1.40 micro: fontFamily: Inter fontSize: 12px fontWeight: 500 lineHeight: 1.40 micro-uppercase: fontFamily: Inter fontSize: 11px fontWeight: 600 lineHeight: 1.40 letterSpacing: 1px button-md: fontFamily: Inter fontSize: 14px fontWeight: 500 lineHeight: 1.30 stat-display: fontFamily: PP Editorial Old fontSize: 56px fontWeight: 400 lineHeight: 1.10 letterSpacing: -1px code-md: fontFamily: JetBrains Mono fontSize: 14px fontWeight: 400 lineHeight: 1.50
rounded	xs: 4px sm: 6px md: 8px lg: 12px xl: 16px xxl: 20px full: 9999px
spacing	xxs: 4px xs: 8px sm: 12px md: 16px lg: 20px xl: 24px xxl: 32px xxxl: 40px section-sm: 48px section: 64px section-lg: 96px hero: 120px
components	button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: "10px 20px" button-primary-pressed: backgroundColor: "{colors.primary-deep}" textColor: "{colors.on-primary}" button-primary-disabled: backgroundColor: "{colors.hairline}" textColor: "{colors.muted}" button-cream: backgroundColor: "{colors.cream}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: "10px 20px" border: "1px solid {colors.beige-deep}" button-dark: backgroundColor: "{colors.ink}" textColor: "{colors.on-dark}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: "10px 20px" button-secondary: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: "10px 20px" border: "1px solid {colors.hairline-strong}" button-on-cream: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: "10px 20px" border: "1px solid {colors.beige-deep}" button-link: backgroundColor: "transparent" textColor: "{colors.primary}" typography: "{typography.body-sm-medium}" padding: "0" card-base: backgroundColor: "{colors.canvas}" rounded: "{rounded.lg}" padding: "{spacing.xl}" border: "1px solid {colors.hairline-soft}" card-feature: backgroundColor: "{colors.canvas}" rounded: "{rounded.lg}" padding: "{spacing.xxl}" border: "1px solid {colors.hairline-soft}" card-cream: backgroundColor: "{colors.cream}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: "{spacing.xxl}" border: "1px solid {colors.beige-deep}" card-cream-soft: backgroundColor: "{colors.surface-cream-soft}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: "{spacing.xxl}" card-feature-product: backgroundColor: "{colors.canvas}" rounded: "{rounded.lg}" padding: "{spacing.xxl}" border: "1px solid {colors.hairline-soft}" shadow: "rgba(0, 0, 0, 0.04) 0px 4px 12px" card-photographic: backgroundColor: "{colors.surface-code}" textColor: "{colors.on-dark}" rounded: "{rounded.lg}" padding: "0" pricing-card: backgroundColor: "{colors.canvas}" rounded: "{rounded.lg}" padding: "{spacing.xxl}" border: "1px solid {colors.hairline-soft}" pricing-card-featured: backgroundColor: "{colors.cream}" rounded: "{rounded.lg}" padding: "{spacing.xxl}" border: "2px solid {colors.primary}" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "{spacing.sm} {spacing.md}" border: "1px solid {colors.hairline-strong}" height: 44px text-input-focused: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" border: "2px solid {colors.primary}" text-area: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "{spacing.md}" border: "1px solid {colors.hairline-strong}" contact-form-panel: backgroundColor: "{colors.cream}" rounded: "{rounded.lg}" padding: "{spacing.xxl}" border: "1px solid {colors.beige-deep}" pill-tab: backgroundColor: "{colors.canvas}" textColor: "{colors.steel}" typography: "{typography.body-sm-medium}" rounded: "{rounded.full}" padding: "{spacing.xs} {spacing.md}" border: "1px solid {colors.hairline}" pill-tab-active: backgroundColor: "{colors.ink}" textColor: "{colors.on-dark}" rounded: "{rounded.full}" border: "1px solid {colors.ink}" segmented-tab: backgroundColor: "transparent" textColor: "{colors.steel}" typography: "{typography.body-sm-medium}" padding: "{spacing.sm} {spacing.md}" border: "0 0 2px transparent solid" segmented-tab-active: backgroundColor: "transparent" textColor: "{colors.primary}" typography: "{typography.body-sm-medium}" border: "0 0 2px {colors.primary} solid" badge-orange: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.caption-bold}" rounded: "{rounded.full}" padding: "4px 10px" badge-cream: backgroundColor: "{colors.cream-deeper}" textColor: "{colors.ink}" typography: "{typography.caption-bold}" rounded: "{rounded.full}" padding: "4px 10px" badge-dark: backgroundColor: "{colors.ink}" textColor: "{colors.on-dark}" typography: "{typography.caption-bold}" rounded: "{rounded.full}" padding: "4px 10px" promo-banner: backgroundColor: "{colors.ink}" textColor: "{colors.on-dark}" typography: "{typography.body-sm-medium}" padding: "{spacing.sm} {spacing.md}" hero-band-sunset: backgroundColor: "{colors.sunshine-700}" textColor: "{colors.ink}" rounded: "0" padding: "{spacing.hero}" sunset-stripe-band: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" rounded: "0" padding: "{spacing.lg} 0" cta-banner-cream: backgroundColor: "{colors.cream}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: "{spacing.section}" code-block: backgroundColor: "{colors.surface-code}" textColor: "{colors.on-dark}" typography: "{typography.code-md}" rounded: "{rounded.md}" padding: "{spacing.md}" code-block-header: backgroundColor: "{colors.surface-code}" textColor: "{colors.on-dark-muted}" typography: "{typography.caption}" padding: "{spacing.xs} {spacing.md}" border: "0 0 1px rgba(255,255,255,0.08) solid" feature-icon-tile: backgroundColor: "{colors.cream}" rounded: "{rounded.md}" padding: "{spacing.md}" border: "1px solid {colors.beige-deep}" industry-tile: backgroundColor: "{colors.canvas}" rounded: "{rounded.lg}" padding: "{spacing.xl}" border: "1px solid {colors.hairline-soft}" stat-cell: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.stat-display}" padding: "{spacing.lg}" customer-testimonial-card: backgroundColor: "{colors.canvas}" rounded: "{rounded.lg}" padding: "{spacing.xxl}" border: "1px solid {colors.hairline-soft}" logo-wall-item: backgroundColor: "transparent" textColor: "{colors.steel}" typography: "{typography.body-md-medium}" padding: "{spacing.lg}" faq-accordion-item: backgroundColor: "{colors.canvas}" rounded: "{rounded.md}" padding: "{spacing.xl}" border: "0 0 1px {colors.hairline} solid" footer-region: backgroundColor: "{colors.footer-cream}" textColor: "{colors.ink}" typography: "{typography.body-sm}" padding: "{spacing.section} {spacing.xxl}" footer-link: backgroundColor: "transparent" textColor: "{colors.primary}" typography: "{typography.body-sm}" padding: "{spacing.xxs} 0" app-store-badge: backgroundColor: "{colors.ink}" textColor: "{colors.on-dark}" typography: "{typography.caption-bold}" rounded: "{rounded.md}" padding: "{spacing.sm} {spacing.md}"

Overview

Mistral AI carries itself with a singular, almost cinematographic visual signature — the homepage opens with "Frontier AI. In your hands." rendered in elegant near-serif display type over a photographic mountain landscape bathed in mustard-orange sunset light. Below the hero, every page closes with the same recognizable element: a horizontal "sunset stripe" gradient band running red→orange→yellow→cream that wraps the foot of the page just above the footer. This stripe is THE brand recognizer — it appears on the homepage, products/studio, solutions/coding, news articles, contact form, and services tier page without exception.

The system pairs PP Editorial Old (a near-serif elegant display face) for hero displays with Inter for everything else (body, headings, UI). Cream-yellow surfaces ({colors.cream}, {colors.surface-cream-soft}) anchor form panels and feature cards; saturated orange ({colors.primary}) carries primary CTAs; the deep mountain photography on the homepage and the dark code mockups inside Le Studio create photographic depth. Cards are rectangular with {rounded.lg} (12px) corners — distinctly less playful than Miro's or Mintlify's pill-buttons-everywhere approach. Buttons are also {rounded.md} (8px), not pills — Mistral's geometry is more sober and editorial than its peers.

Key Characteristics:

Atmospheric mountain-sunset hero photography (orange-red-yellow gradient sky)
Horizontal "sunset stripe" band ({colors.primary} → {colors.sunshine-700} → {colors.yellow-saturated} → {colors.cream}) at every page bottom
Cream-yellow surfaces ({colors.cream}, {colors.cream-soft}) for form panels and feature cards
PP Editorial Old (or similar near-serif) for hero displays; Inter for everything else
{rounded.md} (8px) buttons and {rounded.lg} (12px) cards — less playful, more editorial geometry
Saturated orange primary CTA ({colors.primary}) carries every action call

Colors

Source pages: mistral.ai/ (homepage), /products/studio (Le Studio product), /solutions/coding (coding solution), /news/vibe-remote-agents-mistral-medium-3-5 (news), /contact (contact form), /services (services tiers). Token coverage was identical across all six pages.

Brand & Accent

Mistral Orange ({colors.primary}): Primary CTA color, brand orange
Orange Deep ({colors.primary-deep}): Pressed-state and emphasis variant
Sunshine 300 ({colors.sunshine-300}): Atmospheric light orange-yellow
Sunshine 500 ({colors.sunshine-500}): Mid-spectrum sunset orange
Sunshine 700 ({colors.sunshine-700}): Saturated mid sunset gradient stop
Sunshine 800 ({colors.sunshine-800}): Deep sunset gradient stop
Sunshine 900 ({colors.sunshine-900}): Deepest sunset orange
Yellow Saturated ({colors.yellow-saturated}): Pure brand yellow used in the sunset stripe gradient
Block 5/6/7 ({colors.block-5}, {colors.block-6}, {colors.block-7}): Spectrum stops along the sunset gradient (light-yellow → mid-yellow → deep-orange)

Cream / Neutral Warm

Cream ({colors.cream}): Warm yellow-cream surface for form panels, feature cards, footer
Cream Soft ({colors.cream-soft}): Lighter cream variant
Cream Deeper ({colors.cream-deeper}): More-saturated cream for badge/tag chips
Beige Deep ({colors.beige-deep}): Cream surface 1px border color

Surface

Canvas White ({colors.canvas}): Page background and card surface
Surface ({colors.surface}): Subtle quieter background
Surface Cream ({colors.surface-cream}): Cream-yellow tinted surface
Surface Code ({colors.surface-code}): Dark code-block / IDE mockup surface
Hairline ({colors.hairline}): 1px borders
Hairline Soft ({colors.hairline-soft}): Quieter dividers
Hairline Strong ({colors.hairline-strong}): Stronger 1px border for inputs

Text

Ink ({colors.ink}): Primary headlines and body text
Ink Tint ({colors.ink-tint}): Slightly softer black for hero overlay text
Charcoal ({colors.charcoal}): Body emphasis
Slate ({colors.slate}): Secondary text
Steel ({colors.steel}): Tertiary text, captions
Stone ({colors.stone}): Muted labels
Muted ({colors.muted}): Disabled, placeholders
On Dark ({colors.on-dark}): White text on dark surfaces
On Dark Muted ({colors.on-dark-muted}): Reduced-opacity white
On Cream ({colors.on-cream}): Ink text on cream surfaces

Semantic

Link ({colors.link}): Inline link color (matches primary orange)

Typography

Font Family

PP Editorial Old (display): Mistral's signature near-serif elegant display typeface used for hero displays, large numbers, and editorial section openers. Carries a slightly classical, intelligent character that contrasts the contemporary product positioning. Fallbacks: 'Times New Roman', Georgia, serif.

Inter (UI prose): Variable typeface for body, navigation, buttons, labels, captions. Fallbacks: ui-sans-serif, system-ui, -apple-system, sans-serif.

JetBrains Mono (code): Monospace for code blocks and IDE mockups. Fallbacks: 'SF Mono', Menlo, Consolas, monospace.

Hierarchy

Token	Size	Weight	Line Height	Letter Spacing	Family	Use
`{typography.hero-display}`	84px	400	1.05	-1.5px	PP Editorial Old	Hero ("Frontier AI. In your hands.")
`{typography.display-lg}`	64px	400	1.10	-1px	PP Editorial Old	Section openers
`{typography.heading-1}`	52px	400	1.15	-0.5px	PP Editorial Old	Page headlines ("Get in touch with the team.")
`{typography.stat-display}`	56px	400	1.10	-1px	PP Editorial Old	Stat callouts ("75%")
`{typography.heading-2}`	36px	500	1.20	-0.5px	Inter	Subsection headlines
`{typography.heading-3}`	28px	500	1.25	0	Inter	Card titles
`{typography.heading-4}`	22px	500	1.30	0	Inter	Feature tile titles
`{typography.heading-5}`	18px	500	1.40	0	Inter	Smaller card titles
`{typography.subtitle}`	18px	400	1.50	0	Inter	Hero subtitle, lead body
`{typography.body-md}`	16px	400	1.55	0	Inter	Primary body text
`{typography.body-md-medium}`	16px	500	1.55	0	Inter	Body emphasis
`{typography.body-sm}`	14px	400	1.50	0	Inter	Secondary body
`{typography.body-sm-medium}`	14px	500	1.50	0	Inter	Active sidebar, button labels
`{typography.caption}`	13px	400	1.40	0	Inter	Helper text
`{typography.caption-bold}`	13px	600	1.40	0	Inter	Badge labels
`{typography.micro}`	12px	500	1.40	0	Inter	Footer microcopy
`{typography.micro-uppercase}`	11px	600	1.40	1px	Inter	Section eyebrows
`{typography.button-md}`	14px	500	1.30	0	Inter	Button labels
`{typography.code-md}`	14px	400	1.50	0	JetBrains Mono	Code blocks

Principles

Editorial / sans pairing — PP Editorial Old (near-serif, classical) anchors hero displays; Inter (geometric sans) carries everything else. The contrast IS the brand voice.
Generous body leading (1.55 on body-md) for editorial readability across long-form pages
Tight hero leading (1.05 on 84px display) creates magazine-grade typographic display
Negative letter-spacing progresses with size — display sizes use -1.5px to -0.5px; smaller heads relax to 0
Stat-display token (56px Editorial) for marketing stat callouts ("75% / 80% / 100%")

Layout

Spacing System

Base unit: 4px (8px primary increment)
Tokens: {spacing.xxs} (4px) · {spacing.xs} (8px) · {spacing.sm} (12px) · {spacing.md} (16px) · {spacing.lg} (20px) · {spacing.xl} (24px) · {spacing.xxl} (32px) · {spacing.xxxl} (40px) · {spacing.section-sm} (48px) · {spacing.section} (64px) · {spacing.section-lg} (96px) · {spacing.hero} (120px)
Section rhythm: Marketing pages use {spacing.section-lg} (96px); content pages tighten to {spacing.section} (64px)
Card internal padding: {spacing.xl} (24px) for compact cards; {spacing.xxl} (32px) for feature panels and form panels

Grid & Container

Marketing pages use 1280px max-width with 32px gutters
Hero band uses 2-column split (text left, sunset photography right) on desktop
Le Studio product page uses 3-up feature grid below the hero
Contact page uses 1-column layout with cream form panel centered (~520px max-width)
Services page uses 4-tier card layout with cream feature panel separator strip

Whitespace Philosophy

Marketing surfaces give content generous breathing room — {spacing.hero} (120px) hero padding lets the mountain-sunset photography fill the frame. Form pages tighten dramatically: contact form panel uses {spacing.xxl} (32px) internal padding, fields stack on {spacing.md} (16px) gap.

Elevation & Depth

The system runs predominantly flat with strategic atmospheric depth from photography.

Level	Treatment	Use
0 (flat)	No shadow; `{colors.hairline-soft}` border	Default cards, table rows, form inputs
1 (subtle)	`rgba(0, 0, 0, 0.04) 0px 1px 2px 0px`	Hover-elevated tiles
2 (card)	`rgba(0, 0, 0, 0.04) 0px 4px 12px 0px`	Standard feature cards
3 (mockup)	`rgba(0, 0, 0, 0.08) 0px 12px 24px -4px`	IDE mockup, code editor frames
4 (modal)	`rgba(0, 0, 0, 0.12) 0px 16px 48px -8px`	Modals, dropdowns

Decorative Depth

The atmospheric depth on Mistral's hero comes from the photographic mountain-sunset imagery — natural light gradient does the work
The "sunset stripe" closing band carries depth via its multi-stop gradient (red → orange → yellow → cream)
IDE / code mockups use dark-canvas backgrounds with subtle drop shadow

Shapes

Border Radius Scale

Token	Value	Use
`{rounded.xs}`	4px	Small chips, micro-controls
`{rounded.sm}`	6px	Discount badges, compact UI
`{rounded.md}`	8px	Buttons, inputs, search-pill, code blocks
`{rounded.lg}`	12px	Cards, modals, panels (the dominant card radius)
`{rounded.xl}`	16px	Larger feature panels
`{rounded.xxl}`	20px	Featured emphasis cards
`{rounded.full}`	9999px	Status badges, pill tabs (used sparingly — most buttons are NOT pills)

The radius scale is sober and editorial — Mistral does NOT use pill buttons. {rounded.md} (8px) for buttons, {rounded.lg} (12px) for cards, {rounded.full} reserved for badges and the rare pill tab.

Photography Geometry

Hero photography is full-bleed atmospheric mountain-sunset imagery with no internal framing
IDE/code mockups render with {rounded.lg} (12px) corners on dark canvas
Customer logos wall presents wordmarks inline at consistent 60–80px height
Product imagery (Le Studio mockup, agent UI mockups) sits in {rounded.lg} panels with subtle border

Components

Per the no-hover policy, hover states are NOT documented. Default and pressed/active states only.

Buttons

button-primary — Saturated-orange primary CTA, the dominant action.

Background {colors.primary}, text {colors.on-primary}, typography {typography.button-md}, padding 10px 20px, rounded {rounded.md}.
Pressed state button-primary-pressed deepens to {colors.primary-deep}.
Disabled state button-primary-disabled uses {colors.hairline} background and {colors.muted} text.

button-cream — Warm cream-yellow secondary action, common on cream-surface sections.

Background {colors.cream}, text {colors.ink}, border 1px solid {colors.beige-deep}, typography {typography.button-md}, padding 10px 20px, rounded {rounded.md}.

button-dark — Dark/black primary CTA on cream surfaces.

Background {colors.ink}, text {colors.on-dark}, typography {typography.button-md}, padding 10px 20px, rounded {rounded.md}.

button-secondary — Outlined secondary action.

Background transparent, text {colors.ink}, border 1px solid {colors.hairline-strong}, typography {typography.button-md}, padding 10px 20px, rounded {rounded.md}.

button-on-cream — White button on cream-tinted backgrounds.

Background {colors.canvas}, text {colors.ink}, border 1px solid {colors.beige-deep}, typography {typography.button-md}, padding 10px 20px, rounded {rounded.md}.

button-link — Inline orange text link.

Background transparent, text {colors.primary}, typography {typography.body-sm-medium}, padding 0. Underline on activation.

Cards & Containers

card-base — Standard content card.

Background {colors.canvas}, rounded {rounded.lg}, padding {spacing.xl}, border 1px solid {colors.hairline-soft}.

card-feature — White feature card with larger padding.

Background {colors.canvas}, rounded {rounded.lg}, padding {spacing.xxl}, border 1px solid {colors.hairline-soft}`.

card-cream — Warm cream-yellow feature card (services tiers, perk callouts).

Background {colors.cream}, text {colors.ink}, rounded {rounded.lg}, padding {spacing.xxl}, border 1px solid {colors.beige-deep}.

card-cream-soft — Lighter cream variant.

Background {colors.surface-cream-soft}, text {colors.ink}, rounded {rounded.lg}, padding {spacing.xxl}.

card-feature-product — Product showcase card with subtle elevation.

Background {colors.canvas}, rounded {rounded.lg}, padding {spacing.xxl}, border 1px solid {colors.hairline-soft}, shadow rgba(0, 0, 0, 0.04) 0px 4px 12px.

card-photographic — Photographic product card with dark background.

Background {colors.surface-code}, text {colors.on-dark}, rounded {rounded.lg}, padding 0 (image fills the card).

pricing-card — Standard pricing tier card.

Background {colors.canvas}, rounded {rounded.lg}, padding {spacing.xxl}, border 1px solid {colors.hairline-soft}.

pricing-card-featured — Featured pricing tier (cream background + orange border).

Background {colors.cream}, rounded {rounded.lg}, padding {spacing.xxl}, border 2px solid {colors.primary}.

Inputs & Forms

text-input — Standard text field.

Background {colors.canvas}, text {colors.ink}, border 1px solid {colors.hairline-strong}, rounded {rounded.md}, padding {spacing.sm} {spacing.md}, height 44px.

text-input-focused — Activated state.

Border switches to 2px solid {colors.primary}.

text-area — Multi-line text area for contact form.

Background {colors.canvas}, text {colors.ink}, border 1px solid {colors.hairline-strong}, rounded {rounded.md}, padding {spacing.md}.

contact-form-panel — Cream-tinted form container on the contact page.

Background {colors.cream}, rounded {rounded.lg}, padding {spacing.xxl}, border 1px solid {colors.beige-deep}. Hosts text-inputs, text-area, submit button-dark.

Tabs

pill-tab + pill-tab-active — Pill-style tab nav (used sparingly on product pages).

Inactive: background {colors.canvas}, text {colors.steel}, border 1px solid {colors.hairline}, padding {spacing.xs} {spacing.md}, rounded {rounded.full}.
Active: background {colors.ink}, text {colors.on-dark}.

segmented-tab + segmented-tab-active — Underline-style tab navigation.

Inactive: text {colors.steel}, transparent background, padding {spacing.sm} {spacing.md}, no bottom border.
Active: text {colors.primary}, 2px bottom border in {colors.primary}.

Badges & Status

badge-orange — Saturated orange badge.

Background {colors.primary}, text {colors.on-primary}, typography {typography.caption-bold}, rounded {rounded.full}, padding 4px 10px.

badge-cream — Cream-tinted tag chip.

Background {colors.cream-deeper}, text {colors.ink}, typography {typography.caption-bold}, rounded {rounded.full}, padding 4px 10px.

badge-dark — Dark/black status badge.

Background {colors.ink}, text {colors.on-dark}, typography {typography.caption-bold}, rounded {rounded.full}, padding 4px 10px.

promo-banner — Sticky black promo strip ABOVE the top nav.

Background {colors.ink}, text {colors.on-dark}, typography {typography.body-sm-medium}, padding {spacing.sm} {spacing.md}. Carries one-line copy + inline CTA.

Code

code-block — Syntax-highlighted IDE-style code block (Le Studio page mockup, agent demos).

Background {colors.surface-code}, text {colors.on-dark}, typography {typography.code-md}, rounded {rounded.md}, padding {spacing.md}.

code-block-header — Header bar above the code block.

Background {colors.surface-code}, text {colors.on-dark-muted}, typography {typography.caption}, padding {spacing.xs} {spacing.md}, bottom border 1px solid rgba(255,255,255,0.08).

Documentation Components

feature-icon-tile — Cream-yellow feature icon callout.

Background {colors.cream}, rounded {rounded.md}, padding {spacing.md}, border 1px solid {colors.beige-deep}.

industry-tile — Industry-vertical tile in solutions page grid.

Background {colors.canvas}, rounded {rounded.lg}, padding {spacing.xl}, border 1px solid {colors.hairline-soft}.

stat-cell — Stat-row cell ("75% more / 80% better").

Background transparent, text {colors.ink}, typography {typography.stat-display}, padding {spacing.lg}.

customer-testimonial-card — Customer quote card (used inside Le Studio and Solutions pages).

Background {colors.canvas}, rounded {rounded.lg}, padding {spacing.xxl}, border 1px solid {colors.hairline-soft}. Quote in {typography.body-md}, attribution in {typography.body-sm} {colors.steel}.

logo-wall-item — Customer logo wordmark cell.

Background transparent, text {colors.steel}, typography {typography.body-md-medium}, padding {spacing.lg}.

faq-accordion-item — FAQ panel.

Background {colors.canvas}, rounded {rounded.md}, padding {spacing.xl}, bottom border 1px solid {colors.hairline}.

app-store-badge — App Store / Google Play download badge.

Background {colors.ink}, text {colors.on-dark}, typography {typography.caption-bold}, rounded {rounded.md}, padding {spacing.sm} {spacing.md}.

Navigation

Top Navigation (Marketing) — Sticky white bar.

Background {colors.canvas}, height ~64px, bottom border 1px solid {colors.hairline-soft}.
Left: Mistral M-mark logo + "MISTRAL AI_" wordmark + horizontal link list (Products, Solutions, Research, Blog, Customers, Company).
Right: "Contact Sales" link + black-pill "Try Studio" CTA.

Signature Components

hero-band-sunset — Atmospheric sunset hero band.

Background gradient linear-gradient(135deg, {colors.sunshine-700} 0%, {colors.sunshine-900} 60%, {colors.primary} 100%) overlaid on photographic mountain landscape.
Layout: hero headline left in {typography.hero-display} ({colors.ink}), subtitle in {typography.subtitle} ({colors.ink-tint}), button row (button-dark + button-secondary), atmospheric mountain photography right.

sunset-stripe-band — Horizontal closing band at the foot of every page.

Multi-stop gradient: {colors.primary} → {colors.sunshine-700} → {colors.sunshine-500} → {colors.yellow-saturated} → {colors.cream}.
Padding {spacing.lg} 0. Spans full width, sits above the footer. THIS IS THE BRAND'S MOST RECOGNIZABLE SIGNATURE ELEMENT.

cta-banner-cream — Page-bottom CTA band on cream surface.

Background {colors.cream}, text {colors.ink}, rounded {rounded.lg}, padding {spacing.section}. "The next chapter of AI is yours." headline in {typography.heading-1} (PP Editorial Old), button row below.

footer-region — Cream-tinted multi-column footer.

Background {colors.footer-cream}, padding {spacing.section} {spacing.xxl}.
5-column link grid (Why Mistral / Explore / Build / Legal + brand mark column).
Bottom: language picker + social icons.

footer-link — Individual footer link.

Background transparent, text {colors.primary}, typography {typography.body-sm}, padding {spacing.xxs} 0.

Do's and Don'ts

Do

Reserve {colors.primary} (saturated orange) for primary CTAs and active states only
Use the sunset stripe band at the foot of every page — it's the brand's most recognizable signature
Pair PP Editorial Old (display) with Inter (UI) — never substitute either with a generic alternative
Apply {rounded.md} (8px) to buttons and {rounded.lg} (12px) to cards consistently
Use cream-yellow surfaces ({colors.cream}) for form panels, feature cards, and footer
Anchor heroes with photographic mountain-sunset imagery (or its visual equivalent — atmospheric gradient sky)
Use stat-display token (PP Editorial 56px) for stat callouts to maintain editorial character

Don't

Don't use pill-shaped buttons ({rounded.full}) — Mistral's geometry is sober and editorial, not playful
Don't introduce additional accent colors beyond the orange/yellow/cream sunset palette
Don't reduce hero leading below 1.05 — the editorial display needs that magazine-grade tightness
Don't replace PP Editorial Old hero displays with Inter — the editorial / sans contrast IS the brand
Don't apply heavy shadows on flat documentation cards; reserve elevation for IDE mockups
Don't drop the sunset stripe band from any page bottom — it's the brand's continuity element

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

Focus on ONE component at a time
Reference component names and tokens directly ({colors.primary}, {component-name}-pressed)
Run npx @google/design.md lint DESIGN.md after edits
Add new variants as separate components: entries
Default to {typography.body-md} for body and {typography.subtitle} for emphasis. Hero displays use {typography.hero-display} (PP Editorial Old).
Keep {colors.primary} confined to primary CTAs, active states, and the sunset stripe band
Cards use {rounded.lg} (12px), buttons use {rounded.md} (8px). Pills ({rounded.full}) reserved for badges only.
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

Usage

Copy DESIGN.md into your project or paste it into your IDE agent chat.
Ask your assistant to follow the tokens for color, typography, spacing, and component styling.
When collaborating, share the file directly—or tap “Copy page link” below so teammates open the same snapshot.

Common questions

What is Mistral AI on explainx.ai?: ### Mistral AI - Open-weight LLM provider. - French-engineered minimalism, purple-toned - description: Mistral AI brands itself with a singular signature — atmospheric sunset gradients (mustard, orange, deep red) layered over phot Listed under category “AI & LLM Platforms”. explainx.ai mirrors the full DESIGN.md document so assistants can cite stable tokens and prose in one place.
What is DESIGN.md?: DESIGN.md blends YAML design tokens—colors, typography, spacing, radii—with markdown that explains intent. Google documents this pattern for agent-driven UI work under Stitch (stitch.withgoogle.com).
How do I use this with ChatGPT, Cursor, Claude Code, or another IDE agent?: Paste the DESIGN.md into your repo root or attach it to the agent conversation, then ask explicitly for layouts, spacing, palette, type scale, and component tone that follow the document. Refresh from this listing when upstream authors publish changes.
Where is the source repo?: Maintainers link to github.com/VoltAgent/awesome-design-md. Community listings on explainx.ai may reference popular aesthetic names for inspiration; that does not imply official endorsement by any trademark holder.
How current is this DESIGN.md?: Explainx snapshots the file at import time. Recorded last update on this listing: May 4, 2026.
Need a fresh DESIGN.md from scratch?: Use the explainx.ai DESIGN.md generator to describe your product and audience; it returns Stitch-style YAML plus narrative guidance you can publish or submit to the registry afterward.

Still exploring the format? Browse the full DESIGN.md registry or draft a new system with our DESIGN.md generator.

Community listing for AI design workflows—not necessarily affiliated with any brand referenced in the name or summary. For context on the format, see Google Stitch.

Reference →DESIGN.md generator →Skills registry →

List Your Design.md

Share your design system with AI agents worldwide

Get started →