Mistral AI

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

개요

Mistral AI는 영화에 가까운 독특한 시각적 특징을 가지고 있습니다. 홈페이지는 "Frontier AI. In your Hands"로 열립니다. 겨자색 오렌지색 일몰 빛을 받아 사진 같은 산 풍경 위에 우아하고 세리프에 가까운 디스플레이 유형으로 렌더링되었습니다. 영웅 아래의 모든 페이지는 동일한 인식 가능한 요소로 닫힙니다. 빨간색→주황색→노란색→크림색으로 이어지는 가로 "일몰 줄무늬" 그라데이션 밴드는 바닥글 바로 위의 페이지 끝 부분을 감싸고 있습니다. 이 줄무늬는 브랜드 인식자로서 홈페이지, 제품/스튜디오, 솔루션/코딩, 뉴스 기사, 문의 양식 및 서비스 등급 페이지에 예외 없이 표시됩니다.

시스템은 히어로 디스플레이용 PP Editorial Old(세리프에 가까운 우아한 디스플레이 페이스)를 Inter와 다른 모든 것(본문, 제목, UI)용으로 결합합니다. 크림색 표면({colors.cream}, {colors.surface-cream-soft}) 앵커 양식 패널 및 기능 카드; 포화 주황색({colors.primary})은 기본 CTA를 전달합니다. 홈페이지의 깊은 산 사진과 르 스튜디오 내부의 다크 코드 목업은 사진의 깊이를 만들어냅니다. 카드는 ``(12px) 모서리가 있는 직사각형입니다. Miro나 Mintlify의 알약 버튼을 어디서나 사용하는 접근 방식에 비해 확실히 덜 장난스럽습니다. 버튼도 알약이 아닌 ``(8px)입니다. Mistral의 기하학적 구조는 동료 제품보다 더 냉정하고 편집적입니다.

**주요 특성:**

• 대기적인 산-일몰 영웅 사진(주황색-빨간색-노란색 그라데이션 하늘)
• 모든 페이지 하단에 수평 "일몰 줄무늬" 밴드({colors.primary} → {colors.sunshine-700} → {colors.yellow-saturated} → {colors.cream})
• 양식 패널 및 기능 카드용 크림색 표면({colors.cream}, {colors.cream-soft})
• PP Editorial Old(또는 유사 Serif에 가까운) 영웅 디스플레이용; 그 밖의 모든 것에는 인터
• ``(8px) 버튼 및 ``(12px) 카드 - 덜 장난스럽고 편집 기하학이 더 많음
• 포화 주황색 기본 CTA({colors.primary})는 모든 작업 호출을 전달합니다

색상

> 소스 페이지: mistral.ai/(홈페이지), /products/studio(Le Studio 제품), /solutions/coding(코딩 솔루션), /news/vibe-remote-agents-mistral-medium-3-5(뉴스), /contact(문의 양식), /services(서비스 계층). 토큰 적용 범위는 6개 페이지 모두에서 동일했습니다.

브랜드 및 액센트

• **미스트랄 오렌지**({colors.primary}): 기본 CTA 색상, 브랜드 오렌지
• **오렌지 딥**({colors.primary-deep}): 누른 상태 및 강조 변형
• **선샤인 300**({colors.sunshine-300}): 대기 연한 주황색-노란색
• **선샤인 500**({colors.sunshine-500}): 중간 스펙트럼 일몰 오렌지
• **Sunshine 700** ({colors.sunshine-700}): 포화 중반 일몰 그라데이션 정지
• **Sunshine 800** ({colors.sunshine-800}): 깊은 일몰 그라데이션 정지
• **선샤인 900**({colors.sunshine-900}): 가장 깊은 선셋 오렌지
• **노란색 채도**({colors.yellow-saturated}): 선셋 스트라이프 그라데이션에 사용된 순수 브랜드 노란색
• **블록 5/6/7** ({colors.block-5}, {colors.block-6}, {colors.block-7}): 스펙트럼이 일몰 그라데이션을 따라 중지됩니다(밝은 노란색 → 중간 노란색 → 진한 주황색)

크림/뉴트럴 웜

• **크림** ({colors.cream}): 양식 패널, 기능 카드, 바닥글을 위한 따뜻한 노란색 크림 표면
• **크림 소프트**({colors.cream-soft}): 더 가벼운 크림 변형
• **크림 디퍼**({colors.cream-deeper}): 배지/태그 칩용으로 더욱 포화된 크림
• **베이지 딥**({colors.beige-deep}): 크림 표면 1px 테두리 색상

표면

• **캔버스 화이트**({colors.canvas}): 페이지 배경 및 카드 표면
• **표면**({colors.surface}): 미묘하고 조용한 배경
• **표면 크림**({colors.surface-cream}): 크림색 노란색 착색 표면
• **표면 코드**({colors.surface-code}): 어두운 코드 블록/IDE 모형 표면
• **가는 선** ({colors.hairline}): 1px 테두리
• **헤어라인 소프트**({colors.hairline-soft}): 더 조용한 칸막이
• **가는 선 강력** ({colors.hairline-strong}): 입력에 대한 1px 테두리가 더 강력함

텍스트

• **잉크**({colors.ink}): 기본 헤드라인 및 본문 텍스트
• **잉크 색조**({colors.ink-tint}): 히어로 오버레이 텍스트를 위한 약간 더 부드러운 검정색
• **차콜**({colors.charcoal}): 본문 강조
• **슬레이트**({colors.slate}): 보조 텍스트
• **스틸**({colors.steel}): 3차 텍스트, 캡션
• **스톤** ({colors.stone}): 음소거된 라벨
• **음소거됨**({colors.muted}): 비활성화됨, 자리 표시자
• **어두운 곳**({colors.on-dark}): 어두운 표면의 흰색 텍스트
• **어두운 음소거 시**({colors.on-dark-muted}): 불투명도가 낮은 흰색
• **크림 위에** ({colors.on-cream}): 크림 표면에 잉크 텍스트

의미

• **링크** ({colors.link}): 인라인 링크 색상(기본 주황색과 일치)

타이포그래피

글꼴군

**PP Editorial Old**(디스플레이): Mistral의 대표적인 세리프체에 가까운 우아한 디스플레이 서체로 주요 디스플레이, 큰 숫자 및 편집 섹션 오프너에 사용됩니다. 현대적인 제품 포지셔닝과 대조되는 약간 고전적이고 지능적인 특성을 지니고 있습니다. 대체: 'Times New Roman', Georgia, serif.

**인터**(UI 구문): 본문, 탐색, 버튼, 레이블, 캡션을 위한 가변 서체입니다. 대체: ui-sans-serif, system-ui, -apple-system, sans-serif.

**JetBrains Mono**(코드): 코드 블록 및 IDE 모형을 위한 고정폭입니다. 대체: 'SF Mono', Menlo, Consolas, 고정 폭.

계층

| 토큰 | 사이즈 | 무게 | 라인 높이 | 문자 간격 | 가족 | |

사용

|---|---|---|---|---|---|---|

| _`` | 84px | 400 | 1.05 | -1.5px | PP 편집 이전 | 영웅("프론티어 AI. 당신의 손에.") |

| _`` | 64px | 400 | 1.10 | -1픽셀 | PP 편집 이전 | 섹션 오프너 |

| _`` | 52px | 400 | 1.15 | -0.5px | PP 편집 이전 | 페이지 헤드라인("팀에 연락하세요.") |

| _`` | 56px | 400 | 1.10 | -1픽셀 | PP 편집 이전 | 통계 콜아웃("75%") |

| _`` | 36px | 500 | 1.20 | -0.5px | 인테르 | 하위 섹션 헤드라인 |

| _`` | 28px | 500 | 1.25 | 0 | 인테르 | 카드 제목 |

| _`` | 22px | 500 | 1.30 | 0 | 인테르 | 기능 타일 제목 |

| _`` | 18px | 500 | 1.40 | 0 | 인테르 | 더 작은 카드 제목 |

| _`` | 18px | 400 | 1.50 | 0 | 인테르 | 영웅 자막, 본문 |

| _`` | 16px | 400 | 1.55 | 0 | 인테르 | 기본 본문 텍스트 |

| _`` | 16px | 500 | 1.55 | 0 | 인테르 | 본문 강조 |

| _`` | 14px | 400 | 1.50 | 0 | 인테르 | 보조 본문 |

| _`` | 14px | 500 | 1.50 | 0 | 인테르 | 활성 사이드바, 버튼 라벨 |

| _`` | 13px | 400 | 1.40 | 0 | 인테르 | 도우미 텍스트 |

| _`` | 13px | 600 | 1.40 | 0 | 인테르 | 배지 라벨 |

| _`` | 12px | 500 | 1.40 | 0 | 인테르 | 바닥글 마이크로카피 |

| _`` | 11px | 600 | 1.40 | 1픽셀 | 인테르 | 섹션 눈썹 |

| _`` | 14px | 500 | 1.30 | 0 | 인테르 | 버튼 라벨 |

| _`` | 14px | 400 | 1.50 | 0 | JetBrains 모노 | 코드 블록 |

원칙

• **편집 / 페어링 없음** — PP 편집 이전(근세리프, 클래식) 앵커 영웅 표시; Inter (geometric sans)는 다른 모든 것을 전달합니다. 대조는 브랜드 목소리입니다.
• **장문 페이지 전체에서 편집 가독성을 높이기 위한 넉넉한 본문 행간**(body-md의 경우 1.55)
• **단단한 영웅 선도**(84px 디스플레이에서 1.05)는 잡지 수준의 인쇄 디스플레이를 만듭니다
• **음수 문자 간격**은 크기에 따라 진행됩니다. 디스플레이 크기는 -1.5px에서 -0.5px를 사용합니다. 작은 머리는 0
로 이완됩니다.
• **통계 표시 토큰**(56px Editorial) 마케팅 통계 콜아웃("75% / 80% / 100%")

레이아웃

간격 시스템

• **기본 단위**: 4px(8px 기본 증분)
• **토큰**: ``(4px) · ``(8px) · ``(12px) · ``(16px) · ``(20px) · `` (24px) · ``(32px) · ``(40px) · ``(48px) · ``(64px) · ``(96px) · `` (120px)
• **섹션 리듬**: 마케팅 페이지에서는 ``(96px)을 사용합니다. 콘텐츠 페이지가 ``(64px)
로 조여집니다.
• **카드 내부 패딩**: 컴팩트 카드의 경우 ``(24px); 기능 패널 및 양식 패널의 경우 _``(32px)

그리드 및 컨테이너

• 마케팅 페이지는 32px 여백과 함께 1280px 최대 너비를 사용합니다
• Hero 밴드는 데스크톱에서 2열 분할(왼쪽 텍스트, 오른쪽 일몰 사진)을 사용합니다
• Le Studio 제품 페이지는 영웅 아래에 3업 기능 그리드를 사용합니다
• 연락처 페이지는 중앙에 크림색 패널이 있는 1열 레이아웃을 사용합니다(최대 너비 ~520픽셀)
• 서비스 페이지는 크림색 기능 패널 구분 스트립이 있는 4계층 카드 레이아웃을 사용합니다

공백 철학

마케팅 표면은 콘텐츠에 넉넉한 호흡 공간을 제공합니다. — ``(120px) 히어로 패딩을 사용하면 산에서 일몰을 보는 사진이 프레임을 채울 수 있습니다. 양식 페이지가 급격히 좁아집니다. 문의 양식 패널은 ``(32px) 내부 패딩을 사용하고 필드는 ``(16px) 간격에 스택됩니다.

고도 및 깊이

시스템은 사진의 전략적인 대기 깊이를 바탕으로 주로 평면적으로 실행됩니다.

| 레벨 | 치료 | |

사용

|---|---|---|

| 0(플랫) | 그림자가 없습니다. _`` 테두리 | 기본 카드, 테이블 행, 양식 입력 |

| 1(미묘함) | _`rgba(0, 0, 0, 0.04) 0px 1px 2px 0px` | 마우스 오버 타일 |

| 2 (카드) | _`rgba(0, 0, 0, 0.04) 0px 4px 12px 0px` | 표준 기능 카드 |

| 3 (모형) | _`rgba(0, 0, 0, 0.08) 0px 12px 24px -4px` | IDE 모형, 코드 편집기 프레임 |

| 4(모달) | _`rgba(0, 0, 0, 0.12) 0px 16px 48px -8px` | 모달, 드롭다운 |

장식적 깊이

• 미스트랄 영웅의 대기 깊이는 산과 일몰 이미지에서 비롯됩니다. 자연광 그라데이션이 작동합니다
• "선셋 스트라이프" 클로징 밴드는 멀티 스톱 그라데이션(빨간색 → 주황색 → 노란색 → 크림색)을 통해 깊이를 전달합니다
• IDE / 코드 모형은 미묘한 그림자가 있는 어두운 캔버스 배경을 사용합니다

도형

테두리 반경 배율

| 토큰 | 가치 | |

사용

|---|---|---|

| _`` | 4픽셀 | 작은 칩, 마이크로 컨트롤 |

| _`` | 6픽셀 | 할인 배지, 컴팩트 UI |

| _`` | 8픽셀 | 버튼, 입력, 검색 알약, 코드 블록 |

| _`` | 12px | 카드, 모달, 패널(주요 카드 반경) |

| _`` | 16px | 더 큰 기능 패널 |

| _`` | 20픽셀 | 추천 강조 카드 |

| _`` | 9999px | 상태 배지, 알약 탭(드물게 사용 - 대부분의 버튼은 알약이 아님) |

반경 척도는 냉정하고 편집적입니다. Mistral은 알약 버튼을 사용하지 않습니다. ``(8px) 버튼용, ``(12px) 카드용, `` 배지 및 희귀 알약 탭용으로 예약되어 있습니다.

사진 기하학

• 영웅 사진은 내부 프레임이 없는 완전한 분위기의 산과 일몰 이미지입니다
• IDE/코드 모형은 어두운 캔버스에 ``(12px) 모서리를 사용하여 렌더링됩니다
• 고객 로고 벽에는 일관된 60~80픽셀 높이의 워드마크가 인라인으로 표시됩니다
• 제품 이미지(Le Studio 모형, 에이전트 UI 모형)는 미묘한 테두리가 있는 `` 패널에 위치합니다

구성요소

> 마우스 오버 금지 정책에 따라 마우스 오버 상태는 문서화되지 않습니다. 기본 및 누름/활성 상태만 해당됩니다.

버튼

**`button-primary`** — 채도가 높은 오렌지색 기본 CTA, 주요 액션입니다.

• 배경 ``, 텍스트 ``, 타이포그래피 ``, 패딩 `10px 20px`, 반올림 ``.
• 누른 상태 `button-primary-pressed`는 ``으로 깊어집니다.
• 비활성화 상태 `button-primary-disabled`는 `` 배경과 `` 텍스트를 사용합니다.

**`button-cream`** — 크림색 표면 섹션에서 흔히 볼 수 있는 따뜻한 크림색 보조 액션.

• 배경 ``, 텍스트 ``, 테두리 `1px solid `, 타이포그래피 ``, 패딩 `10px 20px`, 반올림 ``.

**`button-dark`** — 크림색 표면의 어두운/검은색 기본 CTA.

• 배경 ``, 텍스트 ``, 타이포그래피 ``, 패딩 `10px 20px`, 반올림 ``.

**`button-secondary`** — 설명된 보조 작업.

• 배경 투명, 텍스트 ``, 테두리 `1px solid `, 타이포그래피 ``, 패딩 `10px 20px`, 둥근 ``.

**`button-on-cream`** — 크림색 배경의 흰색 버튼.

• 배경 ``, 텍스트 ``, 테두리 `1px solid `, 타이포그래피 ``, 패딩 `10px 20px`, 반올림 ``.

**`button-link`** — 인라인 주황색 텍스트 링크.

• 배경 투명, 텍스트 ``, 타이포그래피 ``, 패딩 `0`. 활성화에 밑줄을 긋습니다.

카드 및 용기

**`card-base`** — 표준 콘텐츠 카드.

• 배경 ``, 반올림 ``, 패딩 ``, 테두리 `1px solid `.

**`card-feature`** — 패딩이 더 큰 흰색 기능 카드.

• 배경 ``, 둥근 ``, 패딩 ``, 테두리 _`1px solid `{colors.hairline-soft}`. **`카드크림`** — Warm cream-yellow feature card (services tiers, perk callouts). Background `{colors.cream}___CODEBCK_106 9___{colors.ink}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `1px 고체 _{colors.beige-deep}`. **`카드 크림 소프트`** — Lighter cream variant. Background `{colors.surface-cream-soft}`, text `{colors.ink}`, rounded `{rounded.lg}`, padding `___T MPLVAR_142___`. **`카드 기능 제품`** — Product showcase card with subtle elevation. Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `1px 솔리드 {colors.hairline-soft}`, shadow `rgba(0, 0, 0, 0.04) 0px 4px 12px`. **`카드-사진`** — Photographic product card with dark background. Background `{colors.surface-code}`, text `{colors.on-dark}`, rounded `{rounded.lg}___CODEBCK_1088 ____0` (image fills the card). **`가격 카드`** — Standard pricing tier card. Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `1px solid {colors.hairline-soft}`. **`가격 카드 기능`** — 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 솔리드 {colors.hairline-strong}`, rounded `{rounded.md}`, padding `{spacing.sm} {spacing.md}`, height 44px. **`텍스트 입력 중심`** — Activated state. Border switches to `2px 솔리드 {colors.primary}`. **`text-area`** — Multi-line text area for contact form. Background `{colors.canvas}`, text `{colors.ink}`, border `1px 솔리드 _{colors.hairline-strong}`, rounded `{rounded.md}`, padding `{spacing.md}`. **`문의 양식 패널_ __CODEBCK_1114___{colors.cream}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `1px 고체 {colors.beige-deep}`. Hosts text-inputs, text-area, submit `버튼-다크`. Tabs **`알약-탭`** + **`알약-탭 -active`** — Pill-style tab nav (used sparingly on product pages). Inactive: background `{colors.canvas}`, text `{colors.steel}`, border `1px 솔리드 _{colors.hairline}`, padding `{spacing.xs} _{spacing.md}`, rounded `{rounded.full}`. Active: background `{colors.ink}`, text `{colors.on-dark}___CODEB CK_1128___세그먼트 탭`** + **`세그먼트 탭 활성`** — 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 **`배지-주황색`** — Saturated orange badge. Background `___T MPLVAR_187___`, text `{colors.on-primary}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`. **`배지 크림`** — Cream-tinted tag chip. Background `{colors.cream-deeper}`, text `{colors.ink}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`. **`배지-어두움`** — Dark/black status badge. Background `{colors.ink}`, text `___TMPLVAR_ 196___`, 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 **`코드 블록`** — 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}___CODEBCK_1 162___{spacing.md}`. **`코드 블록 헤더`** — Header bar above the code block. Background `{colors.surface-code}___COD EBCK_1165___{colors.on-dark-muted}`, typography `{typography.caption}`, padding `{spacing.xs} _{spacing.md}`, bottom border `1px 솔리드 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-vertical tile in solutions page grid. Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xl}`, border `1px 솔리드 _{colors.hairline-soft}`. **`stat-cell`** — Stat-row cell ("75% more / 80% better"). Background transparent, text `{colors.ink}`, typography `{typography.stat-display}`, padding `___TMPLV AR_224___`. **`고객 추천 카드`** — 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}`. **`로고-벽-항목`** — Customer logo wordmark cell. Background transparent, text `{colors.steel}`, typography `___ TMPLVAR_233___`, padding `{spacing.lg}`. **`faq-accordion-item`** — FAQ panel. Background `__ _TMPLVAR_235___`, rounded `{rounded.md}`, padding `{spacing.xl}`, bottom border `1px 고체 _{colors.hairline}`. **`app-store-badge`** — App Store / Google Play download badge. Background `{colors.ink}`, text `___TMPLVA R_240___`, 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 단색 {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 `선형 그라데이션(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}` (), subtitle in `{typography.subtitle}` (), button row (`버튼-다크` + `버튼-보조`), atmospheric mountain photography right. **`일몰-스트라이프-밴드`** — Horizontal closing band at the foot of every page. Multi-stop gradient: ` _{colors.primary}` → `{colors.sunshine-700}` → `{colors.sunshine-500}___CODEBC K_1218___{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}___CODEBCK_1225 ___{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. **`바닥글 링크`** — 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 () 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) | | 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 **Top nav** below 1024px collapses to hamburger **Hero band**: 2-column hero (text + photography) collapses to stacked at **Pricing tiers**: 4-column desktop → 2-column tablet → 1-column mobile **Stat row**: 3-column → stacked at **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 린트 DESIGN.md` after edits 4. Add new variants as separate `구성요소:` entries 5. Default to `{typography.body-md}` for body and `{typography.subtitle}` for emphasis. Hero displays use `___TMPLVAR_280__ _` (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}`) 배지 전용으로 예약되어 있습니다.

  8. 모든 페이지 모형의 맨 아래에는 항상 Sunset-Stripe-Band 구성요소를 포함합니다.

  알려진 격차

  • 특정 다크 모드 토큰 값은 표시되지 않습니다. 해당 브랜드는 게시된 다크 모드 팔레트를 출시하지 않았습니다
  • 애니메이션/전환 타이밍이 추출되지 않았습니다. 호버/포커스 상태 전환을 위해 150~200ms의 용이성을 권장합니다
  • 기본값 이상으로 명시적으로 캡처되지 않은 양식 유효성 검사 성공 상태
  • 일몰 스트라이프 밴드 그라데이션 중지점은 근사치입니다. 실제 값은 페이지마다 약간 다를 수 있지만 시각적 리듬은 일관됩니다

概要

Mistral AI は、特異な、ほとんど映画のような視覚的特徴を持っています。ホームページは「Frontier AI. In your hand」で開きます。マスタードオレンジの夕日の光に照らされた山の風景写真の上に、エレガントなセリフに近い表示タイプでレンダリングされます。ヒーローの下では、すべてのページが同じ認識可能な要素で閉じられます。赤→オレンジ→黄色→クリームという水平方向の「サンセット ストライプ」グラデーション バンドが、フッターのすぐ上でページの足元を包みます。このストライプはブランドを認識するものであり、ホームページ、製品/スタジオ、ソリューション/コーディング、ニュース記事、お問い合わせフォーム、サービス層のページに例外なく表示されます。

_システムは、ヒーロー表示用の PP エディトリアル オールド (セリフに近いエレガントな表示面) と、その他すべて (本文、見出し、UI) 用の Inter を組み合わせます。クリームイエローの表面 ({colors.cream}、{colors.surface-cream-soft}) はパネルとフィーチャー カードを固定します。飽和したオレンジ ({colors.primary}) はプライマリ CTA を伝送します。ホームページ上の深山の写真と Le Studio 内のダーク コード モックアップが写真の深みを生み出しています。カードは、__CODEBCK_957___ (12 ピクセル) の角を持つ長方形です。Miro や Mintlify のどこにでもピル ボタンを配置するアプローチに比べると明らかに遊び心がありません。ボタンも錠剤ではなく__CODEBCK_958___ (8ピクセル)です。ミストラルのジオメトリは、他のものよりも地味で編集的です。

**主な特徴:**

• 雰囲気のある山と夕日のヒーロー写真 (オレンジ、赤、黄色のグラデーションの空)
• 各ページ下部の水平「サンセット ストライプ」バンド ({colors.primary} → {colors.sunshine-700} → {colors.yellow-saturated} → {colors.cream})
• フォーム パネルおよびフィーチャー カード用のクリームイエローの表面 ({colors.cream}、__TMPLVAR_11___)
• PP エディトリアル ヒーロー表示用の古い (または類似のセリフに近い)。その他についてはインテル
• `` (8 ピクセル) ボタンと `` (12 ピクセル) カード - 遊び心が少なく、より編集的なジオメトリ
• 飽和したオレンジ色のプライマリ CTA ({colors.primary}) は、すべてのアクション呼び出しを実行します

色

> ソース ページ: mistral.ai/ (ホームページ)、/products/studio (Le Studio 製品)、/solutions/coding (コーディング ソリューション)、/news/vibe-remote-agents-mistral-medium-3-5 (ニュース)、/contact (問い合わせフォーム)、/services (サービス層)。 トークンの適用範囲は 6 ページすべてで同一でした。

ブランドとアクセント

• **ミストラル オレンジ** ({colors.primary}): プライマリ CTA カラー、ブランド オレンジ
• **オレンジディープ** ({colors.primary-deep}): 押された状態と強調のバリアント
• **サンシャイン 300** ({colors.sunshine-300}): 大気の明るいオレンジイエロー
• **サンシャイン 500** ({colors.sunshine-500}): ミッドスペクトルのサンセット オレンジ
• **サンシャイン 700** ({colors.sunshine-700}): 飽和中日の日没勾配停止
• **サンシャイン 800** ({colors.sunshine-800}): 深い日没勾配停止
• **サンシャイン 900** ({colors.sunshine-900}): 最も濃いサンセット オレンジ
• **黄色飽和** ({colors.yellow-saturated}): サンセット ストライプ グラデーションで使用される純粋なブランド イエロー
• **ブロック 5/6/7** ({colors.block-5}、__TMPLVAR_24___、__TMPLVAR_25___): スペクトルは日没の勾配に沿って停止します (薄黄色→中黄色→濃いオレンジ)

クリーム / ニュートラル ウォーム

• **クリーム** ({colors.cream}): フォーム パネル、機能カード、フッター用の温かみのあるイエロー クリームの表面
• **クリーム ソフト** ({colors.cream-soft}): より軽いクリームのバリエーション
• **クリームディープ** ({colors.cream-deeper}): バッジ/タグチップ用のより濃厚なクリーム
• **ベージュディープ** ({colors.beige-deep}): クリーム色の表面 1px ボーダーカラー

表面

• **キャンバス ホワイト** ({colors.canvas}): ページの背景とカード表面
• **表面** ({colors.surface}): 微妙に静かな背景
• **表面クリーム** ({colors.surface-cream}): クリームイエローの色合いの表面
• **サーフェス コード** ({colors.surface-code}): ダーク コード ブロック / IDE モックアップ サーフェス
• **ヘアライン** ({colors.hairline}): 1 ピクセルの境界線
• **ヘアライン ソフト** ({colors.hairline-soft}): 静かな仕切り
• **強いヘアライン** ({colors.hairline-strong}): 入力の 1 ピクセルの境界線を強化

テキスト

• **インク** ({colors.ink}): 主要な見出しと本文
• **インクの色合い** ({colors.ink-tint}): ヒーロー オーバーレイ テキストのわずかに柔らかい黒
• **チャコール** ({colors.charcoal}): ボディ強調
• **スレート** ({colors.slate}): 二次テキスト
• **スチール** ({colors.steel}): 三次テキスト、キャプション
• **ストーン** ({colors.stone}): ミュートされたラベル
• **ミュート** ({colors.muted}): 無効、プレースホルダー
• **ダーク上** ({colors.on-dark}): 暗い表面に白いテキスト
• **ダークミュート時** ({colors.on-dark-muted}): 不透明度を下げた白
• **クリーム色** ({colors.on-cream}): クリーム色の表面にインクのテキスト

セマンティック

• **リンク** ({colors.link}): インライン リンクの色 (基本のオレンジと一致)

タイポグラフィ

フォント ファミリー

_**PP エディトリアル オールド** (ディスプレイ): ミストラルの特徴であるセリフに近いエレガントな表示書体で、ヒーロー表示、大きな数字、および編集セクションのオープナーに使用されます。現代的な製品の位置付けとは対照的に、ややクラシックで知的な性格を持っています。フォールバック: 「Times New Roman」、ジョージア州、セリフ

_**Inter** (UI 散文): 本文、ナビゲーション、ボタン、ラベル、キャプションの可変書体。フォールバック: ui-sans-serif、system-ui、-apple-system、sans-serif。

**JetBrains Mono** (コード): コード ブロックと IDE モックアップ用の等幅空間。フォールバック: 'SF Mono'、Menlo、Consolas、monospace。

階層_

|トークン |サイズ |重量 |行の高さ |文字間隔 |家族 | |

を使用します

|---|---|---|---|---|---|---|

| `` | 84ピクセル | 400 | 1.05 | -1.5ピクセル | PP 社説 古い |ヒーロー（『フロンティアAI。 あなたの手の中に。」) |

| `` | 64ピクセル | 400 | 1.10 | -1ピクセル | PP 社説 古い |セクション オープナー |

| `` | 52ピクセル | 400 | 1.15 | -0.5ピクセル | PP 社説 古い |ページの見出し (「チームにご連絡ください。」) |

| `` | 56ピクセル | 400 | 1.10 | -1ピクセル | PP 社説 古い |統計コールアウト (「75%」) |

| `` | 36ピクセル | 500 | 1.20 | -0.5ピクセル |インター |サブセクションの見出し |

| `` | 28ピクセル | 500 | 1.25 | 0 |インター |カードのタイトル |

| `` | 22ピクセル | 500 | 1.30 | 0 |インター |特集タイルのタイトル |

| `` | 18ピクセル | 500 | 1.40 | 0 |インター |カード タイトルを小さくする |

| `` | 18ピクセル | 400 | 1.50 | 0 |インター |ヒーローのサブタイトル、本文 |

| `` | 16ピクセル | 400 | 1.55 | 0 |インター |主な本文テキスト |

| `` | 16ピクセル | 500 | 1.55 | 0 |インター |体の強調 |

| `` | 14ピクセル | 400 | 1.50 | 0 |インター |二次本文 |

| `` | 14ピクセル | 500 | 1.50 | 0 |インター |アクティブなサイドバー、ボタンのラベル |

| `` | 13ピクセル | 400 | 1.40 | 0 |インター |ヘルパー テキスト |

| `` | 13ピクセル | 600 | 1.40 | 0 |インター |バッジのラベル |

| `` | 12ピクセル | 500 | 1.40 | 0 |インター |フッターのマイクロコピー |

| `` | 11ピクセル | 600 | 1.40 | 1ピクセル |インター |セクション眉毛 |

| `` | 14ピクセル | 500 | 1.30 | 0 |インター |ボタンのラベル |

| `` | 14ピクセル | 400 | 1.50 | 0 | JetBrains モノ |コード ブロック |

原則

• **社説 / サンペアリング** — PP 社説 古い (セリフに近い、古典的な) アンカーのヒーロー表示。 Inter (幾何学的サン) はその他すべてを持ちます。コントラストはブランドの声です。
• **長い形式のページ全体で編集を読みやすくするための豊富な本文先頭** (body-md では 1.55)
• **タイトなヒーロー リード** (84 ピクセル ディスプレイで 1.05) により、雑誌グレードのタイポグラフィック表示が作成
• **負の文字間隔**はサイズに応じて進みます。表示サイズは -1.5px から -0.5px を使用します。頭が小さい場合は 0
までリラックスします
• **マーケティング統計コールアウト用の統計表示トークン** (56px エディトリアル) (「75% / 80% / 100%」)

レイアウト

間隔システム_

• **基本単位**: 4px (主増分 8px)
• **トークン**: `` (4px) · `` (8px) · `` (12px) · `` (16px) · `` (20px) · `` (24px) · `` (32 ピクセル) · `` (40 ピクセル) · `` (48 ピクセル) · `` (64 ピクセル) · `` (96 ピクセル) · `` (120 ピクセル)
• **セクションのリズム**: マーケティング ページでは `` (96 ピクセル) を使用します。コンテンツ ページは `` (64px)
に縮小されます
• **カード内部パディング**: コンパクト カードの場合は `` (24 ピクセル)。 `` (32px) 機能パネルおよびフォーム パネル用

グリッドとコンテナ

• マーケティング ページでは最大幅 1280 ピクセル、余白 32 ピクセルを使用します
• ヒーロー バンドはデスクトップで 2 列分割 (テキストは左、夕日の写真は右) を使用します
• Le Studio 製品ページでは、ヒーローの下に 3 アップの機能グリッドが使用されています
• _連絡先ページは、クリーム フォーム パネルが中央に配置された 1 列レイアウトを使用しています (最大幅約 520 ピクセル)
• サービス ページでは、クリーム色のフィーチャー パネル区切りストリップを備えた 4 層カード レイアウトが使用されています

ホワイトスペースの哲学

マーケティング サーフェスによりコンテンツに余裕のあるスペースが与えられます — `` (120 ピクセル) ヒーロー パディングにより、山の夕日の写真がフレームいっぱいに表示されます。 フォーム ページは劇的に狭まります。お問い合わせフォーム パネルは `` (32 ピクセル) の内部パディングを使用し、フィールドは `` (16 ピクセル) のギャップにスタックされます。

標高と深さ

システムは、写真から得られる戦略的な大気深度を使用して、主にフラットに動作します。

|レベル |治療 | |

を使用します

|---|---|---|

| 0 (フラット) |影はありません。 `` 境界線 |デフォルトのカード、テーブル行、フォーム入力 |

| 1 (微妙) | `rgba(0, 0, 0, 0.04) 0px 1px 2px 0px` |カーソルを合わせて高くしたタイル |

| 2 (カード) | `rgba(0, 0, 0, 0.04) 0px 4px 12px 0px` |標準機能カード |

| 3 (モックアップ) | `rgba(0, 0, 0, 0.08) 0px 12px 24px -4px` | IDE モックアップ、コード エディター フレーム |

| 4 (モーダル) | `rgba(0, 0, 0, 0.12) 0px 16px 48px -8px` |モーダル、ドロップダウン |

装飾の深さ_

• ミストラルのヒーローの大気の深さは、山と夕日の写真画像から来ています - 自然光の勾配が効果を発揮します
• 「サンセット ストライプ」の終了バンドは、マルチストップ グラデーション (赤→オレンジ→黄色→クリーム) によって奥行きをもたらします
• IDE / コード モックアップは、微妙なドロップ シャドウのあるダーク キャンバスの背景を使用します

図形

境界線の半径スケール

|トークン |値 | |

を使用します

|---|---|---|

| `` | 4ピクセル |小型チップ、マイクロコントロール |

| `` | 6ピクセル |割引バッジ、コンパクトな UI |

| `` | 8ピクセル |ボタン、入力、検索ピル、コード ブロック |

| `` | 12ピクセル |カード、モーダル、パネル (主要なカード半径) |

| `` | 16ピクセル |大きな機能パネル |

| `` | 20ピクセル |注目の強調カード |

| `` | 9999ピクセル |ステータス バッジ、錠剤タブ (使用頻度は控えめ - ほとんどのボタンは錠剤ではありません) |

半径スケールは地味で編集的です — ミストラルはピルボタンを使用しません。 `` (8 ピクセル) はボタン用、_`` (12 ピクセル) はカード用、__CODEBCK_1013___ はバッジとレアなピルタブ用に予約されています。

写真の幾何学

• ヒーロー写真は、内部フレーミングのない、雰囲気たっぷりの山と夕日の画像です
• IDE/コード モックアップは、暗いキャンバス上に `` (12 ピクセル) の角でレンダリングされます
• 顧客のロゴの壁には、一貫した 60 ～ 80 ピクセルの高さでワードマークがインラインで表示されます
• 製品画像 (Le Studio モックアップ、エージェント UI モックアップ) は、微妙な境界線のある `` パネル内に配置されます

コンポーネント

> ホバー禁止ポリシーに従って、ホバー状態は文書化されません。 デフォルトおよび押された/アクティブな状態のみ。

ボタン

_**`button-primary`** — 飽和したオレンジ色のプライマリ CTA、主要なアクション。

• 背景__CODEBCK_1017___、テキスト__CODEBCK_1018___、タイポグラフィ__CODEBCK_1019___、パディング__CODEBCK_1020___、丸め__CODEBCK_1021___.
• 押された状態__CODEBCK_1022___は__CODEBCK_1023___まで深くなります。
• 無効状態__CODEBCK_1024___は__CODEBCK_1025___背景と__CODEBCK_1026___テキストを使用します。

_**`button-cream`** — 温かみのあるクリームイエローの二次アクション。クリーム色の表面部分によく見られます。

• 背景__CODEBCK_1028___、テキスト__CODEBCK_1029___、境界線__CODEBCK_1030___、タイポグラフィ__CODEBCK_1031___、パディング__CODEBCK_1032___、角丸__CODEBCK_1033___.

**`button-dark`** — クリーム色の表面にダーク/ブラックのプライマリ CTA。

• 背景__CODEBCK_1035___、テキスト__CODEBCK_1036___、タイポグラフィ__CODEBCK_1037___、パディング__CODEBCK_1038___、丸め__CODEBCK_1039___.

**`button-secondary`** — 二次アクションの概要を示します。

• 背景透明、テキスト__CODEBCK_1041___、境界線__CODEBCK_1042___、タイポグラフィ__CODEBCK_1043___、パディング__CODEBCK_1044___、丸め__CODEBCK_1045___.

**`button-on-cream`** — クリーム色の背景に白いボタン。

• 背景__CODEBCK_1047___、テキスト__CODEBCK_1048___、境界線__CODEBCK_1049___、タイポグラフィ__CODEBCK_1050___、パディング__CODEBCK_1051___、丸め__CODEBCK_1052___.

**`button-link`** — オレンジ色のインライン テキスト リンク。

• 背景透明、テキスト__CODEBCK_1054___、タイポグラフィ__CODEBCK_1055___、パディング__CODEBCK_1056___。 アクティブ化に下線を付けます。

カードとコンテナ

**`card-base`** — 標準コンテンツ カード。

• 背景__CODEBCK_1058___、角丸__CODEBCK_1059___、パディング__CODEBCK_1060___、境界線__CODEBCK_1061___.

**`card-feature`** — より大きなパディングが付いた白いフィーチャー カード。

• 背景__CODEBCK_1063___、角丸__CODEBCK_1064___、パディング__CODEBCK_1065___、境界線`1px solid `{colors.hairline-soft}`. **`カードクリーム`** — Warm cream-yellow feature card (services tiers, perk callouts). Background `{colors.cream}___CODEBCK_106 9___{colors.ink}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `1px固体{colors.beige-deep}`. **`カードクリームソフト`** — Lighter cream variant. Background `{colors.surface-cream-soft}`, text `{colors.ink}`, rounded `{rounded.lg}`, padding `___T MPLVAR_142___`. **`カード機能製品`** — Product showcase card with subtle elevation. Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `1pxソリッド {colors.hairline-soft}`, shadow `rgba(0, 0, 0, 0.04) 0px 4px 12px_`. **`カード写真`** — Photographic product card with dark background. Background `{colors.surface-code}`, text `{colors.on-dark}`, rounded `{rounded.lg}___CODEBCK_1088 ___0_` (image fills the card). **`価格カード`** — Standard pricing tier card. Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `1pxソリッド {colors.hairline-soft}`. **`価格カード特集`** — Featured pricing tier (cream background + orange border). Background `{colors.cream}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `2px ソリッド{colors.primary}`. Inputs & Forms **`テキスト入力`** — Standard text field. Background `{colors.canvas}`, text `{colors.ink}`, border `1px ソリッド{colors.hairline-strong}`, rounded `{rounded.md}`, padding `{spacing.sm} {spacing.md}`, height 44px. **`テキスト入力重視`** — Activated state. Border switches to `2px ソリッド{colors.primary}`. **`テキスト領域`** — Multi-line text area for contact form. Background `{colors.canvas}`, text `{colors.ink}`, border `1px 塗りつぶし{colors.hairline-strong}`, rounded `{rounded.md}`, padding `{spacing.md}`. **`コンタクトフォームパネル_ __CODEBCK_1114___{colors.cream}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `1pxソリッド__TMPLVAR_173___`. Hosts text-inputs, text-area, submit `ボタンダーク`. Tabs **`ピルタブ`** + **`ピルタブアクティブ`** — Pill-style tab nav (used sparingly on product pages). Inactive: background `{colors.canvas}`, text `{colors.steel}`, border `1px固体 {colors.hairline}`, padding `{spacing.xs} {spacing.md}`, rounded `{rounded.full}`. Active: background `{colors.ink}`, text `{colors.on-dark}___CODEB CK_1128___セグメント化されたタブ`** + **`セグメント化されたタブ-アクティブ`** — 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 **`バッジ-オレンジ`** — Saturated orange badge. Background `___T MPLVAR_187___`, text `{colors.on-primary}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`. **`バッジクリーム`** — Cream-tinted tag chip. Background `{colors.cream-deeper}`, text `{colors.ink}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px_`. **`バッジ-ダーク`** — Dark/black status badge. Background `{colors.ink}`, text `{colors.on-dark}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px_`. **`プロモーションバナー`** — 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 **`コードブロック`** — 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}___CODEBCK_1 162___{spacing.md}`. **`コードブロックヘッダ`** — 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 ソリッド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 ソリッド{colors.beige-deep}`. **`産業タイル`** — Industry-vertical tile in solutions page grid. Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xl}`, border `1px ソリッド{colors.hairline-soft}`. **`stat-cell`** — Stat-row cell ("75% more / 80% better"). Background transparent, text `{colors.ink}`, typography `{typography.stat-display}`, padding `___TMPLV AR_224___`. **`顧客の声カード`** — Customer quote card (used inside Le Studio and Solutions pages). Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `1px 無地{colors.hairline-soft}`. Quote in `{typography.body-md}`, attribution in `{typography.body-sm}` `{colors.steel}`. **`ロゴウォールアイテム`** — Customer logo wordmark cell. Background transparent, text `{colors.steel}`, typography `___ TMPLVAR_233___`, padding `{spacing.lg}`. **`faq-accordion-item`** — FAQ panel. Background `__ _TMPLVAR_235___`, rounded `{rounded.md}`, padding `{spacing.xl}`, bottom border `1px固体{colors.hairline}`. **`アプリストアバッジ`** — App Store / Google Play download badge. Background `{colors.ink}`, text `___TMPLVA R_240___`, 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 ソリッド {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 **`ヒーローバンド-サンセット`** — Atmospheric sunset hero band. Background gradient `線形勾配(135度、__TMPLVAR_247___ 0%、 {colors.sunshine-900} 60%、__TMPLVAR_249___ 100%)` overlaid on photographic mountain landscape. Layout: hero headline left in `{typography.hero-display}` (), subtitle in `{typography.subtitle}` (), button row (`ボタン-ダーク` + `ボタン-セカンダリ`), atmospheric mountain photography right. **`サンセット-ストライプ-バンド`** — 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-バナー-クリーム`** — Page-bottom CTA band on cream surface. Background `{colors.cream}`, text `{colors.ink}`, rounded `{rounded.lg}___CODEBCK_1225 ___{spacing.section}`. "The next chapter of AI is yours." headline in `{typography.heading-1}` (PP Editorial Old), button row below. **`フッター領域`** — 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. **`フッターリンク`** — 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 () 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) | | 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 **Top nav** below 1024px collapses to hamburger **Hero band**: 2-column hero (text + photography) collapses to stacked at **Pricing tiers**: 4-column desktop → 2-column tablet → 1-column mobile **Stat row**: 3-column → stacked at **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 `コンポーネント:` entries 5. Default to `{typography.body-md}` for body and `{typography.subtitle}` for emphasis. Hero displays use `___TMPLVAR_280__ _` (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}`)バッジ専用に予約されています。

  8。 すべてのページ モックアップの下部に必ず、sunset-stripe-band コンポーネントを含めてください。

  既知のギャップ

  • 特定のダークモード トークン値は表示されません。ブランドは公開されたダークモード パレットを出荷していません
  • アニメーション/遷移のタイミングは抽出されません。ホバー/フォーカス状態遷移には 150 ～ 200 ミリ秒の容易さを推奨
  • フォーム検証の成功状態がデフォルトを超えて明示的に取得されない
  • サンセット ストライプ バンドのグラデーション ストップは近似値です。実際の値はページによって若干異なる場合がありますが、視覚的なリズムは一貫しています

Practical Takeaways for Designers

Studying Mistral's system reveals several repeatable patterns: the use of a single dominant brand color rather than a multi-color palette (reducing decision fatigue), consistent border radius values across interactive elements (creating cohesive visual rhythm), and the deliberate spacing between components (improving scanability). These are not accidental — they are the result of a disciplined design system that prioritizes user experience over visual novelty. Designers building their own systems would benefit from studying how Mistral applies its tokens at mistral.ai.

Practical Takeaways for Designers

Studying Mistral's system reveals several repeatable patterns: the use of a single dominant brand color rather than a multi-color palette (reducing decision fatigue), consistent border radius values across interactive elements (creating cohesive visual rhythm), and the deliberate spacing between components (improving scanability). These are not accidental — they are the result of a disciplined design system that prioritizes user experience over visual novelty. Designers building their own systems would benefit from studying how Mistral applies its tokens at mistral.ai.

Practical Takeaways for Designers

Studying Mistral's system reveals several repeatable patterns: the use of a single dominant brand color rather than a multi-color palette (reducing decision fatigue), consistent border radius values across interactive elements (creating cohesive visual rhythm), and the deliberate spacing between components (improving scanability). These are not accidental — they are the result of a disciplined design system that prioritizes user experience over visual novelty. Designers building their own systems would benefit from studying how Mistral applies its tokens at mistral.ai.

Related Design Systems

Explore similar design languages from the same category:

• Minimax Design System
• X Design System
• Elevenlabs Design System
• Voltagent Design System