xAI

设计要点

颜色

• primary#ffffff按钮描边、实心按钮和文字
• canvas#0a0a0a页面底色
• canvas-card#191919卡片底色
• accent-sunset#ff7a17产品插图里的橙色
• accent-dusk#7c3aed产品插图里的紫色
• accent-twilight#c4b5fd产品插图里的淡紫
• accent-breeze#a0c3ec产品插图里的浅蓝

字体

品牌自己的专有字体，这里用系统字体近似显示。

该做和别做

DESIGN.md 原文

xai/DESIGN.md，501 行。放进项目根目录，Claude Code 和 Cursor 会照着它写界面。

---
version: alpha
name: xAI-Inspired-design-analysis
description: An inspired interpretation of xAI's design language — Elon Musk's frontier-AI company whose web surface is a strict near-black canvas broken only by white pill outlines, occasional warm sunset / dusk gradient accents, a custom geometric sans (Universal Sans) for display, and an uppercase tracked monospace caption face; the whole system reads as engineered-cosmic, unmarketed.

colors:
  primary: '#ffffff'
  on-primary: '#0a0a0a'
  ink: '#ffffff'
  ink-hover: '#fafaf7'
  body: '#dadbdf'
  body-mid: '#7d8187'
  mute: '#7d8187'
  hairline: '#212327'
  canvas: '#0a0a0a'
  canvas-soft: '#1a1c20'
  canvas-card: '#191919'
  canvas-mid: '#363a3f'
  accent-sunset: '#ff7a17'
  accent-sunset-soft: '#ffc285'
  accent-dusk: '#7c3aed'
  accent-twilight: '#c4b5fd'
  accent-breeze: '#a0c3ec'
  accent-midnight: '#0d1726'

typography:
  display-xl:
    fontFamily: universalSans, Inter, system-ui, -apple-system, sans-serif
    fontSize: 96px
    fontWeight: 400
    lineHeight: 96px
    letterSpacing: -2.4px
  display-lg:
    fontFamily: universalSans, Inter, system-ui, sans-serif
    fontSize: 72px
    fontWeight: 400
    lineHeight: 72px
    letterSpacing: -1.8px
  display-md:
    fontFamily: universalSans, Inter, system-ui, sans-serif
    fontSize: 48px
    fontWeight: 400
    lineHeight: 48px
    letterSpacing: -1.2px
  display-sm:
    fontFamily: universalSans, Inter, system-ui, sans-serif
    fontSize: 32px
    fontWeight: 400
    lineHeight: 36px
    letterSpacing: -0.6px
  display-xs:
    fontFamily: universalSans, Inter, system-ui, sans-serif
    fontSize: 20px
    fontWeight: 400
    lineHeight: 28px
  body-lg:
    fontFamily: universalSans, Inter, system-ui, sans-serif
    fontSize: 18px
    fontWeight: 400
    lineHeight: 28px
  body-md:
    fontFamily: universalSans, Inter, system-ui, sans-serif
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  body-sm:
    fontFamily: universalSans, Inter, system-ui, sans-serif
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
  caption-mono:
    fontFamily: GeistMono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 1.4px
  caption-mono-sm:
    fontFamily: GeistMono, ui-monospace, SFMono-Regular, Menlo, monospace
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: 1.2px
  button-md:
    fontFamily: universalSans, Inter, system-ui, sans-serif
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px

rounded:
  none: 0px
  sm: 8px
  pill: 9999px
  full: 9999px

spacing:
  xxs: 2px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px
  4xl: 64px

components:
  nav-bar:
    backgroundColor: '{colors.canvas}'
    textColor: '{colors.ink}'
    typography: '{typography.body-sm}'
    padding: '{spacing.md} {spacing.xl}'
  nav-link:
    textColor: '{colors.ink}'
    typography: '{typography.body-sm}'
  button-primary:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    borderColor: '{colors.primary}'
    typography: '{typography.button-md}'
    rounded: '{rounded.pill}'
    padding: '{spacing.xs} {spacing.md}'
  button-outline-on-dark:
    backgroundColor: '{colors.canvas}'
    textColor: '{colors.ink}'
    borderColor: 'rgba(255,255,255,0.35)'
    typography: '{typography.button-md}'
    rounded: '{rounded.pill}'
    padding: '{spacing.sm} {spacing.lg}'
  button-outline-sm:
    backgroundColor: '{colors.canvas}'
    textColor: '{colors.ink}'
    borderColor: 'rgba(255,255,255,0.35)'
    typography: '{typography.button-md}'
    rounded: '{rounded.pill}'
    padding: '{spacing.xs} {spacing.md}'
  text-input:
    backgroundColor: '{colors.canvas-soft}'
    textColor: '{colors.ink}'
    borderColor: '{colors.hairline}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    padding: '{spacing.md} {spacing.lg}'
  card-content:
    backgroundColor: '{colors.canvas-card}'
    textColor: '{colors.ink}'
    borderColor: '{colors.hairline}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    padding: '{spacing.xl}'
  card-feature-product:
    backgroundColor: '{colors.canvas-card}'
    textColor: '{colors.ink}'
    borderColor: '{colors.hairline}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    padding: '{spacing.xl}'
  hero-band:
    backgroundColor: '{colors.canvas}'
    textColor: '{colors.ink}'
    typography: '{typography.display-xl}'
    padding: '{spacing.4xl} {spacing.xl}'
  content-band:
    backgroundColor: '{colors.canvas}'
    textColor: '{colors.ink}'
    typography: '{typography.display-md}'
    padding: '{spacing.4xl} {spacing.xl}'
  eyebrow-mono:
    textColor: '{colors.ink}'
    typography: '{typography.caption-mono}'
  divider-hairline:
    borderColor: '{colors.hairline}'
  footer:
    backgroundColor: '{colors.canvas}'
    textColor: '{colors.body}'
    typography: '{typography.body-sm}'
    padding: '{spacing.3xl} {spacing.xl}'

  # ─── Examples (illustrative) — auto-derived; resolve any TO_FILL markers below ───
  ex-pricing-tier:
    description: 'Default Pricing tier card. Re-uses feature-card chrome with brand canvas-soft surface.'
    backgroundColor: '{colors.canvas-soft}'
    textColor: '{colors.ink}'
    borderColor: '{colors.hairline}'
    rounded: '{rounded.sm}'
    padding: '{spacing.xl}'
  ex-pricing-tier-featured:
    description: 'Featured/highlighted tier — polarity-flipped surface (dark fill + light text in light mode, light fill + dark text in dark mode).'
    backgroundColor: '{colors.ink}'
    textColor: '{colors.on-primary}'
    rounded: '{rounded.sm}'
    padding: '{spacing.xl}'
  ex-product-selector:
    description: "What's Included summary card — re-purposed for SaaS / B2B verticals (NOT a literal product gallery)."
    backgroundColor: '{colors.canvas-soft}'
    rounded: '{rounded.sm}'
    padding: '{spacing.xl}'
  ex-cart-drawer:
    description: 'Subscription summary — re-purposed for SaaS / B2B (line items per add-on, not literal cart).'
    backgroundColor: '{colors.canvas}'
    rounded: '{rounded.sm}'
    padding: '{spacing.xl}'
    item-divider: '{colors.hairline}'
  ex-app-shell-row:
    description: 'Sidebar nav row inside the App Shell example. Active state uses brand primary as the indicator.'
    backgroundColor: '{colors.canvas}'
    activeIndicator: '{colors.primary}'
    rounded: '{rounded.sm}'
    padding: '{spacing.md} {spacing.lg}'
  ex-data-table-cell:
    description: 'Default data-table th + td chrome. Header uses mono-caps eyebrow typography; body uses body-sm.'
    headerBackground: '{colors.canvas-soft}'
    headerTypography: '{typography.caption-mono}'
    bodyTypography: '{typography.body-sm}'
    cellPadding: '{spacing.md} {spacing.lg}'
    rowBorder: '{colors.hairline}'
  ex-auth-form-card:
    description: 'Sign-in / sign-up card. Re-uses feature-card chrome with text-input primitives inside.'
    backgroundColor: '{colors.canvas-soft}'
    rounded: '{rounded.sm}'
    padding: '{spacing.xl}'
  ex-modal-card:
    description: 'Modal dialog surface — same chrome as feature-card with elevated shadow.'
    backgroundColor: '{colors.canvas}'
    rounded: '{rounded.sm}'
    padding: '{spacing.xl}'
  ex-empty-state-card:
    description: 'Empty-state illustration frame.'
    backgroundColor: '{colors.canvas-soft}'
    rounded: '{rounded.sm}'
    padding: '{spacing.3xl}'
    captionTypography: '{typography.body-md}'
  ex-toast:
    description: 'Toast notification surface — feature-card shape + medium shadow.'
    backgroundColor: '{colors.canvas}'
    rounded: '{rounded.sm}'
    padding: '{spacing.md} {spacing.lg}'
    typography: '{typography.body-sm}'
---

## Overview

xAI is Elon Musk's frontier-AI lab and the website wears that posture with engineered restraint: a near-black canvas `{colors.canvas}` (`#0a0a0a`) edge-to-edge, white outline pills as every interactive element, and a single proprietary geometric sans `Universal Sans` carrying every display headline at weight 400. There is no gradient hero, no atmospheric backdrop, no product screenshot. The brand reads as confidently sparse — a research lab announcing its work rather than a SaaS marketing site.

Type is the second decisive voice. `Universal Sans` carries every display at weight 400 (regular) with aggressive negative tracking (`-2.4 px` at 96 px, scaling down through the display ladder). For technical labels, eyebrows, and metric counters, the brand pairs `Geist Mono` (uppercase, 1.4 px positive tracking) — every section eyebrow reads as a code comment more than a marketing label.

Every interactive element is a pill (`{rounded.pill}` 9999 px) with 1 px white-translucent border `rgba(255, 255, 255, 0.25)`. The button shape never varies — the same translucent-white pill carries "Try Grok", "Read announcement", "Custom Voices", "Sign up now", and every "Read" anchor. The pill is the entire shape system.

**Key Characteristics:**

- A single near-black canvas (`{colors.canvas}` `#0a0a0a`) with white outline pills as the entire interactive vocabulary.
- Universal Sans weight 400 for display, Geist Mono uppercase tracked for labels — the two-face contrast IS the brand voice.
- Every button is a `{rounded.pill}` outline with translucent-white border. The brand never uses filled CTAs except for one variant (white-filled pill on Sign Up).
- Cards are tight `{rounded.sm}` 8 px rectangles in a slightly-lighter `{colors.canvas-card}` (`#191919`) fill with hairline border. No shadows.
- A muted accent palette of sunset-orange / dusk-purple / twilight-violet / breeze-blue lives in the design tokens but appears rarely on the main marketing surface — reserved for product illustrations / icons.
- Massive negative letter-spacing on display headlines (`-2.4 px` at 96 px) gives the typography a precise, gathered look.

## Colors

### Brand & Accent

- **White** (`{colors.primary}` — `#ffffff`): The brand's primary "color" — used as button outline, button-primary fill, all display text. The brand's signature is white-on-near-black.
- **Sunset Orange** (`{colors.accent-sunset}` — `#ff7a17`): A warm orange used inside product illustrations and accent moments.
- **Sunset Soft** (`{colors.accent-sunset-soft}` — `#ffc285`): The lighter variant of the sunset accent.
- **Dusk Purple** (`{colors.accent-dusk}` — `#7c3aed`): Deep purple used inside product illustrations.
- **Twilight** (`{colors.accent-twilight}` — `#c4b5fd`): Soft violet — illustrative accent.
- **Breeze Blue** (`{colors.accent-breeze}` — `#a0c3ec`): Soft blue — illustrative accent.
- **Midnight** (`{colors.accent-midnight}` — `#0d1726`): Deep blue-black for illustrative backgrounds.

### Surface

- **Canvas** (`{colors.canvas}` — `#0a0a0a`): The default near-black page background. The brand's only true surface.
- **Canvas Soft** (`{colors.canvas-soft}` — `#1a1c20`): A slightly lighter dark fill used for hovered nav items and tooltips.
- **Canvas Card** (`{colors.canvas-card}` — `#191919`): The charcoal card fill used inside product-feature cards.
- **Canvas Mid** (`{colors.canvas-mid}` — `#363a3f`): A mid-dark used for nested surfaces and code mockup backgrounds.
- **Hairline** (`{colors.hairline}` — `#212327`): 1 px solid dividers on dark surfaces.

### Text

- **Ink** (`{colors.ink}` — `#ffffff`): Default text on canvas — pure white.
- **Ink Hover** (`{colors.ink-hover}` — `#fafaf7`): Slightly off-white used for hover states (filtered out per no-hover policy in component specs).
- **Body** (`{colors.body}` — `#dadbdf`): Secondary body text — supporting copy in lighter weight.
- **Body Mid / Mute** (`{colors.body-mid}` — `#7d8187`): Mid-emphasis body and mute text — captions, fine print.

### Semantic

The brand doesn't surface a separate semantic palette on the marketing site. Validation cues use the white-on-canvas hierarchy.

## Typography

### Font Family

Two faces ladder the system:

1. **universalSans** — proprietary geometric sans used for every display, body, button, and link role. Weight 400 only on the marketing surface (the brand's restraint is part of the voice). Negative letter-spacing at display sizes is the visual signature.
2. **GeistMono** — used for uppercase section eyebrows, label captions, and metric counters. Positive tracking (1.2 – 1.4 px) at 12 – 14 px.

### Hierarchy

| Token                          | Size | Weight | Line Height | Letter Spacing | Use                                    |
| ------------------------------ | ---- | ------ | ----------- | -------------- | -------------------------------------- |
| `{typography.display-xl}`      | 96px | 400    | 96px        | -2.4px         | Maximum hero scale.                    |
| `{typography.display-lg}`      | 72px | 400    | 72px        | -1.8px         | Sub-hero displays.                     |
| `{typography.display-md}`      | 48px | 400    | 48px        | -1.2px         | Section headlines.                     |
| `{typography.display-sm}`      | 32px | 400    | 36px        | -0.6px         | Card-cluster headings.                 |
| `{typography.display-xs}`      | 20px | 400    | 28px        | 0              | Inline displays.                       |
| `{typography.body-lg}`         | 18px | 400    | 28px        | 0              | Lead paragraphs.                       |
| `{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 labels.                     |
| `{typography.button-md}`       | 14px | 400    | 20px        | 0              | Button label.                          |

### Principles

- **Weight 400 for everything.** The brand never bolds. Negative tracking + size hierarchy do the emphasis work.
- **Tight negative tracking on display sizes.** Reverting to neutral tracking loses the precision feel.
- **GeistMono uppercase for eyebrows.** Tracked positively (1.4 px) to make the mono read as a code comment.

### Note on Font Substitutes

universalSans is proprietary. Open-source substitutes:

- **Display + body** — _Inter_ weight 400 with `-0.04em` to `-0.02em` letter-spacing at display sizes comes closest. _Geist_ is the second-best option.
- **Mono** — _Geist Mono_ is the documented brand companion; _JetBrains Mono_ or _IBM Plex Mono_ are alternates.

## 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**: hero / content bands at `{spacing.4xl}` 64 px on desktop.
- **Card interior padding**: `{spacing.xl}` 24 px.

### Grid & Container

- Marketing content centres at ~1200 px.
- Product / announcement card grid: 2-up at desktop, 1-up at mobile.

### Responsive Strategy

#### Breakpoints

| Name    | Width   | Key Changes                                        |
| ------- | ------- | -------------------------------------------------- |
| Mobile  | < 768px | Hero scales 96 → 48 px; grids 1-up; hamburger nav. |
| Desktop | ≥ 768px | Full hero + 2-up grids.                            |

#### Touch Targets

Buttons render ~32 – 40 px tall (8 vertical padding + 20 line). Mobile inflates touch area to meet WCAG 44 × 44 px.

#### Image Behavior

The brand uses sparse SVG illustrations for product moments (Grok, Voice, API). No photography on the marketing surface.

## Elevation & Depth

| Level              | Treatment                              | Use                                                    |
| ------------------ | -------------------------------------- | ------------------------------------------------------ |
| Level 0 — Flat     | No shadow, no border.                  | Default.                                               |
| Level 1 — Hairline | 1 px solid `{colors.hairline}` border. | Card chrome, button outlines (with translucent white). |

The brand uses no shadows. Hairline borders carry all elevation cues.

## Shapes

### Border Radius Scale

| Token            | Value  | Use                                                     |
| ---------------- | ------ | ------------------------------------------------------- |
| `{rounded.none}` | 0px    | Full-bleed bands.                                       |
| `{rounded.sm}`   | 8px    | Card chrome (the brand's `--radius` value).             |
| `{rounded.pill}` | 9999px | Every button — the brand's universal interactive shape. |
| `{rounded.full}` | 9999px | Circular icon containers.                               |

## Components

### Buttons

**`button-primary`** — the rare white-filled pill (used on a single 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`** — the canonical white-outline pill, used for every non-primary CTA.

- Background `{colors.canvas}` (transparent in practice — `rgba(0,0,0,0)`), text `{colors.ink}` white, 1 px solid `{colors.hairline}` border (translucent white at runtime), same typography / padding scale / shape.

**`button-outline-sm`** — the smaller outline pill used in card-cluster CTAs.

- Same as `button-outline-on-dark` with tighter padding `{spacing.xs} {spacing.md}`.

### Cards & Containers

**`card-content`** — the default 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`** — the product-feature card (Grok / Voice / API).

- Same chrome as `card-content`. Hosts an SVG illustration + headline + body + outline pill CTA.

### Inputs & Forms

**`text-input`** — the standard text input on dark.

- Background `{colors.canvas-soft}`, text `{colors.ink}`, 1 px solid `{colors.hairline}`, body in `{typography.body-md}`, padding `{spacing.md} {spacing.lg}`, shape `{rounded.sm}` 8 px.

### Navigation

**`nav-bar`** — the sticky top nav.

- Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.md} {spacing.xl}`.

**`nav-link`** — link items inside nav.

- Text `{colors.ink}`, set in `{typography.body-sm}`.

**`footer`** — the footer band.

- Background `{colors.canvas}`, text `{colors.body}`, padding `{spacing.3xl} {spacing.xl}`. Body in `{typography.body-sm}`.

### Signature Components

**`hero-band`** — the dark hero with massive display headline.

- Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.4xl} {spacing.xl}`. Headline in `{typography.display-xl}` (96 px weight 400 with `-2.4 px` tracking).

**`content-band`** — the standard content section.

- Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.4xl} {spacing.xl}`. Section headline in `{typography.display-md}` preceded by a `{typography.caption-mono}` UPPERCASE GeistMono eyebrow.

**`eyebrow-mono`** — the uppercase tracked GeistMono label above every section headline.

- Text `{colors.ink}`, set in `{typography.caption-mono}`. The brand's signature label style.

**`divider-hairline`** — the 1 px line between section bands.

- 1 px solid `{colors.hairline}`.

### Examples (illustrative)

> Auto-derived kit-mirror demonstration surfaces (`scripts/derive-examples-block.mjs`). Each `ex-*` entry references brand-native primitives so downstream consumers (`/preview-design`, `/generate-kit`) re-skin the same 10 surfaces consistently. `TO_FILL` markers indicate missing primitives — resolve in the LLM judgment pass.

**`ex-pricing-tier`** — Default Pricing tier card. Re-uses feature-card chrome with brand canvas-soft surface.

- Properties: `backgroundColor`, `textColor`, `borderColor`, `rounded`, `padding`

**`ex-pricing-tier-featured`** — Featured/highlighted tier — polarity-flipped surface (dark fill + light text in light mode, light fill + dark text in dark mode).

- Properties: `backgroundColor`, `textColor`, `rounded`, `padding`

**`ex-product-selector`** — What's Included summary card — re-purposed for SaaS / B2B verticals (NOT a literal product gallery).

- Properties: `backgroundColor`, `rounded`, `padding`

**`ex-cart-drawer`** — Subscription summary — re-purposed for SaaS / B2B (line items per add-on, not literal cart).

- Properties: `backgroundColor`, `rounded`, `padding`, `item-divider`

**`ex-app-shell-row`** — Sidebar nav row inside the App Shell example. Active state uses brand primary as the indicator.

- Properties: `backgroundColor`, `activeIndicator`, `rounded`, `padding`

**`ex-data-table-cell`** — Default data-table th + td chrome. Header uses mono-caps eyebrow typography; body uses body-sm.

- Properties: `headerBackground`, `headerTypography`, `bodyTypography`, `cellPadding`, `rowBorder`

**`ex-auth-form-card`** — Sign-in / sign-up card. Re-uses feature-card chrome with text-input primitives inside.

- Properties: `backgroundColor`, `rounded`, `padding`

**`ex-modal-card`** — Modal dialog surface — same chrome as feature-card with 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

- Reserve `{colors.canvas}` (`#0a0a0a`) as the only page surface. The brand is dark-canvas only.
- Set hero headlines in `{typography.display-xl}` Universal Sans weight 400 with `-2.4 px` tracking. The precision IS the voice.
- Use `{rounded.pill}` 9999 px on every interactive element. The pill is the brand.
- Pair Universal Sans (sentence-case) with GeistMono UPPERCASE (eyebrows, labels, metric counters).
- Use white-translucent borders for outline buttons — the brand never uses solid white borders on its outline pill.

### Don't

- Don't introduce a light-mode counterpart. xAI is dark-canvas only.
- Don't bold display headlines. Weight 400 is the entire scale.
- Don't use filled buttons broadly. The brand uses outline pills almost exclusively; one Sign Up white-filled pill is the rare exception.
- Don't drop a drop-shadow on cards. Hairline borders carry elevation.
- Don't substitute Universal Sans with a generic geometric sans without adjusting letter-spacing. The negative tracking is part of the brand.

原文来自社区项目 awesome-design-md（VoltAgent，MIT 协议），是对品牌公开页面的第三方分析，不是官方资料，原文里的品牌名故意写成了变体。本页的中文说明是原创的。