Screenshot of Spacex

Spacex

spacex.com

The reference for cinematic full-bleed darkness: absolute #000000 ground, off-white #f0f0fa D-DIN industrial sans set in uppercase 0.09em tracking, text floating over full-viewport imagery with zero cards, zero accent and hairline-outline buttons.

Robotics flagship

Design tokens

background
surface
text
textMuted
accent
border
tone1
tone2
display
D-DIN-
body
D-DIN
mono
Roboto Mono

Do / Don't

Reference it for

  • Absolute void-black background (#000000) as the only surface, no panels or cards, depth comes from full-bleed photography not z-axis layering
  • Off-white technical type (#f0f0fa) as a single monochrome voice, no accent colour anywhere
  • D-DIN geometric industrial sans for the whole interface, giving labels an instrument-panel readout feel
  • Uppercase navigation with 0.09-0.10em letter tracking, treated as mission-control abbreviations
  • Hairline-outline buttons (thin border, transparent fill) like the 'WATCH' CTA, hover communicated by border opacity or subtle fill, never a filled pill
  • Small mono-styled date kicker (MAY 22, 2026) above a heavy display headline, dateline over hero pattern
  • Oversized bold uppercase display headline (STARSHIP'S TWELFTH FLIGHT TEST) bottom-left aligned over imagery
  • Thin transparent top nav bar sitting directly on the black hero, wide-tracked wordmark left, links centre

Do not copy

  • The SPACEX wordmark and its stretched-X lettermark
  • D-DIN itself as a literal font pick (it is the SpaceX signature, choose a fitting industrial sans instead)
  • The specific rocket, Starship and launch photography
  • The aerospace nav taxonomy (Vehicles, Starlink, Starshield, Human Spaceflight, xAI)
  • The 'UPCOMING LAUNCHES' selector and launch-schedule furniture
  • The literal Star White #f0f0fa hex as a brand signal