Ant Design

# Ant Design — Design Style Reference

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Ant Group. "Ant Design" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** Ant Design
**Owner:** Ant Group
**Official documentation:** https://ant.design/
**Visual character:** Enterprise China-scale completeness: a friendly daybreak blue, soft 6px corners, and a component for every conceivable admin screen.

---

## Summary

The de facto enterprise React design system in Asia.

_Confidence: high. Values are drawn from well-documented public token references._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Primary / Daybreak Blue | `#1677ff` | `--ant-color-primary` | Primary actions and links (v5 default) |
| Success | `#52c41a` | `--ant-color-success` | Success states |
| Warning | `#faad14` | `--ant-color-warning` | Warnings |
| Error | `#ff4d4f` | `--ant-color-error` | Errors and destructive actions |
| Background | `#ffffff` | `--ant-color-bg-container` | Container background |
| Layout Background | `#f5f5f5` | `--ant-color-bg-layout` | Page background behind containers |
| Border | `#d9d9d9` | `--ant-color-border` | Component borders |
| Text | `rgba(0,0,0,0.88)` | `--ant-color-text` | Primary text (alpha over background) |
| Text Secondary | `rgba(0,0,0,0.65)` | `--ant-color-text-secondary` | Secondary text |

## Typography

- **Body:** System stack — weights 400, 500, 600 — `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif`
- **Mono:** SFMono — weights 400 — `'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| heading-1 | `38px` | `46px` |
| heading-2 | `30px` | `38px` |
| heading-3 | `24px` | `32px` |
| heading-4 | `20px` | `28px` |
| base | `14px` | `22px` |
| small | `12px` | `20px` |

## Spacing

Base unit: `8px`

Scale: `4px` · `8px` · `12px` · `16px` · `24px` · `32px` · `48px`

## Corner radius

| Name | Value |
| --- | --- |
| small | `4px` |
| base | `6px` |
| large | `8px` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| 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)` |

## Motion

| Name | Value |
| --- | --- |
| duration-mid | `200ms` |
| duration-slow | `300ms` |
| ease-in-out | `cubic-bezier(0.645, 0.045, 0.355, 1)` |

## Quick start (CSS)

```css
/* Ant Design — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://ant.design/ */

:root {
  /* Color */
  --ant-color-primary: #1677ff; /* Primary actions and links (v5 default) */
  --ant-color-success: #52c41a; /* Success states */
  --ant-color-warning: #faad14; /* Warnings */
  --ant-color-error: #ff4d4f; /* Errors and destructive actions */
  --ant-color-bg-container: #ffffff; /* Container background */
  --ant-color-bg-layout: #f5f5f5; /* Page background behind containers */
  --ant-color-border: #d9d9d9; /* Component borders */

  /* Typography */
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  /* Type scale */
  --text-heading-1: 38px /* line-height 46px */;
  --text-heading-2: 30px /* line-height 38px */;
  --text-heading-3: 24px /* line-height 32px */;
  --text-heading-4: 20px /* line-height 28px */;
  --text-base: 14px /* line-height 22px */;
  --text-small: 12px /* line-height 20px */;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Radius */
  --radius-small: 4px;
  --radius-base: 6px;
  --radius-large: 8px;

  /* Elevation */
  --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);

  /* Motion */
  --motion-duration-mid: 200ms;
  --motion-duration-slow: 300ms;
  --motion-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
}
```

## Origin

Ant Design grew out of Ant Financial (now Ant Group) in 2015–2016 as a React component library for back-office and enterprise products. It became one of the most-installed React UI libraries in the world, especially across Chinese enterprise software.

## Governance

Ant Group design and engineering teams own the canonical library. Active community contributors. Major version releases (v4 → v5) are well-coordinated; v5 (2022+) introduced a CSS-in-JS engine and a token system.

## Known for

- Density and information richness — the default Ant aesthetic packs more functionality per pixel than Western design systems.
- Massive component coverage — Form, Table, Tree, Cascader, Mentions, and dozens more out of the box.
- First-class Form component with built-in validation, layouts, and field arrays.

## Underrated

- The ProComponents (Pro Form, Pro Table, Pro Layout) layer ships entire admin-page templates with one component.
- Ant Design Charts and Ant Design Pro give a complete admin starter that's more comprehensive than most public alternatives.

## Watch out for

- Visual identity is unmistakably Ant — defaults skew toward dense Chinese enterprise UI, which Western consumer products may need to retheme heavily.
- Bundle size — full Ant Design with all components is substantial. Tree-shaking and the v5 token-based theming help but still demand attention.

## Components worth studying

- **Form** — Schema-driven form with validation, dependent fields, and complex layouts.
- **Table** — Sortable, filterable, expandable, virtualized — covers most real enterprise needs.
- **Cascader** — Multi-level dropdown for hierarchical selection (region pickers, taxonomies).

## When to choose Ant Design

Pick Ant Design when you're building enterprise admin tools, internal dashboards, or back-office software where breadth of components and form handling matter more than brand differentiation. For consumer-facing or content-led products, look elsewhere.

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of Ant Design by Ant Group — The de facto enterprise React design system in Asia. Character: Enterprise China-scale completeness: a friendly daybreak blue, soft 6px corners, and a component for every conceivable admin screen. Use a primary colour near #1677ff, the typeface "System stack" (or a close equivalent), corner radius around 4px, a spacing rhythm on a 8px base. Lean into what it's known for: Density and information richness — the default Ant aesthetic packs more functionality per pixel than Western design systems. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official references

- [Ant Design docs](https://ant.design/)
- [Ant Design on GitHub](https://github.com/ant-design/ant-design)
- [Ant Design Pro](https://pro.ant.design/)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/ant-design) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._