SpaceX Design System

Color Palette

Background Colors

Black

#000000

Light Gray 2

rgba(240,240,250,.1)

Text Colors

White

#F0F0FA

Blue

#0000EE

Border Color

White 2

rgba(240,240,250,.35)

Fill Color

Light Gray

#D9D9D9

White Opacity Ramp (from :root)

White 100

100%

White 90

90%

White 80

80%

White 70

70%

White 60

60%

White 50

50%

White 35

35%

White 30

30%

White 15

15%

White 10

10%

Black 50

50%

Typography

Base Font · Times

Times

Humanity's future depends on becoming a multi-planetary species. The mission is to make life multi-planetary.

Regular · 400

Display Font · D-DIN / D-DIN-Bold

D-DIN

FALCON 9 · FALCON HEAVY · STARSHIP · DRAGON · STARLINK · RIDESHARE

D-DIN Regular D-DIN Bold

SPACE X

Display Hero · 80px · Regular · Times · line-height: 76px · letter-spacing: 0.96px

Starship

Heading · 48px · Regular · Times · line-height: 48px

FALCON 9 · REUSABLE FIRST STAGE ROCKET

Heading Nav · 16px · D-DIN · line-height: 24px · letter-spacing: 1.6px

SpaceX designs, manufactures and launches advanced rockets and spacecraft. The company was founded in 2002 to revolutionize space technology.

Body · 16px · D-DIN · line-height: 24px · letter-spacing: 0.96px

Caption · 12px · D-DIN · line-height: 12px

Line Heights

Tight

12px

Snug

24px

Normal

48px

Relaxed

60px

Loose

76px

Letter Spacing

MISSION

Tight

0.96px · headings, body text

LAUNCHES

Normal

1.6px · navigation, labels, caps UI

Spacing

Spacing Scale

Token scale — 10px → 60px

Borders

Border Radii

4px

32px

Border Width

Hairline

1px

The single border width in the SpaceX design system — used for all dividers, component outlines, and UI boundaries via --border-width-hairline: 1px. Borders use rgba(240,240,250,0.35) on black backgrounds.

Shadow / Elevation

No shadow tokens defined

SpaceX's design system contains no shadow or elevation tokens. The site achieves depth exclusively through high-contrast borders (rgba(240,240,250,0.35)), full-bleed imagery, and tonal separation between pure black backgrounds and video/photo content. This is an intentional aesthetic choice consistent with SpaceX's stark, cinematic visual language.

Z-Index

Token	Value	Usage
--z-1	1	Base content layer
--z-2	2	Slightly elevated elements
--z-3	3	Inline overlays, sticky elements
--z-4	99	Navigation, header, overlay panels
--z-5	100	Top-priority: modals, toasts, critical UI

Breakpoints

📱

--breakpoint-xs

599.98px

Mobile upper edge

📱

--breakpoint-sm

600px

Mobile / small tablet threshold

📲

--breakpoint-md

959.98px

Tablet upper edge

💻

--breakpoint-lg

960px

Laptop / desktop threshold

💻

--breakpoint-xl

961px

Wide laptop

🖥️

--breakpoint-2xl

1279px

Desktop

🖥️

--breakpoint-3xl

1279.98px

Wide desktop upper edge

🖥️

--breakpoint-bp-8

1350px

Large monitor

📺

--breakpoint-bp-9

1500px

Ultra-wide / full HD

Opacity

No opacity tokens defined

SpaceX does not define discrete opacity tokens in its design system. Instead, alpha transparency is embedded directly into the color values: --white-10 through --white-100 are pre-composed rgba() colors declared in :root. The opacity ramp is shown as color swatches in the Color Palette section above.

Accessibility — Contrast Ratios

WCAG 2.1: AA ≥ 4.5:1 · AA Large ≥ 3:1 · AAA ≥ 7:1

Text Token	Background Token	Ratio	Rating
White (#F0F0FA)	Black (#000000)	18.55:1	AAA
White (#F0F0FA)	Light Gray 2 (rgba 10%)	1.05:1	Fail
Blue (#0000EE)	Black (#000000)	2.23:1	Fail
Blue (#0000EE)	Light Gray 2 (rgba 10%)	7.94:1	AAA

CSS Variables Reference

Colors

Black--color-black#000000

White--color-white#F0F0FA

Blue--color-blue#0000EE

White 2 (border)--color-white-2rgba(240,240,250,.35)

Light Gray (fill)--color-light-gray#D9D9D9

Light Gray 2 (bg)--color-light-gray-2rgba(240,240,250,.1)

White 100%--white-100rgba(240,240,250,1)

White 70%--white-70rgba(240,240,250,.7)

White 50%--white-50rgba(240,240,250,.5)

White 35%--white-35rgba(240,240,250,.35)

White 15%--white-15rgba(240,240,250,.15)

White 10%--white-10rgba(240,240,250,.1)

Black 50%--black-50rgba(0,0,0,.5)

Black 80%--black-80rgba(0,0,0,.8)

Typography

Base (serif)--font-family-baseTimes

Display--font-family-2D-DIN

Display Bold--font-family-3D-DIN-Bold

Regular--font-weight-regular400

Caption--font-size-2xs12px

Body / Nav--font-size-xs16px

Heading--font-size-sm48px

Display Hero--font-size-base80px

LH Tight--line-height-tight12px

LH Snug--line-height-snug24px

LH Normal--line-height-normal48px

LH Relaxed--line-height-relaxed60px

LH Loose--line-height-loose76px

Tight Tracking--letter-spacing-tight0.96px

Normal Tracking--letter-spacing-normal1.6px

Spacing

Space 1--space-110px

Space 2--space-212px

Space 3--space-315px

Space 4--space-416px

Space 5--space-518px

Space 6--space-620px

Space 8--space-824px

Space 10--space-1030px

Space 12--space-1236px

Space 16--space-1640px

Space 20--space-2060px

Borders, Motion, Layers & Breakpoints

Hairline--border-width-hairline1px

SM--radius-sm4px

MD--radius-md32px

Instant--duration-instant0.3s

Fast--duration-fast0.5s

Base--z-11

Elevated--z-22

Overlay--z-33

Nav--z-499

Critical--z-5100

XS upper--breakpoint-xs599.98px

SM--breakpoint-sm600px

MD upper--breakpoint-md959.98px

LG--breakpoint-lg960px

XL--breakpoint-xl961px

2XL--breakpoint-2xl1279px

3XL upper--breakpoint-3xl1279.98px

BP-8--breakpoint-bp-81350px

BP-9--breakpoint-bp-91500px

Design System Preview · SpaceX (Dark) · Generated 18/04/2026