XAI

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

## 概览
xAI 是 Elon Musk 的 frontier-AI lab，网站用工程化克制来承载这种姿态：edge-to-edge 的 near-black canvas `{colors.canvas}` (`#0a0a0a`)、所有交互元素都是 white outline pill，并由单一专有 geometric sans `Universal Sans` 以 weight 400 承载所有 display headline。没有 gradient hero，没有 atmospheric backdrop，也没有 product screenshot。品牌读起来是自信而稀疏的：更像研究实验室发布成果，而不是 SaaS marketing site。

Type 是第二个决定性声音。`Universal Sans` 以 weight 400 (regular) 承载所有 display，并使用强烈 negative tracking（96 px 时 `-2.4 px`，沿 display ladder 逐级缩小）。技术 label、eyebrow 和 metric counter 使用 `Geist Mono`（uppercase，1.4 px positive tracking）；每个 section eyebrow 读起来更像 code comment，而不是 marketing label。

每个 interactive element 都是 pill（`{rounded.pill}` 9999 px），带 1 px white-translucent border `rgba(255, 255, 255, 0.25)`。Button shape 从不变化；同一个 translucent-white pill 承载 "Try Grok"、"Read announcement"、"Custom Voices"、"Sign up now" 以及所有 "Read" anchor。Pill 就是完整的 shape system。

**Key Characteristics:**
- 单一 near-black canvas（`{colors.canvas}` `#0a0a0a`），white outline pill 构成完整 interactive vocabulary。
- Display 使用 Universal Sans weight 400，label 使用 Geist Mono uppercase tracked；双字体对比本身就是 brand voice。
- 每个 button 都是 `{rounded.pill}` outline，带 translucent-white border。除一个变体（Sign Up 上的 white-filled pill）外，品牌从不使用 filled CTA。
- Card 是紧凑的 `{rounded.sm}` 8 px rectangle，使用略亮的 `{colors.canvas-card}` (`#191919`) fill 和 hairline border。没有 shadow。
- Design token 中有一组 muted accent palette：sunset-orange / dusk-purple / twilight-violet / breeze-blue，但在主 marketing surface 上很少出现；它们保留给 product illustration / icon。
- Display headline 上的大幅 negative letter-spacing（96 px 时 `-2.4 px`）让 typography 呈现精确、收拢的观感。

## Colors

### Brand & Accent
- **White** (`{colors.primary}` — `#ffffff`): 品牌的 primary "color"；用于 button outline、button-primary fill 和所有 display text。品牌 signature 是 white-on-near-black。
- **Sunset Orange** (`{colors.accent-sunset}` — `#ff7a17`): 用于 product illustration 和 accent moment 的暖橙色。
- **Sunset Soft** (`{colors.accent-sunset-soft}` — `#ffc285`): Sunset accent 的更浅变体。
- **Dusk Purple** (`{colors.accent-dusk}` — `#7c3aed`): 用于 product illustration 的 deep purple。
- **Twilight** (`{colors.accent-twilight}` — `#c4b5fd`): Soft violet，illustrative accent。
- **Breeze Blue** (`{colors.accent-breeze}` — `#a0c3ec`): Soft blue，illustrative accent。
- **Midnight** (`{colors.accent-midnight}` — `#0d1726`): 用于 illustrative background 的 deep blue-black。

### Surface
- **Canvas** (`{colors.canvas}` — `#0a0a0a`): 默认 near-black page background。品牌唯一真正的 surface。
- **Canvas Soft** (`{colors.canvas-soft}` — `#1a1c20`): 略亮的 dark fill，用于 hovered nav item 和 tooltip。
- **Canvas Card** (`{colors.canvas-card}` — `#191919`): Product-feature card 内部使用的 charcoal card fill。
- **Canvas Mid** (`{colors.canvas-mid}` — `#363a3f`): 用于 nested surface 和 code mockup background 的 mid-dark。
- **Hairline** (`{colors.hairline}` — `#212327`): Dark surface 上的 1 px solid divider。

### Text
- **Ink** (`{colors.ink}` — `#ffffff`): Canvas 上的默认文本色，pure white。
- **Ink Hover** (`{colors.ink-hover}` — `#fafaf7`): 略 off-white，用于 hover state（component spec 中按 no-hover policy 过滤）。
- **Body** (`{colors.body}` — `#dadbdf`): Secondary body text，用于较轻的 supporting copy。
- **Body Mid / Mute** (`{colors.body-mid}` — `#7d8187`): Mid-emphasis body 和 mute text，用于 caption、fine print。

### Semantic Colors
品牌在 marketing site 上不暴露独立 semantic palette。Validation cue 使用 white-on-canvas 层级。

## Typography

### Font Family
系统由两套字体建立层级：
1. **universalSans** — 专有 geometric sans，用于所有 display、body、button 和 link role。Marketing surface 上只使用 weight 400（品牌的克制是 voice 的一部分）。Display size 的 negative letter-spacing 是视觉 signature。
2. **GeistMono** — 用于 uppercase section eyebrow、label caption 和 metric counter。12 – 14 px 下使用 positive tracking（1.2 – 1.4 px）。

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | 用途 |
|---|---|---|---|---|---|
| `{typography.display-xl}` | 96px | 400 | 96px | -2.4px | 最大 hero scale。 |
| `{typography.display-lg}` | 72px | 400 | 72px | -1.8px | Sub-hero display。 |
| `{typography.display-md}` | 48px | 400 | 48px | -1.2px | Section headline。 |
| `{typography.display-sm}` | 32px | 400 | 36px | -0.6px | Card-cluster heading。 |
| `{typography.display-xs}` | 20px | 400 | 28px | 0 | Inline display。 |
| `{typography.body-lg}` | 18px | 400 | 28px | 0 | Lead paragraph。 |
| `{typography.body-md}` | 16px | 400 | 24px | 0 | Default body。 |
| `{typography.body-sm}` | 14px | 400 | 20px | 0 | Secondary body。 |
| `{typography.caption-mono}` | 14px | 400 | 20px | 1.4px | Section eyebrow（GeistMono uppercase）。 |
| `{typography.caption-mono-sm}` | 12px | 400 | 16px | 1.2px | Small mono label。 |
| `{typography.button-md}` | 14px | 400 | 20px | 0 | Button label。 |

### Principles
- **所有内容都使用 weight 400。** 品牌从不 bold。强调由 negative tracking + size hierarchy 完成。
- **Display size 使用紧凑 negative tracking。** 改回 neutral tracking 会丢失精确感。
- **Eyebrow 使用 GeistMono uppercase。** 通过 positive tracking（1.4 px）让 mono 读起来像 code comment。

### Font Substitutes
universalSans 是专有字体。开源替代：
- **Display + body** — *Inter* weight 400，并在 display size 使用 `-0.04em` 到 `-0.02em` letter-spacing，是最接近的方案。*Geist* 是第二选择。
- **Mono** — *Geist Mono* 是已记录的品牌伴随字体；*JetBrains Mono* 或 *IBM Plex Mono* 可作为替代。

## Layout

### Spacing System
- **Base unit**: 4 px。
- **Tokens**: `{spacing.xxs}` 2 px · `{spacing.xs}` 4 px · `{spacing.sm}` 8 px · `{spacing.md}` 12 px · `{spacing.lg}` 16 px · `{spacing.xl}` 24 px · `{spacing.2xl}` 32 px · `{spacing.3xl}` 48 px · `{spacing.4xl}` 64 px。
- **Section padding**: Desktop 上 hero / content band 使用 `{spacing.4xl}` 64 px。
- **Card interior padding**: `{spacing.xl}` 24 px。

### Grid & Container
- Marketing content 居中，宽约 1200 px。
- Product / announcement card grid：desktop 2-up，mobile 1-up。

### Responsive Strategy

#### Breakpoints

| Name | Width | 关键变化 |
|---|---|---|
| Mobile | < 768px | Hero 从 96 缩放到 48 px；grid 1-up；hamburger nav。 |
| Desktop | ≥ 768px | Full hero + 2-up grid。 |

#### Touch Targets
Button 渲染高度约 32 – 40 px（8 vertical padding + 20 line）。Mobile 会放大 touch area 以满足 WCAG 44 × 44 px。

#### Image Behavior
品牌在 product moment（Grok、Voice、API）中使用稀疏 SVG illustration。Marketing surface 上没有 photography。

## Elevation & Depth

| Level | Treatment | 用途 |
|---|---|---|
| Level 0 — Flat | 无 shadow、无 border。 | 默认。 |
| Level 1 — Hairline | 1 px solid `{colors.hairline}` border。 | Card chrome、button outline（带 translucent white）。 |

品牌不使用 shadow。所有 elevation cue 都由 hairline border 承担。

## Shapes

### Border Radius Scale

| Token | Value | 用途 |
|---|---|---|
| `{rounded.none}` | 0px | Full-bleed band。 |
| `{rounded.sm}` | 8px | Card chrome（品牌的 `--radius` 值）。 |
| `{rounded.pill}` | 9999px | 所有 button，品牌通用 interactive shape。 |
| `{rounded.full}` | 9999px | Circular icon container。 |

## Components

### Buttons

**`button-primary`** — 少见的 white-filled pill（用于唯一的 Sign Up CTA）。
- Background `{colors.primary}` white、text `{colors.on-primary}` near-black、1 px solid white border、label `{typography.button-md}`、padding `{spacing.xs} {spacing.md}`、shape `{rounded.pill}` 9999 px。

**`button-outline-on-dark`** — 规范的 white-outline pill，用于所有 non-primary CTA。
- Background `{colors.canvas}`（实践中为 transparent，即 `rgba(0,0,0,0)`）、text `{colors.ink}` white、1 px solid `{colors.hairline}` border（运行时为 translucent white），使用相同 typography / padding scale / shape。

**`button-outline-sm`** — card-cluster CTA 使用的更小 outline pill。
- 与 `button-outline-on-dark` 相同，但 padding 更紧，为 `{spacing.xs} {spacing.md}`。

### Cards & Containers

**`card-content`** — 默认 content card。
- Background `{colors.canvas-card}` (`#191919`)、text `{colors.ink}`、1 px solid `{colors.hairline}` border、padding `{spacing.xl}`、shape `{rounded.sm}` 8 px。

**`card-feature-product`** — product-feature card（Grok / Voice / API）。
- Chrome 与 `card-content` 相同。承载 SVG illustration + headline + body + outline pill CTA。

### Inputs & Forms

**`text-input`** — dark 上的标准 text input。
- Background `{colors.canvas-soft}`、text `{colors.ink}`、1 px solid `{colors.hairline}`、body 使用 `{typography.body-md}`、padding `{spacing.md} {spacing.lg}`、shape `{rounded.sm}` 8 px。

### Navigation

**`nav-bar`** — sticky top nav。
- Background `{colors.canvas}`、text `{colors.ink}`、padding `{spacing.md} {spacing.xl}`。

**`nav-link`** — nav 内部的 link item。
- Text `{colors.ink}`，使用 `{typography.body-sm}`。

**`footer`** — footer band。
- Background `{colors.canvas}`、text `{colors.body}`、padding `{spacing.3xl} {spacing.xl}`。Body 使用 `{typography.body-sm}`。

### Signature Components

**`hero-band`** — 带巨大 display headline 的 dark hero。
- Background `{colors.canvas}`、text `{colors.ink}`、padding `{spacing.4xl} {spacing.xl}`。Headline 使用 `{typography.display-xl}`（96 px weight 400，`-2.4 px` tracking）。

**`content-band`** — 标准 content section。
- Background `{colors.canvas}`、text `{colors.ink}`、padding `{spacing.4xl} {spacing.xl}`。Section headline 使用 `{typography.display-md}`，前面有一个 `{typography.caption-mono}` UPPERCASE GeistMono eyebrow。

**`eyebrow-mono`** — 每个 section headline 上方的 uppercase tracked GeistMono label。
- Text `{colors.ink}`，使用 `{typography.caption-mono}`。这是品牌 signature label style。

**`divider-hairline`** — section band 之间的 1 px line。
- 1 px solid `{colors.hairline}`。

### Examples (illustrative)

> 自动派生的 kit-mirror demonstration surfaces（`scripts/derive-examples-block.mjs`）。每个 `ex-*` 条目都引用 brand-native primitive，让下游消费者（`/preview-design`、`/generate-kit`）可以一致地重新换肤同一组 10 个 surface。`TO_FILL` 标记表示缺失 primitive，需要在 LLM judgment pass 中解决。

**`ex-pricing-tier`** — 默认 Pricing tier card。复用 feature-card chrome，并使用品牌 canvas-soft surface。
- Properties: `backgroundColor`, `textColor`, `borderColor`, `rounded`, `padding`

**`ex-pricing-tier-featured`** — Featured/highlighted tier；polarity-flipped surface（light mode 中 dark fill + light text，dark mode 中 light fill + dark text）。
- Properties: `backgroundColor`, `textColor`, `rounded`, `padding`

**`ex-product-selector`** — What's Included summary card；为 SaaS / B2B vertical 重新设定用途（不是字面意义上的 product gallery）。
- Properties: `backgroundColor`, `rounded`, `padding`

**`ex-cart-drawer`** — Subscription summary；为 SaaS / B2B 重新设定用途（每个 add-on 一行，不是字面意义上的 cart）。
- Properties: `backgroundColor`, `rounded`, `padding`, `item-divider`

**`ex-app-shell-row`** — App Shell 示例中的 sidebar nav row。Active state 使用 brand primary 作为 indicator。
- Properties: `backgroundColor`, `activeIndicator`, `rounded`, `padding`

**`ex-data-table-cell`** — 默认 data-table th + td chrome。Header 使用 mono-caps eyebrow typography；body 使用 body-sm。
- Properties: `headerBackground`, `headerTypography`, `bodyTypography`, `cellPadding`, `rowBorder`

**`ex-auth-form-card`** — Sign-in / sign-up card。复用 feature-card chrome，内部使用 text-input primitive。
- Properties: `backgroundColor`, `rounded`, `padding`

**`ex-modal-card`** — Modal dialog surface；与 feature-card 使用相同 chrome，并带 elevated shadow。
- Properties: `backgroundColor`, `rounded`, `padding`

**`ex-empty-state-card`** — Empty-state illustration frame。
- Properties: `backgroundColor`, `rounded`, `padding`, `captionTypography`

**`ex-toast`** — Toast notification surface；feature-card shape + medium shadow。
- Properties: `backgroundColor`, `rounded`, `padding`, `typography`

## Do's and Don'ts

### Do
- 将 `{colors.canvas}` (`#0a0a0a`) 保留为唯一 page surface。品牌只使用 dark-canvas。
- Hero headline 使用 `{typography.display-xl}` Universal Sans weight 400，并设置 `-2.4 px` tracking。精确感就是 voice。
- 每个 interactive element 都使用 `{rounded.pill}` 9999 px。Pill 就是品牌。
- 将 Universal Sans（sentence-case）与 GeistMono UPPERCASE（eyebrow、label、metric counter）配对。
- Outline button 使用 white-translucent border；品牌从不在 outline pill 上使用 solid white border。

### Don't
- 不要引入 light-mode counterpart。xAI 只使用 dark-canvas。
- 不要加粗 display headline。Weight 400 就是完整 scale。
- 不要广泛使用 filled button。品牌几乎只使用 outline pill；唯一 Sign Up white-filled pill 是少见例外。
- 不要给 card 添加 drop-shadow。Elevation 由 hairline border 承担。
- 不要在不调整 letter-spacing 的情况下用通用 geometric sans 替代 Universal Sans。Negative tracking 是品牌的一部分。