design language & principles

8 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Ant Design version and scope

Ant Design v6 is the current major version. This design document describes the default light theme. Major releases signal an overhaul of the design language; minor and patch releases keep the document stable. Refer to CHANGELOG.en-US.md for per-release token drift within a major version.

Four core values of Ant Design

Ant Design follows four core values: Natural (interface follows established conventions, preferring existing patterns from operating systems and prior enterprise software over novel inventions), Certain (users always know what state they're in, what inputs did, and what the next step is, with explicit and consistent hover, focus, loading, and error states), Meaningful (visual emphasis reserved for action, decoration that does not communicate is removed), and Growing (the system scales from small forms to dense tables to multi-tenant admin consoles without losing coherence).

Design do's: use values as tie-breaker

Do use the four design values as a tie-breaker. When two approaches conflict, the one that produces a more certain, more legible state for the user wins.

Accessibility contrast note

Some brand-color pairs in Ant Design's default visual tokens, especially white text on #1677FF and primary text on pale selected backgrounds, are below WCAG AA's 4.5:1 contrast threshold for small text. For strict accessibility targets, darken colorPrimary through ConfigProvider or use component-specific token overrides rather than inventing one-off colors.

prefers-reduced-motion media query support for Button Checkbox Radio Switch Segmented

Button, Checkbox, Radio, Switch, and Segmented now support prefers-reduced-motion media query to disable transitions for improved accessibility. This was added in version 6.3.1 with PR #56902.

DESIGN.md file published for AI design tools

Version 6.5.0 added a DESIGN.md file to Ant Design and published it to ant.design/design.md to help AI design tools understand the visual language, component patterns and theme tokens.

Ant Design is an enterprise-grade UI design language and React component library

Ant Design is a set of enterprise-grade UI design language and React component library extracted from the interaction language and visual style of enterprise-level mid-to-back office products.

Ant Design key features

Ant Design provides: 1) refined interactive language and visual style from enterprise mid-to-back office products; 2) high-quality React components ready to use out-of-the-box; 3) full TypeScript development with complete type definitions; 4) application development framework and design tool suite; 5) support for dozens of internationalization languages; 6) theme customization capability based on CSS-in-JS.

Give your agent this brain