Mistral AI

---
version: alpha
name: "Mistral AI"
description: "Mistral AI 的 DESIGN.md 中文参考模板，保留原始 design token 与专业术语，覆盖 color system、typography、layout、components、motion 与 interaction states。"
language: zh-CN
sourceLanguage: en
---

## 概览
Mistral AI 拥有一种单一而近乎电影化的视觉签名：首页以 “Frontier AI. In your hands.” 开场，标题采用优雅的 near-serif display type，叠在带有 mustard-orange 日落光感的山景摄影之上。Hero 之后，每个页面底部都会出现同一个可识别元素：一条水平 “sunset stripe” 渐变带，按 red → orange → yellow → cream 过渡，位于 footer 上方。这个 stripe 是最核心的品牌识别元素；无论 homepage、products/studio、solutions/coding、news article、contact form 还是 services tier page，都会出现。

系统将 PP Editorial Old（near-serif 的优雅 display 字体）用于 hero display，将 Inter 用于其他全部内容（body、heading、UI）。cream-yellow 表面（{colors.cream}、{colors.surface-cream-soft}）承担 form panel 和 feature card；饱和 orange（{colors.primary}）承担 primary CTA；首页深色山景摄影与 Le Studio 内的 dark code mockup 共同创造摄影式深度。卡片使用 {rounded.lg}（12px）矩形圆角，比 Miro 或 Mintlify 的 pill-everywhere approach 更克制。按钮也使用 {rounded.md}（8px）而不是 pill，因此 Mistral 的几何语言更沉稳、更 editorial。

**关键特征：**
- 橙红黄渐变天空的 atmospheric mountain-sunset hero photography
- 每个页面底部都有水平 “sunset stripe” band（{colors.primary} → {colors.sunshine-700} → {colors.yellow-saturated} → {colors.cream}）
- cream-yellow surface（{colors.cream}、{colors.cream-soft}）用于 form panel 与 feature card
- PP Editorial Old 或类似 near-serif 用于 hero display；Inter 用于其他内容
- {rounded.md}（8px）按钮与 {rounded.lg}（12px）卡片，几何语言更 editorial、少一点 playful
- 饱和 orange primary CTA（{colors.primary}）承载所有关键 action

## 色彩

> 来源页面：mistral.ai/（homepage）、/products/studio、/solutions/coding、/news/vibe-remote-agents-mistral-medium-3-5、/contact、/services。六个页面的 token 覆盖一致。

### 品牌与强调色
- **Mistral Orange**（{colors.primary}）：primary CTA color，也是品牌 orange。
- **Orange Deep**（{colors.primary-deep}）：pressed state 与 emphasis variant。
- **Sunshine 300 / 500 / 700 / 800 / 900**（{colors.sunshine-300}、{colors.sunshine-500}、{colors.sunshine-700}、{colors.sunshine-800}、{colors.sunshine-900}）：构成 sunset gradient 的 orange-yellow 光谱。
- **Yellow Saturated**（{colors.yellow-saturated}）：sunset stripe gradient 中的纯 brand yellow。
- **Block 5/6/7**（{colors.block-5}、{colors.block-6}、{colors.block-7}）：sunset gradient 上的光谱 stop（light-yellow → mid-yellow → deep-orange）。

### Cream / Neutral Warm
- **Cream**（{colors.cream}）：form panel、feature card、footer 使用的 warm yellow-cream surface。
- **Cream Soft**（{colors.cream-soft}）：更浅的 cream variant。
- **Cream Deeper**（{colors.cream-deeper}）：badge/tag chip 使用的更饱和 cream。
- **Beige Deep**（{colors.beige-deep}）：cream surface 的 1px border color。

### 表面
- **Canvas White**（{colors.canvas}）：page background 与 card surface。
- **Surface**（{colors.surface}）：更安静的 subtle background。
- **Surface Cream**（{colors.surface-cream}）：cream-yellow tinted surface。
- **Surface Code**（{colors.surface-code}）：dark code-block / IDE mockup surface。
- **Hairline / Hairline Soft / Hairline Strong**（{colors.hairline}、{colors.hairline-soft}、{colors.hairline-strong}）：分别用于普通 border、安静 divider 与 input strong border。

### 文本
- **Ink**（{colors.ink}）：primary headline 与 body text。
- **Ink Tint**（{colors.ink-tint}）：hero overlay text 使用的 softer black。
- **Charcoal / Slate / Steel / Stone / Muted**：依次用于 body emphasis、secondary text、caption、muted label 与 disabled/placeholder。
- **On Dark / On Dark Muted**（{colors.on-dark}、{colors.on-dark-muted}）：dark surface 上的 white 与 reduced-opacity white。
- **On Cream**（{colors.on-cream}）：cream surface 上的 ink text。

### 语义色
- **Link**（{colors.link}）：inline link color，与 primary orange 保持一致。

## 字体

### 字体家族
**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.

### 层级

| Token | 尺寸 | 字重 | 行高 | 字距 | 字体 | 用途 |
|---|---|---|---|---|---|---|
| `{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 | 卡片标题 |
| `{typography.heading-4}` | 22px | 500 | 1.30 | 0 | Inter | 功能区块标题 |
| `{typography.heading-5}` | 18px | 500 | 1.40 | 0 | Inter | Smaller card titles |
| `{typography.subtitle}` | 18px | 400 | 1.50 | 0 | Inter | Hero 副标题、导语正文 |
| `{typography.body-md}` | 16px | 400 | 1.55 | 0 | Inter | 主要正文 |
| `{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 文本 |
| `{typography.caption-bold}` | 13px | 600 | 1.40 | 0 | Inter | 徽章标签 |
| `{typography.micro}` | 12px | 500 | 1.40 | 0 | Inter | 页脚 microcopy |
| `{typography.micro-uppercase}` | 11px | 600 | 1.40 | 1px | Inter | 章节 eyebrow 标签 |
| `{typography.button-md}` | 14px | 500 | 1.30 | 0 | Inter | 按钮标签 |
| `{typography.code-md}` | 14px | 400 | 1.50 | 0 | JetBrains Mono | Code blocks |

### 原则
- **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%")

## 布局

### 间距系统
- **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

### 网格与容器
- Marketing pages use 1280px max-width with 32px gutters
- Hero band uses 2-column split (文本 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

### 留白理念
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.

## 层级与深度

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

| 层级 | 处理方式 | 用途 |
|---|---|---|
| 0 (flat) | 无阴影; `{colors.hairline-soft}` border | 默认卡片、表格行, 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` | 模态框、下拉菜单 |

### 装饰性深度
- 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

## 形状

### 圆角尺度

| Token | 值 | 用途 |
|---|---|---|
| `{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.

### 图像几何
- 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

## 组件

> 根据 no-hover policy，不记录 hover 状态；仅记录默认与 pressed/active 状态。

### 按钮

**`button-primary`** — Saturated-orange primary CTA, the dominant action.
- 背景 `{colors.primary}`, 文本 `{colors.on-primary}`, typography `{typography.button-md}`, padding `10px 20px`, rounded `{rounded.md}`.
- Pressed 状态 `button-primary-pressed` deepens to `{colors.primary-deep}`.
- Disabled 状态 `button-primary-disabled` uses `{colors.hairline}` background and `{colors.muted}` text.

**`button-cream`** — Warm cream-yellow secondary action, common on cream-surface sections.
- 背景 `{colors.cream}`, 文本 `{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.
- 背景 `{colors.ink}`, 文本 `{colors.on-dark}`, typography `{typography.button-md}`, padding `10px 20px`, rounded `{rounded.md}`.

**`button-secondary`** — Outlined secondary action.
- 背景 transparent, 文本 `{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.
- 背景 `{colors.canvas}`, 文本 `{colors.ink}`, border `1px solid {colors.beige-deep}`, typography `{typography.button-md}`, padding `10px 20px`, rounded `{rounded.md}`.

**`button-link`** — Inline orange 文本 link.
- 背景 transparent, 文本 `{colors.primary}`, typography `{typography.body-sm-medium}`, padding `0`. Underline on activation.

### 卡片与容器

**`card-base`** — 标准内容卡片.
- 背景 `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xl}`, border `1px solid {colors.hairline-soft}`.

**`card-feature`** — White feature card with larger padding.
- 背景 `{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).
- 背景 `{colors.cream}`, 文本 `{colors.ink}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `1px solid {colors.beige-deep}`.

**`card-cream-soft`** — Lighter cream variant.
- 背景 `{colors.surface-cream-soft}`, 文本 `{colors.ink}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`.

**`card-feature-product`** — Product showcase card with subtle elevation.
- 背景 `{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.
- 背景 `{colors.surface-code}`, 文本 `{colors.on-dark}`, rounded `{rounded.lg}`, padding `0` (image fills the card).

**`pricing-card`** — Standard 定价层级 card.
- 背景 `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `1px solid {colors.hairline-soft}`.

**`pricing-card-featured`** — Featured 定价层级 (cream background + orange border).
- 背景 `{colors.cream}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `2px solid {colors.primary}`.

### 输入与表单

**`text-input`** — 标准文本字段.
- 背景 `{colors.canvas}`, 文本 `{colors.ink}`, border `1px solid {colors.hairline-strong}`, rounded `{rounded.md}`, padding `{spacing.sm} {spacing.md}`, height 44px.

**`text-input-focused`** — 激活状态.
- Border switches to `2px solid {colors.primary}`.

**`text-area`** — Multi-line 文本 area for contact form.
- 背景 `{colors.canvas}`, 文本 `{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.
- 背景 `{colors.cream}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `1px solid {colors.beige-deep}`. Hosts text-inputs, text-area, submit `button-dark`.

### 标签页

**`pill-tab`** + **`pill-tab-active`** — Pill-style tab nav (used sparingly on product pages).
- Inactive： background `{colors.canvas}`, 文本 `{colors.steel}`, border `1px solid {colors.hairline}`, padding `{spacing.xs} {spacing.md}`, rounded `{rounded.full}`.
- Active： background `{colors.ink}`, 文本 `{colors.on-dark}`.

**`segmented-tab`** + **`segmented-tab-active`** — Underline-style tab navigation.
- Inactive： 文本 `{colors.steel}`, transparent background, padding `{spacing.sm} {spacing.md}`, no bottom border.
- Active： 文本 `{colors.primary}`, 2px bottom border in `{colors.primary}`.

### 徽章与状态

**`badge-orange`** — Saturated orange badge.
- 背景 `{colors.primary}`, 文本 `{colors.on-primary}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.

**`badge-cream`** — Cream-tinted tag chip.
- 背景 `{colors.cream-deeper}`, 文本 `{colors.ink}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.

**`badge-dark`** — Dark/black status badge.
- 背景 `{colors.ink}`, 文本 `{colors.on-dark}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.

**`promo-banner`** — Sticky black promo strip ABOVE the top nav.
- 背景 `{colors.ink}`, 文本 `{colors.on-dark}`, typography `{typography.body-sm-medium}`, padding `{spacing.sm} {spacing.md}`. Carries one-line copy + inline CTA.

### 代码

**`code-block`** — Syntax-highlighted IDE-style code block (Le Studio page mockup, agent demos).
- 背景 `{colors.surface-code}`, 文本 `{colors.on-dark}`, typography `{typography.code-md}`, rounded `{rounded.md}`, padding `{spacing.md}`.

**`code-block-header`** — Header bar above the code block.
- 背景 `{colors.surface-code}`, 文本 `{colors.on-dark-muted}`, typography `{typography.caption}`, padding `{spacing.xs} {spacing.md}`, bottom border `1px solid rgba(255,255,255,0.08)`.

### 文档组件

**`feature-icon-tile`** — Cream-yellow feature icon callout.
- 背景 `{colors.cream}`, rounded `{rounded.md}`, padding `{spacing.md}`, border `1px solid {colors.beige-deep}`.

**`industry-tile`** — Industry-vertical tile in solutions page grid.
- 背景 `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xl}`, border `1px solid {colors.hairline-soft}`.

**`stat-cell`** — Stat-row cell ("75% more / 80% better").
- 背景 transparent, 文本 `{colors.ink}`, typography `{typography.stat-display}`, padding `{spacing.lg}`.

**`customer-testimonial-card`** — Customer quote card (used inside Le Studio and Solutions pages).
- 背景 `{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.
- 背景 transparent, 文本 `{colors.steel}`, typography `{typography.body-md-medium}`, padding `{spacing.lg}`.

**`faq-accordion-item`** — FAQ 面板.
- 背景 `{colors.canvas}`, rounded `{rounded.md}`, padding `{spacing.xl}`, bottom border `1px solid {colors.hairline}`.

**`app-store-badge`** — App Store / Google Play download badge.
- 背景 `{colors.ink}`, 文本 `{colors.on-dark}`, typography `{typography.caption-bold}`, rounded `{rounded.md}`, padding `{spacing.sm} {spacing.md}`.

### 导航

**顶部导航（Marketing）** — Sticky white bar.
- 背景 `{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.

### 标志性组件

**`hero-band-sunset`** — Atmospheric sunset hero band.
- 背景 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.
- 背景 `{colors.cream}`, 文本 `{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.
- 背景 `{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.
- 背景 transparent, 文本 `{colors.primary}`, typography `{typography.body-sm}`, padding `{spacing.xxs} 0`.

## 使用准则

### 应该
- 严格使用本文定义的 brand color、surface token、typography token 与 rounded token，不要临时创造视觉规则
- 将 primary CTA 保持在品牌最有识别度的颜色或按钮形态上，并让 secondary action 明显退后
- 根据组件角色选择正确圆角：button、card、badge、tab 各自遵循本文的 radius scale
- 真实产品 UI mockup、code mockup、logo wall 与 feature card 应使用对应组件 token，而不是重新发明样式
- 在 responsive breakpoint 中保持 hero typography、grid column 与 footer layout 的收缩节奏
- 引用 component id 与 token 名称时保持原样，便于实现时直接映射

### 不要
- 不要把品牌强调色扩展到 body text 或大面积背景，除非该品牌明确把它作为 surface color
- 不要混用不属于该品牌的圆角语言，例如把矩形按钮改成 pill，或把 pill button 改成 square
- 不要引入未记录的新 accent color、重阴影或第二套字体
- 不要在 flat documentation card 上使用过重 elevation；阴影应保留给 mockup、modal 或明确的 featured surface
- 不要删除品牌标志性组件，例如 hero mockup、sunset stripe、workspace card、product matrix 或 footer band

## 响应式行为

### 断点
| 名称 | 宽度 | 关键变化 |
|---|---|---|
| Mobile（小） | < 480px | 单列. Hero scales to 40px (PP Editorial). Pill nav collapses to hamburger. 定价 tiers stack 1-up. |
| Mobile（大） | 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. |

### 触控目标
- 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

### 折叠策略
- **Promo banner** stays full-width; truncates at < 480px
- **Top nav** below 1024px collapses to hamburger
- **Hero band**: 2-column hero (文本 + photography) collapses to stacked at < 1024px
- **定价 tiers**: 4-column desktop → 2-column tablet → 1-column mobile
- **Stat row**: 3-column → stacked at < 768px
- **Hero typography**: 84px → 64px → 52px → 40px
- **页脚**: 5-column desktop → 3-column tablet → 1-column accordion mobile
- **Sunset stripe band** stays full-width on all breakpoints

### 图像行为
- 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

## 迭代指南

1. 一次只聚焦一个组件，避免同时重写多个 surface。
2. 直接引用 component name 与 token（例如 {colors.primary}、{component-name}-pressed、{rounded.full}），不要改写标识符。
3. 修改后运行 npx @google/design.md lint DESIGN.md，检查 broken refs、contrast 与结构问题。
4. 新增状态时用单独 variant 表达，例如 -pressed、-disabled、-focused、-active。
5. 正文默认使用 {typography.body-md}；强调文本、hero display 与 caption 按本文 hierarchy 向下选择。
6. 品牌主色只用于它被授权的角色；如果出现在 generic surface 上，需要重新确认是否合理。
7. 保持按钮圆角、卡片圆角、badge 圆角与 responsive typography 的品牌节奏。

## 已知缺口

- 部分 dark-mode token 没有在公开页面中完整暴露，不能推断为正式 palette。
- animation / transition timing 未全部抽取；一般建议 150–200ms ease，并根据组件语境微调。
- form validation success / error 的完整样式没有覆盖所有场景，应按现有 semantic color 与 badge pattern 实现。
- 个别 feature tint、category color 或 code syntax palette 来自页面观察，正式设计库中可能还有更细的映射。