FAQs

About Nova

What is Nova?

Nova is the latest version of the Visa Product Design System (VPDS). It embodies the team’s commitment to creating the next wave of Visa products and experiences, marked by enhanced cohesion and consistency.

To learn more about Nova and VPDS, visit What is VPDS?

What is the difference between Nova and Vault Key+?

Nova and Vault Key+ are major versions of VPDS. Vault Key+ is the third and final iteration of the Vault design system. All the code libraries provide low-level accessible Web Content Accessibility Guidelines (WCAG) components to help build experiences that follow Visa’s brand and product guidelines. Nova components are built following Visa Global Accessibility Requirements (VGAR), meeting VGAR, WCAG 2.2, A, and AA standards.

Nova is the current supported version of VPDS and will continue to receive support for the foreseeable future. Since many stable products use Vault Key+, it will continue to receive security and framework upgrades, as well as bug fixes for the foreseeable future. However, all future expansion efforts are now directed toward Nova.

To learn more about VPDS versions, visit Releases.

Why is Nova recommended over Vault Key+?

Nova is the latest version of VPDS and will continue to receive support for the foreseeable future. It includes new design tokens for easy theming, updated visuals, and new libraries for icons and mobile components. Nova components are available in Angular, Flutter, React, or Styles (CSS).

As with any version of our design system, always follow VGAR Test Procedures to ensure experiences meet accessibility requirements.

Does Nova have a stable release?

Yes. For more information, visit Releases.

Is Nova compatible with Vault Key+?

Nova is the latest version of VPDS and is recommended for all new projects. Its Angular, Flutter, React, or Styles (CSS) components can be used along with Vault Key+ components in stable Vault Key+ applications.

Nova and Vault Key+ are separate libraries with different scopes and names, so Nova isn’t backwards compatible with Vault Key+. This means you can’t use Nova as a drop-in replacement for Vault Key+ because they are designed independently. However, both libraries can coexist in the same application using the same Styles (CSS), React, or Angular library versions.

Can I use both Nova and Vault Key+ in the same project?

Yes, you can swap older, Vault Key+ components for Nova versions or add new features in Nova without upgrading the rest of your application.

What is the process and support available for transitioning from Vault Key+ to Nova?

Nova and Vault Key+ can coexist to support a gradual transition to Nova. In addition, Nova is built with first-class theming capabilities to help make this transition smoother. Our team is available to provide help for migration plans as needed.

To get help or join our office hours, visit Support.

Are there any plans to sunset Vault Key+ ?

Currently, there are no plans to sunset Vault Key+. However, as technical specifications evolve and we notice reduced Vault Key+ usage from our analytics, the team may reconsider.

When do I need to upgrade to Nova?

We recommend designing all new Visa products using Nova assets, but there’s no mandated deadline for teams to upgrade to Nova.

What if Nova doesn’t have a component I need?

The VPDS team is continuously adding new assets to the system, including components. If there’s a component you need that’s not in our system, Visa employees can contact the VPDS team by visiting Support.

How do I report a bug or request a feature in Nova?

Reach out to the team for help by visiting Support.

Design

Can I customize or detach Nova components?

Yes, you can detach components. Many components, such as the Dynamic table, include subcomponents that are easier to manipulate once detached. However, remember that design software has limitations on customizing components, especially if you’re creating a variant that isn’t in the design system yet. Ensure you communicate any customizations to your development team early and again during handoff.

Development

Can I use the latest Angular, React, or Flutter versions with Nova?

We regularly update to the latest library and framework versions to add new features, improvements, and security updates to our system while keeping our components stable and compliant.

To learn more, visit the changelogs for Angular, Flutter, React, or Styles (CSS).

Can I use Nova with other design systems, like Bootstrap?

Nova’s class names are unique, but other libraries might have CSS resets that can change the box model, root font size, or layout. We recommend moving away from any outdated libraries and embracing Nova to experience all its capabilities, along with modern Styles (CSS) features like Flexbox and Grid.

Vault used to have a Grid component, but that’s not available in Nova. What should I do?

The Grid component within Vault was a layout utility that was created to support old browsers. VPDS encourages teams to embrace modern CSS features like Flexbox and CSS Grid within Nova, which offer more powerful and flexible layout options.

For more information, reference Grid resources (internal only).

Accessibility

Does VPDS provide accessibility guidance?

Yes, VPDS provides accessibility guidance for designers and developers to ensure people of all abilities can use digital products equally. The team also follows our comprehensive VGAR standards across the system, ensuring that Visa’s digital products meet global accessibility requirements. These guidelines help in planning, design, and development to prevent costly rework.

To learn more about VGAR and VPDS accessibility, visit Accessibility.

Have VPDS components been accessibility reviewed and tested?

Yes. Nova components are built following VGAR, meeting VGAR, WCAG 2.2, A, and AA standards.

Are VPDS components and assets routinely regression tested?

Yes, VPDS components are regression tested annually.

Content

Does VPDS provide guidance for writing content?

Yes. To learn more about crafting thoughtful and concise content, visit Content.

Have VPDS assets been content reviewed?

The Content Design team has partnered with Accessibility to review all available VPDS components for descriptive headings, labels, and more. Additionally, all assets have been reviewed ensuring they follow content guidance for Placeholder text. This means when you use a VPDS component, medium fidelity placeholder content has been added to help your team further edit and customize components.

Data visualization

What are Visa Chart Components?

Visa Chart Components (VCC) are a library of accessible web chart components with robust accessibility configurations to enhance your workflow and ensure your product meets the latest accessibility standards. The VCC library is maintained to provide charts that work alongside VPDS components. VCC can be used with React, Angular, and Vanilla JavaScript.

To learn more, visit Visa Chart Components.

What if I need a chart that’s not in Visa Chart Components?

Visa employees can contact the Data Experience team to discuss needs for any charts that aren’t available in Visa Chart Components (VCC).

To get connected with the Data Experience team, visit Support.