High-performance aerospace engineering meets modern minimalism.
02
Color
#FFF555Accent
#FFFFFFInk
#000000BG
#88898AMuted
rgba(255, 255, 255, 0.2)Line
High-contrast black and white base with a single vibrant yellow accent used sparingly for emphasis.
03
Typography
geometric-sans
display72px · 700
h148px · 500
body16px · 400
caption12px · 400
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)
04
Spacing
4px
8px
12px
16px
24px
32px
48px
64px
80px
96px
140px
Generous padding with large vertical spaces (96px, 140px) creating dramatic breathing room between sections.
05
Surfaces
sm · 4px
md · 6px
lg · 8px
pill · 999px
Minimal visible borders, with occasional subtle white or gray lines for separation.
0 4px 24px rgba(0, 0, 0, 0.3)
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
Full-bleed photography sections alternating with structured content grids, often using a split 2-column layout for feature highlights.
07
Motion & Interaction
150msmicro
300mssmall
700msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
Smooth hover transitions on interactive elements (0.15s) · Longer transform animations for scroll-triggered reveals (0.7s)
Subtle background or color transitions on buttons and links. · Immediate visual feedback with color change.
08
Components
buttonPrimary '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.
cardImage-heavy cards with no visible borders, relying on photographic content to define edges.
chipSmall, uppercase text labels for navigation or categories, using wide letter-spacing.
inputMinimalist input fields with subtle bottom borders and no visible containers.
heroFull-viewport photographic or video background with a dark overlay (rgba(0,0,0,0.5)), centered large white typography, and a scroll indicator.
09
Voice & Don'ts
ToneConfident, forward-looking, and technically precise.
HeadlinesShort, impactful statements like 'Speed Is Our Superpower' in bold, large type.
CTAsDirect and action-oriented (e.g., 'Join Boom').
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.
Captured from the live site · real computed styles
11
System prompt
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.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
