Anduril

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

/* 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