Status
PublishedElement can be used in production | |
Documentation | PublishedElement can be used in production |
PublishedElement can be used in production |
The use of color in an experience helps define communication, meaning, brand, and roles, making it easier for users to interact, search, and differentiate elements.
PublishedElement can be used in production | |
Documentation | PublishedElement can be used in production |
PublishedElement can be used in production |
The new design system color palette was created to meet Dell’s brand and accessibility standards. Colors now degrade to gray scale and comply with WCAG 2.1 contrast ratios.
This color palette was designed to accommodate Dell’s vast range of digital products. The use cases are recommendations.
Accessibility considerations for color are very important: make sure your colors meet accessibility guidelines. The two primary accessibility concerns are maintaining proper contrast ratios and making sure color is not used as the only method to define meaning in an experience. Review accessibility guidance below.
The guidelines on this page outline the general use of color. For color guidance related to specific components, visit the component-specific guidelines.
The primary blue swatches reinforce Dell’s brand while unifying touchpoints and interactions. Blue 600 is the baseline UI color for most primary interactions. This palette also includes colors for hover, focus, select, and active states. For additional guidance, refer to the component-specific guidelines.
Color | Use cases | Hex |
---|---|---|
Primary interaction | #0672CB |
This palette features colors which can be used for subtle backgrounds, high-contrasting elements like text and dividers, and elevation and depth.
There are two light neutral colors that can be used for a Dell experience. Depending on the experience or product, either may be used as a background or to offset content or surfaces from the background color. For example, some products use Gray 100 as the page background and White as a container background, while others have done the opposite. Either is fine as long as you use a consistent color pattern. Whichever background color is used, make sure that all text, images, and components meet accessibility contrast ratio standards.
Color | Use cases | Hex |
---|---|---|
Background, surface, or offset content | #FFFFFF | |
Background, surface, or offset content | #F5F6F7 |
The dark neutrals can be used for text, dividers, or wherever more contrast is needed. Currently, Gray 900 (the default for text) is the only dark neutral color we have defined.
Please note that we eliminated Black (#000000) from the color palette because pure black text does not display well on high-resolution screens.
Color | Use cases | Hex |
---|---|---|
Default text color | #0E0E0E |
The design system’s secondary colors may evolve into a semantic palette, which will help users with wayfinding, identifying status, understanding actions, and locating help.
While this palette is further defined, it’s important that designs don’t rely completely on color to convey meaning. Instead, always use text and/or icons to help clarify the context for color blind users and for those who rely on assistive technology.
The list below includes universally recognized feedback colors and their meanings:
Blue: informative
Yellow: warning
Red: error
Green: success
Accent colors can be used to add a splash of color in branding experiences or for other components that need a variety of colors to differentiate experiences. The design system team is experimenting with this palette in our data visualization and categorical patterns.
The Dell Design System v2 palette was matched against Dell’s official brand palette. View the Dell Brand Colors.