How We Look
The Zelle® brand identity is visually striking to reflect our freshness and tenacity. It has an overall sense of movement and flow that is suggestive of our goal of connecting people by taking the friction out of payments.
Primary Logo
Purple should be used on light backgrounds.
White should be used on darker backgrounds.
Black should be used only when color is not an option.*
*e.g., as part of a financial institution’s user interface, or in a print asset that is in black and white only.
PADDING
The logo should always be surrounded by a minimum area of space to ensure that headlines, text or other visual elements do not interfere with the logo. This minimum area is equal in size to the “e” letterform in the logo.
Note: The padding does not need to include the tails of the Z in Zelle® (see diagram for reference).
MINIMUM SIZE
THE ® SYMBOL
The registered trademark symbol (®) should be on the logo every time it is used. The relationship between the ® and the logo is relative in order to maintain legibility at all sizes.
The ® scales separately from the logo when it appears smaller than 60 px tall. At sizes smaller than 60 px tall, the ® will always be 5 px tall. At sizes larger than 60px, the ® is always 1/7 the height of the “e” (this ratio is reflected in the standard logo files).
Z Logo
Note: The Z logo is available for use by partners in both UX applications and marketing materials! It can be used to identify the Zelle® brand where there is limited room to include the full Zelle® logo. Be sure to follow the same style rules and guidelines as the full Zelle® logo, and ensure it is always properly marked with the registered trademark symbol. The Z logo may not be used in partner logo lockups.
COLOR
(See Color section for color values)
Purple should be used on light backgrounds.
White should be used on darker backgrounds.
Grey should be used only when color is not an option.*
Black should be used only when color is not an option.*
*e.g., as part of a financial institution’s user interface, or in a print asset that is in black and white only.
PADDING
The Z logo should always be surrounded by a minimum area of space to ensure that headlines, text or other visual elements do not interfere with the logo.
This minimum area is equal in size to 1/2 the width of the “Z” letterform in the logo.
Do not use the Z logo without the ascending and descending “tails” on the mark, or without the ® symbol.
MINIMUM SIZE
THE ® SYMBOL
The registered trademark symbol (®) should be on the Z logo every time it is used. The relationship between the ® and the logo is relative in order to maintain legibility at all sizes.
The ® scales separately from the Z logo when it appears smaller than 60 px tall. At sizes smaller than 60 px tall, the ® will always be 5 px tall. At sizes larger than 60px, the ® is always 1/8 the height of the “Z” (this ratio is reflected in the standard logo files).
Do not use the Z logo without the ascending and descending “tails” on the mark, or without the ® symbol.
Important note: using the Z logo within shapes
If you ever need to use the Z within a shape, use a solid fill color for the shape (partners may use their own brand colors) with a white Z (or white/light/neutral background when using a purple Z). Be mindful that the Z can never be used within any shape that could possibly imply or be interpreted as a coin or currency.
The Z logo used in the UX for Zelle® Ready Contacts does not use a registration mark (it would be too small to be seen) and is not placed in a shape. There is a crescent cutout to the profile photo where that Z is placed.
Note: The Z logo can be used to identify the Zelle® brand where there is limited room to include the full Zelle® logo. The Z logo may not be used in partner logo lockups.
Horizontal Partner Lockup
COLOR (See Color section for color values)
On light backgrounds:
- The Zelle® logo should appear in Purple.
- The partner logo should appear in their designated brand color(s).
On dark backgrounds:
- The Zelle® logo should appear in white.
- The partner logo should appear in white.
Black should be used only when color is not an option.*
*e.g., in a print asset that is in black and white only.
THE ® SYMBOL
The registered trademark symbol (®) should be on the Zelle® logo every time it is used. The ® scales separately from the logo when it appears smaller than 60 px tall. At sizes smaller than 60 px tall, the ® will always be 5 px tall. At sizes larger than 60px, the ® is always 1/7 the height of the “e” (this ratio is reflected in the standard logo files).
Note: Several versions of the lockup are available for use on the Partner Portal. Use of an approved logo lockup is required in all marketing materials referencing Zelle®, i.e., print, TV, outdoor, in-branch, email and web, except where space is extremely tight.
BALANCE AND CLEAR SPACE
The horizontal partner lockup should always be surrounded by a clear area of space to ensure that other visual elements do not interfere with the lockup. Logos come in all shapes and sizes. The co-brand should feel balanced. The logos should be as close to the same visual size and weight as possible, with the partner logo to the left, and the Zelle® logo to the right.
MINIMUM SIZE
Vertical Partner Lockup
COLOR (See Color section for color values)
On light backgrounds:
- The Zelle® logo should appear in Purple.
- The partner logo should appear in their designated brand color(s).
On dark backgrounds:
- The Zelle® logo should appear in white.
- The partner logo should appear in white.
Black should be used only when color is not an option.*
*e.g., in a print asset that is in black and white only.
THE ® SYMBOL
The registered trademark symbol (®) should be on the Zelle® logo every time it is used. The ® scales separately from the logo when it appears smaller than 60 px tall. At sizes smaller than 60 px tall, the ® will always be 5 px tall. At sizes larger than 60px, the ® is always 1/7 the height of the “e” (this ratio is reflected in the standard logo files).
Note: Several versions of the lockup are available for use on the Partner Portal. Use of an approved logo lockup is required in all marketing materials referencing Zelle®, i.e., print, TV, outdoor, in-branch, email and web, except where space is extremely tight.
BALANCE AND CLEAR SPACE
The vertical partner lockup should always be surrounded by a clear area of space to ensure that other visual elements do not interfere with the lockup. Logos come in all shapes and sizes. The co-brand should feel balanced. The logos should be as close to the same visual size and weight as possible.
MINIMUM SIZE
Horizontal Sponsorship Lockup
COLOR (See Color section for color values)
On light backgrounds:
- The Zelle® logo should appear in Purple.
- The sponsor logo should appear in the sponsor’s designated brand color(s).
On dark backgrounds:
- The Zelle® logo should appear in white.
- The sponsor logo should appear in white.
Black should be used only when color is not an option.*
*e.g., in a print asset that is in black and white only.
THE ® SYMBOL
The registered trademark symbol (®) should be on the Zelle® logo every time it is used. The ® scales separately from the logo when it appears smaller than 60 px tall. At sizes smaller than 60 px tall, the ® will always be 5 px tall. At sizes larger than 60px, the ® is always 1/7 the height of the “e” (this ratio is reflected in the standard logo files).
LOGO ORDER
If the primary lockup placement is within the company’s channels, the company’s logo should come first in the lockup. If the primary placement is within Zelle® channels, the Zelle® logo should come first.
BALANCE AND CLEAR SPACE
The horizontal partner lockup should always be surrounded by a clear area of space to ensure that other visual elements do not interfere with the lockup. Logos come in all shapes and sizes. The co-brand should feel balanced. The logos should be as close to the same visual size and weight as possible
MINIMUM SIZE
Vertical Sponsorship Lockup
COLOR (See Color section for color values)
On light backgrounds:
- The Zelle® logo should appear in Purple.
- The sponsor logo should appear in the sponsor’s designated brand color(s).
On dark backgrounds:
- The Zelle® logo should appear in white.
- The sponsor logo should appear in white.
Black should be used only when color is not an option.*
*e.g., in a print asset that is in black and white only.
THE ® SYMBOL
The registered trademark symbol (®) should be on the Zelle® logo every time it is used. The ® scales separately from the logo when it appears smaller than 60 px tall. At sizes smaller than 60 px tall, the ® will always be 5 px tall. At sizes larger than 60px, the ® is always 1/7 the height of the “e” (this ratio is reflected in the standard logo files).
LOGO ORDER
If the primary lockup placement is within the company’s channels, the company’s logo should come first in the lockup. If the primary placement is within Zelle® channels, the Zelle® logo should come first.
BALANCE AND CLEAR SPACE
The vertical partner lockup should always be surrounded by a clear area of space to ensure that other visual elements do not interfere with the lockup. Logos come in all shapes and sizes. The co-brand should feel balanced. The logos should be as close to the same visual size and weight as possible
MINIMUM SIZE
Logo Don’ts
These guidelines apply to the primary Zelle® logo, the Z logo, and the partner lockups.
*Exceptions for partners:
- Partners can use their brand colors in their own logo, but the Zelle® logo must only be in Purple (see Color for values) or white.
- Partners can use backgrounds in their brand colors when using the partner logo lockups.
Do not use the logo/lockup in colors other than Purple, white, or black.*
Do not place the logo/ lockup on a background that isn’t using Zelle® brand colors.*
Do not add any other elements within the minimum clear space defined.
Do not use the logo/lockup without strong contrast between the background and the foreground.
Do not outline the logo/lockup.
Do not place the logo/ lockup on a busy photo or background that hinders readability.
Do not distort or stretch the logo/lockup
Do not use drop shadows.
Do not use glows.
Do not use images within the logo/lockup.
Do not place the logo/ lockup on an angle.
Do not use different colors for the letters.
Do not remove the ® symbol.
Do not use Zelle® colors in partner logos.
Typography Fonts
Zelle® Sans is our primary brand font. It is an approachable typeface that conveys our fresh perspective and modern simplicity. It is a proprietary typeface developed for use with Zelle® assets.
Arial is the designated alternate font in instances where Zelle® Sans is not available (e.g. in emails).
Note: The only acceptable typeface to use for the Zelle® brand is Zelle® Sans, unless Zelle® Sans in unavailable.
Typography Usage
The typographical hierarchy shown on this page is one example of the typical hierarchy you might see in a Zelle® marketing asset. Keeping in mind the guidance outlined on this page, designers should exercise their knowlege of typography principles to execute each individual asset.
Example:
H1: Zelle® Sans Demi 60/72
H2: Zelle® Sans Medium 32/38
Body: Zelle® Sans Regular 18/22
Button: Zelle® Sans Bold 18/22
Where possible, we consistently use:
- Demi weight for large, punchy headlines and subheads that require extra visual emphasis
- Regular weight for body copy
- Bold weight for CTA buttons
- All caps with loose tracking for short blocks of text, (e.g., CTA buttons, short labels and subheads lower in the hierarchy).
Lorem ipsum dolor sit aliquet.
Consectetur adipiscing elit massa.
Suspendisse non massa lectus. Pellentesque aliquet, mauris et vehicula fringilla, ante ante imperdiet sem, in gravida mauris nulla sed ipsum. Integer non velit ac arcu dictum auctor. Maecenas fermentum quam sit amet felis pretium consectetur. Nulla aliquet vel orci.
Color Codes
Note: RGB colors are used in all digital assets. CMYK and Pantone are used in print, and HEX values can be used in web design. See Color – Print vs Digital for more information.
Zelle® Purple
RGB 109 / 30 / 212
HEX #6D1ED4
CMYK 76 /86/0/0
PMS 266 C
White
RGB 255 / 255 / 255
HEX #FFFFFF
CMYK 0 / 0 / 0 / 0
PMS White
Indigo
RGB 42 / 16 / 95
HEX #2A105F
CMYK 97 / 100 / 26 / 28
PMS 275 C
Light Purple
RGB 129 / 93 / 255
HEX #815DFF
CMYK 56 / 52 / 0 / 0
PMS 2715 C
LIGHT GRAY
RGB 240 / 240 / 240
HEX #EFEFEF
CMYK 4 / 3 / 3 / 0
PMS 663 C
Mint
RGB 91 / 221 / 180
HEX #5BDDB4
CMYK 62 / 0 / 45 / 0
PMS 3385 C
Lilac
RGB 204 / 204 / 255
HEX #CCCCFF
CMYK 28 / 24 / 0 / 0
PMS TBD
Dark Purple
RGB 71 / 30 / 153
HEX #471E99
CMYK 89 / 100 / 0 / 0
PMS 269 C
Cool Grey
RGB 147 / 149 / 152
HEX #939598
CMYK 45 / 36 / 35 / 1
PMS Cool Gray 7 C
Color Zelle® Purple
COLOR SWATCH
Zelle® Purple is a proprietary color, trademarked within the financial industry. It is more than a design choice—it’s a signal of trust, reliability, and connection. Purple reflects the heart of our brand: bold, distinctive, and human.
RGB 109 / 30 / 212
HEX #6D1ED4
CMYK 76 /86/0/0
PMS 266 C
USAGE GUIDELINES
- Primary Anchor: Use Zelle® Purple as the lead color in all consumer-facing communications.
- Balance: Pair with white or neutral backgrounds for clarity and impact.
- Photography Integration: Feature through subtle accents (clothing, props, objects).
- Hierarchy: Supporting colors should never compete with Zelle® Purple.
TRADEMARK NOTE
- Zelle® Purple is a registered trademark in the financial industry. Consistent use protects the equity of this asset and reinforces our distinctive place in the category.
- Zelle® Purple is our signal of care, connection, and confidence — always there, when it counts.
WE DO ...
- Use Zelle® Purple consistently across digital and physical touchpoints.
- Keep its tone strong and vibrant.
- Apply it to CTAs, typography, and brand-defining shapes.
WE DON'T ...
- Alter or lighten/darken the shade.
- Use gradients or filters that distort the color.
- Pair with clashing, overly bright secondary tones.
Color Usage
USE THE FOLLOWING PROPORTIONS AS A GUIDE:
These ratios can be adapted slightly depending on the application, but Zelle® Purple should always remain dominant.
Primary
Secondary
Accent
Color Extended Palette
Approval from the Early Warning design team is required for use of these colors in other applications beyond those outlined below.
SOCIAL MEDIA AND ILLUSTRATIONS
These colors are available for use on social media and within motion graphics videos that contain complex illustrations.
NATURAL SKIN TONES
These colors are used to represent a variety of skin tones when creating graphics that depict people. Always use these colors for skin; do not apply other colors from across the brand palette when working with skin tones.
CONSUMER EDUCATION AND SAFETY
These colors are primarily used within consumer education assets to signal helpful tips (Marigold) and warnings (Poppy).
Color Digital vs. Print
It’s important to use the appropriate color codes based on whether assets are being created for digital or print usage.
Digital colors appear more vibrant on screen than print colors. Using print colors for digital applications will cause assets to appear dull and off-brand. This page can be used as a quick reference guide when viewing assets on screen.
Note: When viewing print assets on screen, the colors will appear differently than when the assets are printed. This page represents how all of our colors appear when viewing them digitally.
DIGITAL COLORS:
- RGB colors are used in all digital assets, with the exception of some web design assets.
- HEX colors can be used in web design.
- There is no visual difference between our RGB and HEX colors—the only difference is the numerical codes.
PRINT COLORS:
- CMYK and Pantone are used in print assets. The print color system used is depended upon each specific asset.
- There is a visual difference between our CMYK and Pantone colors, so using them within the same vicinity should be avoided.
Photography
OUR PHOTOGRAPHY
Think warm, cinematic moments that feel real and a little lived-in. We’re telling small stories—texting a friend, sharing sushi, taking a study break, cheering at a game—so everything supports that human beat.
incididunt nostrud
Officia officia reprehenderit. Veniam pariatur do ad in.
duis nisi
Irure consequat do proident voluptate laboris irure labore. Consectetur eiusmod ex laborum minim id aliqua ipsum. Cillum do id veniam est enim.
quis ut
Velit nulla ut excepteur et voluptate aliqua.
quis est
Exercitation nostrud sunt sit. Et laboris et officia. Est et sunt nostrud enim sunt enim.
Photography People
Capture people mid-gesture to show genuine connection, with relaxed, natural expressions. Wardrobe should feel soft and approachable, with minimal jewelry and no logos. Let natural features like hair, freckles, and skin texture shine. Cast diverse talent that reflects real people across the U.S., showing authenticity and warmth in every image.
Photography Objects
We use objects to tell stories without always showing people.
Select objects that allude to an activity that could involve the transfer of money (e.g., wrapped gifts and a phone can be used to illustrate splitting the cost of a gift with friends or family).
Colored phone cases are often used to showcase our brand colors (e.g., color phone case used in some of the examples on this page).
Photography Lighting
Lead with soft window light or low sun and add a touch of fill so eyes stay bright. Let practicals glow in frame for depth and warmth; at night, a hint of violet or screen glow gives subtle color contrast. No harsh flash, crunchy HDR, or heavy grain—keep it cinematic and easy on the eyes.
Photography Color
Build from a calm, tactile base—creams and ivories, honey wood, caramel leather, brass—then layer in sage or deep teal, lavender or plum, forest green, and the occasional rust. Drop in one confident pop (often a bold phone case) to give the frame a heartbeat. Grade for gentle warmth: golden highlights, clean skin, and soft shadows. Skip neon and oversaturation; let greenery and materials do the color work.
Photography Composition
Place your subject on a third and build the scene in layers: a slightly blurred foreground cue, your subject crisp, and a soft, readable background. Angle into the moment rather than shooting flat, and use lines from tables, windows, or lamps to guide the eye. Avoid ultra-wide distortion or clutter that competes with the story.
Photography Don’ts
Don’t show forced expressions.
Don’t use photography where people are making eye contact with the camera.
Don’t use overly-posed or staged subject matter.
Don’t default to stock photography clichés (e.g. images of clocks to show time).
Don’t use images that don’t tell a story or require the user to question the meaning of the image.
Don’t use blurred treatments and effects.
Don’t use hazy lighting or light sources that cause subjects to appear backlit (e.g., the sun beaming directly behind a person).
Don’t use an overwhelming amount of bright colors.
Graphic Elements: Mustache Container
The mustache container is a graphic treatment that‘s consists of a thin, rounded corner graphic element used to define the edge of a container shape that contains either a hero image or headline. Logos appear outside of the mustache container. The mustache container is most commonly used in the color Mint and can appear vertical or horizontal as shown at right.
We use the mustache container to help create a cohesive visual identity.
This element is meant to be able to flex across the asset to accommodate more or less copy.
The Zelle® mustache container is intended for use by Early Warning and designated vendors. Partners should only use pre-approved mustache assets.
Graphic Elements: Pill Container
The pill container is a graphic treatment introduced by our 2025 National Campaign, and consists of pill shape—in which the rounded corners mimic the rounded corners of the handle bar container. This shape is used to contain headlines which resemble a message or notification one might receive from their FI.
The pill container can be used with or without the mustache container: When it is used with the mustache container, the pill mimics the mustache with a mustache of its own, matching in weight, and corner radius.
The Zelle® pill container is intended for use by Early Warning and designated vendors. Partners should only use pre-approved pill container assets.
Shapes
The Zelle® shapes come directly from our logo. They are an abstract illustration of flow and the movement of money.
We use the shapes to help create a cohesive visual identity while providing flexibility for different expressions of our brand
The Zelle® shapes are intended for use by Early Warning and designated vendors. Partners should only use pre-approved shapes assets.
Shapes as Photography Containers
The shapes (primarily the circle) are also used as containers or backdrops for photography. Using the shapes in tandem with photography helps create a cohesive look and feel across our branding.
The full image may be cropped into a shape. When cropping photography into shapes, take note of the composition and do not exclude any critical storytelling elements.
Shapes as Abstract Brand Signifiers
Here, the shapes are arranged to resemble the Zelle® logo. This treatment is useful when a more subtle brand representation is required.
- This treatment is typically used for backdrops, signage, and swag where the logo would come across as redundant or intrusive.
- Only use this treatment where there is existing logo use and brand recognition (e.g., a festival with multiple branded assets).
- When applying this treatment, please pull from our approved vector source file (available upon request). Do not attempt to arrange the shapes from scratch.
Iconography Line
Our line icon library is available to Early Warning employees for use in Zelle® PowerPoint presentations. PNG, EPS, and Adobe Illustrator source files are also available upon request to internal and external designers producing Zelle® assets.
Some icons from the library are also available to partners via the Partner Portal.
Please do not alter the icons (other than to resize them proportionately).
Call to Action (CTA) Buttons Color
Note: These are examples of CTA button color combinations that pass AAA contrast requirements. Other color combinations are possible, but please check the contrast before using colors not shown on this page.
CTA Buttons Specs
TYPOGRAPHY
- All caps
- Zelle® Sans Bold
- Tracking = 50*
*Tracking is measured in 1/1000em, which means the value is relative to the type size.
TEXT PADDING
Padding around the button text should be approximately equal to 1.5x the height of the text.
CHARACTER LIMIT
14 characters
PADDING
CTA buttons should be surrounded by a minimum area of white space, equal to 1/2 the height of the button. This is to ensure that the user can quickly identify the action they are being prompted to take.
MINIMUM SIZE
CTA buttons should have a minimum height of 32px in order to ensure that they are easily legible to the user.
CORNER RADIUS
The corner radius should be 1/8 the height of the button (e.g., a buton that is 32px tall should have a corner radius of 4px).
Designing for Accessibility
Zelle® strives to follow the Web Content Accessibility Guidelines (WCAG) to design online and mobile content that is more accessible to customers with disabilities.
Some quick tips are shown on this page.
In addition, see our tips on writing for accessibility.
COLOR CODING AND CONTRAST
There should be adequate contrast between the font color and background color, in order to ensure legibility.
CLEARLY FORMAT HEADERS
Headers should be formatted with heading style designations instead of changes in font, color, or size.
UNDERLINE LINKS
Hyperlinks should always be underlined.
TEXT INSTEAD OF IMAGES FOR IMPORTANT INFORMATION
Do not convey important or critical information with images. Always use text, so that text-to-speech readers can read it aloud.
ZOOM FUNCTIONS
The zoom feature should be enabled on your site, both on desktop and on mobile. Ensure that your layout can adapt to up to at least 200% zoom on desktop.
BUTTON AND LINK SIZE
Buttons, links, and other calls to action should be large enough so that users with motor control difficulties can easily click on the link (if the link is too small, the user may accidentally click on the wrong part of the page).
