Visa Brand Book

Visa Digital Brand Guidelines Making the digital payment experience quicker, easier, and more intuitive for everyone, everywhere. Welcome. Version 1.0

Greetings to the digital world These brand guidelines offer UX/UI tips and best practices to design robust, human-centric, Visa-enabled user experiences that put users in control. Although some guidelines are flexible, others are mandatory, which are marked with *

Let’s jump in Getting started 4 Visa digital brand elements 7 UX principles 5 Visa Brand Mark 8 Tone of voice 6 Visa Sensory Branding 12 Visa credentials and card art 17 0 Visa Digital Brand Guidelines © 2018 Visa. All Rights Reserved. 3

Getting started UX Principles Tone of voice Visa Digital Brand Guidelines © 2018 Visa. All Rights Reserved. 4

Getting started UX Principles As digital payment innovators, we push to make the process easier. Our ongoing pursuit is to create user experiences where customers are in control. The following list of principles is our north star. Fast Don’t overcomplicate. Authentic Be more human, less machine-like. Iconic Don’t let them forget you. Smart Always stay two steps ahead. Visa Digital Brand Guidelines © 2018 Visa. All Rights Reserved. 5

Getting started Digital tone of voice In an era of “snackable content,” we communicate to customers concisely and clearly. We aren’t bots. We’re speaking to users who are family and friends. Visa Digital Brand Guidelines © 2018 Visa. All Rights Reserved. 6

Visa Digital Brand Elements Visa Brand Mark Quick guide Options Visa Sensory Branding Sensory elements Animation Visa Credentials and Card Art Displaying Visa credentials Digital card art Visa Digital Brand Guidelines © 2018 Visa. All Rights Reserved. 7

The Visa Brand Mark What’s the Visa Brand Mark? It’s our logo, identity, and most enduring asset in any language and adaptable to any scale. It brings immediate recognition and offers confidence to any transaction. Visa Digital Brand Guidelines © 2018 Visa. All Rights Reserved. 8

Visa Brand Mark : Quick guide Colors and shapes* Color is a delightful way to express a brand. Whenever a logo is used, it’s an opportunity for a brand to reveal who they are. Color options The Visa Brand Mark should be clearly displayed when in use. It should have sufficient contrast with the background so the logo is easily viewed by users. White brand mark against There are two color options: dark background Background color Visa brand mark color Light color Blue (#15195A) Dark color White (#FFFFFF) The Visa Brand Mark cannot be in any other colors apart from the specified Blue brand mark against white and blue. If your background color does not have sufficient contrast, you light background can also “stage” the Visa brand mark with a rounded corner rectangle following the aspect ratio of an ISO ID-1 size card, mimicking the proportions of a Visa card. For monochrome screens, use only a dark background color with a white Visa brand mark. Color options Brand mark in a rounded corner rectangle shape Visa Digital Brand Guidelines © 2018 Visa. All Rights Reserved. 9

Visa Brand Mark : Quick guide cont’d Sizing and spacing* Size and spacing The Visa Brand Mark should be clearly visible with a comfortable amount of breathing space around it. Please follow these guidelines. 1X 1X • The Visa Brand Mark must be used at a minimum size that ensures the mark is clearly legible and not distorted. Even on small screens, use a size relatively similar to other contents in your experience to achieve consistent readability. • Always maintain adequate clear space around all four sides of the brand mark. The Visa word mark 1X 1X When represented as a word, the Visa name maintains certain guidelines for consistency. • The Visa name in text always appears with an uppercase “V” followed by Visa Brand Mark spacing: X = Height of the “V.” Apply 1X clear space around all Do not render the Visa Brand Mark unproportional to surrounding contents lowercase letters. sides of the Visa brand mark when possible. • The name should never appear in all caps. Visa....1234 VISA....1234 Visa word mark in text Do not capitalize the Visa word mark Visa Digital Brand Guidelines © 2018 Visa. All Rights Reserved. 10

Visa Brand Mark : Options Visa product identifiers Our product portfolio is diverse. In some cases it’s more appropriate to use a Visa product identifier instead of the main Visa Brand Mark. Please follow the guidelines below. • When specific Visa products names are used in your context, the Visa Brand Mark with the product identifier underneath may be displayed instead of Visa Brand Mark with Visa the stand alone Visa Brand Mark. product identifier Gold Your transaction is complete • When the technollogy platform doesn’t support graphics, the Visa brand name, Visa product name, or name of the Visa-Owned Mark must appear in text in place of the Visa Brand Mark or Visa card image. • The first letter of each word must be capitalized, with the remaining letters Visa Brand Mark with Visa Gold in lower case. product identifier as part of the card image Your transaction is complete Visa product identifiers with brand mark Visa word mark with product identifier in text Visa Digital Brand Guidelines © 2018 Visa. All Rights Reserved. 11

Visa Sensory Branding Heightened senses. Sensory branding brings opportunities to support or remind users of action through motion, sound and haptic (relating to touch) design. In a seamless Visa payment experience, multisensory moments indicate actions that are automatic and invisible to users. Visa Digital Brand Guidelines © 2018 Visa. All Rights Reserved. 12

Visa Sensory Branding: Sensory elements Sensory elements Animation, sound, haptic. Together in motion. These sensory elements can be used together to build user confidence and simplify digital payment experiences. Visa Sensory Branding elements should be used in context of a Visa product or capability, where the brand moment occurs to signify a Visa event (for example, a completed transaction) within the context of your user experience. Depending on Seeing in motion Hearing is believing solution and platform capabilities, use all three Visa Sensory Branding elements or use them separately. If your payment experience doesn’t include a screen, use the The Visa Brand Mark in motion with the Visa Flag symbolize our The “audio” element of the Visa Sensory Branding suite is Visa sound and/or haptic without the animation. If your experience uses primarily constant push to open new doors in commerce. The Visa animation is specifically designed to express the Visa brand. The sound lasts spoken confirmation, such as through a virtual assistant, you can play the Visa designed to add confidence and delight in the digital payment world. for 1700 milliseconds to indicate speed, convenience, and to sound alongside a verbal confirmation such as “Your order has been submitted.” complement the Visa animation and Visa haptic. The following pages support the use of the Visa Sensory Branding iOS, Android, and Web SDKs. If you are building on another platform, please contact your Visa The Visa animation The Visa sound representative to learn more about how to get Visa Sensory Branding for your solution. The “feeling” element The Visa haptic is designed to be used in conjunction with the Visa animation and the Visa sound. The vibration pattern instinctively communicates payment confirmation to users on the go. The Visa haptic Visa Digital Brand Guidelines © 2018 Visa. All Rights Reserved. 13

Visa Sensory Branding: Animation Color options Color adds an extra dimension of visual intrigue. The Visa Sensory Branding SDKs consist of three sets of color options to choose from for the animation moment. Default dark theme Default light theme Custom background Visa Blue background with full color elements White background with full color elements with Visa monochrome elements Background color Blue (#15195A ) White (#FFFFFF) Custom light color Custom dark color Visa Brand Mark color White (#FFFFFF) Dark blue (#1A1F71) Dark blue (#1A1F71) White (#FFFFFF) Top flag The light blue gradient starts with a darker Dark blue (#1A1F71) Dark blue (#1A1F71) White (#FFFFFF) blue #00329E on the left, and ends in a lighter blue #0050B9 on the right. Bottom flag The Visa Gold gradient starts with lighter Gold (#FA9B00) Dark blue (#1A1F71) White (#FFFFFF) gold #F4CA12 on the left, and ends in darker gold #FA9B00 on the right. Circle and checkmark White (#FFFFFF) Dark blue (#1A1F71) Dark blue (#1A1F71) White (#FFFFFF) The SDKs help indicate whether your custom color is light or dark. For monochrome screens that do not display color, please use a dark background and follow the “Custom dark color” rule set. Visa Digital Brand Guidelines © 2018 Visa. All Rights Reserved. 14

Visa Sensory Branding: Animation Viewports A window to the digital world. A viewport is the visible viewing area of a screen or web page. The Visa animation may appear in two viewports: full screen or in a constrained viewport. Please consider user flow and possible devices of your solution when choosing a viewport to display the Visa animation. • Full screen should take up majority of the device viewport, where the Visa flags would exit at the edge of the screen. • The constrained viewport requires the width of the animation to be confined to the width of one flag, and the edges of the flag fade out. You sent $100 to Alex Miller • The maximum width of the Visa Brand Mark should not exceed 40% of the screen width. Done Send more Full screen Constrained viewport Considerations Consider using full screen on small devices, like mobile phones Consider using constrained viewport in spaces where the animation or tablets, and displaying a minimal number of other screen would be displayed with many other elements. elements. Placement The animation should be vertically and horizontally centered. When possible, vertically and horizontally center the animation within Note that the width of the Visa Brand Mark should not exceed the applicable area. Place the Visa animation in proximity to the user’s 40% of the width of the screen. payment action, i.e. near payment details or on a “Pay” button after it has been selected. Flag behaviors The flags in the animation will exit the edge of the screen. The flags in the animation will fade out at the edges of the width of the Visa Brand Mark. Visa Digital Brand Guidelines © 2018 Visa. All Rights Reserved. 15

Visa Sensory Branding: Animation Small screen, special devices Small yet powerful. Sometimes devices have small screens. Other times, a device may not have a screen at all. In instances where the Visa animation cannot be legibly displayed, show a static Visa branded moment instead. Alternatively, you can also consider using Visa sound and/or Visa haptic. Use static graphics and/or sound and haptic to represent Visa Sensory Branding with special devices Visa Digital Brand Guidelines © 2018 Visa. All Rights Reserved. 16

Visa credentials and card art Broad strokes. Consumers use their Visa cards and credentials in a wide variety of contexts in both physical and digital worlds. So it’s important to show these credentials consistently to bolster confidence and a frictionless payment experience. Whether consumers use Visa credentials once, store their credentials for repeated use, or pay in-store with a digital wallet service, they’ll see the same standards of card art and credentials throughout their experience. Visa Digital Brand Guidelines © 2018 Visa. All Rights Reserved. 17

Visa Credentials and Card Art: Displaying Visa credentials Displaying Visa Credentials* What are Visa Credentials? Visa Credentials are the digital form of a Visa card such as the numbers or card art. Often a card identifier will follow the card’s Most last 4 digits. Credentials can be represented in several ways. preferred BANK NAME Bank name Visa....1234 The last four digits of Bank name account number on Visa....1234 Displaying Visa Credentials are required during the payment experience the card art Bank name Visa Gold....5678 because it helps users understand which specific account was used for a ....1234 BANK NAME Bank name Gold transaction. When possible, displaying card art is highly recommended. Visa Gold....5678 Visa....9012 Gold BANK NAME Visa....9012 Bank name Visa....1234 When to display The last four digits Bank name Visa Gold....5678 Display credentials before the user selects a payment option, or when the user of account number Visa....9012 acknowledges the payment credentials. If a screen has multiple Visa credentials, adjacent to large card art display the credentials in such a way so they can stand alone. After a transaction is complete, specific items such as payment confirmation FDNB Visa....1234 Visa credentials in a list notifications, transaction history, and enrolled card listings would require displaying Visa credentials. Issuer and/or Visa branding must be included in one of the FDNB Visa....1234 The last four digits of following ways: account number adjacent to small card art • Item in context of digital card art • Visa Brand Mark followed by last four digits of the card number • Visa name in text (“Visa”) followed by last four digits of the card number FDNB Visa....1234 The last four digits of “You paid $56.92 with account number with Visa Brand Mark in card shape Visa Gold....1234.” FDNB Visa....1234 The last four digits of Least Visa....1234 account number in text preferred with Visa word mark While there are various ways to display Visa credentials, displaying card art, Visa credentials in a payment confirmation notification whenever possible, is highly recommended. Visa Digital Brand Guidelines © 2018 Visa. All Rights Reserved. 18

Visa Credentials and Card Art: Displaying Visa credentials Cont’d Displaying Visa credentials for Visa Token Service providers* • Card art is required for wallet applications participating in Visa Token Service that facilitate in-store payments. • Card art is highly recommended to represent Visa credentials in most Visa payment experiences. • When card art is unavailable, the card must be rendered using the color scheme Digital account number Visa....1234 Token number: Visa....1234 provided by Visa (on behalf of the issuer) along with the Visa brand mark, to be When you pay with this device, this number is used instead When you pay with this device, this number is used instead reviewed and approved by Visa as part of the solution approval process. of your card number to protect your information of your card number to protect your information • The consumer is required to have access to the last 4 digits of the token or the “digital account number,” along with a description explaining how the digital account number represents the consumer’s card number for a more secure transaction. Digital account number ? When you pay with this device, Digital account number Visa....1234 • During the payment process, the minimum information that must be displayed this number is used instead of Visa....1234 your card number to protect to the user includes an image of the front of the card as well as the last 4 digits your information. of the account number to be used for the transaction. Display of digital account number Do not use the word “token” to describe the token number, and do not render the digital account number without a description of what it is Visa Digital Brand Guidelines © 2018 Visa. All Rights Reserved. 19

Visa Credentials and Card Art: Digital Card Art Digital card art for Visa Token Service Providers* Visa digital card art bridges our physical and digital commerce channels. Card art rules outlined by the issuer should be followed. Most digital rules regarding placement, size, proportions, color, and other product identifiers should follow rules of physical card art. Card art: digital follows physical • Card art must include the Visa Brand Mark and applicable product identifiers and/or legends as per Visa brand standards for that product. Issuer logo Issuer card art • Card art should represent the physical card, but should not be a picture/ photo of the physical card. It should not include shading or three-dimensional elements attempting to look like a physical card. • Card art should not include cardholder name, PAN, BIN or expiry, either generically or the actual values. This is for reasons of security and the user’s perception of security. Do not alter the card elements’ placements • Card art should not include items that facilitate the card’s use in only physical point-of-sale, such as labels describing embossed attributes, EMV chip contacts, or static pictures of dynamic elements like holograms. ....1234 • Card art should be proportional to an ISO ID-1 size card (i.e. 1536 x 969 pixels). • The card art image must appear in full color on screens that can display color. • The card art image must be displayed at a size that ensures the Visa Brand Mark is clearly legible and not distorted. Last four digits of Visa Brand Mark the account number • Where space and/or format is limited, a partial card image (with a complete Visa Brand Mark) may be displayed, but only after the user has seen the full digital card art in a previous step. Basic graphical elements on digital card art Do not use physical card representations for digital use Visa Digital Brand Guidelines © 2018 Visa. All Rights Reserved. 20

Visa Credentials and Card Art: Digital Card Art cont’d Digital card art Other options • Card art is easiest to recognize in landscape orientation. Please display card art in landscape at moments when the user needs to acknowledge or select a card. • The Contactless Indicator icon denotes contactless payment capabilities. It can Contactless Indicator be used to indicate the availability of contactless payment if the consumer’s device supports that functionality. • The Contactless Indicator should not be confused with the Contactless Symbol, which is a mark that denotes the ability to receive contactless payment. The contactless symbol is often used on point-of-sale devices that read contactless cards or mobile devices during payment. • The Contactless Symbol should never appear on card art. • Both the Contactless Indicator and the Contactless Symbol are trademarks owned by EMVCo (www.emvco.com) and all usage must conform to its standards, as well as Visa Product Brand Standards. Contactless Symbol Render card art in full display whenever possible Contactless Indicator vs. Contactless Symbol Partical card image is applicable as long as users have seen the card image in its full size, and able to access the full card image Visa Digital Brand Guidelines © 2018 Visa. All Rights Reserved. 21

© 2018 Visa. All Rights Reserved. NOTICE: All information contained herein is, and remains the property of Visa and its suppliers and affiliates. The intellectual and technical concepts contained herein are proprietary to Visa and its suppliers and affiliates and may be covered by U.S. and foreign Patents, patents in process, and are protected by trade secret or copyright law. Dissemination of this information, reproduction or use of this material is strictly forbidden unless (a) in support of Visa products, programs and services provided through the VDP platform and (b) if prior written permission is obtained from Visa. Any permitted use pursuant to (a) and (b) is subject to the VDP Terms of Use. THIS MATERIAL IS PROVIDED ON AN “AS IS,” “AS AVAILABLE,” “WITH ALL FAULTS” BASIS WITHOUT WARRANTY OF ANY KIND. YOUR USE IS AT YOUR OWN RISK.