Color

Usage

Colors are available from the core package. Colors are usable in CSS:

@import '@pluralsight/ps-design-system-core';

.mySelector {
  color: var(--ps-colors-blue-6);
}

Click to expand

Colors are also usable in JavaScript:

import {
  colorsBlue
  /* other named exports */
} from '@pluralsight/ps-design-system-core'

myCssInJsSolution({
  color: colorsBlue[6]
})

Background colors

There are three background colors available to use for surfaces in the app. The lower the number, the lower the elevation of the surface. Background 1 Is the app background.

Dark

Light

Utility color

Use utility color with transparency to lighten or darken backgrounds beyond the three colors provided.

Utility base coma seperated values

Utility with transparency on a dark background

Utility with transparency on a light background

Primary action & text link colors

Status colors

Text & icon colors

On dark backgrounds

On light backgrounds

Border colors

On dark backgrounds

On light backgrounds

Brand gradients

Code colors

Neutrals

All colors

These are additional colors beyond the core set. They can be used for things like illustrations, complex data visualizations, etc.