# Ant Design (Ant Design)

> A design system that keeps enterprise web applications at low entropy through reusable components and page patterns. Its values — Natural, Certain, Meaningful and Growing — systematize tables, forms, hierarchy and state without reducing information density.

- IndexStyle No.546 — https://indexstyle.org/styles/ant-design
- Kind: Style · Family: Platform Screen Languages · Era: 2015–
- Mood: Technique, Trust
- What this family collects: Design languages written down for a platform and published, from the vendors that shipped an operating system to the governments that had no reason to hide rules paid for with public money, every one of them recognisable at a glance.

## Defining characteristics

- Dense tables set in small type and fine rules
- Blue primary actions with explicit semantic colors
- Consistent forms, pagination, trees and tables
- Readability achieved through alignment and repetition, not generous space

## Best used for

- Enterprise admin screens with many tables, forms, permissions and states
- Standardizing component behavior and exceptions in international products

## Composition recipe

- Typography & lettering: Keep body text compact and separate labels, values and help text through weight and color.
- Layout & structure: Set table and form columns first; show relationships through alignment rather than extra space.
- Material & texture: Start with white, fine borders and a blue primary action; hold every state color to one meaning.

## Colour

Read off the reference works below, so a direction rather than a fixed palette.

- Ground: #FFFFFF
- The colour it is remembered by: #1677FF
- Text and outlines: #1F1F1F

## What to avoid

A component catalog dropped onto a page can look orderly while leaving the actual workflow undesigned.

## Application checklist

Work through this before calling a piece an application of this style.

- [ ] Visible in the piece: Dense tables set in small type and fine rules
- [ ] Visible in the piece: Blue primary actions with explicit semantic colors
- [ ] Visible in the piece: Consistent forms, pagination, trees and tables
- [ ] Visible in the piece: Readability achieved through alignment and repetition, not generous space
- [ ] The layout follows: Set table and form columns first; show relationships through alignment rather than extra space.
- [ ] The lettering follows: Keep body text compact and separate labels, values and help text through weight and color.
- [ ] The material and surface follow: Start with white, fine borders and a blue primary action; hold every state color to one meaning.
- [ ] The colour relation holds: #FFFFFF as ground, #1677FF carrying the style, #1F1F1F for text and outlines
- [ ] At least one reference work below has been studied directly
- [ ] The caution above ("What to avoid") has been addressed

## Related styles

- **GitHub Primer (GitHub Primer)** — GitHub's design system for turning dense development workflows into shared rules for color, type, icons, spacing and components. It favors flow over decoration, keeping many states and actions in a small area without giving up accessibility or responsive behavior. → https://indexstyle.org/styles/github-primer
- **Fluent 2 (フルーエント2)** — Tokenizes color, type, spacing, radius and depth, deploying Solid, Acrylic, Mica and Smoke materials by role across Microsoft products. → https://indexstyle.org/styles/fluent-design

## Compose it with something else

The dictionary can put this entry in a structural role and another in an accent role, and report where the two fight: https://indexstyle.org/compose?ids=ant-design+github-primer

## Further study

- Natural, Certain, Meaningful and Growing
- Enterprise-class component patterns
- Theming and internationalization

## Reference works

- Ant Design — Design Values — https://ant.design/docs/spec/values/

## Source of record

- Ant Design — Design Values — https://ant.design/docs/spec/values/

## Machine surfaces

- JSON: https://indexstyle.org/api/styles/ant-design
- Image-generation prompt (legally clean): https://indexstyle.org/styles/ant-design/prompt.txt
- MCP: https://indexstyle.org/mcp (tools: search_styles, get_style, compare_styles, compose_styles, find_related_styles; prompts: image-prompt, apply-style)