Ant Design 5

---
name: ant-design-5
description: Apply the Ant Design 5 visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Ant Design 5, mentions antd, Ant Design, antd v5, or describes primary blue #1677ff, semantic color quartet (blue/green/gold/red), alpha-channel text colors — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Ant Design 5 Design System

Alibaba's enterprise React system, dominant in Chinese-market SaaS and admin tools: daybreak-blue primary #1677ff, semantic success/warning/error hues, alpha-based text colors on white containers, 6px radii, 14px system-stack type with 1.5715 line height, and algorithm-driven theming that derives whole palettes from seed tokens.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values come from the officially published token set. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Ant Design 5.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (antd, Ant Design, antd v5, Ant Design System), or describes its traits: primary blue #1677ff; semantic color quartet (blue/green/gold/red); alpha-channel text colors; 6px default radius; dense tables and forms; algorithmic theme generation.

## Design tokens

### Color palette

- colorBgLayout — app frame background: `#f5f5f5` (--color-bg)
- colorBgContainer — cards, tables, inputs: `#ffffff` (--color-surface)
- colorText — rgba(0,0,0,0.88) on light surfaces: `#000000e0` (--color-text)
- colorTextSecondary — rgba(0,0,0,0.65): `#000000a6` (--color-text-muted)
- colorPrimary — daybreak blue (v5 shifted from v4's #1890ff): `#1677ff` (--color-accent)
- colorSuccess — polar green: `#52c41a` (--color-success)
- colorWarning — calendula gold: `#faad14` (--color-warning)
- colorError — dust red: `#ff4d4f` (--color-error)
- colorBorder — control outlines and dividers: `#d9d9d9` (--color-border)

### Dark mode overrides

When building dark mode, override these roles (all other tokens stay the same):

- colorBgLayout under darkAlgorithm: `#000000` (--color-bg)
- colorBgContainer under darkAlgorithm: `#141414` (--color-surface)
- colorText dark — rgba(255,255,255,0.85): `#ffffffd9` (--color-text)
- colorPrimary as computed by the dark algorithm: `#1668dc` (--color-accent)

### Typography

- Display / headings: system-ui (fallback: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif)
- Body: system-ui (fallback: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif)
- Type scale: 1.2 ratio, base 14px — computed steps: 14px / 17px / 20px / 24px / 29px / 35px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 600, line-height 1.35, letter-spacing 0
- Body: line-height 1.5715, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 12, 16, 24, 32, 48, 64 — Dense-but-breathable admin density on a 4px unit: 16px default component padding, 24px card padding, 8/16px gaps in forms; tables offer small/middle/large size switches.
- Border radius: xs 2px, sm 4px, md 6px, lg 8px — borderRadius 6px is the v5 default for buttons, inputs, and cards; XS 2px for tags/tooltips inner elements, LG 8px for modals and large cards.
- Border treatment: 1px solid #d9d9d9 — 1px #d9d9d9 on controls; split lines and table borders use the lighter colorSplit rgba(5,5,5,0.06).

### Shadows

- tertiary: `0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02)` — boxShadowTertiary — resting cards and containers
- base: `0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)` — boxShadow — dropdowns, popovers, modals

### Layout

- Max content width: 1600px
- Classic admin frame: 200–256px collapsible sidebar menu + header + content on #f5f5f5
- Content lives in white cards floated on the gray layout background
- Pro-table pattern: filter form card above a paginated bordered table
- 24px grid gutters via the 24-column Row/Col system

### Effects

- Wave effect: a brief expanding ring of the primary color radiates from clicked buttons and controls
- Status-colored form feedback tints borders and help text on validation

### Motion

- Easing: cubic-bezier(0.645, 0.045, 0.355, 1); durations 100ms / 200ms / 300ms
- motionDurationFast/Mid/Slow = 0.1s/0.2s/0.3s across all components
- Dropdowns and popovers scale+fade from their trigger point
- The click-wave ripple on primary actions is an Ant signature — keep it

## CSS variables (drop-in)

```css
:root {
  --color-bg: #f5f5f5;
  --color-surface: #ffffff;
  --color-text: #000000e0;
  --color-text-muted: #000000a6;
  --color-accent: #1677ff;
  --color-success: #52c41a;
  --color-warning: #faad14;
  --color-error: #ff4d4f;
  --color-border: #d9d9d9;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --shadow-tertiary: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
  --shadow-base: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
  --border-default: 1px solid #d9d9d9;
  --font-display: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --text-base: 14px;
  --leading-heading: 1.35;
  --leading-body: 1.5715;
  --tracking-heading: 0;
  --tracking-body: 0;
  --ease: cubic-bezier(0.645, 0.045, 0.355, 1);
  --duration-fast: 100ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
}
```

All fonts are system fonts — nothing to load.

## Component recipes

- **Nav:** 64px header, white or dark #001529 variant, with a 200px sidebar Menu: 40px items, selected item gets a #e6f4ff tint and 3px right/left blue indicator bar
- **Hero:** Ant is admin-first: a page header card with breadcrumb, title (20px/600), and action buttons, followed by KPI stat cards in a 24-column grid
- **Card:** White surface, 8px radius, 24px padding, optional 1px #f0f0f0 header divider, tertiary shadow; hover may lift to the base shadow
- **Button (primary):** #1677ff fill, white text, 6px radius, 32px tall (40px for large), click-wave ripple; hover computed lighter #4096ff, active darker #0958d9
- **Button (secondary):** White fill, 1px #d9d9d9 border, 88% black text; hover swaps border and text to the primary blue
- **Form fields:** 32px input, 6px radius, 1px #d9d9d9 border; hover border blue, focus border #1677ff plus a 2px rgba(5,145,255,0.1) outer glow; validation recolors the whole treatment red or gold

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

The seed-token algorithm: set one colorPrimary and Ant computes hover, active, borders, and backgrounds mathematically — paired with its unmistakable dense admin furniture of bordered tables, inline form validation, and blue pagination. Spend boldness here; keep everything else quiet.

## Do

- Theme through seed tokens (colorPrimary, borderRadius) and let the v5 algorithm derive hover/active/background variants
- Use alpha-based text tokens (rgba(0,0,0,0.88)/(0.65)/(0.45)) so text sits naturally on any light surface
- Keep the full semantic quartet — blue info, green success, gold warning, red error — for statuses and badges
- Float white containers on the #f5f5f5 layout gray; that two-level surface is the Ant look

## Don't

- Don't hand-pick hover/active shades that fight the generated palette
- Don't mix v4's #1890ff primary into a v5 UI — the seed moved to #1677ff
- Don't strip the wave ripple and validation states; the micro-feedback is core to the system's feel
- Don't widen line height beyond ~1.57 for body — Ant's density depends on it

## Accessibility notes

- Primary #1677ff falls below 4.5:1 on white and on the #f5f5f5 layout gray (about 3.8:1) — Ant treats it as a UI/large-text color; body copy must use the black-alpha text tokens, and small blue text should be reserved for links at 14px+ with underlines on hover
- White text on #1677ff buttons is roughly 4:1 — acceptable for large/bold button labels under WCAG but consider colorPrimaryText #0958d9 variants where small text is unavoidable
- The alpha text colors (rgba black 0.88/0.65) pass AA on white and near-white surfaces but re-check them over tinted backgrounds

## Reference sites

- Ant Design: https://ant.design
- Customize Theme (v5 tokens): https://ant.design/docs/react/customize-theme
- Ant Design colors: https://ant.design/docs/spec/colors

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip ant-design-5.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/ant-design-5.json

Settings → Capabilities → Skills → Upload skill → ant-design-5.zip