Colors

Color plays an important role in brand identity. Color is also a critical component in an accessible design system.

You can customize the application of color any way you like, but all efforts should be made to ensure for acceptable accessibility color contrast.

All type is set in $black. Unless…
Type set on a dark background should use $white.
Error messages use $error and valid form entries or success messages use $valid.
Text link color is set to $primary while :hover and :focus states are set to $secondary.
Avoid using color only to communicate information. In the case of links, use another identifier such as bold or underline to indicate a link verses using color alone.
Never set link :focus states to outline: none.

Color Styles

Here’s how we’re currently declaring colors in the Delta Design System:

Global Colors

Black

$black

#000000

Dark Gray

$dk-gray

#919191

Medium Gray

$md-gray

#cccccc

Light Gray

$lt-gray

#eeeeee

White

$white

#ffffff

Design System Colors

Primary

$primary

#df3a32

Secondary

$secondary

#003442

Message Colors

Error

$error

#c00c00

Valid

$valid

#008000

Color Application

To apply a background-color using any of the defined colors in the system, simply add a .bg- prefix to any of the color declarations above. For example, to make an element’s background light gray, add a .bg-lt-gray to the appropriate tag.