SpaceX

source

---
name: SpaceX
description:
  Full-screen cinematic aerospace imagery with D-DIN industrial uppercase
  typography, zero shadows/cards, and a single spectral ghost button.
originalFonts:
  primary: "D-DIN-Bold"
  fallbacks:
    - "Arial"
    - "Verdana"
colors:
  background: "#000000"
  surface: "#000000"
  ink: "#f0f0fa"
  ink-muted: "#f0f0fa"
  accent: "#f0f0fa"
  accent-alt: "#ffffff"
  border: "rgba(240, 240, 250, 0.35)"
  link: "#f0f0fa"
  space-black: "#000000"
  spectral-white: "#f0f0fa"
  ghost-surface: "rgba(240, 240, 250, 0.1)"
  ghost-border: "rgba(240, 240, 250, 0.35)"
  hover-white: "#ffffff"
  dark-overlay: "rgba(0, 0, 0, 0.5)"
typography:
  h1:
    family: "Archivo"
    size: "3rem"
    weight: 700
    lineHeight: 1.0
  h2:
    family: "Archivo"
    size: "2rem"
    weight: 700
    lineHeight: 1.0
  body:
    family: "Archivo"
    size: "1rem"
    weight: 400
    lineHeight: 1.6
  caption:
    family: "Archivo"
    size: "0.8125rem"
    weight: 700
    lineHeight: 0.94
  code:
    family: "JetBrains Mono"
spacing:
  xs: "0.3125rem"
  sm: "0.75rem"
  md: "0.9375rem"
  lg: "1.25rem"
  xl: "1.875rem"
rounded:
  sm: "4px"
  md: "4px"
  lg: "32px"
  xl: "32px"
shadows:
  sm: "none"
  md: "none"
components:
  button-primary:
    background: "{colors.ghost-surface}"
    color: "{colors.spectral-white}"
    border: "1px solid {colors.ghost-border}"
    radius: "{rounded.lg}"
    padding: "18px"
  button-secondary:
    background: "transparent"
    color: "{colors.spectral-white}"
    border: "1px solid {colors.ghost-border}"
    radius: "{rounded.lg}"
    padding: "18px"
  card:
    background: "transparent"
    border: "none"
    radius: "0"
    padding: "0"
  input:
    background: "transparent"
    color: "{colors.spectral-white}"
    border: "1px solid {colors.ghost-border}"
    radius: "{rounded.sm}"
    padding: "0.5rem 0.75rem"
---

<!-- source: VoltAgent/awesome-design-md @ 80bbbc2 (MIT) — see ATTRIBUTION.md -->

# Design System Inspiration of SpaceX

## 1. Visual Theme & Atmosphere

SpaceX's website is a full-screen cinematic experience that treats aerospace
engineering like a film — every section is a scene, every photograph is a frame,
and the interface disappears entirely behind the imagery. The design is pure
black (`#000000`) with photography of rockets, space, and planets occupying 100%
of the viewport. Text overlays sit directly on these photographs with no
background panels, cards, or containers — just type on image, bold and
unapologetic.

The typography system uses D-DIN, an industrial geometric typeface with DIN
heritage (the German industrial standard). The defining characteristic is that
virtually ALL text is uppercase with positive letter-spacing (0.96px–1.17px),
creating a military/aerospace labeling system where every word feels stenciled
onto a spacecraft hull. D-DIN-Bold at 48px with uppercase and 0.96px tracking
for the hero creates headlines that feel like mission briefing titles. Even body
text at 16px maintains the uppercase/tracked treatment at smaller scales.

What makes SpaceX distinctive is its radical minimalism: no shadows, no borders
(except one ghost button border at `rgba(240,240,250,0.35)`), no color (only
black and a spectral near-white `#f0f0fa`), no cards, no grids. The only visual
element is photography + text. The ghost button with `rgba(240,240,250,0.1)`
background and 32px radius is the sole interactive element — barely visible,
floating over the imagery like a heads-up display. This isn't a design system in
the traditional sense — it's a photographic exhibition with a type system and a
single button.

**Key Characteristics:**

- Pure black canvas with full-viewport cinematic photography — the interface is
  invisible
- D-DIN / D-DIN-Bold — industrial DIN-heritage typeface
- Universal uppercase + positive letter-spacing (0.96px–1.17px) — aerospace
  stencil aesthetic
- Near-white spectral text (`#f0f0fa`) — not pure white, a slight blue-violet
  tint
- Zero shadows, zero cards, zero containers — text on image only
- Single ghost button: `rgba(240,240,250,0.1)` background with spectral border
- Full-viewport sections — each section is a cinematic "scene"
- No decorative elements — every pixel serves the photography

## 2. Color Palette & Roles

### Primary

- **Space Black** (`#000000`): Page background, the void of space — at 50%
  opacity for overlay gradient
- **Spectral White** (`#f0f0fa`): Text color — not pure white, a slight
  blue-violet tint that mimics starlight

### Interactive

- **Ghost Surface** (`rgba(240, 240, 250, 0.1)`): Button background — nearly
  invisible, 10% opacity
- **Ghost Border** (`rgba(240, 240, 250, 0.35)`): Button border — spectral, 35%
  opacity
- **Hover White** (`var(--white-100)`): Link hover state — full spectral white

### Gradient

- **Dark Overlay** (`rgba(0, 0, 0, 0.5)`): Gradient overlay on photographs to
  ensure text legibility

## 3. Typography Rules

### Font Families

- **Display**: `D-DIN-Bold` — bold industrial geometric
- **Body / UI**: `D-DIN`, fallbacks: `Arial, Verdana`

### Hierarchy

| Role          | Font       | Size           | Weight | Line Height    | Letter Spacing | Notes                       |
| ------------- | ---------- | -------------- | ------ | -------------- | -------------- | --------------------------- |
| Display Hero  | D-DIN-Bold | 48px (3.00rem) | 700    | 1.00 (tight)   | 0.96px         | `text-transform: uppercase` |
| Body          | D-DIN      | 16px (1.00rem) | 400    | 1.50–1.70      | normal         | Standard reading text       |
| Nav Link Bold | D-DIN      | 13px (0.81rem) | 700    | 0.94 (tight)   | 1.17px         | `text-transform: uppercase` |
| Nav Link      | D-DIN      | 12px (0.75rem) | 400    | 2.00 (relaxed) | normal         | `text-transform: uppercase` |
| Caption Bold  | D-DIN      | 13px (0.81rem) | 700    | 0.94 (tight)   | 1.17px         | `text-transform: uppercase` |
| Caption       | D-DIN      | 12px (0.75rem) | 400    | 1.00 (tight)   | normal         | `text-transform: uppercase` |
| Micro         | D-DIN      | 10px (0.63rem) | 400    | 0.94 (tight)   | 1px            | `text-transform: uppercase` |

### Principles

- **Universal uppercase**: Nearly every text element uses
  `text-transform: uppercase`. This creates a systematic military/aerospace
  voice where all communication feels like official documentation.
- **Positive letter-spacing as identity**: 0.96px on display, 1.17px on nav —
  the wide tracking creates the stenciled, industrial feel that connects to
  DIN's heritage as a German engineering standard.
- **Two weights, strict hierarchy**: D-DIN-Bold (700) for headlines and nav
  emphasis, D-DIN (400) for body. No medium or semibold weights exist in the
  system.
- **Tight line-heights**: 0.94–1.00 across most text — compressed, efficient,
  mission-critical communication.

## 4. Component Stylings

### Buttons

**Ghost Button**

- Background: `rgba(240, 240, 250, 0.1)` (barely visible)
- Text: Spectral White (`#f0f0fa`)
- Padding: 18px
- Radius: 32px
- Border: `1px solid rgba(240, 240, 250, 0.35)`
- Hover: background brightens, text to `var(--white-100)`
- Use: The only button variant — "LEARN MORE" CTAs on photography

### Cards & Containers

- **None.** SpaceX does not use cards, panels, or containers. All content is
  text directly on full-viewport photographs. The absence of containers IS the
  design.

### Inputs & Forms

- Not present on the homepage. The site is purely presentational.

### Navigation

- Transparent overlay nav on photography
- D-DIN 13px weight 700, uppercase, 1.17px tracking
- Spectral white text on dark imagery
- Logo: SpaceX wordmark at 147x19px
- Mobile: hamburger collapse

### Image Treatment

- Full-viewport (100vh) photography sections
- Professional aerospace photography: rockets, Mars, space
- Dark gradient overlays (`rgba(0,0,0,0.5)`) for text legibility
- Each section = one full-screen photograph with text overlay
- No border radius, no frames — edge-to-edge imagery

## 5. Layout Principles

### Spacing System

- Base unit: 8px
- Scale: 3px, 5px, 12px, 15px, 18px, 20px, 24px, 30px
- Minimal scale — spacing is not the organizing principle; photography is

### Grid & Container

- No traditional grid — each section is a full-viewport cinematic frame
- Text is positioned absolutely or with generous padding over imagery
- Left-aligned text blocks on photography backgrounds
- No max-width container — content bleeds to viewport edges

### Whitespace Philosophy

- **Photography IS the whitespace**: Empty space in the design is never empty —
  it's filled with the dark expanse of space, the curve of a planet, or the
  flame of a rocket engine. Traditional whitespace concepts don't apply.
- **Vertical pacing through viewport**: Each section is exactly one viewport
  tall, creating a rhythmic scroll where each "page" reveals a new scene.

### Border Radius Scale

- Sharp (4px): Small dividers, utility elements
- Button (32px): Ghost buttons — the only rounded element

## 6. Depth & Elevation

| Level                 | Treatment                          | Use                                           |
| --------------------- | ---------------------------------- | --------------------------------------------- |
| Photography (Level 0) | Full-viewport imagery              | Background layer — always present             |
| Overlay (Level 1)     | `rgba(0, 0, 0, 0.5)` gradient      | Text legibility layer over photography        |
| Text (Level 2)        | Spectral white text, no shadow     | Content layer — text floats directly on image |
| Ghost (Level 3)       | `rgba(240, 240, 250, 0.1)` surface | Barely-visible interactive layer              |

**Shadow Philosophy**: SpaceX uses ZERO shadows. In a design built entirely on
photography, shadows are meaningless — every surface is already a photograph
with natural lighting. Depth comes from the photographic content itself: the
receding curvature of Earth, the diminishing trail of a rocket, the atmospheric
haze around Mars.

## 7. Do's and Don'ts

### Do

- Use full-viewport photography as the primary design element — every section is
  a scene
- Apply uppercase + positive letter-spacing to ALL text — the aerospace stencil
  voice
- Use D-DIN exclusively — no other fonts exist in the system
- Keep the color palette to black + spectral white (`#f0f0fa`) only
- Use ghost buttons (`rgba(240,240,250,0.1)`) as the sole interactive element
- Apply dark gradient overlays for text legibility on photographs
- Let photography carry the emotional weight — the type system is functional,
  not expressive

### Don't

- Don't add cards, panels, or containers — text sits directly on photography
- Don't use shadows — they have no meaning in a photographic context
- Don't introduce colors — the palette is strictly achromatic with spectral tint
- Don't use sentence case — everything is uppercase
- Don't use negative letter-spacing — all tracking is positive (0.96px–1.17px)
- Don't reduce photography to thumbnails — every image is full-viewport
- Don't add decorative elements (icons, badges, dividers) — the design is
  photography + type + one button

## 8. Responsive Behavior

### Breakpoints

| Name          | Width       | Key Changes                            |
| ------------- | ----------- | -------------------------------------- |
| Mobile        | <600px      | Stacked, reduced padding, smaller type |
| Tablet Small  | 600–960px   | Adjusted layout                        |
| Tablet        | 960–1280px  | Standard scaling                       |
| Desktop       | 1280–1350px | Full layout                            |
| Large Desktop | 1350–1500px | Expanded                               |
| Ultra-wide    | >1500px     | Maximum viewport                       |

### Touch Targets

- Ghost buttons: 18px padding provides adequate touch area
- Navigation links: uppercase with generous letter-spacing aids readability

### Collapsing Strategy

- Photography: maintains full-viewport at all sizes, content reposition
- Hero text: 48px → scales down proportionally
- Navigation: horizontal → hamburger
- Text blocks: reposition but maintain overlay-on-photography pattern
- Full-viewport sections maintained on mobile

### Image Behavior

- Edge-to-edge photography at all viewport sizes
- Background-size: cover with center focus
- Dark overlay gradients adapt to content position
- No art direction changes — same photographs, responsive positioning

## 9. Agent Prompt Guide

### Quick Color Reference

- Background: Space Black (`#000000`)
- Text: Spectral White (`#f0f0fa`)
- Button background: Ghost (`rgba(240, 240, 250, 0.1)`)
- Button border: Ghost Border (`rgba(240, 240, 250, 0.35)`)
- Overlay: `rgba(0, 0, 0, 0.5)`

### Example Component Prompts

- "Create a full-viewport hero: background-image covering 100vh, dark gradient
  overlay rgba(0,0,0,0.5). Headline at 48px D-DIN-Bold, uppercase,
  letter-spacing 0.96px, spectral white (#f0f0fa) text. Ghost CTA button:
  rgba(240,240,250,0.1) bg, 1px solid rgba(240,240,250,0.35) border, 32px
  radius, 18px padding."
- "Design a navigation: transparent over photography. D-DIN 13px weight 700,
  uppercase, letter-spacing 1.17px, spectral white text. SpaceX wordmark
  left-aligned."
- "Build a content section: full-viewport height, background photography with
  dark overlay. Left-aligned text block with 48px D-DIN-Bold uppercase heading,
  16px D-DIN body text, and ghost button below."
- "Create a micro label: D-DIN 10px, uppercase, letter-spacing 1px, spectral
  white, line-height 0.94."

### Iteration Guide

1. Start with photography — the image IS the design
2. All text is uppercase with positive letter-spacing — no exceptions
3. Only two colors: black and spectral white (#f0f0fa)
4. Ghost buttons are the only interactive element — transparent,
   spectral-bordered
5. Zero shadows, zero cards, zero decorative elements
6. Every section is full-viewport (100vh) — cinematic pacing