The foundation of visual communication
Base color values that serve as the foundation of your color system
Used by designers and developers as reference values, not directly in interfaces
Purpose-based colors that communicate meaning and function
Used for UI elements where the color conveys specific meaning to users
Specialized color tokens for specific components or contexts
Used to maintain consistency within component types while allowing for customization
Colors that represent different interactive states
Applied to interactive elements to provide visual feedback about their current state
Ensures visual harmony across products and platforms
Reduces decision fatigue and speeds up design and development
Facilitates growth and adaptation to new products and features
Provides a framework for ensuring all users can perceive and understand content
Strengthens brand identity through consistent color application
Always ensure your color choices meet WCAG 2.1 AA standards (4.5:1 contrast ratio for normal text, 3:1 for large text).
Name colors by their purpose (primary, danger, success) rather than their appearance (blue, red, green).
Develop 5-9 shades of each color for different use cases and states (hover, active, disabled).
Ensure your color system works for users with different types of color vision deficiency.
Provide clear guidelines on when and how to use each color in your system.
Design your color system to work in both light and dark themes from the start.
