SpaceX / Design system

Making life multiplanetary.

An inspired interpretation of Spasex's design language — a mission-oriented aerospace brand built on pure black canvas, full-bleed photographic and video heroes of rockets and Mars landscapes, and uppercase D-DIN display type set in tight vertical leading. UI chrome is intentionally minimal a single ghost outlined pill button per band, all-caps eyebrow…

Download spec Tokens JSON Variables CSS Tailwind theme
13 colors8 type styles8 spacing steps5 radii
FLIGHT / STARSHIP
SPACEX

01 / Foundation

Color tokens.

Real values from the packaged SpaceX design reference. Semantic names remain searchable in CSS and JSON exports.

Primary#000000--color-primary
Ink#000000--color-ink
On Primary#ffffff--color-on-primary
On Primary Mute#f0f0fa--color-on-primary-mute
Canvas Night#000000--color-canvas-night
Canvas Night Soft#0a0a0a--color-canvas-night-soft
Canvas Light#ffffff--color-canvas-light
Canvas Cool#f0f0fa--color-canvas-cool
Hairline On Dark#3a3a3f--color-hairline-on-dark
Hairline On Light#e0e0e8--color-hairline-on-light
Link On Dark#ffffff--color-link-on-dark
Link Blue Fallback#0000ee--color-link-blue-fallback
Ink Mute#5a5a5f--color-ink-mute

02 / Typography

Voice at every scale.

Documented sizes, weights, line heights and tracking. Proprietary families fall back to an open-source preview substitute.

display-xxl80px · 700 · 0.95 · 1.6px
Making life multiplanetary.
display-xl60px · 700 · 1.2 · 1.2px
Making life multiplanetary.
display-lg48px · 700 · 1.25 · 0.96px
Making life multiplanetary.
body-lg16px · 400 · 1.7 · 0.32px
SpaceX builds a recognizable visual language.
body-md16px · 400 · 1.5 · 0.32px
SpaceX builds a recognizable visual language.
button-cap13.008px · 700 · 0.94 · 1.17px
SpaceX builds a recognizable visual language.
micro-cap12px · 400 · 2 · 0.96px
SpaceX builds a recognizable visual language.
caption13.008px · 400 · 1.5 · 0
SpaceX builds a recognizable visual language.

Font families

PrimaryD-DIN-Bold, Arial Narrow, Arial, Verdana, sans-serifPreviewed with Barlow Condensed, Arial Narrow, sans-serif
Family 2D-DIN, Arial, Verdana, sans-serifDocumented brand family

03 / Geometry

Rhythm and shape.

Spacing and corner geometry are presented directly from the package rather than normalized into a generic scale.

Spacing scale

xxs4px
xs8px
sm12px
md16px
lg18px
xl24px
xxl32px
huge48px

Border radius

xs4px
sm8px
md16px
pill32px
full9999px

Shadows

00
Flat by design

No shadow tokens are documented for SpaceX. Surface contrast, borders and composition create hierarchy instead.

04 / Depth

Surface hierarchy.

Three working levels show how the brand creates hierarchy using contrast, borders and restrained elevation.

Canvas#000000
Surface#0a0a0a
Emphasis#161616

05 / Components

Brand behavior.

Live controls combine the documented palette, typography, geometry and interaction hierarchy.

01

Outlined mission CTA

.button-primary
02

Launch status label

.button-secondary
03

Mission image band

.brand-card
FeaturedMission image band

Brand surface, type and border treatments working as one component.

04

Updates signup field

input:focus

06 / Guidelines

Keep it recognizable.

Concrete implementation guardrails for preserving the visual character of SpaceX.

Do / Embrace

  • Use pure black as the primary canvas.
  • Set mission headlines in uppercase condensed type.
  • Keep UI chrome minimal over immersive imagery.
  • Use one outlined action per major visual band.

Don't / Avoid

  • Do not add ornamental color to navigation.
  • Do not use soft pastel cards on the black canvas.
  • Do not over-round controls beyond the documented pill.
  • Do not let UI decoration compete with mission imagery.