Color

Overview

Color plays an important role in Aurora, serving more than just an aesthetic choice, but also conveys the Iterable brand, emphasizes important elements, and guides marketers throughout the product.

Color selection should be considered carefully, and the guidelines below hope to assist in making that decision more effortless.

Palette

Applying color

While not a concrete set of rules, the following guidelines help align color application and semantic meaning throughout the product. Please reach out in the #design-system Slack channel for more information on color roles and the best way to apply them.

Color roles

Semantic colors used in Iterable can help marketers identify and understand important interactions within the product. These colors have been thoughtfully selected so that they meet WCAG 2.1 compliant contrast ratios—making it more accessible for marketers who have low vision or color blindness.

While color can provide affordance to a particular element’s function, information should never be conveyed through color alone.

Ref to 29996:248903

Backgrounds

Background colors are applied to cards, containers, or even the body of page. The default background colors are generally the ‘10’ value of their respective hue in our palette. In most cases, the primaryBg or secondaryBg should be used.

Elements that have colored backgrounds other than white may bleed into the background when using secondaryBg. This can be resolved by applying the subtle border variables of that respective color to the element.

Ref to 30891:322254

Ref to 29996:248962

Ref to 29996:248982

Color tokens

Color tokens are variables that reference the main palette and are applied to UI elements to easily control styling at global or atomic level. The token naming convention is generated by referencing the type of token (color in this case), the component, the semantic color role, and the interaction state of the UI element.

Ref to 29996:248999