Colors
Introduction
Colors are a key part of the design system.
To define Colors, we have the following principles: 1. Widely used in design. 2. The number of Colors should be as small as possible.
The color in SnowUI has two parts, the color in the Themes variable and the Color styles. Their difference is: when switching between light and dark mode, the color in the Themes variable will change, but the color in the Color styles will remain unchanged.
Rules of use
Please try to keep the number of Colors below 32.
90% principle: If the color used in a single product accounts for less than 10%, please do not include it in the design system.
How to use
Colors can be added, modified and deleted. Modifying them will affect all components and pages, please proceed with caution.
Light mode
Dark mode
Black
Black 100%
Black 80%
Black 40%
Black 20%
Black 10%
Black 5%
White 100%
White 80%
White 40%
White 20%
White 10%
White 10%
White
White 100%
White 80%
White 40%
White 20%
White 10%
White 5%
Black 100%
Black 80%
Black 40%
Black 20%
Black 10%
Black 5%
Primary
Brand
Blue
Purple
Purple 50%
Light
Purple B
Blue
Purple
White 5%
White 5%
Secondary
Purple A
Purple B
Blue A
Blue B
Green A
Green B
Yellow
Red
Purple A
Purple B
Blue A
Blue B
Green A
Green B
Yellow
Red