Skip to content

DESIGN.md

Latest commit

 

History

History
970 lines (822 loc) · 43.2 KB

DESIGN.md

File metadata and controls

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

Design systems in this repo

Status, Aug 2026. Three systems have passed through this codebase. Langfuse × Saturn is now the live site, promoted from /iteration-langfuse to the app root (app/(main)/). The original Maelle design is archived intact at /landedalotofinterviews/sanjana — still fully navigable, just no longer linked from primary nav. The Mistral analysis is kept below as archived reference; it never shipped.

System Where it lives Character
Langfuse × Saturn app/(main)/** — the live site White, ruled bands, hairline-only structure, dev-tool
Maelle components/layout/SiteShell.tsx, app/landedalotofinterviews/sanjana/** Flat near-white, hairline three-column frame, editorial — archived
Mistral archived below Sunset gradients, cream surfaces, orange CTA — never shipped

1 · Langfuse × Saturn — the live site

Lives under app/(main)/ (a route group, so it renders at the site root — (main) never appears in a URL). Langfuse supplies the skin; Saturn (saturnos.com) supplies the structure.

Tokens

Scoped to .lf in app/(main)/layout.tsx — deliberately local, so this design never leaks into the archived Maelle routes, which keep their own tokens.

--ink         #0d0d0e   text
--grey        #6b6b70   body copy
--faint       #9a9aa0   micro-labels, counts, years
--line        #e4e4e4   hairline
--bg          #ffffff   page
--panel       #ffffff   surfaces
--primary     #f55208   the one accent colour — CTAs, hover fills, active states
--primary-hi  #d94406   primary hover/pressed

There is no highlighter token any more (see below) — --primary orange is the system's only colour, used sparingly.

Signature elements

Emphasis (.hl) — retired as a highlighter block; it now just resolves to color: var(--ink). Emphasis on headline text comes from ink weight alone, not a colour treatment.

Registration ticks (<Cross />, rendered via a ticks prop on Band / Section) — 7px dark L-brackets pinned to the corners of a band or box. Defaults to on, but is explicitly turned off (ticks={false}) on every band inside a case study — hero, and all eight numbered Sections — so the long-form read isn't chopped up by corner marks. Left on for shorter, single-band pages (Work list, About, Interests, Reviews mastheads).

Key caps (.btn kbd) — mono, 10.5px, bordered, inside buttons. Three are wired to real keyboard shortcuts via a global keydown listener in app/(main)/layout.tsx: W → /work, G → mailto, R → résumé PDF. Ignored while a modifier key is held or focus is in a form field.

Mono micro-labels — eyebrows, counts, years, category tags, table labels. font-family: var(--font-geist-mono), 11.5px, .12em tracking, var(--faint) colour, natural case — never forced uppercase. Applied via the Eyebrow component (eyebrow-lf mono) or by hand-adding the .mono class.

Back-link icon — case study "All work" back links use an inline Tabler-style chevron-left SVG (not a text arrow glyph), nudging left 3px on hover.

No right-aligned text. Anything that used to sit in a right-hand column or push to the far edge (justify-content: space-between pairs) now stacks underneath the primary text instead, left-aligned: .row (title → kind → year), .band-head (heading → count/link), .cs-titlerow/.cs-byline (title → byline), .cs-pn.is-next (the "Next" prev/next card), the footer's social row and base line. Exceptions, kept as-is on purpose: nav CTA buttons (interactive controls, not copy) and the FAQ accordion's +/− toggle (a functional icon, not text).

Structure — the band

Everything is a full-width horizontal .band inside the three-column .frame (rail / main / toc). Each band optionally carries corner ticks and a closing hairline.

Band vocabulary, all defined in app/(main)/layout.tsx:

Class Use
.mast Page masthead: <h2> title + <p> subtext, shared by the home hero, About, Work, Interests, Reviews
.media Full-bleed image or video; images crop to 4:3, <video> keeps its native 16:9
.statement Mono eyebrow + Reveal scroll-fill sentence
.feature Copy one side, media the other; .is-flip alternates — currently unused site-wide so every case-study/Work card reads identically
.statpair Two cells split by a vertical rule
.rows / .row Stacked, left-aligned list: title, then kind, then year
.band-head Section header with an optional count or link, stacked below the heading
.snap-table / .snap-row Bordered label/value table with a header band, e.g. a case-study snapshot
.metric-table / .metric-row One stat per row: value, label, note stacked vertically
.qa FAQ accordion
.year-card Bordered per-year container on the Reviews page
.photo-marquee / .craft-marquee Auto-scrolling photo rows, pause on hover

Case studies

app/(main)/work/workbench/page.tsx is the reference implementation. Its order: back link → date → title/subtext (.mast-style, no byline) → .media hero (no caption chip) → MetricRows (stacked) → SnapshotTable → eight numbered Sections (ticks={false} throughout) → StatPair impact → reflection.

Sections are numbered with mono eyebrows (01 · Context) and surfaced in a sticky "On this page" table of contents in the left rail — both wayfinding methods are active, unlike the single-method plan in earlier drafts of this doc.

Reviews page

app/(main)/reviews/page.tsx (renamed from "Reading"). One .year-card per year, newest first, each showing a book count under the year instead of beside it. Each book: cover, title, star rating directly under the title, then author, then review. A book can carry status: 'reading' | 'shelf' (see lib/types.ts) which renders as a small outlined .book-status pill next to the title.

Interests page

Ends with a "Stuff I love" single-row photo marquee (/images/craft/*, .craft-marquee), separate from the About page's two-row, counter-scrolling "Off-screen hours" gallery (.photo-marquee, /images/gallery/*).

Motion

  • Reveal fills a sentence grey → ink on scroll progress.
  • UIRail marquees interface shots, pausing on hover.
  • .photo-marquee / .craft-marquee auto-scroll, pausing on hover.
  • All reversible under prefers-reduced-motion.

2 · Maelle — archived

Adapted from the Maelle portfolio template. Monochrome, hairline-ruled, built around a fixed three-column frame where only the centre column scrolls. No longer linked from the live site's nav; still fully live and browsable at /landedalotofinterviews/sanjana.

Tokens

Defined in app/globals.css :root.

--paper    #FBFBFB   page surface
--ink      #111112   primary text
--ink-2    #3A3A3E   secondary text
--mute     #8B8B90   captions, labels, de-emphasised copy
--mute-2   #A8A8AE   faintest text
--line     rgba(17,17,18,.06)
--line-2   #E6E6E6   the workhorse hairline
--canvas   #FBFBFB
--canvas-2 #F2F2F2

The five --paint-* accent tokens are deliberately resolved to greys. The system is monochrome; if an accent is ever reintroduced, change it in one place.

Type

Geist for everything, Geist Mono for micro-labels (.mono, .eyebrow). Loaded in app/layout.tsx as --font-geist / --font-geist-mono.

Body sits at 15px / 1.55 / 500. Weights across the site run one step heavier than default — body 500, labels 600, headings 700–800.

Frame

SiteShell renders a fixed full-viewport layer in three columns, but only for routes under /landedalotofinterviews/sanjana — everywhere else it renders {children} bare, since the live Langfuse × Saturn design brings its own chrome.

minmax(240px, 1fr)   left rail    heading, socials, services (bottom-anchored)
minmax(0, 663px)     centre       the only scrolling element
minmax(240px, 1fr)   right rail   availability, portrait, contact (bottom-anchored)

The top bar uses the same grid-template-columns so its three cells line up with the columns beneath it. Body scroll is locked while the frame is mounted. Below 1000px the rails unpin and the page scrolls normally.

Rules

  • Images are square (1/1) for work thumbnails, 3/4 for portraits.
  • Every page closes with the Let's Talk ◆ marquee and the footer line.
  • No shadows, no radius, no gradients. Structure comes from hairlines alone.

Archived · Mistral analysis

Everything below is the original Mistral AI design analysis the site was first built from. Retained as reference; none of it ships.

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

  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