---
version: alpha
name: SpaceX
description: "Pure black, full-bleed launch photography, thin uppercase against a live countdown."
colors:
  on-surface-variant: "rgba(240, 240, 250, .7)"
  on-surface: "#F0F0FA"
  surface: "#000000"
  outline: "rgba(240, 240, 250, .15)"
  primary: "#0000EE"
  white-90: "rgba(240, 240, 250, .9)"
  white-50: "rgba(240, 240, 250, .5)"
  white-35: "rgba(240, 240, 250, .35)"
  white-10: "rgba(240, 240, 250, .1)"
  pure-white-25: "rgba(255, 255, 255, .25)"
  black-scrim-50: "rgba(0, 0, 0, .5)"
  black-scrim-80: "rgba(0, 0, 0, .8)"
  ink-gray-80: "rgba(37, 38, 40, .8)"
  ink-gray-60: "rgba(37, 38, 40, .6)"
  ink-gray-40: "rgba(37, 38, 40, .4)"
typography:
  micro-label:
    fontFamily: D-DIN
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.08em
  caption:
    fontFamily: D-DIN
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.06em
  nav-link:
    fontFamily: D-DIN
    fontSize: 13.008px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.05em
  button:
    fontFamily: D-DIN
    fontSize: 13.333px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.05em
  body:
    fontFamily: D-DIN
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  heading-s:
    fontFamily: D-DIN
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: 0em
  heading:
    fontFamily: D-DIN
    fontSize: 60px
    fontWeight: 400
    lineHeight: 1.02
    letterSpacing: 0em
  display:
    fontFamily: D-DIN
    fontSize: 80px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0em
rounded:
  outline-ghost-button-dropdown: 4px
  filled-pill-button: 32px
  everything-else: 0px
spacing:
  3xs: 4px
  2xs: 8px
  xs: 12px
  sm: 16px
  md: 20px
  lg: 32px
---
# SpaceX — Style Reference
> Pure black, full-bleed launch photography, thin uppercase against a live countdown.

**Theme:** dark

SpaceX runs on a two-value core — absolute black `#000000` and a single cool near-white `#F0F0FA` — and almost nothing else. There are no brand accents fighting for attention; color comes entirely from the full-bleed rocket-and-sky photography the type sits on top of. The whole interface is expressed as a graded stack of white opacities (`--white-100` down to `--white-10`) plus a couple of black scrims that darken the imagery enough to keep text legible. Typography is the identity: D-DIN — an engineering, DIN-standard sans — set in wide uppercase, paired with Roboto Mono for the mission-clock and technical labels. Layout is edge-to-edge photography with text anchored bottom-left, chrome kept to hairline 1px outlines. The result reads like a mission console: quiet, precise, and completely deferential to the image behind it.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Black | `#000000` | `--color-black` | The canvas and the button ground. Everything is built on pure black; the photography and scrims do the rest. |
| Near-White | `#F0F0FA` | `--white-100` | Primary text, wordmark, hairline borders, and the one filled button. Faintly cool (blue-lifted) — never pure `#FFFFFF` for type. |
| White 90 | `rgba(240, 240, 250, .9)` | `--white-90` | High-emphasis text over busy imagery. |
| White 70 | `rgba(240, 240, 250, .7)` | `--white-70` | Secondary text, active nav. |
| White 50 | `rgba(240, 240, 250, .5)` | `--white-50` | Muted labels, inactive nav items. |
| White 35 | `rgba(240, 240, 250, .35)` | `--white-35` | Disabled / de-emphasized text. |
| White 15 | `rgba(240, 240, 250, .15)` | `--white-15` | Hairline borders and dividers over photography. |
| White 10 | `rgba(240, 240, 250, .1)` | `--white-10` | Faintest hover fills and rule lines. |
| Pure White 25 | `rgba(255, 255, 255, .25)` | `--white-25` | The one true-white token — a subtle over-image tint, not for type. |
| Black Scrim 50 | `rgba(0, 0, 0, .5)` | `--black-50` | Gradient scrim that darkens the lower half of hero imagery. |
| Black Scrim 80 | `rgba(0, 0, 0, .8)` | `--black-80` | Heavier overlay for full-legibility panels. |
| Ink Gray 80 | `rgba(37, 38, 40, .8)` | `--gray-80` | Near-black surface fill (`#252628` *(inferred base)*) for dropdowns and menu panels. |
| Ink Gray 60 | `rgba(37, 38, 40, .6)` | `--gray-60` | Lighter panel fill / hover state. |
| Ink Gray 40 | `rgba(37, 38, 40, .4)` | `--gray-40` | Faintest panel wash. |
| Default Link Blue | `#0000EE` | `--color-link` | Unstyled browser-default anchor — appears only on un-themed legal/footer links, never a brand color. Editorial artifact; do not use for CTAs. |

## Tokens — Typography
### D-DIN — the identity face: wide uppercase headlines, nav, and body · `--font-din`
- **Substitute:** DIN 2014, DIN Next, Oswald (condensed cousin), or `ui-sans-serif`
- **Weights:** 400 (Regular, `--font-din`), 700 (Bold, `--font-din-bold`) — both loaded at CSS weight 400; the bold face is a separate family, not a synthesized weight.
- **Sizes:** 80px / 60px / 48px display & headings; 16px body; 13.008px / 13.3333px nav & buttons; 12px / 10px micro-labels
- **Line height:** tight on display (~1.0–1.05), ~1.4 on body
- **Letter spacing:** generous positive tracking on all uppercase runs (nav, labels, buttons); headlines set uppercase and near-flush
- **Role:** Every visible word except the clock. Headlines are uppercase and set large; nav is uppercase at ~13px; body at 16px.

### Roboto Mono — the mission-clock and technical readouts · `--font-mono`
- **Substitute:** IBM Plex Mono, JetBrains Mono, `ui-monospace`
- **Weights:** 400
- **Sizes:** ~12–13px for countdown (`T-15:20:05`) and technical captions
- **Line height:** 1.0–1.2, tabular
- **Role:** Signals "instrument data" — countdowns, timestamps, telemetry-style labels. Fixed-width keeps the ticking clock from reflowing.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Micro label | 10px | 1.2 | +0.08em uppercase | `--text-2xs` |
| Caption | 12px | 1.3 | +0.06em uppercase | `--text-xs` |
| Nav / Link | 13.008px | 1.2 | +0.05em uppercase | `--text-sm` |
| Button (pill) | 13.333px | 1.2 | +0.05em uppercase | `--text-btn` |
| Body | 16px | 1.4 | normal | `--text-base` |
| Heading S | 48px | 1.05 | 0 uppercase | `--text-3xl` |
| Heading | 60px | 1.02 | 0 uppercase | `--text-4xl` |
| Display | 80px | 1.0 | 0 uppercase | `--text-5xl` |

## Tokens — Spacing & Shapes
**Base unit:** 4px   **Density:** comfortable (edge-to-edge, generous negative space)

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 3xs | 4px | `--spacing-3xs` |
| 2xs | 8px | `--spacing-2xs` |
| xs | 12px | `--spacing-xs` |
| sm | 16px | `--spacing-sm` |
| md | 20px | `--spacing-md` |
| lg | 32px | `--spacing-lg` |

### Border Radius
| Element | Value |
|---------|-------|
| Outline / ghost button, dropdown | 4px (`--radius-sm`) |
| Filled pill button | 32px (`--radius-pill`) |
| Everything else | 0px (sharp) |

### Shadows
None. The system uses zero drop shadows — depth is luminance and scrim, never elevation blur.

### Layout
- **Page max-width:** none — full-bleed, edge to edge
- **Section gap:** full-viewport hero panels stacked
- **Card padding:** ~20px (`20px 10px 20px 6px` on measured cards)
- **Element gap:** 16–32px

## Components
### Wordmark
**Role:** The SPACEX logotype, top-left of the header.
Rendered in `#F0F0FA` (`fill: rgb(240,240,250)`) as an SVG, custom wide uppercase letterforms with the extended, angular X. Sits directly on the photographic hero with no plate behind it.

### Primary Nav
**Role:** Global navigation across the top of the black/photographic header.
Uppercase D-DIN at ~13px with wide tracking, in `--white-100`/`--white-70`. No underlines, no background — items float on the image. Muted states step down through the white-opacity ramp rather than changing hue.

### Ghost Button (Outline)
**Role:** In-context action over imagery — e.g. WATCH.
`background: #000000`, `color: #F0F0FA`, `border: 1px solid #F0F0FA`, `border-radius: 4px`, `padding: 0 20px`, 16px D-DIN. Frequently pairs with a trailing arrow (→). The 1px hairline is the whole aesthetic: thin, precise, never filled unless it's the lead action.

### Filled Pill Button
**Role:** Lead commercial CTA (e.g. RESERVE YOUR RIDE).
`background: #F0F0FA`, `color: #000000`, `border: none`, `border-radius: 32px`, `padding: 18px`, 13.33px uppercase D-DIN. The only inverted, fully-filled control — reserved for the single most important action, so its pill shape reads as special against the otherwise square 4px chrome.

### Dropdown / Select
**Role:** Compact selectors like UPCOMING LAUNCHES in the header.
Thin 1px `--white-100`/`--white-15` outline, 4px radius, uppercase label, chevron affordance. Panel fills use the ink-gray tokens (`--gray-80`) over the darkened image.

### Countdown Clock
**Role:** Live mission timer (T-15:20:05).
Roboto Mono, ~12–13px, `--white-100`, tabular figures so the ticking seconds never shift layout. Positioned as a caption directly above the hero headline — the technical counterpoint to the big DIN headline.

### Hero Headline
**Role:** The single dominant statement per panel (STARSHIP'S THIRTEENTH FLIGHT TEST).
D-DIN uppercase at 48–80px, `#F0F0FA`, tight leading, anchored bottom-left. No color, no effect — legibility comes from the black scrim graded into the lower image.

### Hero Panel
**Role:** Full-viewport section built on one photograph.
Edge-to-edge launch/vehicle imagery with a bottom `--black-50 → transparent` gradient scrim. Text and controls cluster in the lower-left; the rest of the frame is left to the image.

### Header Bar
**Role:** Fixed top chrome.
Transparent over the hero (wordmark left, nav center, selector right), backed by ink-gray panels (`--gray-80`) when a menu opens. No border unless scrolled.

### Micro Label
**Role:** Eyebrow / metadata tags.
10–12px uppercase D-DIN with wide tracking in `--white-50`/`--white-35`. Used sparingly to tag content above headlines.

## Do's and Don'ts
### Do
- Build on pure `#000000` and let full-bleed photography supply all the color.
- Set headlines and nav in wide uppercase D-DIN; keep the mission clock in Roboto Mono.
- Use the white-opacity ramp (`--white-100 → --white-10`) for hierarchy instead of introducing new hues.
- Keep chrome to 1px `#F0F0FA` hairlines at 4px radius.
- Darken imagery with `--black-50`/`--black-80` scrims to protect text legibility.
- Reserve the filled white pill (32px radius) for the single lead CTA only.

### Don't
- Don't add accent colors — no blue, no gradient brand hue. `#0000EE` is an unstyled-link artifact, not a palette member.
- Don't use pure `#FFFFFF` for body text; the cool near-white `#F0F0FA` is the correct white.
- Don't apply drop shadows or elevation blur — depth is scrim and luminance only.
- Don't fill ghost buttons or round them past 4px; keep the hairline discipline.
- Don't set headlines lowercase or in a humanist/serif face — the DIN uppercase is the brand.
- Don't crowd the frame; leave the majority of each hero to the photograph.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#000000` | The base black behind everything. |
| 1 | Photographic hero | full-bleed image | The de-facto surface — imagery is the background. |
| 2 | Scrim | `rgba(0, 0, 0, .5)` / `rgba(0, 0, 0, .8)` | Gradient overlay that turns any image into a legible dark surface. |
| 3 | Ink panel | `rgba(37, 38, 40, .8)` | Menu/dropdown fill floated over the image. |

## Elevation
There is no shadow system. Depth is communicated three ways: (1) the black-scrim gradient that darkens imagery toward text, (2) steps in white opacity that push labels forward or back, and (3) hairline 1px `#F0F0FA` borders that outline interactive chrome. Menus and dropdowns sit "above" only by way of a near-opaque ink-gray fill (`--gray-80`), not blur or lift.

## Imagery
Photography is the entire visual identity — full-bleed, high-production stills and video of vehicles, launch towers, and sky, almost always shot at golden hour or against deep space-black. Images run edge-to-edge with a dark gradient scrim at the bottom. There is no illustration, no iconographic flourish, and no color accent: the palette you see (the sunset, the steel of the tower) comes from the photograph, not from tokens. Type is placed on the quiet, darker regions of each frame. Treat imagery as the hero and the chrome as a thin instrument overlay.

## Layout
Full-bleed, viewport-height hero panels with no max-width container. Header chrome floats transparently on top: wordmark top-left, uppercase nav across the top, a selector top-right. Primary content (eyebrow label → mono countdown → big DIN headline → ghost button) stacks bottom-left, leaving the majority of the frame to the image. Sections are stacked full-viewport panels rather than a boxed grid. Alignment is left-anchored and disciplined; whitespace is generous and intentional.

## Typography Signature
The system runs a deliberate two-voice split. The **display voice** is D-DIN in wide uppercase — an engineering standard typeface (the DIN of German industrial drawings) that reads as precise and institutional rather than expressive; set at 48–80px with tight leading and no color, it lets the photograph carry the emotion while the words stay factual. The **instrument voice** is Roboto Mono, used only for the countdown and technical readouts, its tabular figures keeping the live clock from reflowing as it ticks. The signature move is the pairing of a big DIN uppercase headline with a small mono timestamp directly above it — mission-control grammar. Because the whole palette is monochrome, tracking and weight (Regular vs. the separate Bold family) do all the hierarchy work that color would elsewhere.

## Agent Prompt Guide
## Quick Color Reference
- background: `#000000`
- text: `#F0F0FA`
- surface: `rgba(37, 38, 40, .8)` (ink panel) over `rgba(0, 0, 0, .5)` scrim
- border: `#F0F0FA` at 1px (hairline), or `rgba(240, 240, 250, .15)`
- accent: none — imagery is the accent
- primary action: filled `#F0F0FA` pill on `#000000` text (no distinct CTA color)

## Example Component Prompts
1. **Ghost button**: Black `#000000` button, 1px solid `#F0F0FA` border, 4px radius, padding 0 20px, uppercase D-DIN 16px in `#F0F0FA`, with a trailing → arrow. No fill, no shadow.
2. **Filled pill CTA**: `#F0F0FA` background, `#000000` uppercase D-DIN text at 13.33px, no border, 32px border-radius, 18px padding. Use only for the single lead action.
3. **Hero panel**: Full-bleed launch photograph, viewport height, bottom `rgba(0,0,0,.5)`→transparent gradient scrim. Bottom-left stack: 12px `--white-50` uppercase eyebrow, Roboto Mono countdown `T-15:20:05`, then a 60–80px uppercase D-DIN headline in `#F0F0FA`, then a ghost button.
4. **Top nav**: Transparent bar over imagery, SPACEX wordmark left in `#F0F0FA`, uppercase D-DIN nav items ~13px with wide tracking in `--white-100`/`--white-70`, no underlines, a 1px-outlined 4px-radius selector at right.
5. **Countdown clock**: Roboto Mono ~13px, `#F0F0FA`, tabular figures, format `T-HH:MM:SS`, placed as a caption above a large uppercase headline.

## Similar Brands
- **NASA / mission-control interfaces** — the mono-clock-plus-monochrome grammar reads as literal aerospace telemetry.
- **Apple (product hero pages)** — full-bleed imagery, near-invisible chrome, and text deferring to the photograph.
- **Tesla** — sibling Musk-brand: black/white minimalism, edge-to-edge vehicle photography, thin uppercase.
- **Palantir** — austere near-black dark mode with technical, uppercase-leaning typography and no decorative color.
- **Nike Jordan / launch pages** — high-contrast full-bleed photography with bold uppercase display type as the sole graphic.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors — core */
  --color-black: #000000;
  --color-link: #0000EE; /* unstyled-anchor artifact — not a brand color */

  /* Colors — white opacity ramp */
  --white-100: rgba(240, 240, 250, 1);
  --white-90:  rgba(240, 240, 250, .9);
  --white-80:  rgba(240, 240, 250, .8);
  --white-70:  rgba(240, 240, 250, .7);
  --white-60:  rgba(240, 240, 250, .6);
  --white-50:  rgba(240, 240, 250, .5);
  --white-35:  rgba(240, 240, 250, .35);
  --white-30:  rgba(240, 240, 250, .3);
  --white-25:  rgba(255, 255, 255, .25);
  --white-15:  rgba(240, 240, 250, .15);
  --white-10:  rgba(240, 240, 250, .1);

  /* Colors — black scrims */
  --black-50:  rgba(0, 0, 0, .5);
  --black-80:  rgba(0, 0, 0, .8);

  /* Colors — ink panels (base #252628 inferred) */
  --gray-80:   rgba(37, 38, 40, .8);
  --gray-60:   rgba(37, 38, 40, .6);
  --gray-40:   rgba(37, 38, 40, .4);

  /* Typography — Families */
  --font-din: 'D-DIN', 'DIN 2014', 'DIN Next', ui-sans-serif, system-ui, sans-serif;
  --font-din-bold: 'D-DIN-Bold', 'DIN 2014', ui-sans-serif, sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, 'IBM Plex Mono', monospace;

  /* Typography — Scale */
  --text-2xs: 10px;
  --text-xs: 12px;
  --text-sm: 13.008px;
  --text-btn: 13.333px;
  --text-base: 16px;
  --text-3xl: 48px;
  --text-4xl: 60px;
  --text-5xl: 80px;

  /* Spacing */
  --spacing-3xs: 4px;
  --spacing-2xs: 8px;
  --spacing-xs: 12px;
  --spacing-sm: 16px;
  --spacing-md: 20px;
  --spacing-lg: 32px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-pill: 32px;
}
```
### Tailwind v4
```css
@theme {
  /* Colors — core */
  --color-black: #000000;
  --color-link: #0000EE;

  /* Colors — white opacity ramp */
  --color-white-100: rgba(240, 240, 250, 1);
  --color-white-90:  rgba(240, 240, 250, .9);
  --color-white-80:  rgba(240, 240, 250, .8);
  --color-white-70:  rgba(240, 240, 250, .7);
  --color-white-60:  rgba(240, 240, 250, .6);
  --color-white-50:  rgba(240, 240, 250, .5);
  --color-white-35:  rgba(240, 240, 250, .35);
  --color-white-30:  rgba(240, 240, 250, .3);
  --color-white-25:  rgba(255, 255, 255, .25);
  --color-white-15:  rgba(240, 240, 250, .15);
  --color-white-10:  rgba(240, 240, 250, .1);

  /* Colors — black scrims */
  --color-black-50:  rgba(0, 0, 0, .5);
  --color-black-80:  rgba(0, 0, 0, .8);

  /* Colors — ink panels */
  --color-gray-80:   rgba(37, 38, 40, .8);
  --color-gray-60:   rgba(37, 38, 40, .6);
  --color-gray-40:   rgba(37, 38, 40, .4);

  /* Typography — Families */
  --font-din: 'D-DIN', 'DIN 2014', 'DIN Next', ui-sans-serif, system-ui, sans-serif;
  --font-din-bold: 'D-DIN-Bold', 'DIN 2014', ui-sans-serif, sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, 'IBM Plex Mono', monospace;

  /* Typography — Scale */
  --text-2xs: 10px;
  --text-xs: 12px;
  --text-sm: 13.008px;
  --text-btn: 13.333px;
  --text-base: 16px;
  --text-3xl: 48px;
  --text-4xl: 60px;
  --text-5xl: 80px;

  /* Spacing */
  --spacing-3xs: 4px;
  --spacing-2xs: 8px;
  --spacing-xs: 12px;
  --spacing-sm: 16px;
  --spacing-md: 20px;
  --spacing-lg: 32px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-pill: 32px;
}
```