spacex-inspired-design-analysis

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,"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"}}

Overview

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:

• Single canvas: pure {colors.canvas-night} (#000000) for marketing; {colors.canvas-light} only on the shop site.
• Display tier in uppercase D-DIN-Bold with positive horizontal tracking (1.6px at 80px) — the brand's typographic signature.
• Full-bleed photography or autoplaying video as the dominant decorative element; type sits directly on imagery with no scrim.
• Single ghost-outlined pill CTA per band, at {rounded.pill} 32px radius — never filled, never accent-colored.
• All-caps eyebrow microtext ({typography.micro-cap} and {typography.button-cap}) with positive 0.96–1.17px tracking — every chrome element shouts in caps.
• Fixed top nav overlaid on photography — no opaque background, just white-on-image.
• Tight 0.95 line-height on the 80px display — vertical compression is the engineering aesthetic.

Colors

Source pages: home (/), /shop, /vehicles/starship, /humanspaceflight/overview, .