Colors

Principles

Focus

For Heartland materials, white (except when in dark mode) is the most prevalent color. Use white and empty space liberally to help designate contrast, and to help users focus on the content. It also helps visual elements breathe.

White and other neutral colors help add some level of depth to an illustration. By using white in the background, this helps the eye focus and create a clear center of attention.

Balance

We must be sure to keep the number of colors limited to our existing palettes. We must avoid information overload by keeping these simple, and making sure that the contrast of different elements remain clear.

By using white as a background, this helps avoid overwhelming users with an overload of color. You may use tints of a color to help create some contrast and depth to an image.

Clarity

Make use of neutral colors to help build hierarchies. Color should be used to convey meaning, particularly when used for text.

Accessibility

Make sure you use enough contrast to make it possible for differently-abled individuals to be able to view the difference between elements on the page. Colors should meet a minimum of the WCAG AA-level accessibility standards.

Color Mix

Adhere to existing color palettes, as not all colors work well with each other. Consider using accent colors or light grey for emphasis. Do not mix or overlay accent colors inappropriately, as this can not only affect the professionalism of the page, but also can impact accessibility. Use of Heartland red should be reserved for the logos, a few specific CTAs, and a few key design elements, but should not be used in other places.

Color Tokens

We use tokens as the building blocks for creating the Vega Design System. Tokens exist as the values that are necessary to construct and manage the system. We use color tokens to help manage, maintain, and control the consistency of the look and feel for all Heartland systems.

To help maintain this balance, we have divided our tokens into two basic categories: the base tokens which hold specific color information, and alias tokens that are defined by the functions that these colors have within the system.

Note: Base tokens should not be used for styling specific components. They are the variables which hold information about individual colors, but for reasons of consistency, especially when change occurs, these are not used except at the system-level for describing what goes into alias tokens, which are the building blocks for the Vega design system.

Alias Color Tokens

Alias tokens are the building blocks for the system, and can be used for components, and in other places. Alias tokens are derived directly from base tokens but provide a functional naming system to help designers and engineers choose the right color for their intended purpose. If the base token for each of these aliases is changed, no change needs to be made to the alias token. The use of aliases is to ensure consistency across the system, even if it is modified.

Alias tokens are provided in a range of formats, specific to their function. These include:

• Light mode (default)
• Dark mode
• High-contrast light mode
• High-contrast dark mode

Naming Format

Alias color tokens are named for their intended purpose and use a naming format of property-variant:state.

Color tokens are organized for specific use-cases. The naming convention used for the token types is designed to provide assistance in determining how and where to use the token.

Example: bg-action:hover

• The property attribute is the only required part of the name; it describes the purpose of the color.
• The variant suffix can be used to define different ways in which a color can be used within the above property context. If it represents the default use of the color, the variant may be excluded.
• The state suffix is added to a color to indicate how it is used in relation to the state of the element or component for which it is being used.
• Note: Other attributes may be added at the end of the color token for special purposes.

Properties

Token properties are organized into the following use-case-driven categories.

Background Colors

Background colors are prefixed with bg-

• Brand - This token type should be used only for branding purposes, and should be used for the Heartland brand.
• Page - Used for page backgrounds.
• Transparent - A basic transparent background.
• Primary - Used as a primary content background.
• Secondary - Secondary level backgrounds, one level (z-index) higher than primary.
• Tertiary - Third level backgrounds, one level (z-index) higher than secondary.
• Quaternary - Fourth level backgrounds, one level (z-index) higher than tertiary.
• Inverted - Used when needing light colors over a dark background (or vice-versa when in dark mode).
• Action - Used for action elements, such as buttons. Action tokens should only be used for actionable elements.
• Danger - Errors or explicit warnings. These should only be used for this purpose.
• Status - Used for status banners. For success, warning, informational, or error messages.
• Sidebar - Used for sidebar backgrounds.
• Backdrop - Backdrop backgrounds, used with modals.
• Accent - Used only for illustrations and various graphics (e.g. charts).

Text Colors

Text colors are prefixed with text-

• Primary - Used for most in-page text.
• Inverted - Used against dark backgrounds (or vice-versa when in dark mode).
• Secondary - Used for subheadings.
• Inverted - Used against dark backgrounds (or vice-versa when in dark mode).
• Link - Used for all in-page links.
• Danger - Used for error messages. These should only be used for this purpose.
• Sidebar - Used for text colors in sidebars.
• Input-placeholder - The color used for input placeholder text.
• Accent - Used only for illustrations and various graphics (e.g. charts).

Border Colors

Border colors are prefixed with borderColor-

• Action - Used for only action elements, such as buttons.
• Input - Used as borders for input-fields.
• Sidebar - Used primarily for borders around sidebar items (used only for focus states).

Base Color Tokens

Base color tokens hold information about specific colors.

Naming Format

Base tokens use a naming format of colorName-tone, and are graded on a scale of 10-90 (from lightest to darkest).

Example: green-60.

Reminder: Do not use base tokens in your designs. Use the Alias tokens to avoid the risk of inconsistencies in the future.

Designers

While many techniques are used in Figma for creating designs, to use Vega appropriately, there are a few important guidelines to consider.

In order to maintain consistency, enable automatic color updates, and ensure accurate and appropriate color usage in Figma, the following approaches should be avoided:

• Copying and pasting Hex values into Figma files
• Using screenshot or eyedroppers for selecting colors.

Instead, please apply colors using the Vega plugin.

Color Updates

If there are any needs to change, modify, or add colors, please contact the Vega Design system team first. This is especially true for the Figma design stage, but also for developers and CSS files

Color Token Table