Using Background Colors

The majority of your site should be on a light background, which are best suited for longer, content-heavy components.

• None
• Light Gray
• Divider

Using dark backgrounds (maroon or charcoal) are a great way to bring in brand colors or emphasize pieces of content. Because of the strain on a reader’s eyes, it is best to use dark backgrounds on content-light components with less copy.

Background Color Proportions

Light backgrounds should be used more often than dark backgrounds. Maroon should be used significantly more than charcoal as a background.

Caution: Avoid Zebra Striping

Swapping between dark and light components too often can cause visual fatigue.

Instead of swapping between light and dark backgrounds every component, consider using dark components thoughtfully and strategically to instead draw attention to sections. If it’s used too often, it loses its effect and can lead to visual fatigue. Dark backgrounds are generally better suited for shorter content.

Caution: Avoid Charcoal and Maroon Back-to-Back

Avoid using maroon and charcoal backgrounds next to one another. Due to the saturation of our brand maroon, putting these two colors next to each other can create a vibrating effect that can hurt users’ eyes. Instead, consider separating dark backgrounds with multiple light backgrounds and/or a divider.

Use White Background Above Components that “Break the Container”

Some Aggie UX components (such as split feature or media feature) “break the container,” meaning the cards look as if they are partially stacked on top of an image or colored background container.

Put components with white (none) backgrounds above components that “break the container” to have the intended effect. Because of the way these are coded, the background color from the component above will not extend beneath the cards that are offset from their own background.