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.

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

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

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

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

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

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

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

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