Colors

Using CSS variables

As of Fall 2023, the benefits application has CSS variables available for colors only. CSS variables give us a way to maintain consistency in a native CSS way. That means they can be used directly in cshtml, css, and scss files without the need of a pre-processor. Variable names for each color are listed with the color below.

Use in place of a valid color value:

.my-class {
  color: var(--blue-500);
}