Introducing Visa Product Design System

Introducing VPDS: Your essential toolkit for enhancing payment experiences

Optimize your development workflow

We’re thrilled to announce that the Visa Product Design System (VPDS) is now publicly available! This dynamic platform revolutionizes product design and development for everyone—from established fintechs to startups and traditional banks. Launched internally in 2018, VPDS offers a cohesive system of components, accessibility standards, and comprehensive documentation, empowering teams to deliver consistent, scalable, and user-focused experiences while adhering to Visa’s global brand standards.

Empower your teams with vital resources

Developers can tap into a wealth of resources within VPDS including:

• Components and patterns: Access a library of accessibility-tested components that meet Visa Global Accessibility Requirements (VGAR) and Web Content Accessibility Guidelines (WCAG) 2.2 Level A and AA. These assets are responsive and customizable, enabling rapid development and a seamless user experience.
• Design tokens: Store design decisions like colors, typography, and spacing in a centralized, reusable format. Easily modify global variables to maintain consistency across your projects.
• Core principles and practices: Foster collaboration and alignment within your teams using a shared design language. Leverage core design principles for informed decision-making and content guidelines that ensure clarity and consistency in line with Visa’s voice and tone.

VPDS enhances developer workflows by minimizing redundancy and ensuring alignment between coded implementations and design specifications. This reduces rework and accelerates the development process. For partners and external developers, VPDS provides a cohesive framework that drives consistency and adherence to Visa’s brand and accessibility standards.

To maximize usability, VPDS supports four leading development frameworks: Angular, Flutter, React, and HTML/CSS styles. Each codebase is thoroughly documented and regularly updated to keep your teams ahead of the curve.

• Angular: Build dynamic, high-performance applications effortlessly. Our Angular components are optimized for speed and scalability, making them perfect for complex enterprise solutions.
• Flutter: Elevate mobile and web applications with components crafted for a native-like experience. Visa’s Flutter components ensure smooth performance and stunning UI on both Android and iOS.
• React: Develop responsive and interactive web applications with our React components. Designed for flexibility and extensibility, Visa’s React library supports rapid iteration.
• Styles (CSS): Create applications using native browser technologies with our HTML/CSS components, allowing for framework-agnostic applications and unmatched versatility.

We encourage developers and partners to dive into the Visa Product Design System today. For more details and to access the system, visit the Visa Product Design System.