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

Content

Explore our content guidelines to craft thoughtful and consistent interface content for a well-designed user experience.

Accessible text

Learn how to effectively apply alternative text and ARIA labels for improved accessibility.

Grammar and punctuation

Learn Visa product grammar and punctuation styles to ensure consistent experiences.

Inclusive language

Gain insight into the use of inclusive language to ensure Visa products include everyone, everywhere.

Information architecture

Identify the best organizational structure based on page types and user needs.

Messaging

Craft content for alert components to increase trust, reduce errors, and improve system performance.

Placeholder text

Replace lorem ipsum text with relevant examples or custom placeholder content.

Readability

Make your content easy to read and understand so people can quickly find what they're looking for.

Voice and tone

Ensure products sound and feel like Visa by learning the foundational pillars of our voice and tone.

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