Skip to main content
Product Design System
  • Welcome
  • Design system
    • What is VPDS? - What is VPDS?
    • Accessibility
    • Design principles
    • Inclusive design
    • FAQs
    • Latest news
    • Releases
    • Get started - Start designing with VPDS
    • Design kits
    • Brand guidance for productsfor the Brand guidance for products
    • Get started - Start developing with VPDS
      • Get started - Start building with Angular
      • Accessibility utilitiesfor Angular
        • App ready check
        • Floating UI
        • Nova library
        • Unique ID generator
      • Changelogfor Angular
      • Get started - Start building with Flutter
      • Accessibility utilitiesfor Flutter
      • Changelogfor Flutter
      • Get started - Start building with React
      • Accessibility utilitiesfor React
        • useCardNumberValidation
        • useDebounce
        • useFocusTrap
      • Changelogfor React
      • Get started - Start building with Nova styles
      • Accessibility stylesfor Styles (CSS)
      • Changelogfor Styles (CSS)
        • Action primary
        • Action secondary
        • Input
        • Message
    • Overview - Base elements
    • Color
    • Elevation
    • Responsive grid system
    • Size and shape
    • Spacing
    • States
    • Surface
    • Typography
      • Overviewfor Design tokens
      • Tokens for designers
      • Tokens for developers
    • Overview - Components
    • Accordion
    • Anchor link menu
    • Avatar
    • Badge
    • Banner
    • Breadcrumbs
    • Button
    • Checkbox
    • Chips
    • Color selector
    • Combobox
    • Content card
    • Date and time selectors
    • Dialog
    • Divider
    • Dropdown menu
    • Flag
    • Footer
    • Horizontal navigation
    • Icons and illustrations
    • Input
    • Link
    • List item
    • Listbox
    • Multiselect
    • Navigation drawer
    • Pagination
    • Panel
    • Progress
    • Radio
    • Section message
    • Select (native)
    • Slider
    • Switch
    • Tab bar
    • Table
    • Tabs
    • Toggle button
    • Tooltip
    • Top app bar
    • Vertical navigation
    • Overview - Patterns
    • Address
    • Application layouts
    • Card input
    • Chat
    • Dynamic table
    • Feedback and status
    • File upload
    • Forms
    • Notification tray
    • One-time passcode
    • Search
    • Wizard
    • Overview - Content
    • Accessible text
    • Grammar and punctuation
    • Inclusive language
    • Information architecture
    • Messaging
    • Placeholder text
    • Readability
    • Voice and tone
    • Visa Chart Components - Visa Chart Components
    • Development setup
      • Overviewfor the Data Visualization design guidelines
      • Data visualization principles
      • Selecting a chart
      • Overviewfor the Data Visualization chart components
      • Bar chart
      • Dumbbell plot
      • Heatmap
      • Line chart
  • Support
  • Welcome
  • Overview
    • What is VPDS? - What is VPDS?
    • Accessibility
    • Design principles
    • Inclusive design
    • FAQs
    • Latest news
    • Releases
    • Get started - Start designing with VPDS
    • Design kits
    • Brand guidance for productsfor the Brand guidance for products
    • Get started - Start developing with VPDS
      • Get started - Start building with Angular
      • Accessibility utilitiesfor Angular
        • App ready check
        • Floating UI
        • Nova library
        • Unique ID generator
      • Changelogfor Angular
      • Get started - Start building with Flutter
      • Accessibility utilitiesfor Flutter
      • Changelogfor Flutter
      • Get started - Start building with React
      • Accessibility utilitiesfor React
        • useCardNumberValidation
        • useDebounce
        • useFocusTrap
      • Changelogfor React
      • Get started - Start building with Nova styles
      • Accessibility stylesfor Styles (CSS)
      • Changelogfor Styles (CSS)
        • Action primary
        • Action secondary
        • Input
        • Message
    • Overview - Base elements
    • Color
    • Elevation
    • Responsive grid system
    • Size and shape
    • Spacing
    • States
    • Surface
    • Typography
      • Overviewfor Design tokens
      • Tokens for designers
      • Tokens for developers
    • Overview - Components
    • Accordion
    • Anchor link menu
    • Avatar
    • Badge
    • Banner
    • Breadcrumbs
    • Button
    • Checkbox
    • Chips
    • Color selector
    • Combobox
    • Content card
    • Date and time selectors
    • Dialog
    • Divider
    • Dropdown menu
    • Flag
    • Footer
    • Horizontal navigation
    • Icons and illustrations
    • Input
    • Link
    • List item
    • Listbox
    • Multiselect
    • Navigation drawer
    • Pagination
    • Panel
    • Progress
    • Radio
    • Section message
    • Select (native)
    • Slider
    • Switch
    • Tab bar
    • Table
    • Tabs
    • Toggle button
    • Tooltip
    • Top app bar
    • Vertical navigation
    • Overview - Patterns
    • Address
    • Application layouts
    • Card input
    • Chat
    • Dynamic table
    • Feedback and status
    • File upload
    • Forms
    • Notification tray
    • One-time passcode
    • Search
    • Wizard
    • Overview - Content
    • Accessible text
    • Grammar and punctuation
    • Inclusive language
    • Information architecture
    • Messaging
    • Placeholder text
    • Readability
    • Voice and tone
    • Visa Chart Components - Visa Chart Components
    • Development setup
      • Overviewfor the Data Visualization design guidelines
      • Data visualization principles
      • Selecting a chart
      • Overviewfor the Data Visualization chart components
      • Bar chart
      • Dumbbell plot
      • Heatmap
      • Line chart
  • Support

Base elements

Discover our system's visual and architectural standards used to ensure consistent digital experiences.

Color

Learn how to use Visa brand colors to create and maintain consistent and engaging experiences.

About design tokens

Explore guidance for using design tokens or variables to customize themes and experiences.

Elevation

Discover how to use elevation to layer elements and surfaces to create more intuitive and visually appealing interfaces.

Responsive grid system

Use the responsive grid system to organize design elements for visual consistency across pages.

Size and shape

Find examples and classes for defining the dimensions and shape of elements in your designs.

Spacing

Access resources to ensure consistent spacing between, outside, and within digital elements.

States

Consistently apply visual cues and design patterns to communicate a component’s interaction state.

Surface

Use these generic styles to define the layout and visual hierarchy of your app with surface components, or customize and create your own components.

Typography

Get guidance, examples, and code to enhance readability through consistent text styles and hierarchy.

These materials are intended for illustrative purposes only. They are provided AS-IS and should not be relied upon for marketing, legal, tax, financial, regulatory or other advice. Any links to third party sites are for your information only and do not constitute endorsement by or affiliation with Visa. Visa has no insight into and/or control over third party content and code and disclaims all liability for any such components.


Copyright © 2025 Visa. All rights reserved.

  • Terms of Use
  • Careers
  • Legal
  • Privacy Notice
  • Your Privacy Rights
  • Cookie Preferences