Color
Colors can be used to communicate meaning, establish visual hierarchy, and differentiate products, all while ensuring a cohesive and accessible experience. Colors are divided into several categories to communicate several concepts across the Salt design system.
The raw color values on this page reference the current Salt theme. If you’re using the Salt Next theme please refer to the separate color palette and listed guidance on the Themes page.
Status colors are visual indicators that reflect changes in the state or condition of a system or process. These colors help users understand what’s happening, what actions are needed, and whether any issues need to be addressed.
The Salt design system includes 4 statuses with corresponding colors:
| Status | Color |
|---|---|
| Info | Accent - Blue (Teal in Next theme) |
| Error | Red |
| Warning | Orange |
| Success | Green |
Sentiment colors guide users through an interface by providing visual cues about potential outcomes. These colors evoke specific feelings such as negativity, carefulness, comfort, trust or positivity.
The Salt design system includes 5 sentiments with associated colors:
| Sentiment | Color | Feeling |
|---|---|---|
| Negative | Red | Negativity |
| Caution | Orange | Carefulness |
| Neutral | Gray | Comfort |
| Accented | Blue (Teal in Next theme) | Trust |
| Positive | Green | Positivity |
Sentiment can be used independently of status. For example, a negative button for 'Delete' could be displayed within an informative dialog.
These are the foundational colors used most frequently across our applications and in the majority of Salt’s components.
These are the categorical colors used for data visualization and other components that support categories. The palette includes 20 unique colors and their corresponding ramps.
Opacity refers to the degree of transparency or visibility of a design element. It allows for layering, creating depth and hierarchy, and can help provide visual interest to an interface.
| Token | Opacity |
|---|---|
--salt-opacity-0 | 0.00 |
--salt-opacity-8 | 0.08 |
--salt-opacity-15 | 0.15 |
--salt-opacity-25 | 0.25 |
--salt-opacity-40 | 0.40 |
--salt-opacity-70 | 0.70 |
We appreciate your thoughts and feedback on any content in the Salt foundations. Please contact us if you have any comments or questions.