---
title: "SpaceX design system"
variant: extended
source: https://www.spacex.com/
captured_at: 2026-10-12
theme: dark
industry: other
generator: Design DNA (https://four.wiralomi.com/style/spacex-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# SpaceX · Design System

> A stark black canvas for cinematic spaceflight

**Theme:** dark · **Industry:** other · **Source:** https://www.spacex.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

SpaceX’s homepage pairs a near-black canvas with full-bleed launch and space imagery, presenting company milestones as a cinematic sequence. Condensed uppercase headlines and restrained outlined actions keep attention on each image and message.

## North star

Keep the interface nearly invisible: one black canvas, sharp uppercase messaging, and cinematic media doing the expressive work.

## Overview

The page is built on a uniform #000000 canvas, with no alternating section bands; full-bleed video and photography supply nearly all visual variation. Headings and navigation use uppercase forms in the custom D-DIN family, creating a compact, technical voice against the imagery. Large display headlines sit close to short supporting copy and a small outlined action, with the content anchored toward a lower corner or one side of each frame. The page moves through tall, single-column media sections, alternating text placement to keep the repeated structure from feeling static. White text (#f0f0fa) carries the main message, while muted navigation text and restrained gray hairlines remain secondary. The content is spacious rather than card-dense: there are no prominent cards, shadows, or decorative containers. Treat the photographs and videos as the page’s color and texture; keep interface chrome minimal so the launch, spacecraft, and human imagery remain dominant.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Mission Black | `#000000` | `--color-mission-black` | brand | Continuous page canvas and section backdrop, allowing full-bleed space and launch media to define the visual shifts. |
| Flight White | `#f0f0fa` | `--color-flight-white` | neutral | Primary color for headlines, body copy, navigation, and footer text. |
| Graphite Line | `#545457` | `--color-graphite-line` | semantic | Thin outlines on restrained watch and navigation controls; not used as a filled section surface. |
| Orbit Gray | `#d8d8e1` | `--color-orbit-gray` | neutral | Muted navigation text and secondary interface labels. |
| Control Gray | `#404040` | `--color-control-gray` | surface | Minor navigation border detail; a low-emphasis interface color, not a page background. |

### Semantic aliases

`--color-canvas` → `#000000` (Mission Black) · `--color-text` → `#f0f0fa` (Flight White) · `--color-text-muted` → `#d8d8e1` (Orbit Gray) · `--color-border` → `#545457` (Graphite Line)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#f0f0fa` | `#000000` | 18.55:1 | AAA |
| `#d8d8e1` | `#000000` | 14.83:1 | AAA |

### Gradients

- `linear-gradient(90deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.8) 100%)`
- `linear-gradient(rgba(0, 0, 0, 0) 50%, rgb(0, 0, 0) 100%)`
- `linear-gradient(270deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.8) 100%)`
- `linear-gradient(rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| D-DIN | `--font-body` | webfont | 400, 700 | Navigation, body copy, and outlined action labels. | Roboto |
| D-DIN-Bold | `--font-display` | webfont | 400 | Display headlines and section headings. | Barlow Condensed |
| Roboto Mono | `--font-mono` | webfont | 400 | Code-style role, measured as a minor typographic accent. | Roboto Mono |

- **D-DIN:** Use a clean sans-serif; navigation is uppercase, while supporting copy stays sentence case.
- **D-DIN-Bold:** Bold, narrow uppercase forms; measured display and heading treatments use distinct tracking.
- **Roboto Mono:** Uppercase monospace treatment; low overall presence on this homepage.

### Type scale — Custom (ratio ≈ 1.71, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 400 | 0.95 | 0.02em | uppercase | D-DIN-Bold | Oversized uppercase display treatment for prominent campaign headlines. |
| h1 | 60px | 400 | 0.9 | -0.017em | uppercase | D-DIN-Bold | Primary section headline, as in the opening Starship Flight announcement. |
| h2 | 48px | 400 | 1.25 | 0.02em | uppercase | D-DIN-Bold | Large uppercase feature headings across media-led sections. |
| body | 16px | 400 | 1.5 | 0 | — | D-DIN | Short explanatory copy beneath feature headlines. |
| caption | 13px | 700 | 0.94 | 0.09em | uppercase | D-DIN | Compact uppercase date and metadata labels. |
| nav | 12px | 400 | 0.94 | 0 | uppercase | D-DIN | Small uppercase labels in the global navigation. |
| eyebrow | 13px | 700 | 0.94 | 0.09em | uppercase | D-DIN | Emphasized uppercase lead-in or supporting label. |
| code | 16px | 400 | 1.4 | 0 | uppercase | Roboto Mono | Monospaced uppercase utility text; not visually prominent in the screenshots. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 3, 4, 10, 12, 13, 15, 16, 18, 20, 24, 30, 36, 40 px.
- Section rhythm — · element gap 16px · card padding — · max content width —.

Use a single-column sequence of tall, full-bleed media sections rather than a card grid. Keep each section’s text block anchored to one side, shifting left and right between features as the imagery allows. The first viewport has a slim horizontal navigation above a large, open hero field; headline and action sit low on the left. Sections repeat a calm rhythm of headline, brief copy, and one action. The measurements provide no page max-width, so do not impose an invented fixed content width.

## Shape & elevation

- Radius: button `4px` · nav `4px` · xs `4px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease` on interactive elements.

The interface is predominantly flat: no measured shadows, cards, or elevated panels. Separate controls from the canvas with thin gray outlines and subtly rounded corners. Use the full-bleed media and dark gradient fades for depth and text legibility, not stacked UI surfaces or decorative borders.

## Imagery

Use cinematic video or photography of rockets, spacecraft, Earth, and crew as the dominant content. Images span the section and are framed as environmental scenes rather than isolated product cutouts. Preserve dark areas for legible text, with subtle black gradient overlays where needed. Warm planetary light and blue launch scenes are visible within the media, not part of the measured interface palette; avoid adding decorative illustrations.

## Components

### Global navigation

Compact uppercase links across the top over the black canvas, with light primary text and muted secondary labels; keep it visually subordinate to the hero.

### Launch timer

A narrow outlined utility control at the upper right, using restrained gray border detail and small muted uppercase text.

### Media hero

Full-bleed opening frame with a small uppercase date, bold headline, and a single outlined WATCH action positioned low on the left.

### Feature section

Tall media-led section with an uppercase heading, brief copy, and a compact action aligned to one side of the image.

### Outlined action

Text-first control with a thin #545457 outline, small corner rounding, white label, and a directional arrow where shown.

### Footer links

Small, widely spaced uppercase utility links at the end of the media sequence, kept quiet against the black background.

### Measured component styles

- **Primary button**: background #181819 · text #f0f0fa · radius 50% · padding 0px · 400 13.3333px D-DIN
- **Secondary button** (“WATCH”): transparent background · text #f0f0fa · border 1px solid #545457 · radius 4px · padding 0px 20px · 400 16px D-DIN
- **Navigation item** (“VEHICLES STARSHIP DRAGON FALCON 9 FALCON”): transparent background · text #f0f0fa · radius 0px · padding 0px · 400 16px D-DIN

## Do

- Use #000000 as the uninterrupted canvas.
- Let full-bleed spaceflight media dominate each section.
- Set major headlines in uppercase, bold, condensed-looking sans-serif.
- Keep supporting copy brief and subordinate to the heading.
- Use outlined actions with restrained gray borders.
- Alternate feature text placement when the imagery supports it.

## Don't

- Do not introduce bright interface colors beyond the measured palette.
- Do not turn feature sections into cards or boxed panels.
- Do not add drop shadows or decorative elevation.
- Do not crowd the navigation with oversized treatments.
- Do not place dense paragraphs over busy image areas.
- Do not treat colors inside photographs as interface palette colors.

## Agent prompt

Build a new SpaceX-style page as a sequence of tall, full-bleed media sections on Mission Black (#000000). Use Flight White (#f0f0fa) for uppercase, bold, compact headlines and primary navigation; keep supporting copy short and quiet. Set feature headings beside or over cinematic rocket, spacecraft, Earth, or crew imagery, alternating text alignment between sections where appropriate. Preserve generous open areas in each frame and use subtle black fades only where text needs contrast. Actions should be small, text-led outlined controls with Graphite Line (#545457), not filled promotional buttons. Use Orbit Gray (#d8d8e1) for secondary navigation labels and keep Control Gray (#404040) to minor interface detail. Avoid cards, shadows, extra colors, dense grids, and ornamental UI; the media should provide the page’s drama.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-screen hero with a slim top navigation and lower-left title, date, and action. | Global navigation, Launch information, Watch action | Black canvas, Uppercase headline, Outlined button |
| 2 | feature-split | Full-bleed media with headline and copy at left, planetary image to the right. | Explore action, Mission narrative | Split text and image, Uppercase heading, Dark treatment |
| 3 | feature-split | Launch footage fills the section; text and action sit to one side. | Learn more action, Technology overview | Full-bleed video, Text overlay, Gradient legibility |
| 4 | feature-split | Wide coastal launch scene with copy aligned on the left. | Vehicle exploration action, Service overview | Full-bleed video, Left-aligned text, Dark fade |
| 5 | feature-split | Full-bleed crew imagery with title, copy, and action on the right. | Mission action, Human spaceflight story | Photographic frame, Side-aligned text, Black canvas |
| 6 | feature-split | Full-bleed satellite and Earth imagery, with copy on the left. | Starlink action, Service explanation | Dark image frame, Uppercase heading, Outlined action |
| 7 | feature-split | Full-bleed orbital imagery with text aligned on the right. | Starmind action, AI compute overview | Space image, Side-aligned text, Dark gradient |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/spacex-com