Overview
Color palettes are a collection of carefully selected colors that are used consistently throughout a design project to create a cohesive and harmonious visual experience. They serve as a foundation for establishing a brand's identity, setting the mood and tone of a design, and guiding the overall aesthetic of a user interface.
Primary
Primary is used to signify the most important actions. Interactive has been introduced to expand the range of colors that a primary or interactive action can support. Interactive supports four colors. By default, primary and interactive will share the same base color.
The primary variable provides a palette intended for use with primary actions or elements important to your UI. The palette supports the use of color for states.
Secondary
Secondary is used as a complementary color to the primary color. The secondary variable provides a palette intended to complement primary actions. Secondary provides a variable intended to provide visual hierarchy. The palette supports the use of the color for states.
Neutrals
Consistent use of neutral colors helps build visual relationships between objects and develop visual intent. The neutrals provide a full range of colors from white to black. Within the range of neutrals, there are ranges intended for UI elements and typography.
Selection primary
Selection primary is used for selection states that require a strong visual cue. It adds additional flexibility to create a unique selection state that is not related to primary or secondary colors.
The selection primary variable provides a palette intended to indicate a selection state. It provides a hierarchical view for a selection state. Selection primary is intended to display a selection state for primary content or content that requires visual hierarchy. The palette supports the use of the color for states.
Selection secondary
Selection Secondary is used for selection states that require an alternative visual cue. Selection Secondary adds additional flexibility to have a unique selection state different from Selection Primary. The selection secondary variable provides a palette that is intended to indicate a selection state.
Semantic
Semantic colors from the shared palette are intentionally chosen to convey feedback, status, or urgency, ensuring that they consistently communicate important information as needed to the user.
From top to bottom, these colors are the semantic colors we use: Alert-low, Alert-positive, Alert-info, Alert-moderate, Alert-warning, Alert-high, and Alert-critical.