Semantic Colors
Semantic colors are a design approach where colors are named and categorized based on their intended purpose or meaning rather than their appearance (like "red" or "blue"). This method allows for consistent and context-aware color usage across a component library. For instance, instead of specifying a color by its shade, you might refer to it as "background-primary", making it clear how and where the color should be applied. This approach enhances the maintainability of your design system, especially when implementing themes like dark mode, as it abstracts the colors from their visual appearance and ties them to their functional role.
Foreground
The foreground category includes colors used for primary text and other front-facing elements that need to be clearly visible. These colors are crucial for readability and should provide strong contrast against the background.
| Variable name | Light Theme | Dark Theme |
|---|
Background
Background colors are used to define the base layer of any component or page. They serve as the canvas on which other elements are displayed, so they need to complement foreground colors and provide sufficient contrast for accessibility.
| Variable name | Light Theme | Dark Theme |
|---|
Action
Foreground
The action-foreground category includes colors used for text or icons within interactive elements like buttons. These colors should be attention-grabbing and provide a clear visual cue that the element is actionable.
| Variable name | Light Theme | Dark Theme |
|---|
Background
Colors in the action-background category are used for the backgrounds of interactive elements such as buttons. These colors are designed to stand out and prompt user interaction while maintaining harmony with the action-foreground colors.
| Variable name | Light Theme | Dark Theme |
|---|
Icons
This category encompasses colors specifically designated for icons. Since icons often need to convey meaning quickly, these colors are chosen to be visually distinct and clear, ensuring that icons are easily recognizable against both the foreground and background.
| Variable name | Light Theme | Dark Theme |
|---|
Stroke
Stroke colors are used for borders, outlines, and any other linear elements that help define the shape and separation of components. These colors are often subtle but should be chosen to enhance the clarity and structure of your interface.
| Variable name | Light Theme | Dark Theme |
|---|
Colors for specific components
Colors for specific components are designed to enhance the usability and visual hierarchy of individual elements within your application. These colors ensure that each component—such as alerts, navigation elements, and forms—serves its intended function effectively while maintaining a cohesive look and feel throughout the interface.
| Variable name | Light Theme | Dark Theme |
|---|