Skip to main content
v1.0.5

Colors

Use color modifiers to to give elements background and text colors drawn from the Pivotal UI color palette.

Prepend any color name with bg- to apply that color to an element's background. Prepend any color name with type- to apply that color to an element's text.

Text colors

I'm a brand color!

I'm an error color!

Background colors

I'm a brand color!

I'm a warning color!

Color palette

  • black
  • dark-gray
  • gray
  • accent-gray
  • gray-150
  • light-gray
  • white
  • teal
  • accent-teal
  • light-teal
  • dark-blue
  • blue
  • accent-blue
  • light-blue
  • dark-red
  • red
  • light-red
  • green
  • accent-green
  • light-green
  • decorative-yellow
  • light-yellow

Imports

Import CSS:

import 'pivotal-ui/css/colors';