A French AI lab's parchment-cream confidence — #fffaeb warm ground dominant, #fa520f orange brand anchor used sparingly, Arial system-font discipline. A European editorial counter-position to the Silicon Valley AI marketing playbook.
This entry documents observable design-language patterns for educational transfer and AI-agent briefing. Screenshots and trademarks are property of their respective owners. AI2 Design is not affiliated with or endorsed by the featured brand. Inspiration here is about language and rhythm - do not reproduce brand identity, logo, product copy, or proprietary features.
A typed, paste-ready design system brief - philosophy, tokens, rules, techniques, and fitness checks. Drop it into Claude, Cursor, v0 or any coding agent and it builds in Mistral’s language, not just a screenshot.
Paste into your agent. No signup, no cost.
Mistral's design language is parchment confidence. A single warm cream ground (#fffaeb) carries the entire identity, a single orange brand mark (#fa520f) anchors it, and a system sans (Arial) handles every typographic moment from caption to display. The page reads like an editorial monthly that decided AI was its subject — generous margins, sparse accents, magazine pacing. Motion is calibrated for editorial weight, not feature spectacle.
Main prompt
Use this capture as a design language transfer brief for my project. Adopt the palette (parchment cream #fffaeb dominant ground, #1f1f1f ink text, #ffffff secondary surfaces, #000000 inversion zones, #fa520f orange brand accent used scarcely, #ecdaa2 cream-brown border), Arial as the sole UI typeface (sizes 14/16/24/32/38/48px at weight 400 — no custom font), editorial container ladder (424/496/512/576/1248/1280 — multiple nested widths for sidebar-and-body layouts), 4px spacing scale heaviest at 2/4/8/12/16/20/24/32/36, Tailwind-standard 640/768/1024/1280 breakpoints, and Framer Motion for restrained reveals (cubic-bezier(0.4, 0, 0.2, 1) at 200-300ms). Treat orange #fa520f as a scarce anchor — it earns its appearances by being rare. Apply the language, not the source brand's copy. When I ask you to build a page or component, enforce these rules by default.
Pure #000000 surface with #fffaeb or #ffffff text inverted — no border, full bleed within container.
Radii4 / 8 / 12Icon treatmentStroke 1.5px monoline; orange fox brand mark is the only filled illustration permitted.Icon setsCustom monoline UI set, Bespoke fox brand logo
HoverButton background colour shift on CTAs (#1f1f1f → #000), Link underline appears with 200ms ease, Card hover bumps border opacity, no lift
Scroll patterns
Framer Motion fade-in + 8-12px upward translate on section entry
No parallax, no GSAP timelines
Sticky header fades in after 80px scroll
Motion is editorial pacing, not feature spectacle
Respect prefers-reduced-motion globally
No idle loops, no decorative animation
Hover changes colour, never position
Focus rings: 2px black ring with 2px offset
Active state: 95% opacity
Orange #fa520f reserved for state signals, never decoration
Approachmobile-first
Tailwind defaults (640/768/1024/1280/1536) — but multiple nested containers preserve sidebar feel on desktop.
<768: collapse to single column 16px gutter, sidebar widths stack
768-1024: 720px main + 312-384px sidebar nest
≥1024: full editorial ladder 424/496/512/576 nested inside 1248-1280 frame
Body text #1f1f1f on #fffaeb passes WCAG AAA (15.4:1)
Orange #fa520f on cream passes AA at 14px+ (4.6:1)
Focus visible state always present
Respect prefers-reduced-motion
Framer Motion for restrained revealsSystem Arial — no webfont costCustom orange fox brand mark as SVG
Typography + parchment colour + a single brand mark are the entire visual identity. No 3D, no Lottie.
Zero webfont budget — Arial system stack
Framer Motion scoped to section reveals, debounced
Brand fox SVG inlined for hero
Use cream #fffaeb as dominant ground — never replace with pure white
Reserve orange #fa520f for brand mark and rare callouts
Trust Arial — refuse the urge to add a custom font
Use black inversion zones as punctuation, not as full dark mode
Don't paint UI surfaces in #fa520f — the orange is voice, not paint
Don't add a second type family — Arial is the discipline
Don't widen the editorial container ladder — magazine sidebars matter
Don't introduce gradient decorations beyond the catalogued 3
Light-first canvas only — no full dark variant
Single typeface lock: Arial
Orange coverage under 4% of pixels per viewport
Font-family grep: only `Arial` or `sans-serif` system stack appears
Background dominant: #fffaeb across more than 60% of surface
Orange #fa520f usage: brand mark + callouts only, never as fill
Container widths: ladder 424/496/512/576/1248/1280 preserved on desktop
Motion: Framer Motion only, no GSAP
Design tokens
Observed token system
Color, type, spacing, gradients, and stacking order captured from the live page and rendered here as living, paste-ready previews.
Inspector
Observable layers
Structure, breakpoints, motion, fonts, and images captured from the live page and kept paste-ready alongside the tokens.
Depth-first walk of the meaningful sections. 12 nodes across 6 levels, shallow to deep by color.
body2
Main3
Header1
div1
div1
Nav
Section (×3)
Footer1
div1
div1
Nav
div
Accessibility
Contrast matrix
32 combinations - 22 pass AA - 18 pass AAA. Each pair is previewed with its real foreground on background; APCA Lc sits alongside the WCAG 2.1 ratio for draft WCAG 3 awareness.
AaThe quick brown fox21.00
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#FFFFFF
bg
#000000
APCA Lc
-108
Use
background on foreground
AaThe quick brown fox21.00
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000000
bg
#FFFFFF
APCA Lc
+106
Use
foreground on background
AaThe quick brown fox20.13
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#FFFAEB
bg
#000000
APCA Lc
-105
Use
background on foreground
AaThe quick brown fox20.13
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000000
bg
#FFFAEB
APCA Lc
+103
Use
foreground on background
AaThe quick brown fox16.48
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#1F1F1F
bg
#FFFFFF
APCA Lc
+103
Use
foreground on background
AaThe quick brown fox16.48
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#FFFFFF
bg
#1F1F1F
APCA Lc
-106
Use
background on foreground
AaThe quick brown fox15.80
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#FFFAEB
bg
#1F1F1F
APCA Lc
-103
Use
background on foreground
AaThe quick brown fox15.80
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#1F1F1F
bg
#FFFAEB
APCA Lc
+100
Use
foreground on background
AaThe quick brown fox15.12
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000000
bg
#ECDAA2
APCA Lc
+85
Use
foreground on accent
Images
Image strategy
Observable image posture - total count, lazy-loading ratio, and format mix. The hero image is measured above the fold.
