Basic Components
Extended Color
Provides rich color options to support design for different scenarios
The extended color provides more diverse color choices beyond the primary colors, making the interface design more flexible and colorful
The definition and standardization of an extended color is crucial in consistent design. It not only provides diverse color options for designers and developers to create rich and colorful interfaces, but also ensures visual harmony throughout the product through strict color specifications. A standardized color system makes the user experience more coherent, reduces visual fatigue caused by improper color usage, and optimizes the development process by reducing communication costs between design and development.
Blue Series
Blue represents professionalism, reliability, and trust, suitable for data displays, system status, and interactive elements. Light tones convey calmness and freshness, while darker tones present authority and stability.
Blue
Blue 50
Undefined
Blue 100
Undefined
Blue 200
Undefined
Blue 300
Undefined
Blue 400
Undefined
Blue 500
Undefined
Blue 600
Undefined
Blue 700
Undefined
Blue 800
Undefined
Blue 900
Undefined
Blue 950
Undefined
Green Series
Green symbolizes success, health, and growth, suitable for indicating positive actions, completion states, and eco-friendly themes. From refreshing light greens to steady deep greens, it provides rich expression means.
Green
Green 50
Undefined
Green 100
Undefined
Green 200
Undefined
Green 300
Undefined
Green 400
Undefined
Green 500
Undefined
Green 600
Undefined
Green 700
Undefined
Green 800
Undefined
Green 900
Undefined
Green 950
Undefined
Common Status Colors
These colors are used to represent different system states and feedback, including warnings, errors, success, and information prompts. They have clear semantics and unified visual effects.
Yellow (Warning)
Yellow 50
Undefined
Yellow 100
Undefined
Yellow 200
Undefined
Yellow 300
Undefined
Yellow 400
Undefined
Yellow 500
Undefined
Yellow 600
Undefined
Yellow 700
Undefined
Yellow 800
Undefined
Yellow 900
Undefined
Yellow 950
Undefined
Red (Error/Danger)
Red 50
Undefined
Red 100
Undefined
Red 200
Undefined
Red 300
Undefined
Red 400
Undefined
Red 500
Undefined
Red 600
Undefined
Red 700
Undefined
Red 800
Undefined
Red 900
Undefined
Red 950
Undefined
Amber (Caution)
Amber 50
Undefined
Amber 100
Undefined
Amber 200
Undefined
Amber 300
Undefined
Amber 400
Undefined
Amber 500
Undefined
Amber 600
Undefined
Amber 700
Undefined
Amber 800
Undefined
Amber 900
Undefined
Amber 950
Undefined
Teal (Success/Pass)
Teal 50
Undefined
Teal 100
Undefined
Teal 200
Undefined
Teal 300
Undefined
Teal 400
Undefined
Teal 500
Undefined
Teal 600
Undefined
Teal 700
Undefined
Teal 800
Undefined
Teal 900
Undefined
Teal 950
Undefined
Complementary Color Series
Complementary colors enrich the overall design language, providing additional expression for specific scenarios. These colors are particularly useful when distinguishing different categories, creating hierarchies, or highlighting brand characteristics.
Indigo
Indigo 50
Undefined
Indigo 100
Undefined
Indigo 200
Undefined
Indigo 300
Undefined
Indigo 400
Undefined
Indigo 500
Undefined
Indigo 600
Undefined
Indigo 700
Undefined
Indigo 800
Undefined
Indigo 900
Undefined
Indigo 950
Undefined
Purple
Purple 50
Undefined
Purple 100
Undefined
Purple 200
Undefined
Purple 300
Undefined
Purple 400
Undefined
Purple 500
Undefined
Purple 600
Undefined
Purple 700
Undefined
Purple 800
Undefined
Purple 900
Undefined
Purple 950
Undefined
Pink
Pink 50
Undefined
Pink 100
Undefined
Pink 200
Undefined
Pink 300
Undefined
Pink 400
Undefined
Pink 500
Undefined
Pink 600
Undefined
Pink 700
Undefined
Pink 800
Undefined
Pink 900
Undefined
Pink 950
Undefined
Orange
Orange 50
Undefined
Orange 100
Undefined
Orange 200
Undefined
Orange 300
Undefined
Orange 400
Undefined
Orange 500
Undefined
Orange 600
Undefined
Orange 700
Undefined
Orange 800
Undefined
Orange 900
Undefined
Orange 950
Undefined
Color Usage Guide
Why define color specifications? Color specifications not only ensure visual consistency of the product but also reduce communication costs between design and development, improving work efficiency. Through predefined color variables, developers can quickly invoke appropriate colors, while designers can ensure that all interface elements follow a unified visual language.
Recommended Practices
Use predefined color variables, avoid hardcoded color values
Follow color semantics, such as using red for errors and green for success
Consider color contrast to ensure text is clearly readable on backgrounds
Consider color accessibility principles in color selection, accommodating color blind and color weak users
Practices to Avoid
Using custom colors not defined in the system
Excessive use of different colors, causing visual chaos on the page
Ignoring color semantics, causing user understanding bias
Not properly adjusting color brightness and saturation in dark mode
Color Accessibility Design
Color accessibility design ensures that all users, including those with visual impairments, can clearly distinguish interface elements and understand content.
Ensure contrast between text and background meets WCAG 2.1 AA standards (at least 4.5:1)
Don't rely solely on color to convey information; also use shapes, text, or patterns as aids
Test color perception under different color vision deficiencies to ensure critical information isn't lost