Color

The Norton color system ensures that colors can be used in a predictable way across your application and content.

Terms

A color family is a collection of colors of the same hue. Individual colors within the family have different brightness and/or saturation. A color family is referred to by its generic hue name, such as red, teal, or gray. By default, every color family contains 10 total grades.

A color grade is numbered a step corresponding to the brightness of that color. A higher number corresponds to a darker color and a lower number corresponds to a lighter color. By default, grades start at 10 and increase by increments of 10 up to 100.

Accessibility

The Norton color system is designed to ensure consistent color contrast across all color families. To accomplish this, grades are normalized across color families to have a similar level of color contrast against black or white.

Grades of 60 and higher are designed to meet the minimum color contrast ratio for WCAG AA when used with pure white (#fff). Conversely, grades of 50 and lower are designed to meet WCAG AA requirements against pure black (#000).

Design Tokens

The Norton color system uses role tokens for theming and system tokens as a basis for all color families. Color system tokens use a naming pattern of {family}-{grade}, such as cyan-30. Color role tokens use a naming pattern of {role}-color-{grade}, such as primary-color-70.

System Tokens

The following table lists all the system colors in the Norton Design System, as well as their contrast ratio against pure white and pure black.

Avoid direct use

Using system color tokens directly will make your application more difficult to theme. Rather than using system colors directly, use role colors in your designs. Role colors can be mapped to system colors to modify your design more broadly and consistently.

For instance, if you want a component's border color to be gray-40, set your base-color to use the gray family and then set your border color to base-color-40. The role—or purpose—of the base-color is to be used for backgrounds, borders, and other neutral design features.

Token name	Hex value	Contrast ratio against white	Contrast ratio against black
red-10
red-20
red-30
red-40
red-50
red-60
red-70
red-80
red-90
red-100
yellow-10
yellow-20
yellow-30
yellow-40
yellow-50
yellow-60
yellow-70
yellow-80
yellow-90
yellow-100
green-10
green-20
green-30
green-40
green-50
green-60
green-70
green-80
green-90
green-100
teal-10
teal-20
teal-30
teal-40
teal-50
teal-60
teal-70
teal-80
teal-90
teal-100
cyan-10
cyan-20
cyan-30
cyan-40
cyan-50
cyan-60
cyan-70
cyan-80
cyan-90
cyan-100
blue-10
blue-20
blue-30
blue-40
blue-50
blue-60
blue-70
blue-80
blue-90
blue-100
purple-10
purple-20
purple-30
purple-40
purple-50
purple-60
purple-70
purple-80
purple-90
purple-100
navy-10
navy-20
navy-30
navy-40
navy-50
navy-60
navy-70
navy-80
navy-90
navy-100
gray-10
gray-20
gray-30
gray-40
gray-50
gray-60
gray-70
gray-80
gray-90
gray-100

Role Tokens

All color roles reference either a single color or a family of colors. When a role color references an entire family, its grades will map one-to-one.

Single-value role tokens

The following role tokens map to a single value.

Token	Default value	Usage
background-color	white	The main background color
text-color	base-color-90	The main text color
text-color-inverse	background-color	A contrasting text color
subdued-color	base-color-60	De-emphasized, muted, or subdued content
selection-background-color	null (unset)	The background color of user-selected text
selection-text-color	null (unset)	The text color of user-selected text
focus-color	blue-50	The color used when an element has been focused (:focus)
focus-halo-inner-color	background-color	The inner color of the focus halo
focus-halo-outer-color	focus-color	The outer color of the focus halo

Family role tokens

Role tokens that map to an entire family use two configuration options to determine the mapping:

• A family that references a color family's name (e.g., "cyan").
  • Configured with the ${role}-family Sass option.
• An optional grade that defines the midpoint of the shade map.
  • Configured with the ${role}-grade Sass option.

Role	Default family	Default grade	Usage
primary-color	"teal"	60	The family used in components that have a default color
base-color	"navy"	undefined	Background, border, or shadow gradients
disabled-color	"base"	30	Not currently usable, non-interactive
error-color	"red"	60	Error, danger, or incorrect
success-color	"green"	60	Success, passing, or correct
warning-color	"yellow"	60	Warning or caution

The result will include an entire 10-grade family for the role, plus a shade map if a midpoint grade is defined.

For example, setting $primary-family to "purple" and $primary-grade to 70 results in the following shade and family map.

Shade	Value
primary-color-lighter	primary-color-50
primary-color-light	primary-color-60
primary-color	primary-color-70
primary-color-dark	primary-color-80
primary-color-darker	primary-color-90
primary-color-10	purple-10
primary-color-20	purple-20
primary-color-30	purple-30
primary-color-40	purple-40
primary-color-50	purple-50
primary-color-60	purple-60
primary-color-70	purple-70
primary-color-80	purple-80
primary-color-90	purple-90
primary-color-100	purple-100

In Sass, these options can be configured globally on use:

@use '@wwnds/core' with (
	$primary-family: 'purple',
	$primary-grade: 70,
);

Or you can apply them with the provided Sass utilities:

@use '@wwnds/core' as nds;

.my-purple-element {
	// .set() applies a list or map of values as CSS custom properties
	@include nds.set(
		$nds-primary-color: nds.family("primary-color", "purple", 70)
	);
}

Shade maps

When mapping color families to other color families, you can choose to include a midpoint grade, resulting in a 5-grade shade map.

Shade	Description	Example
{role}-lighter	two grades lighter (-20)	primary-color-lighter
{role}-light	one grade lighter (-10)	primary-color-light
{role}	the midpoint shade	primary-color
{role}-dark	one grade darker (+10)	primary-color-dark
{role}-darker	two grades darker (+20)	primary-color-darker

Color Schemes

Customizing the color system's role tokens is one of the easiest ways to begin theming an application. We ship default light and dark and color schemes, but you are encouraged to create your own scheme(s) to suit your needs. By default, the dark color scheme uses the same color families as the light scheme but simply inverts the grade scale.

See the $light-scheme and $dark-scheme maps in the color tokens stylesheet for a closer look at how this is accomplished.

Work in progress

The dark color scheme is still being tested and must be turned on with the $enable-dark-scheme flag at this time.

@use '@wwnds/core' as nds with (
	$enable-dark-scheme: true,
);