Ant Design
Enterprise-class UI design language and React UI library
Color Palette
Typography — Inter
Enterprise Application
Design Language
Component Library
Data Dashboard
Form Section
Table Column Header
Ant Design is a design system for enterprise-level products. Create an efficient and enjoyable work experience with a set of high-quality React components.
Secondary description text · 12px
Buttons
Primary
Solid #1677FF background, white text, 6px radius, subtle shadow
Default
White background with #D9D9D9 border
Dashed
Dashed border for upload/add actions
Link
Text-only link button in primary blue
Form Inputs
Badges & Tags
Surfaces & Cards
Default Card
White card with light border and 8px radius. Standard container for content blocks.
Info Alert
Light blue background for informational messages.
Layout Section
Gray background for page sections and sidebars.
Table Header
Subtle gray header row for data tables.
Border Radius Scale
4px
6px
8px
12px
pill
Component Example
Enterprise Ready
Battle-tested components for complex business applications.
Data Heavy
Tables, forms, and filters designed for dense information.
Internationalized
Built-in i18n and RTL support for global products.
Design Tokens
| Token | Value | Usage |
|---|---|---|
colorPrimary | #1677FF | Brand primary |
colorSuccess | #52C41A | Success feedback |
colorWarning | #FAAD14 | Warning feedback |
colorError | #FF4D4F | Error feedback |
colorText | rgba(0,0,0,0.88) | Primary text |
colorBorder | #D9D9D9 | Default borders |
borderRadius | 6px | Default radius |