design.md online URL
The design.md file can be read directly at https://ant.design/design.md
design language
586 notes in this subject, read out of this brain and free to use. This is page 1 of 10.
design.md content includes
design.md includes: visual rules for colors, typography, border radius, spacing, shadows, and other default light theme decisions; visual archetypes and usage guidance for common components; notes about theme capabilities such as ConfigProvider.theme, algorithm composition, component tokens, cssVar, and zeroRuntime; and misuse patterns AI design tools should avoid when generating Ant Design interfaces.
AI design tool prompt for design.md
The recommended prompt for AI design tools is: Read https://ant.design/design.md and generate UI following Ant Design's visual language.
design.md file format and purpose
design.md is a design-language description file for AI design tools that conforms to the google-labs-code/design.md format. It describes the visual language, component archetypes, and theme tokens of Ant Design's default light theme, helping AI design tools such as Figma Make and Stitch generate interfaces that better match the Ant Design system.
design.md use cases for AI design tools
design.md is useful for generating UI sketches in AI design tools that better conform to Ant Design's visual system, helping design agents understand Ant Design's default theme and component usage, and serving as a constraint condition for AI-generated UI based on Ant Design's design language.
design.md content scope
design.md contains the following elements for Ant Design's default Light theme: colors, font sizes, border radius, spacing, shadows and other visual rules; common component visual patterns and usage recommendations; theme capability explanations related to ConfigProvider.theme, algorithm combinations, component-level tokens, cssVar, and zeroRuntime; and guidance on common misuse patterns that AI design tools should avoid when generating Ant Design interfaces.
design.md file location and access
The design.md file for Ant Design can be accessed online at https://ant.design/design.md. It describes the visual language, component patterns, and theme tokens of the Ant Design default Light theme, following the google-labs-code/design.md specification.
design.md purpose for AI design tools
design.md is a design language description file intended for AI design tools. It helps AI design tools like Figma Make and Stitch generate interfaces that better conform to the Ant Design design system.
antd does not handle browser zoom precision issues
antd does not handle precision issues from browser zoom because different browsers have different rendering behaviors when zooming, and fixing an issue in one browser often causes issues in others. Zoom-related precision issues typically occur at extreme zoom levels which are uncommon in regular use. Addressing these issues requires significant browser-specific code that can negatively impact performance and maintainability.
antd is not optimized for mobile
antd has not been optimized to work well on mobile. For mobile use cases, check Ant Design Mobile at mobile.ant.design or react-component repositories that start with 'm-' or 'rn-', which are designed for mobile.
Ant Design mirror sites
Ant Design has domestic mirror sites in China. Main site: https://ant-design.antgroup.com/index-cn. Version-specific mirrors: Ant Design 5.x at https://5x-ant-design.antgroup.com, Ant Design 4.x at https://4x-ant-design.antgroup.com, Ant Design Mobile at https://ant-design-mobile.antgroup.com/zh, Ant Design Mini at https://ant-design-mini.antgroup.com, Ant Design Charts at https://ant-design-charts.antgroup.com, AntV at https://antv.antgroup.com.
Correct spelling of Ant Design
The correct spellings are: 'Ant Design' (space-separated capitalized words for the design language), 'antd' (all lowercase for the React UI component library), and 'ant.design' (for the website). Incorrect spellings include: AntD, Ant-D, antD, Antd, ant design, AntDesign, antdesign, Antdesign.
Ant Design not designed for mobile
Ant Design is not designed for mobile devices. For mobile experiences, refer to Ant Design Mobile at http://mobile.ant.design. Libraries with 'm-' or 'rn-' prefixes from react-component are designed for mobile.
design.md is built for AI design tools
design.md describes the visual language, component archetypes, and theme tokens of Ant Design's default light theme and is built for AI design tools.
design.md file for AI design tools
design.md is located at https://ant.design/design.md and is designed for AI design tools. It describes Ant Design's default Light theme visual language, component paradigms, and theme tokens.
Ant Design React development goal
Ant Design React aims to provide programmers with a pleasant development experience.
Alignment principle based on Gestalt psychology
According to the Law of Continuity of Gestalt psychology, aligning elements in interface design meets users' perception and delivers information more smoothly. Gestalt psychology, which originated in early 20th century Germany, is based on the principle that the mind forms a global whole with self-organizing tendencies, where the whole is more than the sum of its parts.
Numbers alignment - right-align with consistent decimal places
Numbers should be right-aligned to enable faster comparison. All numbers should maintain the same number of decimal places after the decimal point to ensure visual consistency and make numerical comparison easier.
Text alignment - unified visual starting point
Text and titles should be left-aligned to establish a unified visual starting point. When paragraphs or text length are too short or too loose, a unified visual starting point is essential. Misaligned titles and text starting at different visual points should be avoided unless the differences are intentionally emphasized.
Form field alignment - colon right-alignment
Form labels should use right-aligned colons to encircle content within a defined range. Regular arrangement of aligned colons allows users to infer form structure and speeds up form-filling by creating visual rhythm and predictability.
Recommended design systems for reference
Design systems recommended for reference include: Fiori Design (experience.sap.com/fiori-design-web/), Human Interface Guidelines (developer.apple.com/ios/human-interface-guidelines/), Lightning Design System (lightningdesignsystem.com/getting-started/), and Material Design (material.io/).
Number alignment for value comparison
For quick comparison of numerical values, all numbers should use the same number of significant figures and be right-aligned.
Text alignment uses single visual anchor point
For titles and body text, use left alignment with a single visual starting point. When a page has short or scattered fields or paragraphs, establish one unified visual anchor point. Using two separate visual starting points for titles and body text is not recommended unless deliberately emphasizing the distinction between them.
Form colon alignment for improved efficiency
In forms, align colons to the right. Right-aligned colons lock content within a defined range, allowing users' eyes to follow the visual flow of the colons to find all input fields, thereby improving input efficiency.
Alignment principle based on Gestalt law of continuity
In interface design, aligning elements follows the Gestalt Law of Continuity, where users perceive straight lines as continuous straight lines and curves as continuous curves. Proper alignment in UI design conforms to users' cognitive characteristics, guides visual flow, and helps users receive information more smoothly.
Button group dividers pitfall
If buttons are in the same group, there is no need to add dividers between them.
Collapsing buttons approach
When grouping many buttons, one approach is to collapse buttons in the order of importance.
Button group spacing pitfall
When button groups have no space between them, it is easy to confuse them with Toggle Buttons.
Button ordering best practice
Buttons should be placed in the order of importance, with less important actions placed on the right or at the bottom.
Conversation flow button ordering
For conversation flow button ordering, place buttons in the order similar to a conversation between computers and users: ask users the needed actions or your desired actions, then present the risks involved.
Button label requirements
Button labels should clearly indicate to users what would happen when buttons are clicked. Labels should use verbs (except for dropdown buttons), be relevant to the context, and be concise.
Button ordering principle
Start button ordering from the reading flow. Collapsed content should always be on the right.
Button label strategies
Button labels can be customized using these methods: (1) Describe the action result (examples: Publish, Login, Register), or (2) If the primary action means negative, stress the consequences (example: Are you sure to delete it? Delete / Cancel). Ant Design uses 'OK / Cancel' as default labels.
Button label verb usage pitfall
Button labels should use verbs. Avoid non-verb labels.
Button placement principle
Place buttons in users' reading patterns for ease of discovery, such as the F-Shaped Reading Pattern or Z-Shaped Reading Pattern.
Call to Action button
Call to Action buttons usually appear alone and are intended to be used as a command, such as in landing pages or welcome banners. They can be as wide as their parent container. It is recommended to have just one Call to Action button per screen.
Flat display of grouped buttons
Another approach to grouping many buttons is flat display of all buttons, where different groups can be separated using space or using dividers to group similar buttons.
When to place buttons in footer
Place buttons in the footer when: (1) the body section has collapsed or hidden content that cannot show entire content in one screen, or (2) the body section has complex content with multiple subgroups each having their own actions, where separating the 'Complete' action from the body section avoids confusion. The footer's purpose is to create separation from the body.
Danger button with recommended alternative
When the system does not recommend a deletion action, set 'Cancel' as the primary action instead of making Delete primary.
Danger button usage
Danger buttons warn users that there are risks involved in the action. Use danger buttons when the user's intention is to delete, to warn that this action has risks.
Text button with icon
A text button with an icon provides supplementary meaning to the button.
Text button usage
Text buttons are low emphasis and light-weight button types, such as actions appearing in a table.
Default button usage
Default buttons are used for non-primary actions. If unsure which button type to choose, the default button is always a safe choice.
Button design principles
Button design has two main principles: guide users to achieve the desired actions, and prevent users from making mistakes.
Button group layout
When multiple buttons form a group, align buttons in one line with spaces in between.
Ghost button usage
Ghost buttons are used on dark or colored backgrounds.
Grouping many buttons strategy
When there are too many buttons on the screen, group relevant buttons together and use similar design for that group. If one button is a primary action, emphasis can still be applied.
Navigation flow button ordering
For navigation flow button ordering, place buttons based on the flow direction. For example, a button representing going back should be placed on the left to imply going to the previous step.
Page structure for button placement
A page, card, or section presents a subject broken into 3 areas: Header (subject's heading, summary and navigation), Body (detailed content), and Footer (supplementary information or toolbar). Placing buttons in different areas conveys different meanings.
Ant Design is for enterprise-class complex UIs
Ant Design is designed for enterprise-class complex UIs and is used by both professional and non-professional designers. It has a low learning curve that helps users get started fast and achieve rapid results.
Button design goals
Button design has two primary goals: guide users to take the action you want them to take, and help users avoid making mistakes.
Ant Design characteristics and benefits
Ant Design is positioned for middle platform business and accommodates both professional and non-professional designers. It features low learning cost, fast onboarding, and good implementation results. It provides a full-chain ecosystem from interface design to front-end development, significantly improving design and development efficiency.
Color application in enterprise product design
In the design of background applications, the attitude towards color is restrained. Color is used more based on information delivery, operational guidance and interactive feedback purposes. A rational choice of color that does not undermine operational efficiency and affects the clear communication of information is key. Illustrations and display pages can properly deviate from this principle.
HSB color model for design
Ant Design's design team preferred to design with the HSB color model, which makes it easier for designers to have a clear psychological expectation of color when adjusting colors and facilitates communication in teams.
Contrast of whole and part
By changing typesetting, typeface, and size, different levels can be highlighted and the relationship between the ensemble and individual parts can be differentiated. This makes the page more flexible and rhythmic.
Contrast as visual hierarchy principle
Contrast is an effective way to add visual interest to a page and create an organizational hierarchy among different elements that aids users in finding information quickly. For contrast to be effective, it must be strong.
Contrast of major and minor relationship
To help users make quick operations (such as forms or modals), more important or frequently used operations should be emphasized. Emphasis can be achieved by intensifying the key item or by weakening other items. When users need to make prudent decisions, the system should remain neutral and not make the decision for them or lead their judgment.
Ant Design color system hierarchy
Ant Design interprets the color system into two levels: the system-level color system and the product-level color system. The system-level color system mainly defines the basic color palette, neutral color palette, and data visualization palette used in Ant Design. The product-level color system is defined during the design process based on the system colors, further defining colors that match the product tone and functional requirements.
HSB color model for design
Ant Design's design team prefers to adopt the HSB (Hue, Saturation, Brightness) color model for design. This model makes it easier for designers to have clear mental expectations when adjusting colors and facilitates communication within the team.
Color restraint principle for enterprise product design
In ant enterprise middle platform design, the approach to color usage is restrained. Colors are primarily used based on information transmission, operation guidance, and interaction feedback. Rational color selection is key while maintaining operational efficiency and clear information delivery. However, illustrations and display-oriented pages can appropriately break this principle.