Remixes of anduril.com
Latest remixes
No public remixes yet. Be the first to make one.
Remix itLatest remixes
No public remixes yet. Be the first to make one.
Remix itSwitch between the rendered Visual preview and the Raw DESIGN.md.
version: alpha
name: Anduril
description: |
Anduril's design system embodies industrial precision and advanced technology
through a stark, high-contrast aesthetic. The visual language prioritizes
clarity and command authority, employing deep blacks against pure whites with
strategic warm accents (#FFFFFF) that evoke precision engineering and
cutting-edge defense systems. The design conveys confidence and technological
sophistication through minimal ornamentation, bold typography, and geometric
composition. Large-scale imagery and dramatic gradients create depth without
decoration, establishing an atmosphere of innovation and capability. The
palette reflects a mission-critical sensibility—clean, direct, and
unapologetically technical.
source:
url: "https://anduril.com"
pagesAnalyzed: 1
extractedAt: 2026-11-06
tokensMeasured: true
colors:
primary: "#FFFFFF"
canvas: "#000000"
surface-alt: "#8E9291"
ink: "#FFFFFF"
neutral-1: "#F1F0EA"
typography:
display-lg:
fontFamily: HelveticaNowDisplay
fontSize: 56px
fontWeight: 700
lineHeight: 1.1
letterSpacing: -1.12px
display-md:
fontFamily: HelveticaNowDisplay
fontSize: 40px
fontWeight: 400
lineHeight: 1.15
letterSpacing: -0.8px
textTransform: capitalize
heading-md:
fontFamily: HelveticaNowDisplay
fontSize: 32px
fontWeight: 400
lineHeight: 1.15
letterSpacing: -0.32px
heading-md-capitalize:
fontFamily: HelveticaNowDisplay
fontSize: 32px
fontWeight: 400
lineHeight: 1.15
letterSpacing: -0.32px
textTransform: capitalize
heading-sm:
fontFamily: HelveticaNowDisplay
fontSize: 24px
fontWeight: 700
lineHeight: 1.15
letterSpacing: -0.24px
heading-xs:
fontFamily: HelveticaNowDisplay
fontSize: 16.8px
fontWeight: 400
lineHeight: 1.2
letterSpacing: -0.14px
body-lg:
fontFamily: HelveticaNowDisplay
fontSize: 18px
fontWeight: 400
lineHeight: 1.15
letterSpacing: -0.18px
body-md:
fontFamily: HelveticaNowDisplay
fontSize: 14px
fontWeight: 400
lineHeight: 1.05
letterSpacing: -0.14px
textTransform: capitalize
body-sm:
fontFamily: HelveticaNowDisplay
fontSize: 12px
fontWeight: 500
lineHeight: 1.05
letterSpacing: 0.48px
textTransform: uppercase
body-sm-capitalize:
fontFamily: HelveticaNowDisplay
fontSize: 12px
fontWeight: 500
lineHeight: 1.05
letterSpacing: 0.48px
textTransform: capitalize
nav:
fontFamily: HelveticaNowDisplay
fontSize: 15.008px
fontWeight: 400
lineHeight: 1.2
letterSpacing: -0.14px
button:
fontFamily: HelveticaNowDisplay
fontSize: 14px
fontWeight: 400
lineHeight: 1.05
letterSpacing: -0.14px
rounded:
none: 0px
xs: 2px
spacing:
xxs: 8px
xs: 12px
sm: 16px
md: 20px
lg: 24px
xl: 28px
xxl: 32px
xxxl: 44px
section: 48px
band: 64px
borderWidths:
thin: 1px
elevationStrategy: color-blocking
themes:
derived: light # the other theme is the site's measured palette
light:
bg: "#FBFBFB"
surface: "#F1F1F1"
surfaceRaised: "#E9E9E9"
text: "#1D1D1D"
textMuted: "#707070"
border: "#D8D8D8"
accent: "#707070"
accentFg: "#FFFFFF"
focusRing: "#8F8F8F"
elevation: shadow
dark:
bg: "#000000"
surface: "#8E9291"
surfaceRaised: "#979B9A"
text: "#FFFFFF"
textMuted: "#A6A6A6"
border: "#1F1F1F"
accent: "#FFFFFF"
accentFg: "#0B0B0C"
focusRing: "#FFFFFF"
elevation: "border+surface"
contrastFailures:
- "dark: text on surface = 3.15:1 (needs 4.5:1)"
gradients:
- context: hero
kind: linear
value: "linear-gradient(rgba(1, 1, 1, 0) 0%, rgba(1, 1, 1, 0.004) 1.8%, rgba(1, 1, 1, 0.008) 4.8%, rgba(1, 1, 1, 0.02) 9%, rgba(1, 1, 1, 0.043) 13.9%, rgba(1, 1, 1, 0.075) 19.8%, rgba(1, 1, 1, 0.125) 27%, rgba(1, 1, 1, 0.192) 35%, rgba(1, 1, 1, 0.28) 43.5%, rgba(1, 1, 1, 0.38) 53%, rgba(1, 1, 1, 0.54) 66%, rgba(1, 1, 1, 0.737) 81%, rgb(1, 1, 1) 100%)"
- context: section
kind: linear
value: "linear-gradient(rgba(1, 1, 1, 0) 0%, rgba(1, 1, 1, 0.004) 1.8%, rgba(1, 1, 1, 0.008) 4.8%, rgba(1, 1, 1, 0.02) 9%, rgba(1, 1, 1, 0.043) 13.9%, rgba(1, 1, 1, 0.075) 19.8%, rgba(1, 1, 1, 0.125) 27%, rgba(1, 1, 1, 0.192) 35%, rgba(1, 1, 1, 0.28) 43.5%, rgba(1, 1, 1, 0.38) 53%, rgba(1, 1, 1, 0.54) 66%, rgba(1, 1, 1, 0.737) 81%, rgb(1, 1, 1) 100%)"
components:
button-text:
typography: "{typography.body-md}"
textColor: "{colors.ink}"
height: 68.5938px
rounded: "{rounded.xs}"
card:
textColor: "{colors.ink}"
padding: "0px 32px 0px 32px"
fontSize: 16px
fontFamily: "Times New Roman"
fontWeight: 400
backgroundColor: "rgb(80, 85, 68)"
card-featured:
textColor: "rgb(1, 1, 1)"
padding: "0px 32px 0px 32px"
fontSize: 16px
fontFamily: "Times New Roman"
fontWeight: 400
backgroundColor: "{colors.surface-alt}"
card-sm:
textColor: "rgb(0, 0, 238)"
fontSize: 16px
fontFamily: "Times New Roman"
fontWeight: 400
rounded: "{rounded.xs}"
navigation:
textColor: "{colors.ink}"
height: 72.125px
fontSize: 16px
fontFamily: "Times New Roman"
fontWeight: 400
footer:
textColor: "{colors.ink}"
padding: "56px 0px 56px 0px"
fontSize: 16px
fontFamily: "Times New Roman"
fontWeight: 400
link:
textColor: "rgb(1, 1, 1)"
fontSize: 16px
fontFamily: "Times New Roman"
fontWeight: 400
link-sm:
typography: "{typography.nav}"
textColor: "{colors.ink}"
states:
other-hover:
target: other
state: hover
borderColor: "rgb(1, 1, 1)"
backgroundColor: "rgb(1, 1, 1)"
button-hover:
target: button
state: hover
borderColor: "{colors.ink}"
backgroundColor: "{colors.primary}"
input-focus:
target: input
state: focus
outline: auto
input-focus-visible:
target: input
state: focus-visible
outline: "{colors.primary} solid 1px"
outlineColor: "{colors.ink}"
outlineWidth: 1px
other-focus:
target: other
state: focus
outline: none
other-focus-visible:
target: other
state: focus-visible
outline: none
button-focus:
target: button
state: focus
outline: none
button-focus-visible:
target: button
state: focus-visible
outline: none
card-hover:
target: card
state: hover
backgroundColor: "rgb(1, 1, 1)"
breakpoints:
- width: 375
containerWidth: 360
gridColumns: 0
navLinksVisible: 1
menuToggleVisible: true
headingPx: 24
bodyPx: 14
sectionPaddingX: 20
- width: 768
containerWidth: 753
gridColumns: 0
navLinksVisible: 1
menuToggleVisible: true
headingPx: 24
bodyPx: 14
sectionPaddingX: 20
- width: 1024
containerWidth: 1009
gridColumns: 0
navLinksVisible: 3
menuToggleVisible: true
headingPx: 21
bodyPx: 14
sectionPaddingX: 28
- width: 1280
containerWidth: 1265
gridColumns: 0
navLinksVisible: 3
menuToggleVisible: true
headingPx: 21
bodyPx: 14
sectionPaddingX: 28
- width: 1440
containerWidth: 1425
gridColumns: 0
navLinksVisible: 3
menuToggleVisible: true
headingPx: 24
bodyPx: 16
sectionPaddingX: 32
coverage:
statesFound: 52
gradientsFound: 2
rolesUnassigned: 1
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: false
semanticRampDeclared: false
Anduril's design system embodies industrial precision and advanced technology through a stark, high-contrast aesthetic. The visual language prioritizes clarity and command authority, employing deep blacks against pure whites with strategic warm accents ({colors.primary} — #FFFFFF) that evoke precision engineering and cutting-edge defense systems. The design conveys confidence and technological sophistication through minimal ornamentation, bold typography, and geometric composition. Large-scale imagery and dramatic gradients create depth without decoration, establishing an atmosphere of innovation and capability. The palette reflects a mission-critical sensibility—clean, direct, and unapologetically technical.
Key Characteristics
{colors.surface-alt} — #8E9291) as strategic visual breaks{colors.primary} — #FFFFFF): Primary text, brand mark, active states, primary CTA fills, and heading hierarchy. Ensures legibility and brand recognition across all dark surfaces.{colors.canvas} — #000000): Default page background and primary surface. Establishes the immersive, command-center aesthetic.{colors.surface-alt} — #8E9291): Alternating section band and visual break. Creates rhythmic contrast and depth without disrupting the primary black–white dialogue.{colors.neutral-1} — #F1F0EA): Decorative and accent role; measured on secondary surfaces but not assigned a core semantic function in navigation or hierarchy.Primary: HelveticaNowDisplay (sans-serif, technical, clean)
Fallback Stack: 'Helvetica Neue', Helvetica, Arial, sans-serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display Large | HelveticaNowDisplay | 56px | 700 | 1.1 | −1.12px | Hero headlines, primary messaging |
| Display Medium | HelveticaNowDisplay | 40px | 400 | 1.15 | −0.8px | Major section headings; capitalize applied |
| Heading Medium | HelveticaNowDisplay | 32px | 400 | 1.15 | −0.32px | Section subheadings; default and capitalize variants |
| Heading Extra Small | HelveticaNowDisplay | 16.8px | 400 | 1.2 | −0.14px | Card titles, subsections |
| Heading Small | HelveticaNowDisplay | 24px | 700 | 1.15 | −0.24px | Accent headings, emphatic labels |
| Body Large | HelveticaNowDisplay | 18px | 400 | 1.15 | −0.18px | Long-form content, body copy |
| Body Medium | HelveticaNowDisplay | 14px | 400 | 1.05 | −0.14px | Default body text; capitalize applied |
| Button | HelveticaNowDisplay | 14px | 400 | 1.05 | −0.14px | Button labels, controls |
| Navigation | HelveticaNowDisplay | 15.008px | 400 | 1.2 | −0.14px | Header and footer nav links |
| Body Small | HelveticaNowDisplay | 12px | 500 | 1.05 | 0.48px | Labels, metadata; uppercase or capitalize applied |
Primary Button
rgba(0, 0, 0, 0) (transparent)rgb(255, 255, 255)0px 0px 0px 0px{rounded.none} (0px)rgb(1, 1, 1), text becomes rgb(255, 255, 255)Secondary Button (White Border Variant)
rgba(0, 0, 0, 0) (transparent)rgb(255, 255, 255)1px solid rgb(255, 255, 255){rounded.none} (0px)rgb(255, 255, 255), text becomes rgb(1, 1, 1)Accent Button (Yellow Variant)
rgb(239, 248, 160)rgb(1, 1, 1){rounded.none} (0px)rgb(239, 248, 160)Default Card
rgb(80, 85, 68)rgb(255, 255, 255)0px {spacing.xxl} 0px {spacing.xxl} (0px 32px 0px 32px){rounded.none} (0px)rgb(1, 1, 1)Featured Card
rgb(142, 146, 145) ({colors.surface-alt})rgb(1, 1, 1)0px {spacing.xxl} 0px {spacing.xxl} (0px 32px 0px 32px){rounded.none} (0px)Small Card
rgba(0, 0, 0, 0) (transparent)rgb(0, 0, 238)0px 0px 0px 0px{rounded.xs} (2px)Header Navigation
rgba(0, 0, 0, 0) (transparent)rgb(255, 255, 255)0px 0px 0px 0px{rounded.none} (0px)Footer Navigation
rgba(0, 0, 0, 0) (transparent)rgb(255, 255, 255){spacing.xxxl} 0px {spacing.xxxl} 0px (56px 0px 56px 0px){rounded.none} (0px)Default Link
rgb(1, 1, 1)rgba(0, 0, 0, 0) (transparent){rounded.none} (0px)rgb(223, 241, 64), opacity becomes 1Small Link (Navigation)
rgb(255, 255, 255)rgba(0, 0, 0, 0) (transparent){rounded.none} (0px)rgb(223, 241, 64), border becomes 1px solid rgb(223, 241, 64)Base Unit: 4px (implicit scale foundation)
Spacing Scale with Context:
{spacing.xxs} — 8px: Tight icon spacing, micro-interactions{spacing.xs} — 12px: Tight label padding, input gaps{spacing.sm} — 16px: Small component padding, tertiary gaps{spacing.md} — 20px: Medium padding, internal card gutters{spacing.lg} — 24px: Section label spacing, prominent padding{spacing.xl} — 28px: Spacious internal gutters{spacing.xxl} — 32px: Card internal padding, major component spacing{spacing.xxxl} — 44px: Large footer/header spacing{spacing.section} — 48px: Section-to-section vertical breathing room{spacing.band} — 64px: Major band/module separation, hero section depth{spacing.md} (20px){spacing.xl} (28px){spacing.xxl} (32px)Anduril employs generous vertical spacing ({spacing.band} — 64px between major sections) to create a command-center cadence, allowing the eye to rest and absorb large-format imagery. Horizontal padding increases with viewport size, maintaining compact mobile experiences while affording desktop luxury. Internal component padding is restrained, emphasizing content over chrome.
{rounded.none} — 0px: Buttons, cards, navigation; sharp, angular aesthetic{rounded.xs} — 2px: Small images, tertiary cards; minimal softeningColor-Blocking: Anduril uses color surface changes rather than shadows to establish hierarchy and depth. Primary black canvas ({colors.canvas} — #000000) anchors the base; lighter surfaces ({colors.surface-alt} — #8E9291, {colors.neutral-1} — #F1F0EA) create visual lift through contrast rather than shadow. This flat, industrial approach emphasizes clarity over dimensionality.
| Level | Treatment | Use |
|---|---|---|
| Base / Canvas | rgba(0, 0, 0, 0.99) to solid #000000 | Primary page background, immersive hero sections |
| Surface | #8E9291 (dark gray) | Featured sections, alternating bands, visual breaks |
| Accent | #F1F0EA (light beige) | Decorative elements, tertiary surfaces |
| Overlay | Hero gradient: linear-gradient(rgba(1, 1, 1, 0) 0%, ... rgb(1, 1, 1) 100%) | Black-to-transparent vignette over hero imagery; section gradient: identical |
| Interactive Lift | No shadow; opacity and color shift | Hover states elevate through opacity (1.0), background color shift, or text color highlight |
Shadow Philosophy: The system declares no explicit box-shadows. Depth comes from layered color surfaces and transparent gradient overlays. This minimalist approach reinforces the technical, no-nonsense brand persona and ensures dark-mode clarity.
{colors.primary} (#FFFFFF) for all primary headings, CTAs, and critical text on dark backgrounds to maintain legibility and brand authority.−0.14px to −1.12px) on display and heading typography to create visual tension and premium technical aesthetic.{spacing.band} (64px) between major sections to establish rhythm and allow imagery to breathe.{rounded.none} (0px) for all buttons, primary cards, and navigation elements to maintain angular, industrial character.#000000 to #8E9291 to #F1F0EA) to convey depth without shadows.rgb(223, 241, 64) accent highlights) or opacity (0.6–1.0) for interactive feedback.{spacing.xxl} — 32px) while keeping external card borders sharp (0px radius).{colors.surface-alt} or {colors.neutral-1} for primary text; reserve them for surfaces and accents only.{spacing.band} (64px) between sections on desktop; maintain generous vertical breathing room.rgb(223, 241, 64)); maintain strict color discipline.| Viewport | Width | Content Column | Grid Columns | Nav Links Visible | Menu Toggle | Largest Heading | Body Font | Section Padding X |
|---|---|---|---|---|---|---|---|---|
| Mobile Small | 375px | 360px | 1 | 1 | yes | 24px | 14px | {spacing.md} (20px) |
| Tablet | 768px | 753px | 1 | 1 | yes | 24px | 14px | {spacing.md} (20px) |
| Desktop Small | 1024px | 1009px | 3 (multi-column layout enabled) | 3 | yes | 21px | 14px | {spacing.xl} (28px) |
| Desktop | 1280px | 1265px | 3 | 3 | yes | 21px | 14px | {spacing.xl} (28px) |
| Desktop Large | 1440px | 1425px | 3 | 3 | yes | 24px | 16px | {spacing.xxl} (32px) |
Key Breakpoints:
{spacing.xs} (12px) internal padding on mobile to accommodate touch accuracy.{spacing.xs} to {spacing.sm} (12–16px) between adjacent buttons or links to prevent accidental taps.{spacing.md} (20px) side padding; navigation collapses to hamburger menu with 1 visible link.{spacing.xl} (28px) to maintain visual hierarchy; navigation expands to 3 visible links; largest headings scale from 24px down to 21px for balance.{spacing.xxl} (32px); body font increases to 16px; largest heading returns to 24px for visual emphasis.{colors.primary} — #FFFFFF) — headings, primary text, active states{colors.canvas} — #000000) — default page surface{colors.surface-alt} — #8E9291) — alternating sections, featured cardsrgb(223, 241, 64)) — hover states, emphasis, technical accent{colors.neutral-1} — #F1F0EA) — secondary surfaces, non-semantic useTypography: Always use HelveticaNowDisplay with negative letter-spacing on displays (−0.8px to −1.12px) and capitalize/uppercase transforms for command-center hierarchy. Body text remains 14px weight 400 with −0.14px tracking.
Color Discipline: Black canvas, white primary text, gray surface lifts, yellow accents on hover. Never introduce new colors; rely on opacity shifts (0.5–1.0) for interactive feedback.
Buttons & Interactive: 0px border-radius (sharp), transparent or solid fills (never gradients), 1px borders on secondary variants, hover states via opacity or background-color shift (never scale/rotate unless explicitly specified).
Spacing: 64px ({spacing.band}) between major sections; 32px ({spacing.xxl}) internal card padding; scale section padding from 20px (mobile) → 28px (tablet) → 32px (desktop) based on viewport.
Layout: Single column through 768px, multi-column (3-col grid) at 1024px+. Full-bleed hero imagery with hero gradient overlay (linear-gradient(rgba(1, 1, 1, 0) ... rgb(1, 1, 1))). No shadows; depth via color-blocking.
Breakpoints & Responsive: Navigation collapses at 768px threshold (1 link visible, menu toggle active); expands to 3 links at 1024px. Section padding and font sizes adapt per breakpoint table. Content column scales 360px → 1425px.
Accessibility: Maintain minimum touch target 68px height, 12–16px spacing between interactive elements. Use white text on black for 21:1 contrast ratio. Focus states: white outline 1px solid for inputs, none for buttons/other.
Depth & Elevation: No box-shadows; use z-index stack (1–2 base, 98 dropdown, 100–101 sticky, 1000 modal, 99999 toast). Opacity transitions (0.6–1.0) and color shifts replace scale/transform effects for hover.
{colors.neutral-1} (#F1F0EA): This color was measured but not assigned a clear semantic role (e.g., no explicit error, success, or background usage). Treat as decorative only.