What is VPDS?

The Visa Product Design System (VPDS) is an all-encompassing toolkit designed to revolutionize the product design and development process. Recognized across Visa’s product ecosystem, VPDS:

• Enhances collaboration among teams.
• Ensures brand consistency throughout products.
• Accelerates time to market across various platforms.

This robust system unifies design and development, offering a cohesive approach to creating digital products. Utilizing VPDS helps your product:

• Seamlessly integrate with other Visa offerings.
• Facilitate the creation of intuitive user experiences.
• Resonate with Visa’s brand values.

What are the benefits of VPDS?

VPDS simplifies the product development lifecycle, empowering your team to innovate and deliver high-quality products that go to market faster. The key benefits include:

• Efficiency: Accelerate design and development with pre-built components, reducing repetitive tasks and rework.
• Accessibility: Create accessible experiences using libraries pre-tested for global accessibility standards.
• Consistency: Use standardized guidelines, components, and patterns to uphold brand trust and user satisfaction.
• Collaboration: Follow best practices and principles embedded in the system to enable effective teamwork.
• Scalability: Keep products forefront with regular updates based on user feedback and industry standards.
• Innovation: Drive innovation by allowing your team to focus on creative solutions while VPDS covers the basics.

What is a design system?

Design systems provide a centralized library of assets and guidelines to ensure consistency and efficiency. This includes extensive libraries of pre-built components, design patterns, and comprehensive content guidelines, all tailored to meet the highest standards of accessibility, usability, and aesthetic excellence. VPDS supports design kits in Figma and code libraries for Angular, React, Styles (CSS), and Flutter. These resources are continuously updated based on user feedback and the latest technological advancements. By leveraging these assets, teams can streamline their workflows, foster innovation, and create cohesive user experiences across all Visa products.

What’s the history of VPDS?

VPDS has undergone several releases since Hamlet launched in 2018. Each release has brought improvements in scale, usability, and accessibility based on community feedback. Support for Hamlet ended in 2022, followed by its successors Vault and Vault Key. The third and final version of the Vault system, Vault Key+, continues to receive support and fixes for the foreseeable future.

The latest version of the design system is called Nova. Inspired by the astronomical phenomenon, Nova symbolizes a burst of energy and innovation. This version embodies the VPDS team’s commitment to creating the next wave of Visa products and experiences, marked by enhanced cohesion and consistency. Just as a Nova signifies a powerful transformation in the cosmos, this release represents a significant leap forward in Visa’s design system.

Product teams are encouraged to begin migrating to this version as it will continue to receive new additions and support moving forward. For more information on current and past versions, visit Releases.

Who manages VPDS?

The Visa Product Design System is managed by a collaborative team of designers, developers, content designers, accessibility partners, researchers, and ops. Collectively, the team ensures the system remains current and effective by continuously updating resources based on cross-discipline reviews, user feedback, and industry best practices. To connect with the VPDS team or learn more about office hours or quarterly updates, visit Support.

Ready to get started?

Transform your product design and development process by choosing one of the paths below.