Hermes Agent — Implementation Notes
The original site uses proprietary fonts. For self-contained HTML output, use these CDN substitutes: - Primary:
Inter| Mono:system monospace stack- Font stack (CSS):font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;- Mono stack (CSS):font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;html <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">Usewrite_fileto create HTML, serve viagenerative-widgetsskill (cloudflared tunnel). Verify visual accuracy withbrowser_visionafter generating.
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
#000000): Page background, the void of space — at 50% opacity for overlay gradient#f0f0fa): Text color — not pure white, a slight blue-violet tint that mimics starlightrgba(240, 240, 250, 0.1)): Button background — nearly invisible, 10% opacityrgba(240, 240, 250, 0.35)): Button border — spectral, 35% opacityvar(--white-100)): Link hover state — full spectral whitergba(0, 0, 0, 0.5)): Gradient overlay on photographs to ensure text legibilityD-DIN-Bold — bold industrial geometricD-DIN, fallbacks: Arial, Verdana| 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 |
text-transform: uppercase. This creates a systematic military/aerospace voice where all communication feels like official documentation.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
rgba(0,0,0,0.5)) for text legibility| 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.
#f0f0fa) onlyrgba(240,240,250,0.1)) as the sole interactive element| 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 |
#000000)#f0f0fa)rgba(240, 240, 250, 0.1))rgba(240, 240, 250, 0.35))rgba(0, 0, 0, 0.5)