Visa Product Design System

Colors used within the Visa Product Design System were adapted from Visa brand colors for digital products and experiences. These colors were designed to provide flexibility to designers and developers, including themes for Visa-branded products and generic colors which serve as a starting point for representing clients and fictitious brands.

Reference Visa brand guidance for more information on color use outside product design.

Best practices

Do Use the Visa theme for Visa-branded experiences.

Don't Use external colors for Visa-branded experiences.

Do Use active colors to draw attention to interactive elements, ensuring they are easily identifiable for users.

A dialog component with text and buttons using the active blue color.

Don't Overuse active colors as this can overwhelm users and reduce their effectiveness.

An informational section message using the informational messaging color.

Do Use messaging colors specifically for messages to ensure clarity and consistency in communication.

Buttons in a form using the warning messaging color.

Don't Use messaging colors for any other purpose than messaging components, as this can cause confusion.

Active colors

Active colors are the primary color used to indicate interactivity. Active subtle is used for interactive pieces that need less emphasis but sufficient contrast.

Surface colors

Surface colors are used for the largest background areas of an application. They are also used as backgrounds on subtler interactive elements in combination with active colors, such as in the secondary button.

Text colors

Text colors are used to ensure readability and accessibility. They are applied to various text elements such as headings, body text, and labels, and are chosen to provide sufficient contrast against background colors.

Decorative colors

Decorative colors are only applied to elements that don’t have color contrast requirements, such as disabled components or container borders. They add visual interest and enhance the aesthetic appeal without impacting functionality or readability.

Messaging colors

Messaging colors are used for components like Section messages, Flags, Banners, and Dialogs, to communicate the urgency of a message or alert. These colors are used sparingly to ensure they don’t overwhelm the primary content.

Color for Visa-branded products

All Visa-branded products should use the Visa theme palette along with the alternate palette to achieve a consistent experience that accurately represents the Visa brand.

Theme background colors

The Visa theme contains two background colors that allow you to change between a default and alternate color treatments. These were designed for navigation headers and bold splash screens. Changing the theme background color will automatically adjust the design tokens to ensure accessibility contrast ratios are met.

Use the alternate palette sparingly and intentionally. Too much color variation can disorient or overwhelm users.

Visa light and Visa dark modes

The Visa light theme serves as the default mode for most use cases, providing a clean and consistent user experience. The Visa dark theme offers an alternative mode for Visa-branded applications, reducing eye strain in low-light environments with its darker colors. Learn more about themes and modes in Design tokens.

A side-by-side view of a web layout, one using the Visa light theme palette and the other using the dark palette.

Color for data visualization

Color can be used as a tool to communicate meaning in data visualizations. To learn how to select the most effective type of color palette for your data visualization, reference the Data Experience team’s design guide for Color (internal only).