# SpaceX — Design System
> SpaceX designs, manufactures and launches advanced rockets and spacecraft.
- **Canonical:** https://uiuxskills.com/library/spacex
- **Source:** https://www.spacex.com/
- **Category:** Developer Tools & IDEs
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:15:06.318Z

---

---
version: alpha
name: SpaceX
description: Aerospace manufacturer and space transportation services company.
tone: Authoritative, visionary, direct, and mission-driven.
color-scheme: light
colors:
  primary: "#FFFFFF"
  surface: "#000000"
  surface-container: "#1A1A1A"
  on-surface: "#FFFFFF"
  on-primary: "#000000"
  outline: "#404040"
  error: "#B3261E"
  success: "#1E8E3E"
  focus-ring: "#FFFFFF"
  surface-bright: "#262626"
typography:
  display-lg:
    fontFamily: sans-serif
    fontSize: 3rem
  display-md:
    fontFamily: sans-serif
    fontSize: 2.25rem
  headline-lg:
    fontFamily: sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: sans-serif
    fontSize: 1.5rem
  headline-sm:
    fontFamily: sans-serif
    fontSize: 1.25rem
  body-md:
    fontFamily: sans-serif
    fontSize: 1rem
  label-md:
    fontFamily: sans-serif
    fontSize: 0.875rem
rounded:
  sm: 2px
  md: 4px
  lg: 8px
  xl: 12px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    width: fit-content
  button-primary-hover:
    backgroundColor: "{colors.surface-bright}"
    textColor: "{colors.primary}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface-container}"
  input-field:
    backgroundColor: "{colors.surface-container}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "{colors.surface-bright}"
  badge:
    backgroundColor: "{colors.surface-bright}"
    textColor: "{colors.primary}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "{colors.error}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-md}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 2px 4px rgba(0,0,0,0.08)
  lg: 0 4px 8px rgba(0,0,0,0.10)
---

## Overview

SpaceX maintains a bold, high-contrast visual identity that emphasizes engineering precision and mission-critical urgency. The aesthetic is stark, industrial, and focused on large-scale imagery to convey the magnitude of their space exploration goals.

## Colors

The color strategy relies on a high-contrast, monochromatic palette that prioritizes readability and focus on photographic content.

*   Primary (#FFFFFF): The dominant color for text and primary UI elements.
*   Surface (#000000): The foundational background color for the entire site.
*   Surface-container (inferred) (#1A1A1A): Used for secondary containers and section backgrounds.
*   On-surface (#FFFFFF): High-visibility text color for use on dark backgrounds.
*   On-primary (inferred) (#000000): Text color for high-impact white buttons.
*   Outline (inferred) (#404040): Used for structural borders and dividers.
*   Error (inferred) (#B3261E): Semantic color for critical alerts.
*   Success (inferred) (#1E8E3E): Semantic color for positive status indicators.
*   Focus-ring (inferred) (#FFFFFF): Used to indicate active keyboard focus.
*   Surface-bright (inferred) (#262626): Background color for hover states.

## Typography

The typography uses a clean, sans-serif approach to ensure maximum legibility and an authoritative, direct tone.

*   Display-lg (inferred): Used for high-impact hero section titles.
*   Display-md (inferred): Used for primary section headers.
*   Headline-lg (inferred): Used for secondary headers.
*   Headline-md (inferred): Used for sub-headers.
*   Headline-sm (inferred): Used for tertiary headers.
*   Body-md (inferred): Standard paragraph text.
*   Label-md (inferred): Used for button labels and small UI text.

## Layout

The site utilizes a full-bleed, vertical scrolling grid that prioritizes large-scale imagery. Spacing is generous to allow for visual breathing room, with a standard section margin of `{spacing.2xl}`. The page pattern follows a strict order: hero, features, cta, and footer. The hero section is defined by a full-bleed image with centered text and a single primary CTA. On mobile, the navigation collapses into a drawer to maintain the focus on the primary content.

## Elevation & Depth

SpaceX eschews traditional drop shadows in favor of flat surfaces and high color contrast to define depth. While elevation tokens are provided for technical consistency, they should be used sparingly to avoid cluttering the industrial aesthetic.

*   Elevation.sm (inferred): Subtle lift for minor UI elements.
*   Elevation.md (inferred): Standard depth for popovers or dropdowns.
*   Elevation.lg (inferred): Maximum depth for modal or drawer overlays.

## Shapes

The design language is sharp and industrial, favoring square corners over rounded ones to reflect the precision of aerospace engineering. Avoid using large radii; keep shapes rigid and geometric.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button Primary
An action-oriented component using `{colors.primary}` background and `{colors.on-primary}` text. Use this for the main mission-critical call to action in hero sections.

### Card
A flat, border-defined container using `{colors.surface}` and `{colors.outline}`. Use this to group related information without adding unnecessary visual weight.

### Badge
A small, high-contrast label using `{colors.surface-bright}`. Use this for status indicators or small metadata tags.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary CTAs. | Use soft, rounded corners on primary containers. |
| Maintain high contrast between text and `{colors.surface}`. | Use low-contrast text on `{colors.surface}`. |
| Use `{typography.display-lg}` for hero titles. | Use `{typography.body-md}` for primary headlines. |
| Apply `{spacing.2xl}` for section margins. | Use decorative shadows on cards. |
| Use `{components.button-primary}` for mission actions. | Use `{colors.error}` for non-critical UI elements. |
| Keep imagery full-bleed across the viewport. | Use cluttered layouts that distract from imagery. |
| Use `{rounded.sm}` for small UI components. | Use `{rounded.full}` for structural containers. |
| Use `{colors.outline}` for subtle section dividers. | Use high-contrast borders on non-interactive elements. |

## Content Style

CTA labels are imperative and action-oriented, utilizing verbs like "WATCH," "EXPLORE," or "LEARN MORE" to drive user engagement.

Headings are direct, bold, and mission-focused, designed to convey the scale and ambition of the company's aerospace objectives.

Copy density is kept low, favoring short, punchy paragraphs that emphasize the impact of the mission while maintaining a clean, minimal visual rhythm.

## Imagery & Icons

The imagery style is strictly photographic, featuring high-resolution, cinematic shots of rockets, space, and hardware. Images must be full-bleed and serve as the primary visual anchor for the page. Icons should be minimal and sharp, adhering to the industrial, geometric design language of the brand.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for SpaceX, a minimal and bold aerospace brand with an authoritative, mission-driven tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its token name — `{colors.primary}`, `{spacing.2xl}`, `{rounded.sm}` — never hardcode hex values, pixel sizes, or font stacks.
2. Use only the component variants defined under `components:`. Do not invent alternate button styles, card treatments, or badge variants beyond what the spec lists.
3. Follow the Layout section strictly: full-bleed imagery, section margins at `{spacing.2xl}`, and page order hero → features → cta → footer. On mobile, collapse navigation to a drawer.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it (e.g., requesting rounded containers or decorative shadows on cards), surface the conflict before proceeding.
5. Shapes must remain sharp and industrial. Default to `{rounded.sm}` for small UI elements; never apply `{rounded.full}` or `{rounded.xl}` to structural containers.

## Output contract

**Must:**
- Use all tokens by name on every component.
- Render hover, focus, and disabled states when the spec defines them (e.g., `button-primary-hover`, `input-field-focus`, `swatch-focus-ring`).
- Apply the canonical spacing scale (`{spacing.xs}` through `{spacing.2xl}`) for all padding, gap, and margin decisions.
- Write CTA labels as uppercase imperative verbs ("WATCH," "EXPLORE") per the Content Style section.
- Keep imagery full-bleed and treat it as the primary visual anchor per Imagery & Icons.

**Must NOT:**
- Invent colors, fonts, radii, or elevation values outside the spec.
- Apply generic system defaults when a brand token exists.
- Add emoji, decorative shadows on cards, or soft radii on primary containers.
- Rewrite, replace, or invent page copy, headings, nav items, or page sections as a side effect of applying tokens.

## When in doubt
- If the spec doesn't define a value, ask the product team before inventing one.
- Prefer composing existing components over introducing new tokens.
- For ambiguous backgrounds use `{colors.surface-container}`; for text on dark surfaces use `{colors.on-surface}`; for primary actions use `{colors.primary}`.
- Tokens marked "(inferred)" are visual approximations. If an authoritative source (theme file, Storybook) exists, those values take precedence.
- For unspecified breakpoints, default to mobile-first with one breakpoint at 768px.