Color

Overview

This color palette consists of primary and accent colors designed for use in online tools and applications. The colors were selected to work in harmony, and the palette is intentionally limited to maintain a consistent visual hierarchy, helping users navigate important information.

In digital content, use visual indicators such as white space, grouping, and font weight/size in addition to color to establish clear visual hierarchies.

Primary Colors

When initiating the design of a new application or component, start by using the following primary colors, with Blue 38 designated as the primary interaction color used for buttons and in-text links.

The consistent application of these colors will align USAC products with the unified vision of One USAC across all tools.

Neutrals

Avoid using text in “midtone” neutrals that do not provide enough contrast. Refer to the contrast section below toensure readability.

Body copy and headings should be set in Neutral 15.

Accent Colors

Always start and end with primary colors. Introduce the accent palette when blue is nicely established. Use accent colors for illustrations, data visualizations, or to highlight unique or noteworthy information.

• To increase their effectiveness, accent colors should be used sparingly as graphical elements.
• Do not use $indi-color-accent-Purple-61 and $indi-color-accent-Purple-84 for text as these colors lack sufficient contrast.
• Only use $indi-color-accent-Purple-16 and $indi-color-accent-Purple-38 for text.
• Some appropriate use cases for accent colors include, but are not limited to:
  • Card Borders: Use accent colors to differentiate sections or highlight important content.
  • Backgrounds: Apply subtle accents for emphasis without overwhelming primary colors.
  • Tags: Color-code tags for better visual organization and quick identification.
  • Graphic Elements: Enhance illustrations and data visualizations with accent colors.

Alerts and Notifications

Elements that appear rarely, such as notifications, should be distinguishable from other elements and should not use the primary or accent colors.

• The swatches below show appropriate "contrast" colors for each tint.
• Use only $indi-color-notification-alert-default for text, including error messages. Reserve the remaining default alert/notification colors solely for graphics.

Map Colors

Map Points

Use map point colors for foreground objects, such as points or lines.

• The primary colors are green, purple, orange, and blue. All other colors are secondary.
• To meet contrast accessibility standards, reserve $indi-color-map-point-mint and $indi-color-map-point-yellow for darker backgrounds like satellite imagery. Use the remaining map point colors on lighter backgrounds.

Map Fills

Use map fill colors for background fills, overlays, and transparencies.

• The primary colors are green, purple, orange, and blue. All other colors are secondary.
• Map fills should be used with text that is $indi-color-neutral-25 or $indi-color-neutral-15 to provide sufficient contrast.

Map Ramps

Use a color ramp to represent a single thematic issue, such as population density.

• The primary colors are green, purple, orange, and blue. All other colors are secondary.
• The swatches below show appropriate "contrast" colors for each level.

Contrast

Contrast distinguishes words and images by creating a noticeable difference in color. Use it to separate elements and groupings in a layout, ensuring accessibility for all users.

To be compliant with Section 508 of the Rehabilitation Act (29 U.S.C. 794d) and Level AA of the Web Content Accessibility Guidelines (WCAG) 2.2, all text and images of text must have a contrast ratio of 4:5:1, except for large text (24 px or larger) which must have a ratio of at least 3:1. For more information on contrast standards and additional exceptions, see the WCAG 2.2 Understanding Docs.