ant-design-enterprise-system

name	Ant Design Enterprise System
description	Ant Design by Ant Group provides 60+ React components optimized for enterprise dashboards, admin panels, and data-heavy applications. Use when building internal tools, CRM interfaces, analytics dashboards, or apps needing form/table excellence and pro components. Four design values: Natural, Certain, Meaningful, Growing.

Ant Design Enterprise System

What Is Ant Design?

Ant Design is a comprehensive React component library from Ant Group emphasizing enterprise product excellence. It's built for teams shipping data-dense interfaces: admin panels, dashboards, CRM tools, monitoring systems. With 60+ production-grade components and pro/mobile variants, Ant Design accelerates development while maintaining consistency. Its four design values—Natural (intuitive), Certain (predictable), Meaningful (purposeful), Growing (adaptive)—guide every decision.

Core Design Principles

Natural Through 8px Grid: All spacing, sizes, and measurements derive from 8px. A button is 32px tall (4 × 8px), padding is 16px (2 × 8px). This creates mathematical harmony—components feel designed, not haphazard. When spacing, think in multiples: 8, 16, 24, 32, 40, 48, 56, 64.

Certain Through Consistency: Base font size is 14px with 22px line height across all text. This tight, legible baseline ensures forms and tables remain readable at small sizes. Never deviate—consistency builds user confidence in complex interfaces.

Meaningful Through Density: Enterprise users scan tables with 100+ rows. Ant Design's comfortable-but-efficient spacing (12px padding in table cells) respects dense data while maintaining scannability. Use color sparingly—status badges and alerts pop precisely because most UI is neutral.

Growing Through Tokens: All colors, sizes, spacing use token system. Change @primary-color: #1890ff and entire library updates. This allows whitelabeling, theming, and evolution without component refactors.

Visual Language

Color System

• Primary: #1890FF (actions, links, selections)
• Success: #52C41A (confirmations, valid states)
• Warning: #FAAD14 (caution, pending states)
• Error: #F5222D (failures, validation errors)
• Info: #1890FF (informational messages)
• Text Primary: #000000 (headings, body text)
• Text Secondary: #8C8C8C (helper text, disabled)
• Border: #D9D9D9 (dividers, input borders)
• Background: #FAFAFA (surface, sections)

Typography

• Font: Roboto (web), -apple-system (Apple), system-ui (fallback)
• Headings:
  • H1: 38px / 46px line height / 500 weight
  • H2: 30px / 38px line height / 500 weight
  • H3: 24px / 32px line height / 500 weight
  • H4: 20px / 28px line height / 500 weight
• Body: 14px / 22px line height / 400 weight (baseline standard)
• Small: 12px / 20px line height / 400 weight (labels, helper text)

Spacing

• Button padding: 4px 15px (32px height)
• Card padding: 24px (top-level), 16px (nested)
• Table cell padding: 16px (vertical) × 12px (horizontal)
• Form label margin-bottom: 8px
• Component gap (flex): 8px default, 16px for sections

Shadows (Elevation)

• Level 0: None (flat)
• Level 1: 0 2px 8px rgba(0, 0, 0, 0.06) — cards, hovered elements
• Level 2: 0 4px 12px rgba(0, 0, 0, 0.10) — floating panels, dropdowns
• Level 3: 0 8px 24px rgba(0, 0, 0, 0.15) — modals, popups

Border Radius

• Compact: 2px (inputs, small buttons)
• Standard: 4px (cards, medium buttons, default)
• Large: 6px (large cards, panels)
• Full: 50% (circular avatars, badges)

Component Patterns

Form Field (Input + Label + Validation)

// Ant Design Form pattern
import { Form, Input, Button, message } from 'antd';

function LoginForm() {
  const [form] = Form.useForm();

  const onFinish = (values) => {
    message.success('Login successful!');
  };

  return (
    <Form
      form={form}
      layout="vertical"
      onFinish={onFinish}
      autoComplete="off"
    >
      <Form.Item
        label="Email"
        name="email"
        rules={[
          { required: true, message: 'Email is required' },
          { type: 'email', message: 'Invalid email' },
        ]}
      >
        <Input
          placeholder="[e-mail]"
          size="large"
          prefix={<MailOutlined />}
        />
      </Form.Item>

      <Form.Item
        label="Password"
        name="password"
        rules={[
          { required: true, message: 'Password is required' },
          { min: 6, message: 'Min 6 characters' },
        ]}
      >
        <Input.Password
          placeholder="Enter password"
          size="large"
        />
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit" block size="large">
          Sign In
        </Button>
      </Form.Item>
    </Form>
  );
}

<style>
/* CSS-in-JS equivalent */
const formStyles = {
  '.ant-form-item': {
    marginBottom: '24px',
  },
  '.ant-form-item-label': {
    marginBottom: '8px',
  },
  '.ant-form-item-label > label': {
    fontSize: '14px',
    fontWeight: '500',
    color: '#000000',
  },
  '.ant-input': {
    padding: '4px 11px',
    height: '32px',
    fontSize: '14px',
    border: '1px solid #d9d9d9',
    borderRadius: '2px',
  },
  '.ant-input:focus': {
    borderColor: '#1890ff',
    boxShadow: '0 0 0 2px rgba(24, 144, 255, 0.2)',
  },
};
</style>

Data Table with Status Indicators

import { Table, Tag, Button, Space } from 'antd';

function UserTable() {
  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      width: '20%',
    },
    {
      title: 'Email',
      dataIndex: 'email',
      key: 'email',
      width: '30%',
    },
    {
      title: 'Status',
      dataIndex: 'status',
      key: 'status',
      render: (status) => {
        const colors = {
          active: 'green',
          inactive: 'red',
          pending: 'orange',
        };
        return <Tag color={colors[status]}>{status.toUpperCase()}</Tag>;
      },
    },
    {
      title: 'Actions',
      key: 'actions',
      render: (_, record) => (
        <Space size="small">
          <Button type="link" size="small">Edit</Button>
          <Button type="link" danger size="small">Delete</Button>
        </Space>
      ),
    },
  ];

  const data = [
    { key: 1, name: 'John Doe', email: '[e-mail]', status: 'active' },
    { key: 2, name: 'Jane Smith', email: '[e-mail]', status: 'pending' },
  ];

  return (
    <Table
      columns={columns}
      dataSource={data}
      pagination={{ pageSize: 10 }}
      bordered
      size="middle"
    />
  );
}

Code Generation Guidance

Ant Design Principles in Code:

1. Always use the form wrapper (Form.Item) for form fields—it handles layout, validation messaging, and label alignment automatically.

2. Leverage the layout prop: layout="vertical" for mobile, layout="horizontal" for wide forms. Ant Design auto-adapts label positioning.

3. Use Space component for gaps: Never use margin or gap directly. Wrap elements in <Space size="small|middle|large"> for consistent spacing (8px, 16px, 24px).

4. Color for meaning, not decoration: Use danger prop for destructive actions (<Button danger>), type="primary" for main CTAs. This ensures semantic HTML and accessibility.

5. Table density patterns:

   // Compact view for large datasets
   <Table size="small" pagination={{ pageSize: 50 }} />
   
   // Standard view (14px text, 22px line height)
   <Table size="middle" pagination={{ pageSize: 10 }} />
   
   // Spacious view for readability focus
   <Table size="large" pagination={{ pageSize: 5 }} />
   

6. Icon sizing: 14px for inline text, 16px for buttons, 24px for navigation. Ant Design Icons scale proportionally.

Accessibility Notes

• Form validation: Always use Form.Item rules prop—it provides built-in error messaging with ARIA live regions.
• Status indicators: Never rely on color alone. Use <Tag> with text labels for status states.
• Keyboard navigation: Ant components are fully keyboard-accessible by default. Test with Tab/Enter/Arrow keys.
• Contrast: Primary blue (#1890FF) on white meets WCAG AA. Text colors default to #000000 (7:1 ratio on white).
• Reduced motion: Ant Design respects prefers-reduced-motion. Animations auto-disable for accessibility-conscious users.

Examples

Example 1: Admin Dashboard Summary Card

Input: Create a dashboard card showing metrics (active users, revenue, conversion rate) with Ant Design styling.

Output:

import { Card, Row, Col, Statistic, Progress } from 'antd';
import { UserOutlined, DollarOutlined, RiseOutlined } from '@ant-design/icons';

function MetricsCard() {
  return (
    <Row gutter={[16, 16]}>
      <Col xs={24} sm={12} lg={6}>
        <Card bordered={false} style={{ boxShadow: '0 2px 8px rgba(0,0,0,0.06)' }}>
          <Statistic
            title="Active Users"
            value={12043}
            prefix={<UserOutlined />}
            valueStyle={{ color: '#1890FF' }}
          />
          <Progress percent={75} size="small" showInfo={false} />
        </Card>
      </Col>

      <Col xs={24} sm={12} lg={6}>
        <Card bordered={false}>
          <Statistic
            title="Revenue"
            value={245823}
            prefix={<DollarOutlined />}
            precision={0}
            valueStyle={{ color: '#52C41A' }}
          />
          <div style={{ marginTop: '8px', fontSize: '12px', color: '#8C8C8C' }}>
            +18% vs last month
          </div>
        </Card>
      </Col>

      <Col xs={24} sm={12} lg={6}>
        <Card bordered={false}>
          <Statistic
            title="Conversion Rate"
            value={8.5}
            suffix="%"
            prefix={<RiseOutlined style={{ color: '#FAAD14' }} />}
          />
        </Card>
      </Col>
    </Row>
  );
}

Example 2: Modal Dialog with Confirmation

Input: Build a delete confirmation modal using Ant Design with cancel and delete actions.

Output:

import { Modal, Button, message } from 'antd';
import { DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import { useState } from 'react';

function DeleteUserModal() {
  const [visible, setVisible] = useState(false);
  const [loading, setLoading] = useState(false);

  const showModal = () => setVisible(true);

  const handleDelete = async () => {
    setLoading(true);
    try {
      // Simulate API call
      await new Promise(resolve => setTimeout(resolve, 1000));
      message.success('User deleted successfully');
      setVisible(false);
    } catch (error) {
      message.error('Failed to delete user');
    } finally {
      setLoading(false);
    }
  };

  return (
    <>
      <Button danger icon={<DeleteOutlined />} onClick={showModal}>
        Delete User
      </Button>

      <Modal
        title="Delete User"
        visible={visible}
        onCancel={() => setVisible(false)}
        footer={[
          <Button key="cancel" onClick={() => setVisible(false)}>
            Cancel
          </Button>,
          <Button
            key="delete"
            type="primary"
            danger
            loading={loading}
            onClick={handleDelete}
          >
            Delete
          </Button>,
        ]}
      >
        <div style={{ display: 'flex', gap: '12px', alignItems: 'flex-start' }}>
          <ExclamationCircleOutlined style={{ color: '#FAAD14', fontSize: '18px' }} />
          <div>
            <p style={{ margin: '0 0 8px 0', fontWeight: '500' }}>
              Permanently delete user "John Doe"?
            </p>
            <p style={{ margin: '0', color: '#8C8C8C', fontSize: '14px' }}>
              This action cannot be undone. All associated data will be removed.
            </p>
          </div>
        </div>
      </Modal>
    </>
  );
}

---

When to use Ant Design: Enterprise dashboards, admin panels, internal tools, CRM systems, data-heavy applications. Also great: startups needing rapid prototyping with professional components. Avoid: consumer apps (too enterprise-looking), design-lead products (limited customization), simple landing pages (overkill).