Theme Documentation
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
--color-blue-50
Undefined
--color-blue-100
Undefined
--color-blue-200
Undefined
--color-blue-300
Undefined
--color-blue-400
Undefined
--color-blue-500
Undefined
--color-blue-600
Undefined
--color-blue-700
Undefined
--color-blue-800
Undefined
--color-blue-900
Undefined
--color-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
--color-green-50
Undefined
--color-green-100
Undefined
--color-green-200
Undefined
--color-green-300
Undefined
--color-green-400
Undefined
--color-green-500
Undefined
--color-green-600
Undefined
--color-green-700
Undefined
--color-green-800
Undefined
--color-green-900
Undefined
--color-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)
--color-yellow-50
Undefined
--color-yellow-100
Undefined
--color-yellow-200
Undefined
--color-yellow-300
Undefined
--color-yellow-400
Undefined
--color-yellow-500
Undefined
--color-yellow-600
Undefined
--color-yellow-700
Undefined
--color-yellow-800
Undefined
--color-yellow-900
Undefined
--color-yellow-950
Undefined
Red (Error/Danger)
--color-red-50
Undefined
--color-red-100
Undefined
--color-red-200
Undefined
--color-red-300
Undefined
--color-red-400
Undefined
--color-red-500
Undefined
--color-red-600
Undefined
--color-red-700
Undefined
--color-red-800
Undefined
--color-red-900
Undefined
--color-red-950
Undefined
Amber (Caution)
--color-amber-50
Undefined
--color-amber-100
Undefined
--color-amber-200
Undefined
--color-amber-300
Undefined
--color-amber-400
Undefined
--color-amber-500
Undefined
--color-amber-600
Undefined
--color-amber-700
Undefined
--color-amber-800
Undefined
--color-amber-900
Undefined
--color-amber-950
Undefined
Teal (Success/Pass)
--color-teal-50
Undefined
--color-teal-100
Undefined
--color-teal-200
Undefined
--color-teal-300
Undefined
--color-teal-400
Undefined
--color-teal-500
Undefined
--color-teal-600
Undefined
--color-teal-700
Undefined
--color-teal-800
Undefined
--color-teal-900
Undefined
--color-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
--color-indigo-50
Undefined
--color-indigo-100
Undefined
--color-indigo-200
Undefined
--color-indigo-300
Undefined
--color-indigo-400
Undefined
--color-indigo-500
Undefined
--color-indigo-600
Undefined
--color-indigo-700
Undefined
--color-indigo-800
Undefined
--color-indigo-900
Undefined
--color-indigo-950
Undefined
Purple
--color-purple-50
Undefined
--color-purple-100
Undefined
--color-purple-200
Undefined
--color-purple-300
Undefined
--color-purple-400
Undefined
--color-purple-500
Undefined
--color-purple-600
Undefined
--color-purple-700
Undefined
--color-purple-800
Undefined
--color-purple-900
Undefined
--color-purple-950
Undefined
Pink
--color-pink-50
Undefined
--color-pink-100
Undefined
--color-pink-200
Undefined
--color-pink-300
Undefined
--color-pink-400
Undefined
--color-pink-500
Undefined
--color-pink-600
Undefined
--color-pink-700
Undefined
--color-pink-800
Undefined
--color-pink-900
Undefined
--color-pink-950
Undefined
Orange
--color-orange-50
Undefined
--color-orange-100
Undefined
--color-orange-200
Undefined
--color-orange-300
Undefined
--color-orange-400
Undefined
--color-orange-500
Undefined
--color-orange-600
Undefined
--color-orange-700
Undefined
--color-orange-800
Undefined
--color-orange-900
Undefined
--color-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