Skip to main content

Color

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

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.

Token nameHex valueContrast ratio against whiteContrast 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.

TokenDefault valueUsage
background-colorwhiteThe main background color
text-colorbase-color-90The main text color
text-color-inversebackground-colorA contrasting text color
subdued-colorbase-color-60De-emphasized, muted, or subdued content
selection-background-colornull (unset)The background color of user-selected text
selection-text-colornull (unset)The text color of user-selected text
focus-colorblue-50The color used when an element has been focused (:focus)
focus-halo-inner-colorbackground-colorThe inner color of the focus halo
focus-halo-outer-colorfocus-colorThe 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.
RoleDefault familyDefault gradeUsage
primary-color"teal"60The family used in components that have a default color
base-color"navy"undefinedBackground, border, or shadow gradients
disabled-color"base"30Not currently usable, non-interactive
error-color"red"60Error, danger, or incorrect
success-color"green"60Success, passing, or correct
warning-color"yellow"60Warning 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.

ShadeValue
primary-color-lighterprimary-color-50
primary-color-lightprimary-color-60
primary-colorprimary-color-70
primary-color-darkprimary-color-80
primary-color-darkerprimary-color-90
primary-color-10purple-10
primary-color-20purple-20
primary-color-30purple-30
primary-color-40purple-40
primary-color-50purple-50
primary-color-60purple-60
primary-color-70purple-70
primary-color-80purple-80
primary-color-90purple-90
primary-color-100purple-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.

ShadeDescriptionExample
{role}-lightertwo grades lighter (-20)primary-color-lighter
{role}-lightone grade lighter (-10)primary-color-light
{role}the midpoint shadeprimary-color
{role}-darkone grade darker (+10)primary-color-dark
{role}-darkertwo 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.