Skip to content

Commit

Permalink
Update Color foundation page (#4064)
Browse files Browse the repository at this point in the history
Co-authored-by: Josh Wooding <[email protected]>
  • Loading branch information
amritadesmet and joshwooding authored Sep 18, 2024
1 parent 3a2af2e commit 2bb84ec
Showing 1 changed file with 36 additions and 2 deletions.
38 changes: 36 additions & 2 deletions site/docs/foundations/color.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,51 @@
title: Color
layout: DetailTechnical
data:
status: In progress
---

Colors can be used to communicate meaning, suggest a visual hierarchy and help to distinguish our products from others while providing a cohesive accessible experience.
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](/salt/themes/index).

## Status

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

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.

## Foundation

These are the foundational colors used most frequently across our applications and in the majority of Salt’s components.

<FoundationColorView group="foundation" />

## Categorical

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.

<FoundationColorView group="categorical" />

:fragment{src="./fragments/feedback.mdx"}

0 comments on commit 2bb84ec

Please sign in to comment.