Color - USAC | Indigo Design System v1.2.0

Overview

This color palette is made up of primary and accent colors that you can use for online tools and applications. The colors have been designed to work harmoniously with each other.

The palette is intentionally limited to maintain a consistent visual hierarchy and guide users of systems through important information.

Download Color Swatches (ASE Format)

Primary Colors

When starting the design of a new application or component, begin by using the following colors. Consistent use of these primary colors will give USAC products an immediate sense of belonging to the larger vision of One USAC across all tools.

Blue 48 is the primary interaction color used for buttons and in-text links.

$indi-color-blue-42 #004AD4 Blue 42
$indi-color-blue-48 #006FF4 Blue 48
$indi-color-blue-61 #4292F4 Blue 61
$indi-color-blue-75 #89BAF4 Blue 75
$indi-color-blue-93 #D9EBFF Blue 93

Neutrals

Avoid using text in “midtone” neutrals that do not provide enough contrast. See contrast grid below for readability levels.

Body copy should be set in Neutral 25.

$indi-color-neutral-15 #262626 Neutral 15
$indi-color-neutral-25 #404040 Neutral 25
$indi-color-neutral-38 #616161 Neutral 38
$indi-color-neutral-50 #808080 Neutral 50
$indi-color-neutral-62 #9E9E9E Neutral 62

$indi-color-neutral-74 #BDBDBD Neutral 74
$indi-color-neutral-88 #E0E0E0 Neutral 88
$indi-color-neutral-93 #EEEEEE Neutral 93
$indi-color-neutral-97 #F7F7F7 Neutral 97
$indi-color-neutral-100 #FFFFFF Neutral 100

Accent Colors

Accent colors can be used for illustration, data visualizations, or to draw attention to unique or unusual information. To increase their effectiveness, accent colors should be used sparingly. Never use accent colors for alerts or notifications.

$indi-color-accent-32 #B5BD00 Accent 32
$indi-color-accent-50 #FF7500 Accent 50

Alerts and Notifications

Elements that appear rarely, such as alerts, should be distinct from other elements and not use the primary or accent colors specified above.

Notifications

$indi-color-notification-warning-default #FFAB00 Warning Default
$indi-color-notification-warning-background #FFDD96 Warning Background

$indi-color-notification-success-default #6EA100 Success Default
$indi-color-notification-success-background #E4F1C9 Success Background

Alerts/Errors

$indi-color-notification-alert-default #B80014 Alert Default
$indi-color-notification-alert-light #EE1B32 Alert Light
$indi-color-notification-alert-background #F9EAEC Alert Background

Dos and Don’ts

Do

Do use colors noted “Background” behind notifications. Refer to the contrast grid below to be sure text is easily read against these backgrounds.

Don't

Don’t over-use color in notifications; it can limit legibility.

Don’t change button colors outside the patterns described on the buttons page.

Contrast

Contrast distinguishes words and images through a perceived difference in color. It separates elements and groupings in a layout and plays a crucial role in accommodating all types of users. Below you can refer to approved colors and their contrast level for text.

View Complete Color Contrast Grid

Primary Colors Contrast Grid

AAA Pass, AAA (7+)

AA Pass, AA (4.5+)

AA18 Pass, Large Text Only (3+)

DNP Does Not Pass

About WCAG 2.0 contrast

	42 #004AD4	48 #006FF4	61 #4292F4	75 #89BAF4	93 #D9EBFF
42 #004AD4		Text DNP 1.5	Text DNP 2.2	Text AA18 3.5	Text AA 5.9
48 #006FF4	Text DNP 1.5		Text DNP 1.4	Text DNP 2.2	Text AA18 3.7
61 #4292F4	Text DNP 2.2	Text DNP 1.4		Text DNP 1.5	Text DNP 2.6
75 #89BAF4	Text AA18 3.5	Text DNP 2.2	Text DNP 1.5		Text DNP 1.6
93 #D9EBFF	Text AA 5.9	Text AA18 3.7	Text DNP 2.6	Text DNP 1.6

Neutral Colors Contrast Grid

AAA Pass, AAA (7+)

AA Pass, AA (4.5+)

AA18 Pass, Large Text Only (3+)

DNP Does Not Pass

About WCAG 2.0 contrast

	15 #262626	25 #404040	38 #616161	50 #808080	62 #9E9E9E	74 #BDBDBD	88 #E0E0E0	93 #EEEEEE	97 #F7F7F7	100 #FFFFFF
15 #262626		Text DNP 1.4	Text DNP 2.4	Text AA18 3.8	Text AA 5.6	Text AAA 8	Text AAA 11.4	Text AAA 13	Text AAA 14.1	Text AAA 15.1
25 #404040	Text DNP 1.4		Text DNP 1.6	Text DNP 2.6	Text AA18 3.8	Text AA 5.5	Text AAA 7.8	Text AAA 8.9	Text AAA 9.6	Text AAA 10
38 #616161	Text DNP 2.4	Text DNP 1.6		Text DNP 1.5	Text DNP 2.3	Text AA18 3.3	Text AA 4.6	Text AA 5.3	Text AA 5.7	Text AA 6.1
50 #808080	Text AA18 3.8	Text DNP 2.6	Text DNP 1.5		Text DNP 1.4	Text DNP 2.1	Text DNP 2.9	Text AA18 3.4	Text AA18 3.6	Text AA18 3.9
62 #9E9E9E	Text AA 5.6	Text AA18 3.8	Text DNP 2.3	Text DNP 1.4		Text DNP 1.4	Text DNP 2	Text DNP 2.3	Text DNP 2.5	Text DNP 2.6
74 #BDBDBD	Text AAA 8	Text AA 5.5	Text AA18 3.3	Text DNP 2.1	Text DNP 1.4		Text DNP 1.4	Text DNP 1.6	Text DNP 1.7	Text DNP 1.8
88 #E0E0E0	Text AAA 11.4	Text AAA 7.8	Text AA 4.6	Text DNP 2.9	Text DNP 2	Text DNP 1.4		Text DNP 1.1	Text DNP 1.2	Text DNP 1.3
93 #EEEEEE	Text AAA 13	Text AAA 8.9	Text AA 5.3	Text AA18 3.4	Text DNP 2.3	Text DNP 1.6	Text DNP 1.1		Text DNP 1	Text DNP 1.1
97 #F7F7F7	Text AAA 14.1	Text AAA 9.6	Text AA 5.7	Text AA18 3.6	Text DNP 2.5	Text DNP 1.7	Text DNP 1.2	Text DNP 1		Text DNP 1
100 #FFFFFF	Text AAA 15.1	Text AAA 10	Text AA 6.1	Text AA18 3.9	Text DNP 2.6	Text DNP 1.8	Text DNP 1.3	Text DNP 1.1	Text DNP 1

Alert and Notification Colors Contrast Grid

AAA Pass, AAA (7+)

AA Pass, AA (4.5+)

AA18 Pass, Large Text Only (3+)

DNP Does Not Pass

About WCAG 2.0 contrast

	Success #6EA100	Success Bkg #E4F1C9	Warning #FFAB00	Warning Bkg #FFDD96	Alert #B80014	Alert Lgt #EE1B32	Alert Bkg #F9EAEC
Success #6EA100		Text DNP 2.6	Text DNP 1.6	Text DNP 2.3	Text DNP 2.2	Text DNP 1.4	Text DNP 2.6
Success Bkg #E4F1C9	Text DNP 2.6		Text DNP 1.6	Text DNP 1.1	Text AA 5.8	Text AA18 3.6	Text DNP 1
Warning #FFAB00	Text DNP 1.6	Text DNP 1.6		Text DNP 1.4	Text AA18 3.6	Text DNP 2.2	Text DNP 1.6
Warning Bkg #FFDD96	Text DNP 2.3	Text DNP 1.1	Text DNP 1.4		Text AA 5.2	Text AA18 3.3	Text DNP 1.1
Alert #B80014	Text DNP 2.2	Text AA 5.8	Text AA18 3.6	Text AA 5.2		Text DNP 1.5	Text AA 5.9
Alert Lgt #EE1B32	Text DNP 1.4	Text AA18 3.6	Text DNP 2.2	Text AA18 3.3	Text DNP 1.5		Text AA18 3.7
Alert Bkg #F9EAEC	Text DNP 2.6	Text DNP 1	Text DNP 1.6	Text DNP 1.1	Text AA 5.9	Text AA18 3.7