SpaceX

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

## 概览
SpaceX 的设计语言是一种“减法练习”：pure black canvas、白色 display type、紧凑 vertical leading 与 uppercase，唯一的 chrome 是 full-bleed photography 或 autoplaying rocket-launch video。除了黑白之外没有品牌色；marketing page 上没有装饰形状，没有 card grid，也没有 pricing table。每个 band 都是一张 full-viewport photograph 或 video，搭配一个 `{typography.display-xxl}`（80px D-DIN-Bold）的 all-caps headline，以及一个 ghost-outlined pill CTA。整体构图更接近电影标题卡，而不是 SaaS landing page。

品牌的深度来自摄影。Mars landscape、rocket exhaust plume、日落发射台上的 F9 booster，这些就是 design system。文字以高不透明度直接叠在图像上，没有 scrim，也没有 gradient overlay；照片本身经过调色，让文字能干净落位。当文字确实需要背景时，它会放在 `{colors.canvas-night-soft}`（几乎只是略微抬起的 near-black）上，并配合 `{colors.hairline-on-dark}` 的 1px hairline。

Typography 分为两部分：display tier 使用 **D-DIN-Bold**（uppercase、tight tracking、condensed feel），body 和 button label 使用 **D-DIN** regular。没有第三套字体；即使 shop site 的价格也使用这两种字形。Display size 的 vertical leading 异常紧（0.95–1.25），horizontal tracking 又异常宽（80px 时 positive 1.6px）；品牌感觉像被工程化出来，而不是被装饰设计出来。

**Key Characteristics:**
- 单一画布：marketing 使用纯 `{colors.canvas-night}` (`#000000`)；`{colors.canvas-light}` 只用于 shop site。
- Display tier 使用 uppercase D-DIN-Bold，并带 positive horizontal tracking（80px 时 1.6px），这是品牌的 typographic signature。
- Full-bleed photography 或 autoplaying video 是主导性装饰元素；文字直接落在图像上，没有 scrim。
- 每个 band 只有一个 ghost-outlined pill CTA，使用 `{rounded.pill}` 32px radius；从不 filled，也不用 accent color。
- All-caps eyebrow microtext（`{typography.micro-cap}` 与 `{typography.button-cap}`）带 positive 0.96–1.17px tracking；每个 chrome element 都用大写发声。
- Fixed top nav 叠加在 photography 上；没有 opaque background，只有 white-on-image。
- 80px display 使用紧凑的 0.95 line-height；这种垂直压缩就是它的工程感美学。

## Colors

> **Source pages:** home (`/`), `/shop`, `/vehicles/starship`, `/humanspaceflight/overview`, `/mission`.

### Brand & Accent
品牌没有 accent color。黑白承担所有色彩结构，其它色相全部由摄影提供。

### Surface
- **Canvas Night** (`{colors.canvas-night}` — `#000000`): 默认 marketing canvas。纯黑，没有 tint。
- **Canvas Night Soft** (`{colors.canvas-night-soft}` — `#0a0a0a`): 略微抬起的 near-black，用于需要与 pure-black hero 形成轻微分隔的 content section。
- **Canvas Light** (`{colors.canvas-light}` — `#ffffff`): Shop site 的 product surface。
- **Canvas Cool** (`{colors.canvas-cool}` — `#f0f0fa`): 浅冷调 blue-white，用作 shop site 的 secondary surface，也作为某些 ghost button 的 hover-canvas。
- **Hairline on Dark** (`{colors.hairline-on-dark}` — `#3a3a3f`): Dark surface chrome 上的 1px border。
- **Hairline on Light** (`{colors.hairline-on-light}` — `#e0e0e8`): Shop-site card 的 border。

### Text
- **On Primary** (`{colors.on-primary}` — `#ffffff`): Dark canvas 上的默认文本色；整个 marketing site 的主导文本色。
- **On Primary Mute** (`{colors.on-primary-mute}` — `#f0f0fa`): 略冷的白色，用于 dark surface 上的 secondary text；与 `{colors.on-primary}` 几乎不可分辨，但足够建立层级。
- **Ink** (`{colors.ink}` — `#000000`): Light surface（shop site）上的默认文本色。
- **Ink Mute** (`{colors.ink-mute}` — `#5a5a5f`): Light surface 上的 secondary text。

### Link
- **Link on Dark** (`{colors.link-on-dark}` — `#ffffff`): Dark canvas 上带 underline 的 inline link。
- **Link Blue Fallback** (`{colors.link-blue-fallback}` — `#0000ee`): 未样式化 fallback 场景中出现的浏览器默认色；为完整性记录，不作为品牌色使用。

## Typography

### Font Family

Display tier 是 **D-DIN-Bold**，一种 condensed industrial sans，灵感来自德国 DIN 1451 标准（用于 autobahn 路牌和工程蓝图）。不可用时 fallback 到 **Arial Narrow**，再到 Arial、Verdana；fallback chain 优先保证宽度压缩，而不是装饰性。

UI tier 是 **D-DIN**（regular weight），同一字体家族的标准宽度版本，用于 body、button label 和 caption。

D-DIN 可从 **DIN Type Foundry** 免费获取（同名免费版本也广泛分发）。为了最大程度保持品牌忠实度，直接使用 D-DIN；替代方案可以用 heavy weight (700+) 的 **Inter**，并设置 1.6px positive tracking 来接近节奏。避免 serif 或 humanist sans 替代。

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | 用途 |
|---|---|---|---|---|---|
| `{typography.display-xxl}` | 80px | 700 | 0.95 | 1.6px | Hero headline（uppercase） |
| `{typography.display-xl}` | 60px | 700 | 1.2 | 1.2px | Section opener（uppercase） |
| `{typography.display-lg}` | 48px | 700 | 1.25 | 0.96px | Sub-section heading（uppercase） |
| `{typography.body-lg}` | 16px | 400 | 1.7 | 0.32px | Marketing body lead |
| `{typography.body-md}` | 16px | 400 | 1.5 | 0.32px | Default UI body |
| `{typography.button-cap}` | 13.008px | 700 | 0.94 | 1.17px | All-caps button label |
| `{typography.micro-cap}` | 12px | 400 | 2.0 | 0.96px | All-caps eyebrow / nav item |
| `{typography.caption}` | 13.008px | 400 | 1.5 | 0 | Helper / footer text |

### Principles
- **Display 全部 uppercase。** 每个 display tier 都渲染为 uppercase。品牌从不使用 sentence-case display headline。
- **Display vertical leading 紧凑。** 80px 时 0.95、60px 时 1.2；文字堆叠得像工程结构一样紧。
- **Horizontal tracking 宽。** Display size 使用 positive 0.96–1.6px tracking；caps eyebrow 使用 positive 0.96–1.17px。宽 tracking 是品牌标志性的 optical air。
- **No mono。** Code block 不是品牌 typography system 的一部分。

### Font Substitutes
**D-DIN** 可免费获取（同名原始 DIN-style 字体广泛分发）。不可用时，display size 使用 700 weight 的 **Inter**，配合 `letter-spacing: 1.6px`、`text-transform: uppercase` 和 `line-height: 0.95`，可以匹配节奏。避免默认字重的 Helvetica 或 Arial；品牌需要 condensed industrial cut。完全避免 serif fallback。

## Layout

### Spacing System
- **Base unit**: 8px（带有更密集的 sub-unit 4 / 12 / 16 / 18 / 24）。
- **Tokens**: `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.md}` 16px · `{spacing.lg}` 18px · `{spacing.xl}` 24px · `{spacing.xxl}` 32px · `{spacing.huge}` 48px。
- **Section padding**: Marketing 上是 full-viewport band，上下没有内部 padding；照片本身就是 section。在 shop site 上，section 使用 48–64px vertical padding。

### Grid & Container
- Marketing page 没有 container；每个 band 都是 full-viewport-width、full-viewport-height（或接近这个尺寸），摄影填满整个画面。
- Shop product grid：desktop 4-up、tablet 2-up、mobile 1-up。
- Type 位于内部约 1200px 的 reading column 中，水平居中叠在 full-bleed photograph 上。

### Whitespace Philosophy
Marketing page 几乎没有传统意义上的 whitespace；照片占据全部空间。这里的 "whitespace" 指火箭照片中的黑暗天空，或火星地貌中的空旷延展。Negative space 是摄影产生的，不是 UI 选择。在 shop site 上，whitespace 回到标准 32px grid gutter。

## Elevation & Depth

| Level | Treatment | 用途 |
|---|---|---|
| 0 | Flat | 默认状态，也是 marketing surface 上唯一的层级 |
| 1 | Photographic — full-bleed image or video | 主要 depth medium；所有层次都由照片承担 |

品牌不使用 drop shadow、blur、glow 或 gradient overlay。Depth 是摄影性的：暮色中发射的火箭具有任何 CSS shadow 都无法模拟的自然 atmosphere depth。当文字需要从图像中分离时，处理方式是把图像调暗，而不是加 scrim。

### Decorative Depth
Photography 和 autoplaying rocket-launch video 是唯一的 decorative depth。没有 illustration；除了 nav 和 CTA hover state 中少量极简 SVG arrow chevron，也没有 icon。

## Shapes

### Border Radius Scale

| Token | Value | 用途 |
|---|---|---|
| `{rounded.xs}` | 4px | Form input（shop site） |
| `{rounded.sm}` | 8px | Shop product card chrome、video frame |
| `{rounded.md}` | 16px | Larger surface chrome |
| `{rounded.pill}` | 32px | Ghost outlined pill CTA（品牌标志性 button shape） |
| `{rounded.full}` | 9999px | Video frame 上的 circular play-button overlay |

### Photography Geometry
Marketing site 上每张照片都是 full-viewport-bleed、edge-to-edge，从不嵌入 card。Shop site 上，product photography 位于 `{rounded.sm}` 8px container 中，没有 shadow。Marketing photography 的 aspect ratio 随源图变化，没有强制比例；照片本身主导布局。

## Components

### Buttons

**`button-ghost-on-dark`** — marketing surface 上的通用 CTA。
- Background `{colors.canvas-night}`（相对于 photographed canvas 呈透明感）、1px solid `{colors.on-primary}` border、text `{colors.on-primary}`、type `{typography.button-cap}`（uppercase，13px / 700 / 1.17px tracking）、padding `{spacing.lg} {spacing.xl}`（18px 24px）、rounded `{rounded.pill}` 32px。

**`button-ghost-on-light`** — shop / light page 上的同款按钮。
- Background `{colors.canvas-light}`（相对于 light canvas 呈透明感）、1px solid `{colors.ink}` border、text `{colors.ink}`，其余相同。

**`button-filled-cool`** — shop product card 上的 fill variant。
- Background `{colors.canvas-cool}`、text `{colors.ink}`，使用相同 pill geometry。用于 "Add to cart" 或类似 product CTA。

### Cards & Containers

**`card-photo-band`** — marketing page 上的 full-bleed photographic band。
- Background `{colors.canvas-night}`、padding 0、rounded `{rounded.xs}`。照片填满整个 band；type 和 CTA 叠加在其上。

**`card-shop-product`** — shop site 上的 product card。
- Background `{colors.canvas-light}`、padding `{spacing.md}` 16px、rounded `{rounded.sm}` 8px、1px `{colors.hairline-on-light}` border。上方是 product photo，名称使用 `{typography.body-md}`，价格使用 700 weight 的 `{typography.body-md}`，底部是 "Add to cart" button。

### Inputs & Forms

**`text-input`** — shop site 上的 form input。
- Background `{colors.canvas-light}`、text `{colors.ink}`、type `{typography.body-md}`、padding `{spacing.sm} {spacing.md}`（12px 16px）、rounded `{rounded.xs}` 4px、1px `{colors.hairline-on-light}` border。

### Navigation

**`nav-bar-overlay`** — marketing site 全局 top nav。
- Background `{colors.canvas-night}`（覆盖在 hero photo 上时呈透明感）、text `{colors.on-primary}`、type `{typography.button-cap}`（uppercase）。左侧 logo wordmark 约 147×19px，nav item 横向排列并使用 caps，padding `{spacing.xl} {spacing.xxl}`（24px 32px）。Nav 在滚动时 fixed/sticky，并保留 overlay treatment。

### Signature Components

**Full-Bleed Photo / Video Hero** — 每个 marketing band 都是一张 full-viewport photograph 或 autoplaying rocket-launch video。Type 和 CTA 以高不透明度叠在照片上，没有 scrim。照片经过调色，因此不需要 overlay layer，文字也能干净落位。

**Uppercase Display Headline** — 80px D-DIN-Bold uppercase headline，带 1.6px positive tracking，是品牌最具辨识度的 typographic moment。始终 uppercase、始终 bold-weight、始终 positive tracking。

**`link-on-dark`** — dark canvas 上的 inline link。
- Text `{colors.link-on-dark}`（white），带 persistent underline。

**`link-on-light`** — light canvas 上的 inline link。
- Text `{colors.ink}`，带 persistent underline。

**`footer-dark`** — 全站 footer。
- Background `{colors.canvas-night}`、text `{colors.on-primary}`、type `{typography.caption}`、padding `{spacing.xxl} {spacing.xl}`（32px 24px）。包含 `{typography.micro-cap}`（uppercase）的 nav column，以及底部的小型 legal/copyright row。

## Do's and Don'ts

### Do
- 每个 marketing band 都使用 full-bleed photography 或 autoplaying video 作为主导性装饰元素。
- Display tier 使用 uppercase D-DIN-Bold，并设置 positive 0.96–1.6px letter-spacing；宽 tracking 是 signature。
- 每个 band 只使用一个 `{button-ghost-on-dark}`；品牌不会在 marketing surface 上并排展示两个 CTA。
- 每张照片都要搭配尊重图像的 type：不要 scrim、不要 gradient、不要 overlay。调照片，不调 canvas。
- Marketing page 上保持 nav overlay-style（transparent、white-on-image）。

### Don't
- 不要引入 brand accent color；black、white 和 photography 就是完整 palette。
- 不要在 dark canvas 上使用 drop shadow 或 gradient overlay；它们会与摄影冲突。
- 不要用 sentence-case 或 title-case 渲染 display tier；uppercase 就是品牌。
- 不要在 marketing surface 上放 filled button；ghost outlined pill 是唯一 marketing CTA。
- 不要使用 serif 或 humanist sans 替代；condensed industrial DIN cut 是不可妥协的。

## Responsive Behavior

### Breakpoints

| Name | Width | 关键变化 |
|---|---|---|
| Wide | ≥ 1500px | Full hero photograph；max-content type column 为 1200px |
| Desktop | 1280–1499px | 默认 desktop layout |
| Laptop | 961–1279px | Type column 收紧；photo crop 调整 |
| Tablet | 768–960px | Display 从 80 降到 60px；nav 压缩 |
| Mobile | 600–767px | Display 降到 48px；ghost button 保持 pill shape |
| Small Mobile | < 600px | Display 降到 40px；nav 变为 hamburger |

### Touch Targets
- Ghost pill button 因为 18px vertical padding × 13px line-height，点击区域达到 ≥ 50×50px，符合 WCAG AAA。
- Form field 保持 44px minimum height。

### Collapsing Strategy
- Display size 随 breakpoint 阶梯下降：80 → 60 → 48 → 40px。
- 小宽度下 photography 会重新裁切到 focal subject（rocket 居中，Mars landscape 居中）。
- Top nav 在 768px 以下折叠为 hamburger；menu 保留 dark overlay treatment。
- Shop product grid 阶梯变化为 4-up → 2-up → 1-up。

### Image Behavior
Marketing photography 使用 `srcset` 覆盖 desktop / tablet / mobile，并在主要 breakpoint 做 art-direction crop。Mobile crop 优先保留中心 focal subject；wide crop 优先保留环境上下文（完整 launch pad、完整 Martian horizon）。

## Iteration Guide

1. 一次只聚焦一个 component。
2. 直接引用 component name 和 token（`{colors.canvas-night}`、`{button-ghost-on-dark}`、`{rounded.pill}`）。
3. 编辑后运行 `npx @google/design.md lint DESIGN.md`。
4. 新 variant 作为独立条目添加。
5. Default body 使用 `{typography.body-md}`；`{typography.body-lg}` 保留给 marketing lead。
6. Black-and-white-only rule 是承重规则；添加 brand accent color 会破坏系统。
7. Ghost pill 是唯一 marketing CTA；filled button 只存在于 shop site。