---
name: Spacex
description: "This site is a prime example of a cinematic, high-contrast interface where the typography and layout are designed to disappear, making the imagery the primary focus."
version: alpha

colors:
  background: "#000000"
  primary: "#F0F0FA"
  secondary: "#F0F0FAE6"
  neutral: "#808080"
  line: "rgba(240, 240, 250, 0.35)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 48px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-1px"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A cinematic, high-contrast interface for an aerospace company.

*A high-end aerospace manufacturer's digital mission control center.*

## Colors

Photographic immersion with high-contrast white typography.

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#F0F0FA`)** — uses `ink` token
- **Secondary text (`#F0F0FAE6`)** — uses `ink-soft` token
- **Muted (`#808080`)** — uses `muted` token
- **Borders (`rgba(240, 240, 250, 0.35)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** geometric-sans
- **Mono:** monospace

- Text is predominantly uppercase
- Navigation links use a wide letter-spacing
- Headlines use a heavy bold weight

## Layout

Full-bleed hero images with minimal UI overlay.

*Rhythm:* Based on a 4px grid with generous whitespace for cinematic presentation.

## Elevation & Depth

- Borders: 1px solid rgba(240, 240, 250, 0.35)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Transparent with white border and uppercase text, using subtle background transitions.
- **card:** Image-heavy list items with minimal text and directional arrows.
- **chip:** None
- **input:** None
- **hero:** Full-viewport cinematic photograph with bottom-aligned bold text.

## Do's and Don'ts

**Don't:**
- Don't use rounded or soft UI elements — screenshot shows sharp, rectangular buttons.
- Don't use a light background — screenshot shows a primarily black and dark photographic background.
- Don't use sans-serif fonts with low weight — screenshot shows heavy, geometric sans-serif for all major text.
- Don't use colorful accents — screenshot shows a monochrome palette of black, white, and gray.
- Don't use complex navigation menus — screenshot shows a flat, uppercase list with chevrons.
- Don't use multi-column text layouts — screenshot shows single-column, left-aligned text blocks.

---

## System Prompt (paste into AI agent)

```
SpaceX's website is a cinematic, premium interface for an aerospace company, utilizing a dark mode aesthetic with high-contrast white typography (#F0F0FA) over black (#000000). The design uses a geometric sans-serif font category (D-DIN) in bold weights, with extensive uppercase styling. Key elements include full-viewport photographic heroes and minimal, transparent UI components with 1px borders. Critical don'ts: avoid using bright accent colors, use sharp rectangular button shapes instead of rounded ones, and maintain the heavy typographic weight seen in the headlines. The interface relies on subtle transitions and a monochrome palette to emphasize the engineering-first, premium brand identity.
```