Ant Design 3.0: The Story Behind the Design System and Its Principles

On January 6, 2018 the inaugural Ant Financial Experience Technology Conference (SEE Conf) was held in Hangzhou, gathering over 500 on‑site attendees and 1,800 online viewers. The conference introduced Ant Design 3.0, marking the evolution of Ant Design from a UI component library to an enterprise‑level design system.

The design system is built on three core pillars: Efficiency (design assets), Consistency (design language), and Better UX (experience strategy). A dedicated System Operation Team of engineers and designers maintains these pillars while collaborating with product teams.

Design assets combine UI components, documentation, and resource packs, following an ETCG (Examples, Templates, Components, Global styles) abstraction inspired by Atomic Design and GE Predix. The design language introduces the new value of "Nature", grounding visual decisions in mathematical and physical principles.

Typography was re‑examined: the primary font size was increased from 12px to 14px based on visual ergonomics and display PPI statistics, and a mathematically derived type scale (using the natural constant e and a 5‑step musical interval) produces harmonious font sizes and line heights that follow an even‑number and easy‑memory rule.

Layout adopts a double‑array system inspired by Le Corbusier’s Modulor and Fibonacci ratios, while the color system selects 12 primary hues and generates a full palette through 3‑D lighting simulations, implemented via code to allow designers to derive natural color variations from any base hue.

Extensive testing across more than 200 pages confirmed that the new type scale, layout, and color palette improve visual harmony, design decision confidence, and consistency across enterprise products.

Overall, Ant Design 3.0 demonstrates how a mathematically informed design system can enhance efficiency, controllability, and user experience for large‑scale enterprise applications.