---
name: Boom Supersonic
description: "The site effectively combines dramatic aerospace photography with minimalist UI to convey speed, precision, and premium engineering."
version: alpha

colors:
  background: "#000000"
  primary: "#FFFFFF"
  tertiary: "#FFF555"
  neutral: "#88898A"
  bg-soft: "#FFFFFF"
  bg-quiet: "#FFFFFF"
  line: "rgba(255, 255, 255, 0.2)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 72px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-1px"
  h1:
    fontFamily: geometric-sans
    fontSize: 48px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-0.5px"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: geometric-sans
    fontSize: 12px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "1.2px"

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

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

---

## Overview

A bold, photography-driven aerospace site showcasing supersonic speed with dramatic dark overlays and precise typography.

*High-performance aerospace engineering meets modern minimalism.*

## Colors

High-contrast black and white base with a single vibrant yellow accent used sparingly for emphasis.

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Accent (`#FFF555`)** — uses `accent` token
- **Muted (`#88898A`)** — uses `muted` token
- **Borders (`rgba(255, 255, 255, 0.2)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** geometric-sans

- Use Styrene A (or similar geometric sans) for all text
- Display sizes use tight tracking and line-height
- Small text and labels use wide letter-spacing (1.2px)

## Layout

Full-bleed photography sections alternating with structured content grids, often using a split 2-column layout for feature highlights.

*Rhythm:* Generous padding with large vertical spaces (96px, 140px) creating dramatic breathing room between sections.

## Elevation & Depth

- 0 4px 24px rgba(0, 0, 0, 0.3)
- Borders: Minimal visible borders, with occasional subtle white or gray lines for separation.

## Shapes

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

## Components

- **button:** Primary 'Join Boom' button with white background, black text, sharp corners (4px radius), and a dark border on hover. Secondary buttons use transparent backgrounds with white borders.
- **card:** Image-heavy cards with no visible borders, relying on photographic content to define edges.
- **chip:** Small, uppercase text labels for navigation or categories, using wide letter-spacing.
- **input:** Minimalist input fields with subtle bottom borders and no visible containers.
- **hero:** Full-viewport photographic or video background with a dark overlay (rgba(0,0,0,0.5)), centered large white typography, and a scroll indicator.

## Do's and Don'ts

**Don't:**
- Don't use busy or cluttered layouts — screenshot shows generous whitespace and large breathing room between elements.
- Don't use a wide range of colors — screenshot shows a strict palette of white, black, gray, and a single yellow accent.
- Don't use rounded corners on primary buttons — screenshot shows sharp corners with a 4px radius maximum.
- Don't use small, cramped typography — screenshot shows large, bold display text with tight tracking.
- Don't use complex background patterns — screenshot shows solid black backgrounds or full-bleed photography.
- Don't use overly decorative fonts — screenshot shows clean, geometric sans-serif typography exclusively.

---

## System Prompt (paste into AI agent)

```
Boom Supersonic is an aerospace company focused on developing the world's fastest commercial aircraft. The website uses a high-contrast palette of black (#000000), white (#FFFFFF), and gray (#88898A), with a single vibrant yellow accent (#FFF555) for emphasis. Typography is a clean geometric sans-serif (Styrene A) with bold, tightly tracked display sizes for headlines and wider tracking for small labels. Key features include full-bleed photographic backgrounds with dark overlays, generous padding (96px to 140px), and minimal UI elements. Critical don'ts: never use cluttered layouts, avoid wide color ranges, don't use rounded buttons, and maintain large, bold typography throughout.
```