MiniMax

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

## 概览
MiniMax 将自己呈现为一个中国 AI 基础设施品牌，并带有成熟的双重身份。Marketing surface 和 platform 页面以强烈白色画布、深黑文字强调为核心，品牌语气自信、技术化，并带一点 editorial 气质。但每个模型发布都会拥有自己的高饱和渐变身份卡：M2.7 是火山感 coral-red，Music 2.6 是 magenta-pink，Hailuo 是深蓝，Speech 2.8 是饱和 orange-purple。这些明亮 tile 并排出现时像一组 album cover，每一张都声明独立的产品性格。

DM Sans 锚定所有表面，从 80px oversized hero display 到 12px micro label 都保持一致。它的几何但略带人文的字形同时适配密集文档（14px body 搭配 1.5 line-height 承载长文）和高冲击 marketing display（-2px letter-spacing 收紧 80px 标题）。按钮统一为 pill-shaped（rounded-full），并形成清晰的两层系统：black-pill primary 是主 CTA，outline-pill secondary 用于辅助行动。卡片分成两类：32px 软圆角的高饱和 gradient product showcase，以及 16px 圆角的安静白色 documentation card。

**关键特征：**
- 极简黑白 palette：black（{colors.primary}）与 white（{colors.canvas}），由饱和品牌色 gradient card 打破
- 明确的产品色彩编码：每条模型线都有自己的品牌色（coral M2.7、magenta Music 2.6、blue Hailuo、orange Speech 2.8）
- DM Sans 贯穿整个系统，Inter 作为 fallback
- 胶囊按钮（{rounded.full}）和 pill tab 到处可见；矩形表单仅用于 data table 与密集 docs
- Hero typography 使用紧凑 1.10 line-height 与 -2px letter-spacing 来制造冲击
- Documentation surface 使用三栏布局：左 sidebar nav、中间 prose body、右 table-of-contents
- Nav 上方的 black promo banner（{colors.primary}）用于限时品牌时刻

## 色彩

> 来源页面：minimax.io/（homepage）、/models/text/m27（product showcase）、platform.minimax.io/docs/guides/models-intro（documentation）、/subscribe/token-plan（pricing）。四个页面的 token 覆盖一致。

### 品牌与强调色
- **Brand Coral**（{colors.brand-coral}）：高冲击 signature accent，用于 M2.7 product card、Token Plan hero band、promo CTA strip 与 NEW badge。
- **Brand Magenta**（{colors.brand-magenta}）：Music 2.6 的 secondary product-card identity，用于 music/audio 编码。
- **Brand Blue**（{colors.brand-blue}）：Hailuo video product identity，也是系统里的主要 blue accent。
- **Brand Blue Deep**（{colors.brand-blue-deep}）：form-control activation 与 link emphasis。
- **Brand Blue 700**（{colors.brand-blue-700}）：documentation tag 与 reference text color。
- **Brand Cyan**（{colors.brand-cyan}）：用于 product gradient 与 decorative wash 的 atmospheric blue。
- **Brand Blue 200**（{colors.brand-blue-200}）：code badge 与 info-tag background。
- **Brand Purple**（{colors.brand-purple}）：Speech 2.8 与 minor purple-product identity，也作为 magenta card 的 gradient mate。

### 表面
- **Canvas White**（{colors.canvas}）：primary page background 与 card surface。
- **Surface**（{colors.surface}）：subtle section background、search-pill rest 与 sidebar-nav active state。
- **Surface Soft**（{colors.surface-soft}）：更安静的 section division。
- **Hairline**（{colors.hairline}）：1px input border 与 primary divider。
- **Hairline Soft**（{colors.hairline-soft}）：table-row divider 与 secondary break。

### 文本
- **Ink**（{colors.ink}）：primary headline 与 CTA text，是近黑品牌锚点。
- **Ink Strong**（{colors.ink-strong}）：promo banner 与 hero display 使用的 pure black。
- **Charcoal**（{colors.charcoal}）：light surface 上的 body text。
- **Slate**（{colors.slate}）：secondary text 与 metadata。
- **Steel**（{colors.steel}）：tertiary text、table header 与 inactive sidebar item。
- **Stone**（{colors.stone}）：muted caption 与 inactive tab label。
- **Muted**（{colors.muted}）：footer link 与去强调 label。

### 语义色
- **Success Background**（{colors.success-bg}）：success badge 与 confirmation 的 pale-green wash。
- **Success Text**（{colors.success-text}）：success badge label 的 deep-green ink。
- Error tone 来自 input error border 的 #d45656 red，未抽成 top-level token。

## 字体

### 字体家族
**DM Sans**（primary）：几何 variable sans-serif，用于所有 surface、所有角色。Fallbacks: Inter, Helvetica Neue, Helvetica, Arial。

DM Sans 的优势在于双重适配：在 80px hero display 中，-2px letter-spacing 能形成 magazine-grade 的紧凑感；在 12px micro label 中，略带人文的 counter 又能维持可读性。品牌部署中不使用 italic variant，强调通过 weight（500/600/700）完成。

### 层级

| Token | 尺寸 | 字重 | 行高 | 字距 | 用途 |
|---|---|---|---|---|---|
| {typography.hero-display} | 80px | 600 | 1.10 | -2px | Homepage hero（“MiniMax Music 2.6”） |
| {typography.display-lg} | 56px | 600 | 1.10 | -1.5px | Section opener、主要 page hero |
| {typography.heading-lg} | 40px | 600 | 1.20 | -1px | Sub-page headline（“Token Plan”、“Models Overview”） |
| {typography.heading-md} | 32px | 600 | 1.25 | -0.5px | Subsection header（“Full-Stack Model Matrix”） |
| {typography.heading-sm} | 24px | 600 | 1.30 | 0 | Card title、feature header |
| {typography.card-title} | 20px | 600 | 1.40 | 0 | Product-card title、feature-tile header |
| {typography.subtitle} | 18px | 500 | 1.50 | 0 | Section subtitle、lead body |
| {typography.body-md} | 16px | 400 | 1.50 | 0 | 主要正文 |
| {typography.body-md-bold} | 16px | 700 | 1.50 | 0 | 正文强调 |
| {typography.body-sm} | 14px | 400 | 1.50 | 0 | 次级正文、table cell、navigation |
| {typography.body-sm-medium} | 14px | 500 | 1.50 | 0 | Active sidebar nav、button label |
| {typography.caption} | 13px | 400 | 1.70 | 0 | Documentation caption、fine print |
| {typography.caption-bold} | 13px | 600 | 1.50 | 0 | Badge label、table-header text |
| {typography.micro} | 12px | 400 | 1.50 | 0 | Footer microcopy、chip label |
| {typography.button-md} | 14px | 600 | 1.40 | 0 | Pill button label |

### 原则
- **紧凑 hero leading**（1.10）与 display size 上的 aggressive negative letter-spacing 共同形成 MiniMax 独特的 magazine-quality display。
- **宽松 body leading**（1.50）保证长篇 documentation 舒适；caption 提升到 1.70，接近 scientific-paper clarity。
- **字重纪律：** 400 用于 body，500 用于 medium emphasis，600 用于 heading/button，700 用于 strong inline emphasis；不使用更重字重。
- **单字体策略：** 不要把 DM Sans 与其他 sans-serif 混用。Code sample 可使用 system monospace fallback，但不能让第二字体进入 brand canvas。

## 布局

### 间距系统
- **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}` (80px) · `{spacing.hero}` (96px).
- **Section rhythm**: Marketing pages separate at `{spacing.hero}` (96px) above-fold, then `{spacing.section-lg}` (80px) below; documentation tightens to `{spacing.section}` (64px); table rows compress to `{spacing.md}` (16px).
- **Card internal padding**: Vibrant product cards use `{spacing.xxl}` (32px); documentation cards use `{spacing.lg}–{spacing.xl}` (20–24px); promo strips expand to `{spacing.section}` (64px).

### 网格与容器
- Marketing pages use a 1280px max-width with 32px gutters.
- Homepage product matrix renders as a 4-column row of 32px-rounded gradient cards, each ~280–320px wide.
- AI Product Matrix below uses a 4-column grid with 16px-rounded white cards.
- 文档 surfaces use a 3-column layout: left sidebar nav (~220px), center prose body (~720px max-width), right TOC (~180px). Sidebar persists on desktop; collapses to drawer below 1024px.
- Token Plan / pricing pages use 2-column tabs above a 3-column tier card grid.

### 留白理念
Marketing pages give product photography and color cards generous breathing room — `{spacing.hero}` (96px) above-the-fold creates visual oxygen for the 80px hero display. Inside documentation, whitespace tightens dramatically: section gaps drop to `{spacing.xxl}` (32px), table rows pack down to `{spacing.md}` (16px), and the sidebar nav uses `{spacing.xs}` (8px) vertical rhythm.

## 层级与深度

The system runs predominantly flat. Elevation is reserved for sticky panels, dropdowns, and the rare floating CTA.

| 层级 | 处理方式 | 用途 |
|---|---|---|
| 0 (flat) | 无阴影; `{colors.hairline}` border | 默认卡片、表格行, form inputs |
| 1 (subtle) | `rgba(0, 0, 0, 0.04) 0px 1px 2px 0px` | Card-recommendation, hover-elevated tiles |
| 2 (card) | `rgba(0, 0, 0, 0.08) 0px 4px 6px 0px` | Standard feature cards, dropdowns |
| 3 (atmospheric) | `rgba(0, 0, 0, 0.08) 0px 0px 22px 0px` | Diffuse glow on featured product cards |
| 4 (modal) | `rgba(36, 36, 36, 0.08) 0px 12px 16px -4px` | Modals, confirmation dialogs, sticky panels |

### 装饰性深度
- The vibrant gradient product cards carry their own atmospheric depth via internal radial gradients and silhouette imagery — no shadow needed; the color does the work.
- Brand-tinted shadows (`rgba(44, 30, 116, 0.16) 0px 0px 15px`) appear under purple-themed cards for subtle ambient lift.
- Dotted/grain textures occasionally appear inside product cards as photographic-content decoration; these are not formalized as system tokens.

## 形状

### 圆角尺度

| Token | 值 | 用途 |
|---|---|---|
| `{rounded.xs}` | 4px | Code chips, micro-controls |
| `{rounded.sm}` | 6px | Compact controls, table cells |
| `{rounded.md}` | 8px | Inputs, secondary buttons, search pill |
| `{rounded.lg}` | 12px | 文档 cards, recommendation tiles |
| `{rounded.xl}` | 16px | Standard feature cards, AI product tiles |
| `{rounded.xxl}` | 20px | Larger feature panels |
| `{rounded.xxxl}` | 24px | AI product tile feature variants |
| `{rounded.hero}` | 32px | Vibrant gradient product cards, promo CTA strip |
| `{rounded.full}` | 9999px | All buttons, all pill tabs, badges |

### 图像几何
- Vibrant product cards use 32px corner softening — distinct from the 16px used on quiet white cards. The doubled radius is the visual signature of "this is a featured product moment."
- Product imagery inside cards is treated as photographic content (silhouettes, dark portrait studio lighting) without rounded internal frames.
- Avatar circles (rare, in testimonials) are `{rounded.full}` — perfect circles.

## 组件

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

### 按钮

**`button-primary`** — Black pill primary CTA, the dominant action across all surfaces.
- 背景 `{colors.primary}`, 文本 `{colors.on-primary}`, typography `{typography.button-md}`, padding `11px 24px`, rounded `{rounded.full}`.
- Pressed 状态 `button-primary-pressed` lifts to `{colors.charcoal}`.
- Disabled 状态 `button-primary-disabled` uses `{colors.hairline}` background and `{colors.muted}` text.

**`button-secondary`** — Outlined pill secondary action, paired with primary in dual-CTA hero patterns.
- 背景 transparent, 文本 `{colors.ink}`, border `1px solid {colors.ink}`, typography `{typography.button-md}`, padding `11px 24px`, rounded `{rounded.full}`.

**`button-tertiary`** — White-fill quieter pill, used for tertiary nav and informational CTAs.
- 背景 `{colors.canvas}`, 文本 `{colors.ink}`, border `1px solid {colors.hairline}`, typography `{typography.button-md}`, padding `11px 24px`, rounded `{rounded.full}`.

**`button-link`** — 行内文本链接 styled as a subtle button.
- 背景 transparent, 文本 `{colors.ink}`, typography `{typography.body-sm-medium}`, padding `8px 0`. Underline appears on activation.

**`button-icon-circular`** — 36×36px circular utility button (carousel arrows, share, copy).
- 背景 `{colors.canvas}`, 文本 `{colors.ink}`, border `1px solid {colors.hairline}`, rounded `{rounded.full}`.

### Vibrant Product Cards

**`product-card-coral`** — M2.7 / Token Plan signature card.
- 背景 `{colors.brand-coral}`, 文本 `{colors.on-dark}`, rounded `{rounded.hero}` (32px), padding `{spacing.xxl}`.
- Hosts the M2.7 wordmark in massive `{typography.display-lg}` with white tagline.

**`product-card-magenta`** — Music 2.6 product showcase.
- 背景 `{colors.brand-magenta}`, 文本 `{colors.on-dark}`, rounded `{rounded.hero}`, padding `{spacing.xxl}`.

**`product-card-blue`** — Hailuo Video product showcase.
- 背景 `{colors.brand-blue}`, 文本 `{colors.on-dark}`, rounded `{rounded.hero}`, padding `{spacing.xxl}`.

**`product-card-purple`** — Speech 2.8 / variant product showcase.
- 背景 `{colors.brand-purple}`, 文本 `{colors.on-dark}`, rounded `{rounded.hero}`, padding `{spacing.xxl}`.

**`product-card-photo`** — Dark portrait product card (homepage S2 placement, video-emotion product).
- 背景 `{colors.primary}` (black with overlaid product photo), 文本 `{colors.on-dark}`, rounded `{rounded.hero}`, padding `{spacing.xxl}`.

### 卡片与容器

**`card-base`** — Standard documentation/feature card.
- 背景 `{colors.canvas}`, rounded `{rounded.xl}`, padding `{spacing.xl}`, border `1px solid {colors.hairline}`.

**`card-feature`** — Quieter feature panel on light gray.
- 背景 `{colors.surface}`, rounded `{rounded.xl}`, padding `{spacing.xxl}`.

**`card-recommendation`** — "Recommended Reading" tile in documentation footer.
- 背景 `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.lg}`, border `1px solid {colors.hairline}`.

**`promo-cta-card`** — Bright orange "Refunds of 10%..." promo strip with embedded CTA pill.
- 背景 `{colors.brand-coral}`, 文本 `{colors.on-dark}`, rounded `{rounded.hero}`, padding `{spacing.section}`. Embedded button uses `button-tertiary` (white pill on coral) for the "Join Now" action.

**`ai-product-tile`** — White card in the AI Product Matrix grid (Agent, Hailuo Video, MiniMax Audio).
- 背景 `{colors.canvas}`, rounded `{rounded.xxxl}`, padding `{spacing.xl}`, border `1px solid {colors.hairline}`. Carries an icon/illustration top, title `{typography.card-title}`, description `{typography.body-sm}`.

### 输入与表单

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

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

**`text-input-error`** — Validation error state.
- Border switches to `1px solid #d45656`; error label below in matching red `{typography.body-sm}`.

**`search-pill`** — 文档 top-bar search field.
- 背景 `{colors.surface}`, 文本 `{colors.steel}`, typography `{typography.body-sm}`, rounded `{rounded.md}`, height 36px, border `1px solid {colors.hairline}`.

### 标签页

**`segmented-tab`** + **`segmented-tab-active`** — Underline-style tab navigation (Benchmark / Self-Evaluation / Multi-Agent Collaboration on the M2.7 page).
- Inactive： 文本 `{colors.steel}`, transparent background, padding `{spacing.md} {spacing.lg}`. Active： 文本 shifts to `{colors.ink}`, 2px bottom border in `{colors.ink}`.

**`pill-tab`** + **`pill-tab-active`** — 定价-page tab nav (Token Plan / Audio Subscription / Video Package).
- Inactive： background `{colors.canvas}`, 文本 `{colors.steel}`, border `1px solid {colors.hairline}`, padding `{spacing.xs} {spacing.md}`, rounded `{rounded.full}`.
- Active： background `{colors.primary}`, 文本 `{colors.on-primary}`, no border (or matching black border).

### 徽章与状态

**`badge-success`** — Pale-green confirmation badge ("Available", "Active").
- 背景 `{colors.success-bg}`, 文本 `{colors.success-text}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.

**`badge-new`** — Coral "NEW" / "Live" pill for fresh releases.
- 背景 `{colors.brand-coral}`, 文本 `{colors.on-dark}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.

**`badge-beta`** — Pale-blue "BETA" / informational pill.
- 背景 `{colors.brand-blue-200}`, 文本 `{colors.brand-blue-deep}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.

**`badge-code`** — Inline code-style chip ("Code", "API").
- 背景 `{colors.brand-blue-200}`, 文本 `{colors.brand-blue-deep}`, typography `{typography.caption-bold}`, rounded `{rounded.sm}`, padding `2px 6px`.

**`promo-banner`** — Sticky black promotional strip ABOVE the top nav ("Invite & Earn — Rewards for Both!").
- 背景 `{colors.primary}`, 文本 `{colors.on-primary}`, typography `{typography.body-sm-medium}`, padding `{spacing.sm} {spacing.lg}`. Carries one-line copy with optional inline link.

### 数据表

**`data-table`** — 文档 models comparison table.
- 背景 `{colors.canvas}`, 文本 `{colors.ink}`, typography `{typography.body-sm}`, rounded `{rounded.md}`, border `1px solid {colors.hairline}`.

**`data-table-header`** — Top header row of the data table.
- 背景 `{colors.surface}`, 文本 `{colors.steel}`, typography `{typography.caption-bold}`, padding `{spacing.sm} {spacing.md}`.

**`data-table-row`** — Body rows.
- 背景 `{colors.canvas}`, 文本 `{colors.ink}`, typography `{typography.body-sm}`, padding `{spacing.md}`, bottom border `1px solid {colors.hairline-soft}`.

### 导航

**顶部导航（Marketing）** — Sticky white bar with logo, link list, and right-side CTAs.
- 背景 `{colors.canvas}`, height ~64px, bottom border `1px solid {colors.hairline-soft}`.
- Left: MiniMax wordmark + horizontal link list (Models, Product, API, Company).
- Right: black-pill "Contact Us" + outlined-pill "Login".

**Top Navigation (文档/Platform)** — Compressed nav with center search-pill and right-side account/upgrade CTAs.
- 背景 `{colors.canvas}`, height ~56px, with search-pill at center and "文档 / Account / Subscribe" links + black-pill "Sign Up" right.

**`sidebar-nav-item`** + **`sidebar-nav-item-active`** — 文档 left rail link entries.
- Inactive： background transparent, 文本 `{colors.charcoal}`, typography `{typography.body-sm}`, rounded `{rounded.sm}`, padding `{spacing.xs} {spacing.md}`.
- Active： background `{colors.surface}`, 文本 `{colors.ink}`, typography `{typography.body-sm-medium}`.

**`doc-toc-item`** — Right-rail table-of-contents links.
- 背景 transparent, 文本 `{colors.steel}`, typography `{typography.body-sm}`, padding `{spacing.xs} 0`. Active item color shifts to `{colors.ink}`.

### 标志性组件

**`hero-band-marketing`** — Centered hero with massive 80px display + dual-CTA pair.
- Layout: centered headline in `{typography.hero-display}` ({colors.ink}), centered subtitle in `{typography.subtitle}` ({colors.steel}), centered button row (`button-primary` + `button-secondary`).

**`product-matrix-grid`** — 4-column horizontal scroll of vibrant gradient product cards (homepage "Full-Stack Model Matrix").
- Each tile uses one of the `product-card-*` variants (coral, magenta, blue, purple, photo).
- Card title in `{typography.display-lg}` (M2.7 wordmark) or `{typography.heading-lg}` (Music 2.6).
- Below the wordmark: thin tagline in `{typography.body-sm}` 80% white opacity.
- Optional badge top-right: `badge-new`.
- Card heights are uniform (~360–400px); the row scrolls horizontally on mobile.

**`ai-product-matrix`** — 4-column grid of white product tiles below the vibrant matrix (Agent / Hailuo Video / Audio / Video).
- Each tile is `ai-product-tile` chrome.
- Top: 100px-tall illustration zone (often line-art icon or 3D mark).
- Below: title in `{typography.card-title}`, description in `{typography.body-sm}` `{colors.steel}`.

**`docs-prose-block`** — 文档 main content area.
- Max-width ~720px, centered. Body in `{typography.body-md}` `{colors.charcoal}` line-height 1.6.
- Inline code in `{typography.body-md}` monospace fallback with `{colors.surface}` background and `{rounded.xs}` corners.

**`models-comparison-table`** — 文档 table comparing model sizes and features.
- Uses `data-table` chrome. Each row carries a model name (linkified, in `{colors.ink}` body-sm-medium), a description column (`{colors.charcoal}`), and a features bullet list column.

**`testimonial-stat-row`** — Stats strip ("214,000+ Enterprise Clients & Developers", "0+ Countries Served").
- Horizontal row of 4 stat cells, each cell with a large number in `{typography.heading-lg}` `{colors.ink}` and a label below in `{typography.body-sm}` `{colors.steel}`.

**`footer-region`** — Dense black-canvas multi-column footer.
- 背景 `{colors.footer-bg}`, padding `{spacing.section} {spacing.xxl}`.
- Top row: MiniMax wordmark ("intelligence with everyone" tagline) and social icons (X, Twitter, GitHub, etc.).
- Body: 4-column link grid (Research / Product / API / Company / News).
- Section headers in `{typography.body-sm-medium}` `{colors.on-dark}`.

**`footer-link`** — Individual link entry inside the footer column.
- 背景 transparent, 文本 `{colors.muted}`, typography `{typography.body-sm}`, padding `{spacing.xxs} 0`. Active/visited states do not change color — only opacity shifts on activation.

## 使用准则

### 应该
- 严格使用本文定义的 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 drops to 40px. Pill nav collapses to hamburger. Product matrix horizontal-scroll. 页脚 1-column accordion. |
| Mobile（大） | 480 – 767px | Same as small but AI product matrix renders 2-up. |
| Tablet | 768 – 1023px | 2-column AI product matrix. Pill-tab nav returns. 文档 sidebar collapses to drawer. |
| Desktop | 1024 – 1279px | Full 4-column product matrix; 3-column docs grid (sidebar / body / TOC). |
| Wide Desktop | ≥ 1280px | Wider hero gutters, larger product photography, fixed 220px sidebar. |

### 触控目标
- Pill buttons render at 38–40px effective height — bumps to 44px on mobile via padding override.
- Circular icon buttons: 36×36px desktop → 44×44px on mobile.
- Form inputs render at 40px height; bumps to 44px on mobile.
- Sidebar nav items render at ~32px tall — bumps to 44px on mobile drawers.

### 折叠策略
- **Promo banner** stays full-width; collapses to single line at < 480px with truncation.
- **Top nav** below 1024px collapses to hamburger; horizontal links move into drawer.
- **文档 grid**: 3-column desktop → sidebar-drawer at < 1024px → single-column with collapsible sidebar at < 768px.
- **Product matrix**: 4-column desktop → horizontal-scroll at < 1024px (carousel-style with snap points).
- **AI Product Matrix**: 4-column → 2-column at tablet → 1-column at mobile.
- **Hero typography**: `{typography.hero-display}` (80px) → 56px at < 1024px → 40px at < 768px → 32px at < 480px.
- **Stats strip**: 4-column → 2×2 at < 768px → 1-column at < 480px.

### 图像行为
- Product card imagery uses photographic content with internal gradient overlays; lazy-loaded below the fold.
- AI product tile illustrations are SVG-based; remain crisp at all breakpoints.
- Avatar imagery in testimonials uses 1:1 aspect ratio with `{rounded.full}` masking.

## 迭代指南

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 来自页面观察，正式设计库中可能还有更细的映射。