Color Swatches

Color is used to create a stronger connection with our brand, define interactions and aid in way finding. Avoid overwhelming the page with too many colored elements.

Design System Guidelines

Use the digital colors to fill gaps in the brand colors. For example, if there is no swatch in the brand colors that is designated for use as placeholder text, then use the digital color swatch for placeholder text (#767676 Moon).

Brand Colors

#444444 Carbon
‍

#808080 Gray
‍

#c8c9c7 Granite
‍

#eeeeee Quartz
‍

#ffffff White
‍

#0076ce Dell Blue
(primary)

#00447c Midnight
(core, hover link)

#41b6e6 Light Blue
(core)

#6e2585 Purple
(accent)

#b7295a Berry
(accent)

#ee6411 Orange
(accent)

#ce1126 Red
(accent, errors)

#6ea204 Green
(accent)

#f2af00 Yellow
(accent)

Digital Colors

#000000 Black
(text)

#767676 Moon
(placeholder/disabled text)

#cccccc Ash
(divider, border)

#f9f9f9 Mist
(background)

#006bbd Sea Blue
(link)

#cce5f1 Sky
(hover highlight)

#edf9ff Cloud
(highlight selected)

#ffffc9 Alert Yellow
(alert)

#408001 Purchase
(button)