# Anduril · Design system migration spec

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

> This site is a masterclass in using photography-driven storytelling and extreme restraint in UI to convey absolute authority and premium technical capability.

## 1. Identity DNA

The design system for Anduril operates with the precision of a highly disciplined aerospace studio, where every element is governed by an uncompromising visual standard. It is a framework built for sovereign capability, where the interface itself recedes to let the work speak with absolute authority.

**One-liner:** A high-end defense and autonomy platform that uses cinematic photography and rigorous minimal typography to convey sovereign capability.
**Keywords:** defense · autonomy · manufacturing · sovereign · technology
**Analogy:** A highly disciplined aerospace studio with an uncompromising visual standard.

## 2. Color

The palette is built on a stark, high-contrast dark canvas of near-black (#000001) and pure white, with a single, sharp accent of high-chroma lime (#DFF140) reserved for critical emphasis. This restraint ensures the UI serves as a neutral stage for content, never competing with it.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000001` | main background |
| `--bg-soft` | `#121214` | card background |
| `--bg-quiet` | `#505544` | quiet area |
| `--ink` | `#FFFFFF` | body text |
| `--ink-soft` | `#A0A0A0` | secondary text |
| `--muted` | `#8E9291` | placeholder |
| `--accent` | `#DFF140` | single accent |
| `--line` | `rgba(255,255,255,0.12)` | divider |

**Color principle:** A high-contrast dark interface where the UI recedes entirely to let massive, cinematic photographic content take center stage.

The principle is one of absolute subordination: color exists only to direct focus or define structure, never for decoration.

## 3. Typography

The typographic voice is bifurcated between a primary humanist sans-serif for clear, authoritative communication and a monospaced face for technical labeling. This pairing establishes a hierarchy where declarative headlines carry weight, while metadata is delivered with machine-like precision.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 500 | -1.5px | Primary headings and hero statements |
| subheading | 24px | 1.15 | 500 | -0.24px | Section subheadings and feature labels |
| body | 15px | 1.5 | 400 | -0.15px | Standard readable text and navigation |
| caption | 12px | 1.05 | 400 | 0.5px | Monospaced labels and metadata |

**Type rules:**
- Use uppercase, monospaced tracking for technical labels.
- Use tight negative letter-spacing for bold headlines.
- Rely on a primary humanist sans-serif for all body text.

## 4. Spacing

Vertical rhythm is established through generous, cinematic padding—spacious 64px and 112px blocks—that creates a measured, uncluttered reading cadence.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Spacious 64px and 112px vertical padding between major content blocks to maintain a cinematic, uncluttered feel.

## 5. Surfaces

Depth is communicated not through heavy shadows but through precise, subtle borders and the occasional use of a sharp lime glow for interactive states. The surfaces remain flat and clean, reinforcing the system's focus on structural clarity.

- **Radius:** sm 0px · md 2px · lg 4px · pill 999px
- **Shadows:**
  - rgb(223, 241, 64) 0px 0px 10px 0px
  - rgb(223, 241, 64) 0px 0px 5px 0px
- **Borders:** 1px solid rgba(255,255,255,0.12)

## 6. Layout

The foundational skeleton is a full-width, edge-to-edge structural grid designed to prioritize massive photographic assets and high-impact headlines. It establishes a rigid, left-aligned hierarchy that frames content with architectural certainty.

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

**Skeleton:** A full-width, edge-to-edge structural grid designed to prioritize large photographic assets and high-impact headlines.

## 7. Motion & Interaction

Motion is employed with measured discipline to establish a premium, cinematic pace. Hero elements enter with slow, smooth transitions, while standard UI interactions use quick, consistent ease-out state changes for immediate but unobtrusive feedback.

- **Durations:** micro 200ms · small 300ms · medium 1000ms
- **Easing:** `cubic-bezier(0.19, 1, 0.22, 1)`
- **Patterns:**
  - Smooth, slow entrance transitions for hero elements to establish a premium, measured tone.
  - Subtle 0.3s ease-out transitions for UI state changes like hover and focus.

- **Hover:** Subtle color transitions (0.3s ease-out) on text elements and minimal scaling on interactive areas.
- **Click:** Immediate visual feedback followed by smooth page or section transitions.
- **Transition:** All standard UI elements use consistent opacity and transform transitions.
- **Keyboard:** Standard sequential tabbing through the main navigation links and interactive buttons.

## 8. Voice & Don'ts

The editorial voice is authoritative, precise, and uncompromisingly professional, conveying capability through short, declarative statements. It operates with a stark directness that mirrors the visual system's own rigor.

- **Tone:** Authoritative, precise, and uncompromisingly professional.
- **Headline style:** Short, high-impact, declarative statements that convey absolute capability.
- **CTA style:** Direct, minimal, and action-oriented without unnecessary filler words.
- **Avoid:** Avoid emojis or casual punctuation. / Avoid hyperbolic marketing buzzwords. / Avoid cluttered layouts or unnecessary visual noise. / Avoid playful or rounded design elements.

### Don'ts
- ❌ Don't use soft, rounded corners on primary UI elements — screenshot shows 2px border-radius instead.
- ❌ Don't rely on bright, multi-colored gradients — screenshot shows a stark, high-contrast dark interface.
- ❌ Don't use centered navigation layouts — screenshot shows a rigid, left-aligned structural hierarchy.
- ❌ Don't use small, crowded imagery — screenshot shows massive, edge-to-edge photographic assets.
- ❌ Don't use decorative icons or emojis — screenshot shows a strictly typographic and photographic approach.
- ❌ Don't use heavy, dark drop shadows — screenshot shows minimal or colored (lime) glows instead.

The system deliberately avoids rounded corners, playful elements, and decorative noise in favor of a strictly typographic and photographic approach.

## System Prompt (paste into AI tool)

```
Design a high-end, authoritative interface for a sovereign defense and technology platform. The visual language is cinematic and uncompromising, utilizing a stark, high-contrast dark mode with a primary background of #000001 and crisp white (#FFFFFF) text. Use a primary humanist-sans for display and body text, reserving a clean monospaced font for technical labels. The layout must be spacious, relying on massive, edge-to-edge photographic assets to convey scale and capability. Critical constraints: strictly avoid rounded corners, playful elements, or bright multi-color gradients. The UI must feel like a highly disciplined aerospace studio, prioritizing structural clarity and narrative weight over decoration.
```