Color

Color is used purposefully in a user interface to draw attention to something, or to show how components interact.

Principles

The color palette was created with the following principles in mind.

Graphic representing the same color with different shades ranging from light to dark.

Flexible

Each color is provided in a range of variants to allow for design flexibility, as well as light and dark mode themes.

Graphic representing components with color constrast.

Accessible

Color combinations meet WCAG 2.2 AA standards to ensure legibility for color-blind and low vision users.

Graphic representing color and visual clarity.

Purposeful

Color should not compromise communication. It should be used purposefully to support the content.

Graphic representing the role colors plays when determining importance.

Hierarchical

Color should indicate which elements are interactive, as well as their level of prominence.

Color Library

Our color library helps ensure that the colors used in an interface are accessible, harmonious, and effective at communicating the intended message. They are also selected to match the Avaya branding guidelines.

Neo has 5 functional colors used to communicate meaning, such as errors, warnings, success, etc. Each color contains 9 variants to provide flexibility in design, support for light and dark modes, and sufficient contrast for accessibility (see below for more information). See Design Tokens for guidance on platform specific usage.

Neo also has a base grayscale consisting of 11 variants used to create a visual hierarchy throughout the interface - white, black and equivalent levels as functional colors. The grays are neutral to ensure they do not distract users from the main focus when completing tasks. They should be used across all other elements on the interface, including text, backgrounds, borders and sections.

neos color library

How to Use

Each of the main color groups have specific uses cases. Select a color to see when to use that color in your UI designs.

Base Color

graphic representing base color use for text

Text

For headers and regular body content.

graphic representing base color use for disabled states

Disabled States

Inactive components, such as buttons, input fields and sections.

graphic representing base color use for containers

Containers

Backgrounds and borders for sections such as navigation, headers and cards.

Red Color

graphic representing reds use for errors

Errors

Appear in messaging and status, such as banners and form fields.

graphic representing reds use for negative values

Negative

Below zero values such as amounts, balances and scores.

graphic representing reds use for destructive actions

Destructive

Alert for irreversible actions such as permanent deletion.

graphic representing reds use for high priority items

High Priority

Items that require immediate attention.

graphic representing reds use for overdue items

Missing & Overdue Items

Overdue tasks, missing required items, or missed interactions.

graphic representing reds use for ending or closing interaction

End Interactions

Finish interactions, such as leaving a call or meeting, and closing a session.

Orange Color

graphic representing greens use for warnings

Warnings

Related to messaging and states, such as banners and form fields.

graphic representing greens use for pending states

Pendings

Displaying interactions in a paused or waiting state.

graphic representing greens use for medium priority

Medium Priority

Items that require attention after high priority items.

graphic representing greens use for active items

Upcoming/Due Soon

Upcoming due dates for tasks, items, and interactions.

Blue Color

graphic representing blues use for information

Information

Used for messaging and status, such as banners and form fields.

graphic representing blues use for interactive items

Interactive Items

Links, buttons, and interactive inputs such as checkboxes and radio buttons.

graphic representing blues use for hover states within lists

Hover States in Lists

Within dropdowns lists, tables and other list items.

Green Color

graphic representing greens use for success

Success

Related to messaging and states, such as banners and form fields.

graphic representing greens use for postive values

Positive

Above zero values, such as amounts, balances and scores.

graphic representing greens use for active states

Active States

Including ready, available, online and similar states.

graphic representing greens use for active items

Active Items

Completed or active tasks, items, or interactions.

graphic representing greens use for start interactions

Start Interactions

Begins an interaction, such as accepting a call or a meeting, or starting a session.

Purple Color

graphic representing greens use for an observing agent

Supervisor and Observing Agents

Related to messaging and states for these users.

Data Colors

Data colors are a collection of color maps used in data visualization. The colors to use are defined by the data type.

Graphic representing categorical color visualization with a number of distinct colors related to different animals.

Categorical

Data that does not have numeric meaning should be communicated with a categorical color scheme. This scheme contains individual hues designed to be visually distinct from one another, while also being color-blind safe.

Graphic representing sequantial color visualization with blue color swatches ranging from light to dark.

Sequential

Data that has numeric meaning and progresses from low to high (i.e. sequentially) should be displayed with a sequential color scheme. This scheme employs a continuous range of colors from light to dark.

Graphic representing diverging colors with dark green color swatches slowly fading into red color swatches.

Diverging

Data that has numeric meaning and includes negative values, or ranges within 2 extremes, should be displayed with a diverging color scheme. This scheme contains 2 ranges of colors that meet in the center.

Accessibility

The improper use of color can create barriers for users with color blindness or low vision. Users that are color-blind struggle to differentiate between some colors, while those with low vision experience difficulties viewing an interface.

Graphic demonstrating various types of color blindess.

Color Blindness

Color blindness (also known as Color Vision Deficiency) affects approximately 1 in 12 men and 1 in 200 women. There are different forms of color blindness in which people have difficulty distinguishing certain colors, with extremely rare cases of those who cannot see color at all. The most common forms of color blindness are Deuteranomaly/Deuteranopia (green weak/blind), which affects 6% of men, and Protanomaly/Protanopia (red weak/blind), which affects another 2%. Tritanomaly/Tritanopia (blue weak/blind) is very rare, affecting less than 0.001% of men.

Graphic demonstrating low vision.

Low Vision

Low vision is often referred to as "partially sighted" and “sight impaired.” It is estimated that approximately 246 million people worldwide have some level of vision impairment. The level of impairment varies from person-to-person and can include: visual acuity (clarity/sharpness of vision), light sensitivity, contrast sensitivity, and field of vision (the area one can see when their eyes are focused in one place).

To help people with these issues, colors should be used as follows.

  • Use color with other visual means of communication.
  • Color alone should not be used to convey information as the content may not be apparent to those with color blindness or low vision. Color should be combined with other elements, such as labels or shapes. In addition to making it easily legible, it also makes items quicker to process for those with normal vision.
  • Use sufficient contrast between elements. Navy blue text on a black background is hard for anyone to read.
  • To ensure the interface is clearly legible for all users, use these rules when applying colors to text and UI elements. These apply to all colors at the same level (e.g. Red-100 is equivalent to Blue-100, Green-100, etc.). Note that decorative items (such as branding images) do not need to meet this requirement.