Anduril Design System

When invoked, apply these opinionated constraints for building better interfaces.

How to use

```
/anduril
```
— Apply these constraints to any UI work in this conversation.
```
/anduril <file>
```
— Review the file against all constraints and output violations, why it matters, and a concrete fix.

Design System: Anduril

Colors

Core Palette

css

/* Backgrounds */
--bg-black: #000000;        /* Pure black - dark mode primary */
--bg-dark: #1a1a1a;         /* Near black - dark mode secondary */
--bg-warm: #f5f3ef;         /* Warm off-white - light mode primary */
--bg-white: #ffffff;        /* Pure white - cards, inputs */

/* Text */
--text-primary: #010101;    /* Near black */
--text-inverse: #ffffff;    /* White on dark */
--text-muted: #666666;      /* Secondary text */
--text-subtle: #999999;     /* Tertiary text */

/* Brand Accent */
--accent-lime: #DFF140;     /* Anduril signature lime - primary accent */
--accent-lime-hover: #c8d93a;

/* Semantic */
--color-error: #FF3535;     /* Red - errors, destructive */
--color-error-bg: #fef2f2;
--color-success: #16a34a;   /* Green - success states */
--color-success-bg: #f0fdf4;
--color-info: #2563eb;      /* Blue - info, links */
--color-info-bg: #eff6ff;
--color-warning: #f59e0b;   /* Amber - warnings */
--color-warning-bg: #fffbeb;

/* Borders */
--border-light: #e5e5e5;
--border-default: #ddd;
--border-dark: #333333;

Tailwind Config

colors: {
  anduril: {
    black: '#000000',
    dark: '#1a1a1a',
    warm: '#f5f3ef',
    lime: '#DFF140',
    'lime-hover': '#c8d93a',
  }
}

Usage Guidelines

Use
```
--accent-lime
```
sparingly — one accent per view
Dark mode:
```
--bg-black
```
background,
```
--accent-lime
```
for CTAs
Light mode:
```
--bg-warm
```
background,
```
--text-primary
```
for CTAs
NEVER use lime on light backgrounds (poor contrast)
Reserve
```
--color-error
```
for destructive actions only

Typography

MUST use

'Helvetica Neue', Helvetica, Arial, sans-serif

Base font size:
```
15px
```
, weight:
```
400
```
, line-height:
```
1.5
```
Headers:
```
font-weight: 400
```
(never bold)

Labels:

11px

uppercase

letter-spacing: 0.05em

color: var(--text-muted)

Hero headings:
```
48px
```
,
```
font-weight: 400
```
,
```
line-height: 1.1
```
Navigation/header text:
```
14px
```
,
```
uppercase
```
,
```
letter-spacing: 0.1em
```

Spacing

Cards:
```
padding: 32px
```
Main content:
```
padding: 48px
```
,
```
max-width: 1200px
```
Header:
```
padding: 24px 48px
```
Form elements:
```
margin-top: 16px
```
between fields

Components

Cards

```
background: #ffffff
```
```
border: none
```
— NO borders
```
border-radius: 0
```
— sharp corners always
NO shadows

Buttons

```
background: var(--text-primary)
```
```
color: var(--text-inverse)
```
```
border: 1px solid var(--text-primary)
```
```
padding: 12px 24px
```
```
border-radius: 0
```
— sharp corners
```
font-weight: 400
```
Hover:
```
opacity: 0.85
```
Disabled:
```
opacity: 0.5
```

Inputs

```
padding: 10px 12px
```
```
border: 1px solid #ddd
```
```
border-radius: 0
```
Focus:
```
border-color: var(--text-primary)
```
, no outline

Method badges

```
font-family: monospace
```
```
font-size: 11px
```
```
text-transform: uppercase
```
```
letter-spacing: 0.05em
```
```
padding: 4px 8px
```
POST:
```
color: #2563eb; background: #eff6ff
```
GET:
```
color: #16a34a; background: #f0fdf4
```

Response/code blocks

```
background: var(--bg-warm)
```
```
font-family: monospace
```
```
font-size: 12px
```
Error state:
```
background: #fef2f2; color: #dc2626
```
Success state:
```
background: #f0fdf4; color: #16a34a
```

Stack

MUST use Tailwind CSS defaults unless custom values already exist
MUST use
```
motion/react
```
when JavaScript animation is required
SHOULD use
```
tw-animate-css
```
for entrance and micro-animations
MUST use
```
cn
```
utility (
```
clsx
```
+
```
tailwind-merge
```
) for class logic

Components

MUST use accessible component primitives (
```
Base UI
```
,
```
React Aria
```
,
```
Radix
```
)
MUST use the project's existing primitives first
NEVER mix primitive systems within the same surface
MUST add
```
aria-label
```
to icon-only buttons
NEVER rebuild keyboard or focus behavior by hand

Interaction

MUST use
```
AlertDialog
```
for destructive actions
SHOULD use structural skeletons for loading states
NEVER use
```
h-screen
```
, use
```
h-dvh
```
MUST respect
```
safe-area-inset
```
for fixed elements
MUST show errors next to where the action happens
NEVER block paste in inputs

Animation

NEVER add animation unless explicitly requested
MUST animate only compositor props (
```
transform
```
,
```
opacity
```
)
NEVER animate layout props (
```
width
```
,
```
height
```
,
```
top
```
,
```
left
```
,
```
margin
```
,
```
padding
```
)
SHOULD use
```
ease-out
```
on entrance
NEVER exceed
```
200ms
```
for interaction feedback
MUST pause looping animations when off-screen
SHOULD respect
```
prefers-reduced-motion
```

Typography

MUST use
```
text-balance
```
for headings,
```
text-pretty
```
for body
MUST use
```
tabular-nums
```
for data
SHOULD use
```
truncate
```
or
```
line-clamp
```
for dense UI
NEVER modify
```
letter-spacing
```
unless explicitly requested

Layout

MUST use a fixed
```
z-index
```
scale (no arbitrary
```
z-*
```
)
SHOULD use
```
size-*
```
for square elements

Performance

NEVER animate large
```
blur()
```
or
```
backdrop-filter
```
surfaces
NEVER apply
```
will-change
```
outside an active animation
NEVER use
```
useEffect
```
for render logic

Design — Anduril Style

Shape & Surface

NEVER use border-radius — sharp corners only
NEVER use shadows on cards
NEVER use gradients
NEVER use glow effects
NEVER use purple or multicolor anything

Color Usage

Light mode:
```
--bg-warm
```
(#f5f3ef) background, dark buttons
Dark mode:
```
--bg-black
```
(#000000) background, lime accent CTAs
MUST use
```
--accent-lime
```
(#DFF140) for primary actions in dark mode only
NEVER use lime on light backgrounds — use near-black instead
SHOULD limit accent color to ONE per view
Use semantic colors (
```
--color-error
```
,
```
--color-success
```
) consistently

Typography

MUST keep headers lightweight (
```
font-weight: 400
```
)
MUST use uppercase + letter-spacing for labels and nav
NEVER use bold for headings

States

MUST give empty states one clear next action
Error states: red text (#FF3535), light red background (#fef2f2)
Success states: green text (#16a34a), light green background (#f0fdf4)
Disabled:
```
opacity: 0.5
```
,
```
cursor: not-allowed
```

anduril

NPX Install

Tags

SKILL.md Content

Anduril Design System

How to use

Design System: Anduril

Colors

Typography

Spacing

Components

Stack

Components

Interaction

Animation

Typography

Layout

Performance

Design — Anduril Style