anduril

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Anduril Design System

Anduril设计系统

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.

```
/anduril
```
— 将这些约束应用于本次对话中的所有UI工作。
```
/anduril <file>
```
— 对照所有约束审查文件，输出违规项、违规原因以及具体修复方案。

Design System: Anduril

设计系统：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

核心调色板

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配置

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

使用指南

谨慎使用
```
--accent-lime
```
——每个视图仅使用一种强调色
深色模式：使用
```
--bg-black
```
作为背景，
```
--accent-lime
```
用于CTA按钮
浅色模式：使用
```
--bg-warm
```
作为背景，
```
--text-primary
```
用于CTA按钮
绝对不要在浅色背景上使用石灰绿（对比度差）
仅将
```
--color-error
```
用于破坏性操作

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
```

必须使用

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

字体

基础字体大小：
```
15px
```
，字重：
```
400
```
，行高：
```
1.5
```
标题：
```
font-weight: 400
```
（绝不用粗体）

标签：

11px

，大写，

letter-spacing: 0.05em

，颜色：

var(--text-muted)

主标题：
```
48px
```
，字重：
```
400
```
，行高：
```
1.1
```
导航/头部文本：
```
14px
```
，大写，
```
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

卡片：
```
padding: 32px
```
主内容区：
```
padding: 48px
```
，最大宽度：
```
1200px
```
头部：
```
padding: 24px 48px
```
表单元素：字段间距
```
margin-top: 16px
```

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
```

卡片

```
background: #ffffff
```
```
border: none
```
— 绝对不要边框
```
border-radius: 0
```
— 始终使用直角
绝对不要阴影

按钮

```
background: var(--text-primary)
```
```
color: var(--text-inverse)
```
```
border: 1px solid var(--text-primary)
```
```
padding: 12px 24px
```
```
border-radius: 0
```
— 直角
```
font-weight: 400
```
悬停状态：
```
opacity: 0.85
```
禁用状态：
```
opacity: 0.5
```

输入框

```
padding: 10px 12px
```
```
border: 1px solid #ddd
```
```
border-radius: 0
```
聚焦状态：
```
border-color: var(--text-primary)
```
，无外轮廓

方法徽章

```
font-family: monospace
```
```
font-size: 11px
```
文本转换为大写
```
letter-spacing: 0.05em
```
```
padding: 4px 8px
```
POST：
```
color: #2563eb; background: #eff6ff
```
GET：
```
color: #16a34a; background: #f0fdf4
```

响应/代码块

```
background: var(--bg-warm)
```
```
font-family: monospace
```
```
font-size: 12px
```
错误状态：
```
background: #fef2f2; color: #dc2626
```
成功状态：
```
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

除非已有自定义值，否则必须使用Tailwind CSS默认值
当需要JavaScript动画时，必须使用
```
motion/react
```
进入动画和微动画建议使用
```
tw-animate-css
```
类逻辑必须使用
```
cn
```
工具（
```
clsx
```
+
```
tailwind-merge
```
）

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

必须使用无障碍组件原语（
```
Base UI
```
,
```
React Aria
```
,
```
Radix
```
）
优先使用项目现有的组件原语
绝对不要在同一界面混合使用不同的组件原语系统
纯图标按钮必须添加
```
aria-label
```
绝对不要手动重构键盘或焦点行为

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

破坏性操作必须使用
```
AlertDialog
```
加载状态建议使用结构化骨架屏
绝对不要使用
```
h-screen
```
，改用
```
h-dvh
```
固定元素必须考虑
```
safe-area-inset
```
安全区域
错误提示必须显示在操作发生的位置附近
绝对不要禁止输入框的粘贴功能

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
```

除非明确要求，否则绝对不要添加动画
必须仅对合成器属性（
```
transform
```
,
```
opacity
```
）执行动画
绝对不要对布局属性（
```
width
```
,
```
height
```
,
```
top
```
,
```
left
```
,
```
margin
```
,
```
padding
```
）执行动画
进入动画建议使用
```
ease-out
```
缓动
交互反馈动画时长绝对不要超过
```
200ms
```
循环动画在界面外时必须暂停
建议尊重
```
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

标题必须使用
```
text-balance
```
，正文必须使用
```
text-pretty
```
数据类文本必须使用
```
tabular-nums
```
密集型UI建议使用
```
truncate
```
或
```
line-clamp
```
除非明确要求，否则绝对不要修改
```
letter-spacing
```

Layout

布局规范

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

必须使用固定的
```
z-index
```
层级（禁止使用任意
```
z-*
```
值）
方形元素建议使用
```
size-*
```
类

Performance

性能规范

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

绝对不要对大面积元素执行
```
blur()
```
或
```
backdrop-filter
```
动画
绝对不要在非活跃动画上使用
```
will-change
```
绝对不要使用
```
useEffect
```
处理渲染逻辑

Design — Anduril Style

Anduril风格设计准则

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
```

形状与界面

绝对不要使用圆角——始终使用直角
卡片绝对不要使用阴影
绝对不要使用渐变
绝对不要使用发光效果
绝对不要使用紫色或多色元素

颜色使用

浅色模式：
```
--bg-warm
```
（#f5f3ef）作为背景，深色按钮
深色模式：
```
--bg-black
```
（#000000）作为背景，石灰绿作为CTA强调色
仅在深色模式下将
```
--accent-lime
```
（#DFF140）用于主要操作
绝对不要在浅色背景上使用石灰绿——改用近黑色
建议每个视图仅使用一种强调色
统一使用语义化颜色（
```
--color-error
```
,
```
--color-success
```
）

排版

标题必须保持轻量化（
```
font-weight: 400
```
）
标签和导航文本必须使用大写+字间距
绝对不要对标题使用粗体

状态规范

空状态必须提供一个明确的下一步操作
错误状态：红色文本（#FF3535），浅红色背景（#fef2f2）
成功状态：绿色文本（#16a34a），浅绿色背景（#f0fdf4）
禁用状态：
```
opacity: 0.5
```
，
```
cursor: not-allowed
```