What is SpaceX's primary brand color?

There isn't one — and that's the point. The system runs on pure #000000 black as the marketing canvas and pure #ffffff white as the dominant text color. Photography supplies every other hue (rocket exhaust orange, Mars terrain rust, twilight blue). The spec documents `{colors.canvas-night-soft}` at #0a0a0a as a barely-lifted near-black for content separation and `{colors.canvas-cool}` at #f0f0fa for the shop site, but neither acts as a brand accent.

What typography does SpaceX use, and what substitutes work?

The display tier runs D-DIN-Bold, a condensed industrial sans inspired by the German DIN 1451 standard used on autobahn road signage. Body and UI run D-DIN regular. Both are freely available from the DIN Type Foundry. When unavailable, the fallback chain prioritizes Arial Narrow, then Arial, then Verdana — width compression matters more than ornament. Inter at 700 weight with 1.6px positive letter-spacing approximates the display rhythm, but avoid serif or humanist sans substitutes entirely.

Does SpaceX use dark mode or light mode?

Marketing is dark-only — every band sits on the #000000 canvas with #ffffff text. The shop site (spacex.com/shop) is the lone light-canvas exception, running #ffffff surfaces with #f0f0fa as a secondary fill and #000000 ink. There is no toggle between modes — the marketing site is dark by definition, and the shop is light by definition. They live as parallel sub-systems sharing only the type stack and the pill geometry.

Why is every CTA a ghost outlined pill?

The 32px ghost pill is the brand's single CTA primitive — transparent background, 1px white outline on dark or 1px black outline on light, with an all-caps 13px / 700 / 1.17px-tracking label. Filled buttons would compete with the photography for visual weight; ghost outlines let the imagery breathe. The rule is strict: one ghost pill per band on marketing pages, never two side-by-side, and never a filled variant outside the shop site's product cards.

How do I use this DESIGN.md in a React project?

Drop it into your repo and reference it from your AI tool of choice. Claude or Cursor will read the YAML frontmatter and emit Tailwind-styled React components that match the system — pure black canvases, uppercase D-DIN-Bold headlines, ghost pill CTAs, and full-bleed photo bands. You can also paste any quoted value directly into a Tailwind config or CSS variable layer — every hex, font stack, radius, and spacing step is verbatim from the spec.

What's missing from this DESIGN.md spec?

A few things, documented in the spec body: hover state colors (the brand follows a near-zero hover policy on marketing surfaces), the full video-player chrome (autoplay rocket-launch video has minimal UI but the controls weren't fully extracted), product detail page layouts on the shop site beyond the 4-up grid, form error states beyond the default 1px hairline input, and the Starlink sub-brand surfaces which run their own typographic variant. The spec captures roughly 90% of the public marketing and shop surfaces.

Spasex Inspired Design System

SpaceX's design language as a DESIGN.md file.

About Spasex Inspired DESIGN.md

Curated by Dov AzencotUpdated May 12, 2026Source spacex.com

Hardware & Robotics

SpaceX's design language reads more like a film title card than a SaaS landing page. The marketing site is built on a single canvas — pure #000000 black — overlaid with full-bleed photography of Falcon 9 boosters at sunset, Mars terrain, and autoplaying rocket-launch video. There is no brand accent color anywhere. Type sits directly on the imagery at high opacity with no scrim, no gradient, no overlay layer. The photographs are graded so the type lands cleanly, and that single editorial decision carries the entire aesthetic.

This DESIGN.md captures the system in 13 color tokens (mostly variants of black and white), 8 typography tokens running D-DIN-Bold for display and D-DIN regular for body, 5 corner-radius tokens topped by the 32px ghost pill, an 8-step spacing scale, and 11 components. The file follows the Google Labs DESIGN.md specification, so every color, type style, radius, and component is a quoted token referenceable as `{colors.canvas-night}` or `{typography.display-xxl}`. No invented fields, no proprietary syntax.

Feed this file to Claude, Cursor, or GitHub Copilot when you need React components that reproduce SpaceX's austerity rather than a generic dark-mode theme. The AI will respect the two-color rule, render display tiers in uppercase with positive tracking, and reach for ghost pills instead of filled buttons. Or use the spec as a design audit — if your aerospace or hardware brand has crept into multi-accent gradients and drop shadows, this is the corrective. The discipline of trusting photography over chrome is the entire point of the system.

What makes it distinct

Two-color palettepure black #000000 and white #ffffff carry every surface, with photography supplying any other hue
Uppercase D-DIN-Bold display at 80px with positive 1.6px trackingengineered industrial typography, not designed
Single ghost-outlined pill CTA per band at 32px radiusnever filled, never tinted, never doubled
Full-bleed photography or autoplaying rocket video as the only depth mediumzero drop shadows or gradients
Tight 0.95 line-height on the 80px hero headlinevertical compression is the brand's load-bearing rhythm

Live at spacex.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

spacex.com

Explore Spasex Inspired

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Spasex Inspired design system FAQ

Common questions about Spasex Inspired's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

React blocks for shadcn/ui

Production-ready hero, pricing, CTA, and dashboard sections built with Tailwind and shadcn primitives.

Use Spasex Inspired in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→