Colors

Colors

These are the default colors used across the ServiceNow platform. These colors are used for various UI elements, backgrounds, icons, etc. All of the colors are defined at their base as a Sass variable, such as $color-darkest. This variable is then used to color other aspects of the UI. For example, $color-darkest is used to color the titles in a header. This is achieved by defining a variable to target the header text color ($header-text-color) and assigning the $color-darkest variable to it. In the future if any changes are made to $color-darkest, those changes will be reflected by $header-text-color.

Developers are strongly encouraged to use the Sass variables for the colors instead of the hex values.

Main Colors






$color-darkest





$color-darker





$color-dark





$color-light





$color-lighter





$color-lightest





$color-accent





$color-accent-light





$color-black





$color-gray





$color-white

Example Uses






$color-white
The default background for lists, forms, home pages and applications





$color-lightest
Additional background that can be used to highlight / segregate a part of a layout. For example, within a visualization or application.





$color-black
Default text color





$color-darker
Text color used in the Navigation and Application Headers





$color-dark
Additional text color





$color-accent
Main accent color used for items such as the primary button, icons, and links





$color-accent-light
Color that highlights a selected item, including toggles, tabs, and drop down lists

Colors Used in Moderation

Adding additional colors to an application is acceptable at times, but any colors used outside of the base palette should be used in moderation. Careful consideration should be made as to why they are being used. Red and green are examples of colors that typically have a meaning when used for a button as being a positive or negative action.

Positive / Warning / Negative Colors (green / yellow / red)






$color-positive
Positive buttons, enabled options





$color-warning
Warnings





$color-negative
Negative button (delete), error

Accent Colors






$color-purple





$color-purple-light





$color-purple-lighter





$color-blue





$color-blue-light





$color-blue-lighter





$color-cyan





$color-cyan-light





$color-cyan-lighter





$color-green





$color-green-light





$color-green-lighter





$color-yellow





$color-yellow-light





$color-yellow-lighter





$color-orange





$color-orange-light





$color-orange-lighter





$color-red





$color-red-light





$color-red-lighter





$color-pink





$color-pink-light





$color-pink-lighter

Chart Colors

These colors should be used to define the series of a chart. Each series should be colored in the order listed below. The reason for maintaining this order is to keep each series as distinguishable as possible and try not to have too many similar close colors together. Teams should get their colors from the default palette. If a team needs to build a chart that follows the default palette, they must work with one of the designers to pick what colors are allowed for their specificuse case.

Chart colors should not be implemented by hard coding specific colors.






$color-chart





$color-chart





$color-chart





$color-chart





$color-chart





$color-chart





$color-chart





$color-chart





$color-chart





$color-chart





$color-chart





$color-chart





$color-chart





$color-chart





$color-chart





$color-chart





$color-chart





$color-chart





$color-chart





$color-chart

Chart Colors should be used to define the series of a chart. Chart colors should not be implemented by hard coding specific colors. The platform allows users to configure chart colors.

  • The default palette is still being discussed and will be updated in an upcoming version of this styleguide.
  • Teams should get their colors from the default color palette.
  • If a team wants to build a chart that doesn't follow the default palette, the must work with one of the Designers to pick what colors are allowed for specific use case.
  • More to come as the Reporting team finishes some work very soon.