Overview
We’re thrilled to announce the public launch of the Visa Product Design System (VPDS)—your ultimate resource for creating intuitive and accessible experiences. This public release marks a major milestone, introducing comprehensive improvements designed to streamline your workflow and foster seamless collaboration.
VPDS offers a robust suite of resources, including design guidelines, code libraries, and best practices, all aimed at delivering intuitive and inclusive experiences for everyone, everywhere. The public launch makes these resources more accessible, enabling users—including our partners—to work faster and smarter while maintaining consistency across projects.
What’s fresh and improved
Not only is VPDS now publicly available, but we’ve also made significant updates to the VPDS site to create a better experience for our current internal users and new external users.
Updated left navigation
Our new left-navigation layout elevates more sections for improved wayfinding, making it easier to find what you need. This includes new, tailored sections such as “About VPDS” and “What’s new,” as well as personalized sections for “Designing” and “Developing.”
This new approach is rooted in VPDS user research and provides a streamlined and intuitive experience, similar to industry standards, ensuring you can quickly locate and access the resources you need.
Integrated code libraries
Our previous site linked to separate sites to access Angular, Flutter, React, and Styles (CSS) examples. Now, you can access examples for any framework in the same location using our new code library drop-downs that allow you to switch between libraries. On the new site, we’ve provided the latest versions of the coded examples. For older versions, we will still maintain separate sites and provide access to internal users.
Additionally, we have migrated documentation from these separate development sites to our new public page, including changelogs, to ensure essential information is centralized and easily accessible in one convenient location.
Streamlined terminology
Foundations (including typography, color, spacing, and more) have been renamed to Base elements, aligning with our development terminology. We’ve also renamed and consolidated documentation for Design tokens, previously known as Theming, streamlining the way we facilitate standardization and customization.
This updated terminology fosters design-development parity by creating unified hubs for both Base elements and Design tokens, ensuring all the essential elements needed to drive consistency across experiences are easily accessible.
Ready to get started?
Unlock the full potential of VPDS today. Visit the VPDS homepage to explore these updates, access resources, and experience how we’re transforming the way teams create. We also welcome our partners and those outside of Visa to learn about us and how VPDS can enhance your projects.
Get started with VPDS
Stay connected
Have questions or want to join our community? Subscribe to our email list, visit our office hours, or join us on Teams.