Color

Overview

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

Color selection should be carefully considered, and the guidelines below aim to make that decision easier.

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 to meet WCAG 2.1-compliant contrast ratios—making them more accessible for marketers with low vision or color blindness.

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

Backgrounds

Background colors are applied to cards, containers, or even the page body. 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.

Background examples

Background Banner example

Background ActionMenu Example

Color tokens

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

Color tokens example