Base Color PalettesĪnt Design's base color palette totals 120 colors, including 12 primary colors and their derivative colors. I chose to use a selector at the root level. The definition of neutral color palette is balanced with readability, aesthetics and usability. Material-UI TextField Text Color can be customized using either the root level sx or with InputProps. Benefits Semantic color names make more sense because when we design interfaces, we dont just use any random color. Each color name contains CSS variables and each daisyUI theme applies color values to the utility classes when it is applied. Further through a large number of observations, to capture the different colors of natural light under the law of change, with the art of drawing ideas, the 12 colors were derived. Its suggested to use semantic color utility classes like: bg-primary bg-secondary bg-accent etc. Designers abstract the natural scenes through the capture, combined with the technical gene of Ant Financial, forming a unique 12 colors. System-level Color SystemĪnt Design system-level color system also comes from the 'natural' design language.

The product-level color system is in the specific design process, based on the color of the system to further define the tone of the product in accordance with the requirements and function of the color.Īnt 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, as well as facilitate communication in teams. The system-level color system mainly defines the basic color palette, neutral color palette and data visualization color palette in the design of Ant Financial. Ant Design interprets the color system into two levels: a system-level color system and a product-level color system.

Text color ui