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 |
|---|
Data Visualization
Data visualization colors are used to represent data in charts, graphs, and other visual representations. These colors are chosen to be visually distinct from one another, ensuring that data series remain easy to differentiate and interpret.
Categorical
The categorical palette is used to distinguish between unrelated or unordered data series, such as different categories in a bar chart.
| Variable name | Light Theme | Dark Theme |
|---|
Sequential Primary
The sequential primary palette is used to represent ordered data where magnitude matters, such as a single metric increasing in intensity.
| Variable name | Light Theme | Dark Theme |
|---|
Sequential Secondary
The sequential secondary palette provides an alternative ramp for ordered data, useful when a second sequential series needs to be shown alongside the primary one.
| Variable name | Light Theme | Dark Theme |
|---|
Sequential Tertiary
The sequential tertiary palette provides a third ramp for ordered data, useful when a third sequential series needs to be shown alongside the primary and secondary ones.
| Variable name | Light Theme | Dark Theme |
|---|
Divergent
The divergent palette is used to represent data that diverges from a neutral midpoint in two directions, such as negative and positive values.
| Variable name | Light Theme | Dark Theme |
|---|
Feedback
The feedback palette is used to convey status within data visualizations, such as error, warning, success, and info states.
| 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 |
|---|