# Boom Supersonic · Design system migration spec

> Source: https://boomsupersonic.com  ·  Curated by OpenDesign  ·  en

> The site effectively combines dramatic aerospace photography with minimalist UI to convey speed, precision, and premium engineering.

## 1. Identity DNA

Boom Supersonic's design system is governed by a principle of high-performance engineering meeting modern minimalism, much like the aircraft it develops. The visual identity strips away the ornamental to reveal structural clarity, using a stark, high-contrast palette and precise typographic controls to convey velocity and purpose.

**One-liner:** A bold, photography-driven aerospace site showcasing supersonic speed with dramatic dark overlays and precise typography.
**Keywords:** aerospace · speed · supersonic · engineering · innovation
**Analogy:** High-performance aerospace engineering meets modern minimalism.

## 2. Color

The color system operates with the discipline of a technical schematic. A foundation of black and white establishes dramatic contrast and clarity, while a single vibrant yellow is deployed as a calculated signal for emphasis.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--bg-soft` | `#FFFFFF` | card background |
| `--bg-quiet` | `#FFFFFF` | quiet area |
| `--ink` | `#FFFFFF` | body text |
| `--muted` | `#88898A` | placeholder |
| `--accent` | `#FFF555` | single accent |
| `--line` | `rgba(255, 255, 255, 0.2)` | divider |

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

This restraint in palette ensures that when color appears, it commands attention and reinforces the brand's singular focus.

## 3. Typography

Typography is handled as a precise instrument, using a geometric sans-serif to communicate both technical authority and clean modernity. The system applies distinct typographic treatments: bold, tightly tracked forms for display headlines and a measured, wide-tracked style for functional labels and metadata.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 72px | 1.0 | 700 | -1px | Hero headlines and primary section headers |
| h1 | 48px | 1.1 | 500 | -0.5px | Secondary section headers |
| body | 16px | 1.5 | 400 | 0px | Standard body text and descriptions |
| caption | 12px | 1.5 | 400 | 1.2px | Metadata, labels, and small text elements |

**Type rules:**
- 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)

## 4. Spacing

The spacing rhythm is deliberate and expansive, creating vast vertical breathing room that mirrors the open skies.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 140 px
- **Rhythm:** Generous padding with large vertical spaces (96px, 140px) creating dramatic breathing room between sections.

## 5. Surfaces

Depth is achieved through strategic shadow rather than ornate detail, with components casting sharp, defined shadows against dark backgrounds. Borders are reserved as minimal, subtle separators, ensuring the focus remains on content and photographic imagery.

- **Radius:** sm 4px · md 6px · lg 8px · pill 999px
- **Shadows:**
  - 0 4px 24px rgba(0, 0, 0, 0.3)
- **Borders:** Minimal visible borders, with occasional subtle white or gray lines for separation.

## 6. Layout

The layout skeleton alternates between immersive, full-bleed photographic moments and highly structured content grids. This creates a dynamic rhythm, often resolving into split two-column layouts for detailed feature explanations.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion philosophy prioritizes function and subtlety, using smooth, fast transitions to confirm interaction. Longer, transform-based animations are reserved for scroll-triggered reveals, creating a deliberate sense of unveiling and progression.

- **Durations:** micro 150ms · small 300ms · medium 700ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth hover transitions on interactive elements (0.15s)
  - Longer transform animations for scroll-triggered reveals (0.7s)

- **Hover:** Subtle background or color transitions on buttons and links.
- **Click:** Immediate visual feedback with color change.
- **Transition:** Consistent use of cubic-bezier easing across all interactive states.
- **Keyboard:** Standard tab navigation with visible focus states.

## 8. Voice & Don'ts

The editorial voice is confident, forward-looking, and technically precise, matching the visual system's clarity. Headlines are crafted as short, impactful statements, and calls to action are direct and unambiguous.

- **Tone:** Confident, forward-looking, and technically precise.
- **Headline style:** Short, impactful statements like 'Speed Is Our Superpower' in bold, large type.
- **CTA style:** Direct and action-oriented (e.g., 'Join Boom').
- **Avoid:** Playful or casual language / Excessive exclamation points / Jargon-heavy explanations without context

### Don'ts
- ❌ 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.

The system deliberately avoids playful language, excessive decoration, and any visual element that might suggest clutter or hesitation.

## System Prompt (paste into AI tool)

```
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.
```