Ant Design

Overview

Ant Design is an enterprise-class design system that bridges the gap between AI-assisted workflows and human-centered interface design. It serves product teams, developers, and designers building scalable React applications with a philosophy of 'beauty meets intelligence'—where visual clarity enables rapid decision-making and component reusability accelerates time-to-market. The aesthetic is 'Intelligent Minimalism': a clean, light-dominant palette (white #ffffff surfaces, deep black #000000e0 text) punctuated by a vivid primary blue (#1677ff) that signals actionability and trust. The system embraces a 12-column grid, 8px unit spacing, and a carefully calibrated shadow hierarchy (0 1px 2px for subtle depth, 0 16px 40px for elevated modals) that creates visual breathing room without sacrificing information density.

The brand voice is precise, optimistic, and technically grounded. Ant Design speaks to builders—people who value efficiency, consistency, and the ability to customize without compromise. The tone avoids marketing hyperbole; instead, it uses concrete language: 'Rich components,' 'Flexible theme customization,' 'AI assistant ready to help.' Example sentence in brand voice: 'Getting Started with Ant Design gives you 50+ production-ready components and a theme engine that adapts to your brand in minutes.'

Colors

The color system is anchored by a Material 3-inspired surface stack and a vibrant primary accent. Primary (#1677ff) is the signature interaction color—used on all CTAs ('Getting Started' button), focus states, active navigation, and brand-critical UI elements. It conveys trust and urgency without aggression. The primary container (#e6f4ff) provides a soft background for informational contexts, while on-primary-container (#0958d9) ensures sufficient contrast for text layered over it. Secondary green (#52c41a) and tertiary magenta (#eb2f96) serve as status indicators and accent highlights; they appear in badges, tags, and success/warning states. The surface stack progresses from white (#ffffff) at the brightest level through carefully graded grays (surface-container-low #fafafa, surface-cont

Typography

The type system uses AlibabaSans (a custom, humanist sans-serif with weights 300–700) for headlines, titles, and labels, paired with the system font stack (-apple-system, Segoe UI, Roboto) for body text. This pairing creates visual hierarchy: AlibabaSans's geometric warmth draws attention to key information, while the system stack ensures fast rendering and accessibility on all platforms. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero headlines; headline-lg (40px, 600 weight) for section titles; headline-md (28px, 600 weight) for subsections; title-lg (20px, 600 weight) for card headers. Body text uses 16px (body-md) or 18px (body-lg) at 400 weight with 24px or 28px line-height respectively, ensuring comfortable reading at arm's length. Labels (14px label-md, 12px

Layout

The layout uses a 12-column grid with a max-width of 1280px, centered on the viewport with symmetric gutters of 24px. The spacing scale is semantic: xs (4px) for micro-adjustments, sm (12px) for component internal padding, md (24px) for section separation and card padding, lg (40px) for major section breaks, and xl (64px) for hero/footer spacing. The hero section uses lg spacing above and below to create visual breathing room; card grids use md gutter between items. Container padding is consistently 24px on desktop, reducing to 12px on tablets and 8px on mobile to preserve readability. White-space is treated as a first-class design element—never fill empty space with decoration. The grid is fluid at breakpoints (1200px, 992px, 768px, 576px) to ensure content reflows gracefully without jarr

Elevation & Depth

Depth is conveyed through a three-tier shadow system that avoids the flat-design trap while maintaining clarity. Level 1 (Base/Cards): box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), used on standard cards and list items to subtly separate them from the surface. Level 2 (Elevated/Modals): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), applied to popovers, dropdowns, and secondary modals to indicate they float above the page. Level 3 (Top-level/Dialogs): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), reserved for full-page modals and critical overlays. Shadows use a soft, diffuse blur (12px–40px) to mimi

Shapes

The shape philosophy is 'Geometric Clarity'—rounded corners are used sparingly and purposefully to soften hard edges without introducing visual noise. Buttons and inputs use 8px (1rem) border-radius, a size that feels modern and approachable without appearing cartoonish. Cards and containers use 6px (0.75rem) for a slightly tighter radius that emphasizes structure. Small UI elements (badges, tags, small buttons) use 4px (0.25rem) to maintain visual weight consistency. Full-radius (9999px) is reserved for pill-shaped buttons and circular avatars. The rationale: 8px is the sweet spot between ind

Components

Action Elements Buttons are the primary interaction affordance. Button-primary uses {colors.primary} (#1677ff) background, {colors.on-primary} (white) text, 40px height, 0 15px padding, and 8px border-radius. On hover, the background shifts to #0958d9 (a darker blue from the primary family) with a 200ms ease transition. Button-secondary mirrors the primary structure but uses a transparent background, {colors.on-surface} text, and a 1px border at {colors.outline}; on hover, it gains a {colors.surface-container-low} background and the text color shifts to {colors.primary}. Both button variants use {typography.label-md} (14px, 600 weight, AlibabaSans) for text. Avoid using more than two button styles in a single view; reserve secondary buttons for non-critical actions.

Containers & S

Do's and Don'ts

**Do**

• Do use {colors.primary} (#1677ff) exclusively for primary CTAs and focus states—never for decorative elements or backgrounds.
• Do maintain 24px (md spacing) between major sections and 12px (sm spacing) between related components within a section.
• Do apply {typography.label-md} (14px, 600 weight) to all button text and use AlibabaSans for headlines to establish visual hierarchy.
• Do use the three-tier shadow system (sm/md/lg elevation) to convey depth; never stack multiple shadows on a single element.
• Do test all interactive elements (buttons, inputs, cards) with the 200ms ease transition to ensure smooth, predictable feedback.

**Don't**

• Don't use secondary or tertiary colors as primary CTAs—they dilute the brand signal and confuse users about action priority.
• Don't apply border-radius greater than 8px to buttons or inputs; it reads as playful rather than professional.
• Don't mix AlibabaSans and system fonts within a single headline or title; pick one and stick with it for consistency.
• Don't use shadows darker than rgba(0, 0, 0, 0.12) or blur radii greater than 40px; they obscure content and feel dated.
• Don't apply color transitions longer than 200ms on interactive elements; slower transitions feel sluggish and reduce perceived responsiveness.