Color

Color creates a rich experience and helps define consistent patterns across anthem.

Within your experience, you can use color to format the backgrounds of different components, text and highlight colors, icon colors, and more. Choose purposeful colors that enhance the meaning of words and symbols, as well as provide enough color contrast between different elements so that users can easily see and use your experience. The colors in your experience must align with the uses defined here so that all users have a consistent experience regardless of the screen they're interacting with.

• Use the 60-30-10 rule to ensure your use of color is well-balanced. Anthem uses Evergreen 60% of the time, Cyan 30% of the time, and white 10% of the time.
• Make sure your color choices comply with the Web Content Accessibility Guidelines AA standard maintained by the World Wide Web Consortium (W3C).
• Avoid using any tone of red and green together, because people with certain types of color blindness cannot distinguish between them.
• Avoid red unless you need to convey a negative meaning. For more information on colors with specific meaning, see Semantic colors below.
• Follow anthem guidelines for choosing colors in charts.

The anthem color palette is strategically rooted in the personality that we try to convey: Ambitious, Visionary, Leader, Honest, Conscientious.

Our primary color, Evergreen, particularly when set alongside Emerald and Citron, feels simultaneously grounded and ambitiously forward-thinking. Our supporting blues balance out the palette with a more calming sensibility, blues most frequently being associated with trustworthy levelheadedness.

Evergreen

Evergreen is our primary brand color, which means it takes precedence in the design. Our global navigation elements in the framework use Evergreen because it's the anchor of our experience and brand colors. Evergreen acts as a backdrop for the other brand colors.

Deep Ocean

Deep Ocean is our secondary brand color, which is used to compliment Evergreen. Panels and dialogs use Deep Ocean as the background color. Like Evergreen, Deep Ocean can act as backdrop for other brand colors.

Cyan

Cyan is our primary call-to-action color. We use it for icons and buttons that represent primary actions within the screens. This color signals to users what they should select to get something done.

Cobalt

Cobalt is our secondary call-to-action color. We use it for icons and buttons that are secondary actions for users. This color signals to users what they should select to get something done.

Emerald

Emerald is our active color for interactions. The secondary tone indicates to users when an item is expanded, such as table rows and filter panels. The primary tone can also be used as a decorative accent.

Citron

Citron is a decorative accent color, which can be used in images or other media to provide visual interest. We don't use citron for UI elements.

Neutrals provide subtle tones of color for UI elements that we don't want to draw too much attention, such as disabled buttons.

The color palette can be extended to include gradients that bring a sleek, modern feel to the brand. A horizontal gradient is used as the backdrop that the rest of the UI rests on. This gradient is designed to symbolize the vast space that is the ever-expanding TraceLink network.

Semantic colors help users identify statuses, recognize priority, and understand outcomes of their actions. Consistently using these colors to mean the same thing keeps cognitive load lower, in addition to use of consistent iconography.

Emerald

Emerald signals success, such as a confirmation, adding something new, or being on time.

Red

Red signals failure, such as an error or being past due.

Orange

Orange signals in progress or a warning, such as something pending or something in danger of becoming past due.

Using color alone to distinguish meaning can be problematic for users with low vision or color blindness. However, you can use specific colors that are distinguishable from each other for these users. These accessible colors also improve the experience for all users by increasing the contrast between UI elements, like the bars in a chart.

The colors below are chosen specifically because when placed next to each other, they are distinguishable to users with low vision and all types of color blindness.

• For most charts, one color can be used for all values in the chart. If the chart represents values that have a specific priority, weight, or significance to them, use different shades of the same color to represent that significance. Always use the darkest shade to show the data point with the most significant value, and go lighter in shade by 10% as the values get less significant.

  

  Do

  Use multiple tones of the same color to represent a difference in priority.

  

  Don't

  Don't use multiple colors to represent a difference in priority.

• Only use multiple accessible colors in charts when you either need to show visual distinction between values in order for the chart to be understood (e.g. a multi-series bar chart or pie chart) or when you've already established a color pattern throughout your experience by using specific colors to represent different objects or concepts. For example, if your entire experience uses Tory Blue to represent dramas, Magenta to represent political movies, and Fuel Yellow to represent historical movies, then a chart with values for each of those genres could use those colors.
• Always include a legend in any chart that requires multiple colors, so users don't have to think too hard about what each color represents.

  

  Do

  Use multiple colors when visual distinction is necessary to understand the values in the chart.

  

  Don't

  Don't use multiple colors just for visual interest.