---
version: alpha
name: Ant Design Enterprise Console Interface
description: "An enterprise-console interface inspired by Ant Design's design language, React component system, design values, 24-column grid, 8px spacing, restrained typography, blue action language, data tables, forms, filters, cards, drawers, modals, notifications, token customization, and Ant Motion transition principles for B2B SaaS, finance operations, CRM, admin, data management, and internal platforms."

colors:
  primary: "#1677ff"
  primary-hover: "#0958d9"
  on-primary: "#ffffff"
  canvas: "#f5f5f5"
  surface: "#ffffff"
  surface-card: "#ffffff"
  surface-soft: "#fafafa"
  surface-inset: "#f0f0f0"
  surface-selected: "#e6f4ff"
  ink: "#000000"
  heading: "#000000"
  body: "#000000"
  muted: "#595959"
  secondary: "#8c8c8c"
  disabled: "#bfbfbf"
  hairline: "#d9d9d9"
  hairline-strong: "#bfbfbf"
  focus: "#1677ff"
  success: "#52c41a"
  success-surface: "#f6ffed"
  warning: "#faad14"
  warning-surface: "#fffbe6"
  danger: "#ff4d4f"
  danger-surface: "#fff2f0"
  info: "#1677ff"
  info-surface: "#e6f4ff"
  inverse-canvas: "#141414"
  inverse-surface: "#1f1f1f"
  inverse-card: "#262626"
  inverse-ink: "#ffffff"
  inverse-body: "#d9d9d9"
  inverse-hairline: "#424242"

typography:
  display-xl:
    fontFamily: "-apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 44px
    fontWeight: 600
    lineHeight: 1.14
    letterSpacing: 0
  heading-lg:
    fontFamily: "-apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 30px
    fontWeight: 600
    lineHeight: 1.22
    letterSpacing: 0
  heading-md:
    fontFamily: "-apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0
  body:
    fontFamily: "-apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5715
    letterSpacing: 0
  body-sm:
    fontFamily: "-apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  label:
    fontFamily: "-apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.45
    letterSpacing: 0
  mono:
    fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, Liberation Mono, monospace"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 6px
  lg: 8px
  pill: 9999px

spacing:
  base: 8px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 48px
  section: 64px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 5px 16px
  button-default:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.body}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 5px 16px
    borderColor: "{colors.hairline}"
  card:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.body}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.hairline}"
  table-row:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.body}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 16px
    borderColor: "{colors.hairline}"
  form-field:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.body}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 5px 11px
    borderColor: "{colors.hairline}"
  tag:
    backgroundColor: "{colors.info-surface}"
    textColor: "{colors.primary}"
    typography: "{typography.label}"
    rounded: "{rounded.sm}"
    padding: 1px 7px

layout:
  shell: "Enterprise console with top navigation, collapsible side menu, breadcrumb, page header, filter form, metric cards, action toolbar, dense table, drawer/detail panel, modal confirmation, and notification feedback."
  grid: "Use the Ant 24-column model with an 8px base. A common 1440px desktop layout uses a fixed side nav and a content width near 1168px with fixed gutters."
  density: "High information density with restrained hierarchy. Base text is 14/22, page cards are compact, and the table is the primary working surface."
  interaction: "Support sorting, filtering, pagination, selection, batch actions, form validation, loading, empty, error, drawer, modal, and contextual transition states."

guidance:
  do:
    - "Use the system for enterprise products with clear data objects, permissions, filters, and repeatable workflows."
    - "Build around table, form, filter, pagination, drawer, modal, notification, and batch-action patterns."
    - "Keep typography restrained: usually 3-5 sizes per product surface."
    - "Use Seed, Map, and Alias token thinking when customizing theme values."
    - "Keep motion contextual: preserve spatial relation, reveal changes, and avoid distracting flourish."
  dont:
    - "Do not make it a generic blue SaaS landing page."
    - "Do not replace structured data with decorative cards when comparison, sorting, or batch action matters."
    - "Do not overload every card with icons, shadows, and gradients."
    - "Do not use Ant Group or Alipay brand assets unless the product owns those rights."

caseStudy:
  source: "Ant Design design language, React component system, design values, layout, color, typography, theme tokens, and motion guidance"
  urls:
    - "https://ant.design/"
    - "https://ant.design/docs/spec/introduce/"
    - "https://ant.design/docs/spec/values/"
    - "https://ant.design/docs/spec/colors/"
    - "https://ant.design/docs/spec/layout/"
    - "https://ant.design/docs/spec/font/"
    - "https://ant.design/docs/react/customize-theme/"
    - "https://ant.design/components/table/"
    - "https://motion.ant.design/language/transition"
    - "https://github.com/ant-design/ant-design"
    - "https://github.com/ant-design/ant-design/blob/master/LICENSE"
  analysis: "Ant Design describes itself as an enterprise-class UI design language and React UI library. Its public guidance centers on Natural, Certain, Meaningful, and Growing values, a two-level color model, a 24-grid layout based on an 8px unit, restrained 14/22 base typography, and theme token derivation through Seed, Map, and Alias tokens. Its components and table patterns make it especially strong for enterprise data workflows. The reusable lesson is operational certainty: users should see scope, filters, table state, validation, and next action before any decorative expression."
---

# Ant Design Enterprise Console Interface

Use this system for B2B SaaS, financial operations, CRM, ERP, admin consoles, permissions management, logistics operations, data management, internal platforms, and workflow tools where users compare, filter, edit, approve, and export structured data.

The posture is certain, productive, and restrained. It should feel like a mature enterprise console: dense enough for repeated work, explicit enough for training and audit, and flexible enough for product-specific theming.

## Overview

Ant Design Enterprise Console abstracts Ant Design's reusable product language into an Interface resource. It does not reproduce Ant Group or Alipay branding. It captures the durable system traits: 8px grid, 24-column layout, 14px base text, blue action semantics, tables, forms, filters, cards, drawers, modals, notifications, design tokens, and contextual motion.

Use it when the core work object is a record, transaction, task, permission, data row, policy, order, user, or workflow state. Avoid it when the brief asks for immersive brand storytelling, creative tool chrome, or consumer editorial layout.

## Colors

### Brand & Accent

Use `primary` #1677ff for primary actions, links, selected navigation, focus, active filters, and informational emphasis. It should signal action and certainty, not decorative energy.

### Surface

Use `canvas` #f5f5f5 for page background, `surface-card` #ffffff for cards and forms, `surface-soft` #fafafa for table headers and grouped containers, and `surface-inset` #f0f0f0 for disabled or nested regions.

### Text

Use high-opacity black for headings and body text in light mode. Use `muted` #595959 for secondary content, `secondary` #8c8c8c for hints, and `disabled` #bfbfbf for unavailable controls. Keep table values readable at 14px.

### Hairlines & Borders

Use `hairline` #d9d9d9 for inputs, table rows, cards, and dividers. Use `hairline-strong` #bfbfbf for focused or selected structures. Keep borders consistent; avoid inconsistent heavy shadows.

### Semantic

Use success, warning, danger, and info for real states: approved, pending, failed, blocked, deleted, overdue, or informational. Pair every status with text and, when needed, an action or explanation.

## Typography

### Font Family

Use the Ant system stack: platform UI fonts with Chinese fallbacks such as PingFang SC, Hiragino Sans GB, and Microsoft YaHei. This keeps enterprise products multilingual and stable.

### Hierarchy

Base UI text is 14px with a 22px line-height. Use restraint: most enterprise screens need only 3-5 font sizes. Use 20px for card or section titles, 30px for page-level titles, and 44px only in specimen or overview contexts.

### Principles

Keep titles and labels direct. Prefer nouns users recognize: Account, Order, Policy, Owner, Status, Region, Risk, Updated, Assignee. Do not use poetic copy in operational flows.

### Note on Font Substitutes

Inter or system UI can be used for non-Chinese products, but keep the Ant sizing and line-height logic. Do not introduce narrow display fonts or negative tracking.

## Layout

### Spacing System

Use 8px as the base grid unit. Use 8px for small gaps, 16px for normal grouping, 24px for card padding and page rhythm, and 32-48px for major separations. In proximity decisions, use 8, 16, and 24px to separate information hierarchy.

### Grid & Container

Use a 24-column grid for page structure. Desktop enterprise pages commonly combine a fixed side navigation with a content area around 1168px. Keep gutters consistent so design and engineering can align.

### Whitespace Philosophy

Whitespace supports scanning, not atmosphere. Filter forms, action toolbars, and tables should align to one visual starting point. Put the submit or primary action at the end of the user's view path.

## Elevation & Depth

Use minimal elevation. Cards, dropdowns, drawers, popovers, and modals can use shadow, but table pages and forms should rely primarily on spacing, borders, and grouping.

## Shapes

Use 4-6px radii for inputs and buttons, 8px for cards, and pill radii only for compact tags or counters. The shape language is stable and utility-first; avoid large rounded cards that make enterprise tools feel like marketing templates.

## Components

### Buttons

Primary buttons should be used for the one main task: Create, Submit, Save, Approve, Export, or Run. Default buttons handle secondary commands. Dangerous actions require confirmation near the affected object.

### Cards & Containers

Cards summarize metrics or group settings. Do not use cards as the default replacement for data tables. If users must compare, sort, filter, select, or batch-edit items, use a table.

### Inputs & Forms

Use clear labels, validation feedback, help text, disabled state, loading state, and predictable submit placement. For filter forms, keep frequently used fields visible and advanced fields collapsible.

### Navigation

Use top navigation for product areas, side navigation for feature depth, breadcrumb for hierarchy, and tabs for same-level views. Highlight selected navigation with text, background, and accent, not color alone.

### Signature Components

The signature module is a filterable table with action toolbar, status tags, pagination, row selection, and drawer detail. This is the core of Ant Design-style enterprise productivity.

## Do's and Don'ts

Do show the data object, filters, table state, scope, and next action in the first viewport. Do use 8px spacing and 24-grid logic. Do use forms, tables, drawers, modals, tags, notifications, and batch actions as first-class patterns. Do treat theme customization as Seed, Map, and Alias token derivation.

Do not make a generic blue landing page. Do not hide important table operations behind hover-only icons. Do not replace data workflows with decorative cards. Do not use Ant Group or Alipay assets without rights.

## Responsive Behavior

### Breakpoints

At desktop sizes, keep side navigation, filters, table, and drawer patterns available. Around tablet widths, collapse side navigation and allow filter forms to stack. On mobile, prioritize searchable lists and detail pages over full dense tables.

### Touch Targets

Keep desktop controls compact but accessible. On touch surfaces, increase button, row, and input height while preserving information hierarchy.

### Collapsing Strategy

Collapse optional filter fields and secondary metric cards first. Preserve search, primary filters, table/list content, selected state, and primary action.

### Image Behavior

Enterprise console pages should not depend on decorative imagery. Use icons only when they clarify status, object type, or action.

## Iteration Guide

Start by naming the data object and primary workflow. Define the columns, filters, row actions, bulk actions, validation, empty states, loading states, and error states. Map product theme through Seed, Map, and Alias token thinking. Add motion only to preserve context when drawers, modals, tabs, or list changes occur.

## Known Gaps

This resource abstracts public Ant Design guidance and open-source components. It does not include proprietary Ant Group product patterns, private design files, Alipay branding, or non-public implementation decisions. Verify current component APIs, theme token names, and MIT license obligations before using production Ant Design code.