skills.rest
deepparser
deepparserOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-spacex

Apply SpaceX's design system tokens to generate brand-accurate UI interfaces.

Updated Feb 23, 2026
Search Tags:#typography#design system#css#color palette#brand guidelines#ui design#spacex
One-click install
npx skills add https://github.com/deepparser/skills --skill design-spacex-deepparser
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-spacex
Source: https://github.com/deepparser/skills/tree/main/design-spacex
Command: npx skills add https://github.com/deepparser/skills --skill design-spacex-deepparser

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Recreating SpaceX's distinctive cinematic visual identity in UI work requires knowing exact design tokens — colors, typography, spacing, and component rules — which are otherwise scattered and hard to reverse-engineer from the live site. ## Core Features & Use Cases - Complete Design Token Catalog: Provides exact values for SpaceX's palette (Space Black #000000, Spectral White #f0f0fa), D-DIN typography scale, ghost button styling, spacing, and radius rules. - Light and Dark HTML Previews: Bundled preview.html and preview-dark.html files demonstrate the tokens implemented in working CSS for visual verification. - Use Case: When asked to build a landing page styled like SpaceX, the agent applies full-viewport photography sections, uppercase D-DIN typography with positive letter-spacing, and ghost buttons to produce an on-brand interface. ## Quick Start Build a landing page hero section styled like SpaceX with a full-viewport background image, uppercase headline, and ghost CTA button.

Frequently Asked Questions about design-spacex

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make a website look like SpaceX?▼

Use pure black backgrounds with full-viewport photography, D-DIN typography in all uppercase with positive letter-spacing (0.96px–1.17px), spectral white text (#f0f0fa), and ghost buttons with rgba(240,240,250,0.1) backgrounds. Avoid cards, shadows, and decorative elements entirely.

What font does the SpaceX website use?▼

SpaceX uses D-DIN and D-DIN-Bold, an industrial geometric typeface with DIN heritage. Since D-DIN is not freely available, the bundled previews use Share Tech from Google Fonts with Arial and Verdana as fallbacks.

What colors does the SpaceX design system use?▼

The palette is strictly achromatic: Space Black (#000000) for backgrounds, Spectral White (#f0f0fa) for text, ghost surfaces at rgba(240,240,250,0.1) for buttons, and rgba(0,0,0,0.5) gradient overlays for text legibility on photography.

Does the SpaceX design system include light and dark themes?▼

The skill bundles both preview.html and preview-dark.html reference files, though SpaceX's actual identity is inherently dark — pure black backgrounds with spectral white text. Both previews demonstrate the same token set for verification.

When should I not use the SpaceX design style?▼

Avoid it for content-heavy applications needing cards, forms, or data-dense layouts, since the system has no containers, no shadows, and only one button variant. It suits cinematic, photography-driven marketing pages rather than functional dashboards.

Related Skills

Explore More Design & Creative Skills→
scanadyscanady

design-web-impactful

Design and build concept-driven marketing landing pages with expressive typography and signature interactions.

Community
Advanced
keremtoker468-dotcomkeremtoker468-dotcom

web-ui-review

Audit web interfaces for accessibility, performance, and code quality.

Community
Advanced
Jorge-IvanJorge-Ivan
1

design-audit

Audit project designs for visual consistency, WCAG compliance, and design system adherence.

Community
Advanced
owshq-mecowshq-mec
122

ckm:ui-styling

Build accessible React UIs with shadcn/ui components and Tailwind CSS.

Official
Intermediate