SpaceX Design System

---

version: alpha

name: Spacex-Inspired-design-analysis

description: 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 microtext, and a fixed top nav over photography. The system is unapologetically austere — black, white, and the imagery itself.

colors:

primary: "#000000"

ink: "#000000"

on-primary: "#ffffff"

on-primary-mute: "#f0f0fa"

canvas-night: "#000000"

canvas-night-soft: "#0a0a0a"

canvas-light: "#ffffff"

canvas-cool: "#f0f0fa"

hairline-on-dark: "#3a3a3f"

hairline-on-light: "#e0e0e8"

link-on-dark: "#ffffff"

link-blue-fallback: "#0000ee"

ink-mute: "#5a5a5f"

typography:

display-xxl:

fontFamily: "D-DIN-Bold, Arial Narrow, Arial, Verdana, sans-serif"

fontSize: 80px

fontWeight: 700

lineHeight: 0.95

letterSpacing: 1.6px

display-xl:

fontFamily: "D-DIN-Bold, Arial Narrow, Arial, Verdana, sans-serif"

fontSize: 60px

fontWeight: 700

lineHeight: 1.2

letterSpacing: 1.2px

display-lg:

fontFamily: "D-DIN-Bold, Arial Narrow, Arial, Verdana, sans-serif"

fontSize: 48px

fontWeight: 700

lineHeight: 1.25

letterSpacing: 0.96px

body-lg:

fontFamily: "D-DIN, Arial, Verdana, sans-serif"

fontSize: 16px

fontWeight: 400

lineHeight: 1.7

letterSpacing: 0.32px

body-md:

fontFamily: "D-DIN, Arial, Verdana, sans-serif"

fontSize: 16px

fontWeight: 400

lineHeight: 1.5

letterSpacing: 0.32px

button-cap:

fontFamily: "D-DIN, Arial, Verdana, sans-serif"

fontSize: 13.008px

fontWeight: 700

lineHeight: 0.94

letterSpacing: 1.17px

micro-cap:

fontFamily: "D-DIN, Arial, Verdana, sans-serif"

fontSize: 12px

fontWeight: 400

lineHeight: 2.0

letterSpacing: 0.96px

caption:

fontFamily: "D-DIN, Arial, Verdana, sans-serif"

fontSize: 13.008px

fontWeight: 400

lineHeight: 1.5

letterSpacing: 0

rounded:

xs: 4px

sm: 8px

md: 16px

pill: 32px

full: 9999px

spacing:

xxs: 4px

xs: 8px

sm: 12px

md: 16px

lg: 18px

xl: 24px

xxl: 32px

huge: 48px

components:

button-ghost-on-dark:

backgroundColor: "{colors.canvas-night}"

textColor: "{colors.on-primary}"

typography: "{typography.button-cap}"

rounded: "{rounded.pill}"

padding: 18px 24px

button-ghost-on-light:

backgroundColor: "{colors.canvas-light}"

textColor: "{colors.ink}"

typography: "{typography.button-cap}"

rounded: "{rounded.pill}"

padding: 18px 24px

button-filled-cool:

backgroundColor: "{colors.canvas-cool}"

textColor: "{colors.ink}"

typography: "{typography.button-cap}"

rounded: "{rounded.pill}"

padding: 18px 24px

text-input:

backgroundColor: "{colors.canvas-light}"

textColor: "{colors.ink}"

typography: "{typography.body-md}"

rounded: "{rounded.xs}"

padding: 12px 16px

card-photo-band:

backgroundColor: "{colors.canvas-night}"

textColor: "{colors.on-primary}"

typography: "{typography.body-md}"

rounded: "{rounded.xs}"

padding: 0px

card-shop-product:

backgroundColor: "{colors.canvas-light}"

textColor: "{colors.ink}"

typography: "{typography.body-md}"

rounded: "{rounded.sm}"

padding: 16px

nav-bar-overlay:

backgroundColor: "{colors.canvas-night}"

textColor: "{colors.on-primary}"

typography: "{typography.button-cap}"

rounded: "{rounded.xs}"

padding: 24px 32px

link-on-dark:

backgroundColor: "{colors.canvas-night}"

textColor: "{colors.link-on-dark}"

typography: "{typography.body-md}"

rounded: "{rounded.xs}"

padding: 0px

link-on-light:

backgroundColor: "{colors.canvas-light}"

textColor: "{colors.ink}"

typography: "{typography.body-md}"

rounded: "{rounded.xs}"

padding: 0px

footer-dark:

backgroundColor: "{colors.canvas-night}"

textColor: "{colors.on-primary}"

typography: "{typography.caption}"

rounded: "{rounded.xs}"

padding: 32px 24px

---

Spasex's design language is an exercise in negation: pure black canvas, white display type set in tight vertical leading and uppercase, full-bleed photography or autoplaying rocket-launch video as the only chrome. There is no brand color beyond black-and-white; there are no decorative shapes; there are no card grids or pricing tables on the marketing pages. Every band is a single full-viewport photograph or video paired with one all-caps headline at `{typography.display-xxl}` (80px D-DIN-Bold) and one ghost-outlined pill CTA. The composition is closer to a film title card than a SaaS landing page.

The brand's depth is photographic. Mars landscapes, rocket exhaust plumes, the F9 booster on a launchpad at sunset — these are the design system. Type sits over them at high opacity with no scrim, no gradient overlay; the photographs are graded so the type lands cleanly. When type does need a background, it sits on `{colors.canvas-night-soft}` (a barely-lifted near-black) with a 1px hairline in `{colors.hairline-on-dark}`.

Typography splits between **D-DIN-Bold** for display tiers (uppercase, tight tracking, condensed feel) and **D-DIN** regular for body and button labels. There is no third family — even pricing on the shop site uses the same two cuts. The display sizes are unusually tight in vertical leading (0.95–1.25) and unusually loose in horizontal tracking (1.6px positive at 80px) — the brand feels engineered rather than designed.

**Key Characteristics:**

> **Source pages:** home (`/`), `/shop`, `/vehicles/starship`, `/humanspaceflight/overview`, `/mission`.

The brand has no accent colors. Black and white do all the chromatic work; photography supplies every other hue.

The display tier is **D-DIN-Bold** — a condensed industrial sans inspired by the German DIN 1451 standard (used on autobahn road signage and engineering blueprints). When unavailable, fall back to **Arial Narrow**, then Arial, then Verdana — the fallback chain prioritizes width compression over ornament.

The UI tier is **D-DIN** (regular weight) — the same family at standard width — used for body, button labels, and captions.

D-DIN is freely available from the **DIN Type Foundry** (and a free version under the same name is widely distributed). For maximum brand fidelity, use D-DIN directly; as a substitute, **Inter** at heavy weights (700+) with letter-spacing of 1.6px positive tracking approximates the rhythm. Avoid serif or humanist sans alternatives.

| Token | Size | Weight | Line Height | Letter Spacing | Use |

|---|---|---|---|---|---|

| `{typography.display-xxl}` | 80px | 700 | 0.95 | 1.6px | Hero headline (uppercase) |

| `{typography.display-xl}` | 60px | 700 | 1.2 | 1.2px | Section opener (uppercase) |

| `{typography.display-lg}` | 48px | 700 | 1.25 | 0.96px | Sub-section heading (uppercase) |

| `{typography.body-lg}` | 16px | 400 | 1.7 | 0.32px | Marketing body lead |

| `{typography.body-md}` | 16px | 400 | 1.5 | 0.32px | Default UI body |

| `{typography.button-cap}` | 13.008px | 700 | 0.94 | 1.17px | All-caps button label |

| `{typography.micro-cap}` | 12px | 400 | 2.0 | 0.96px | All-caps eyebrow / nav item |

| `{typography.caption}` | 13.008px | 400 | 1.5 | 0 | Helper / footer text |

**D-DIN** is freely available (the original DIN-style face under that name is widely distributed). When unavailable, use **Inter** at 700 weight with `letter-spacing: 1.6px`, `text-transform: uppercase`, and `line-height: 0.95` for display sizes — this matches the rhythm. Avoid Helvetica or Arial at default weights — the brand needs the condensed industrial cut. Avoid serif fallbacks entirely.

The marketing pages have minimal traditional whitespace — the photograph occupies all space. "Whitespace" here means the dark sky in a rocket photograph or the empty stretch of Martian terrain. Negative space is photographic, not a UI choice. On the shop site whitespace returns to standard 32px grid gutters.

| Level | Treatment | Use |

|---|---|---|

| 0 | Flat | Default — and the only level on marketing surfaces |

| 1 | Photographic — full-bleed image or video | The primary depth medium; photographs do all the lifting |

The brand does not use drop shadows, blurs, glows, or gradient overlays. Depth is photographic: a rocket launching at twilight has natural atmospheric depth that no CSS shadow could simulate. When type needs separation from imagery, the image is graded darker rather than scrimmed.

Photography and autoplaying rocket-launch video are the only decorative depth. There are no illustrations, no icons beyond a few minimal SVG arrow chevrons in nav and CTA hover states.

| Token | Value | Use |

|---|---|---|

| `{rounded.xs}` | 4px | Form inputs (shop site) |

| `{rounded.sm}` | 8px | Shop product card chrome, video frames |

| `{rounded.md}` | 16px | Larger surface chrome |

| `{rounded.pill}` | 32px | Ghost outlined pill CTAs (the brand's signature button shape) |

| `{rounded.full}` | 9999px | Circular play-button overlays on video frames |

Every photograph is full-viewport-bleed, edge-to-edge, never inset in a card on the marketing site. On the shop site, product photography sits inside `{rounded.sm}` 8px containers with no shadow. Aspect ratios on marketing photography vary with the source image — there is no enforced ratio; the photograph leads.

**`button-ghost-on-dark`** — the universal CTA on marketing surfaces.

**`button-ghost-on-light`** — the same button on shop / light pages.

**`button-filled-cool`** — fill variant on shop product cards.

**`card-photo-band`** — full-bleed photographic band on marketing pages.

**`card-shop-product`** — product card on the shop site.

**`text-input`** — form input on the shop site.

**`nav-bar-overlay`** — top nav across the marketing site.

**Full-Bleed Photo / Video Hero** — every marketing band is a full-viewport photograph or autoplaying rocket-launch video. Type and CTA sit overlaid on the photograph at high opacity with no scrim. The photograph is graded so type lands cleanly without an overlay layer.

**Uppercase Display Headline** — the 80px D-DIN-Bold uppercase headline with 1.6px positive tracking is the brand's most recognizable typographic moment. Always uppercase, always bold-weight, always positively tracked.

**`link-on-dark`** — inline links on dark canvas.

**`link-on-light`** — inline links on light canvas.

**`footer-dark`** — site-wide footer.

| Name | Width | Key Changes |

|---|---|---|

| Wide | ≥ 1500px | Full hero photograph; max-content type column at 1200px |

| Desktop | 1280–1499px | Default desktop layout |

| Laptop | 961–1279px | Type column tightens; photo crops adjust |

| Tablet | 768–960px | Display drops 80 → 60px; nav compresses |

| Mobile | 600–767px | Display drops to 48px; ghost button retains pill shape |

| Small Mobile | < 600px | Display drops to 40px; nav becomes hamburger |

Marketing photography uses `srcset` for desktop / tablet / mobile with art-direction crops at major breakpoints. Mobile crops favor the central focal subject; wide crops favor environmental context (full launch pad, full Martian horizon).

1. Focus on ONE component at a time.

2. Reference component names and tokens directly (`{colors.canvas-night}`, `{button-ghost-on-dark}`, `{rounded.pill}`).

3. Run `npx @google/design.md lint DESIGN.md` after edits.

4. Add new variants as separate entries.

5. Default body to `{typography.body-md}`; reserve `{typography.body-lg}` for marketing leads.

6. The black-and-white-only rule is load-bearing — adding a brand accent color breaks the system.

7. Ghost pill is the only marketing CTA; filled buttons live exclusively on the shop site.