# Design System
Inspired by SpaceX

A design token catalog generated from DESIGN.md. Every color, font, and spacing value — visualized against the void.

Explore Tokens View Source

01 / Colors

## Color Palette

Space Black
#000000
Page background
Spectral White
#f0f0fa
Text, headings
Ghost Surface
rgba(f0f0fa, 0.1)
Button background
Dark Overlay
rgba(0,0,0,0.5)
Photo overlay

02 / Typography

## Typography Scale

MAKING LIFE MULTIPLANETARY
Display — 48px / bold / 1.00 / +0.96px / D-DIN-Bold / uppercase
SpaceX designs, manufactures and launches advanced rockets and spacecraft. The company was founded to revolutionize space technology.
Body — 16px / 400 / 1.70 / D-DIN
FALCON 9 · STARSHIP · DRAGON
Nav Bold — 13px / 700 / 0.94 / +1.17px / uppercase
MISSION OVERVIEW
Caption — 12px / 400 / 1.00 / uppercase / +1px
LAUNCH DATE: 2026-04-15
Micro — 10px / 400 / 0.94 / uppercase / +1px

03 / Buttons

## Button Variants

Learn More
Ghost Button
Hover State
Ghost Hover

SpaceX uses only one button variant — the ghost button. The absence of variety IS the design.

04 / Cards

## Content Sections

### Falcon 9

The world's first orbital-class reusable rocket. Designed for reliable and safe transport of people and payloads.

### Starship

The most powerful launch vehicle ever developed. Designed to carry crew and cargo to Mars and beyond.

Note: SpaceX does not use traditional cards — all content sits directly on full-viewport photography. These are representational.

05 / Forms

## Form Elements

Mission Name
Default (ghost border)
Launch Site
Focus (spectral white border)
Payload
Error
Notes

06 / Spacing

## Spacing Scale

3
5
12
18
24
30

07 / Radius

## Border Radius

4px
32px

Minimal radius system — 4px for utility, 32px for buttons.

08 / Elevation

## Depth

Photography
Full-viewport imagery
Overlay
Dark gradient for text
Ghost
Interactive surface

Zero shadows. Depth from photography only.