The design system's color application is intended to provide both consistency and flexibility across multiple products and customers. Using Sass enables us to make changes for customization efficiently.
All efforts should be made to ensure for acceptable accessibility color contrast for all appropriate elements.
Color One
scss: $color-one
css: #ea7200
Color Two
scss: $color-two
css: #101820
White
scss: $white
css: #ffffff
Off-White
scss: $off-white
css: #f5f5f5
Cool Gray
scss: $cool-gray
css: #dae1e9
Dark-Gray
scss: $dark-gray
css: #243746
Black
scss: $black
css: #000000
Invalid
scss: $invalid
css: #bb0000
Valid
scss: $valid
css: #008000
$black. Unless…$white.
$invalid.$valid.$color-one.:hover and :focus states for text links are set to $color-two.