Accents

Compass accent colors leverage the brand digital accent colors to provide a pop of color to visual elements on a Compass website. These colors, broken into a background and foreground color, are cofigured on the root of each page.

Defaults

Out of the box, Compass uses the rust color as the accent background color, and white as the accent foreground color.

Background

  • var(--cwf-accent-background)
  • var(--vcu-rust)

Foreground

  • var(--cwf-accent-foreground)
  • var(--vcu-white)

The accent background color can be overwritten using any other brand accent color without having to update the accent foreground color. When using a non-brand accent background color, ensure the accent foreground color has enough color contrast to be used with text atop the accent background color.

Affects

The configured accent background and foreground colors affect many things on a Compass website. This includes: