Colors

In this section we will be focusing on specific ways to trigger the colors available in our color palette in both the AEM CMS, and when utilizing the BGSU official CSS styles in other implementations.

Full details on the official BGSU color palette, including print colors, is available on our Official Identity Colors page.

Implementing colors in AEM CMS

More often than not, you won't need to worry about colors, as the various components that you utilize in AEM will automatically drive appropriate color choices for you. However, some components do provide various methods for you to change colors. It's important that you follow our digital guidelines when choosing colors so that we maintain a consistent experience for our users. It's also important to follow accessibility standards to ensure things are visible/legible for all users.

Color Guidelines

Links

In our digital experiences we've established that orange text, more often than not, is a link. When available, we further style orange text with other differentiators so that it's clear to the user they can expect it to link out to other content.

How we further distinguish links.

Links often have a hover state that help indicate to a user that it is a link
- These hover states are not readily available on mobile or tablet experiences so we cannot rely on those alone
Most links within text will not only be our official BGSU orange, but will also be underlined in a consistent manner. In the AEM CMS this will occur automatically.
Other links, such as our "left-navigation" has an orange border on it's left side to further help distinguish it as a link, this pattern is sometimes used in other places as well.

It is important that you do not use orange text as a means of design or emphasis in any way that might cause a user to think it is a link. There are certain scenarios where orange text in a heading for design/emphasis is acceptable, however it should never occur within regular body copy.

Secondary Colors

Although we've established secondary colors within the BGSU brand, it is importnat to follow the color ratios described in the official identiy colors when using these. In short, the secondary colors should only total about 20% of all color used in a design.

Triggering colors in AEM

When components provide options for colors in AEM, you may see any of the following options.

Drop-down: Colors may appear as text options in a drop-down field to select a limit number of colors made available to users
Color picker: A color picker may appear that allows you to select, visually, a color from a limited palette. This will populate a field with a color value, which also could be manually filled
RGBA: Components may ask for an RGBA color value within a text field. This stands for Red, Green, Blue, Alpha - and allows a user to define a color by these three primary color channels as well as an "alpha" channel which describes the opacity, or transparency, of that color ranging from 0.0 to 1.0

RGBA Color Values

Orange

RGBA: 253,80,0,1.0

Brown

RGBA: 79,44,29,1.0

Gold

RGBA: 245,193,100,1.0

Coral

RGBA: 243,123,108,1.0

Tan

RGBA: 186,156,128,1.0

Seafoam

RGBA: 128,186,172,1.0

Rose

RGBA: 227,164,146,1.0

Teal

RGBA: 28,98,109,1.0

CSS Color Variables

If you are implementing a BGSU design as a third-party and utilizing the BGSU CSS styles, either by direct link or hosting a derivative version we ask that you reference established CSS variables in all of your rules. This will allow us to quickly adjust style rules in the future if our official colors need adjusting.

var(--bgsu-orange);
var(--bgsu-brown);
var(--bgsu-gold);
var(--bgsu-coral);
var(--bgsu-tan);
var(--bgsu-seafoam);
var(--bgsu-rose);
var(--bgsu-teal);

Updated: 05/15/2023 11:55AM