Program badges

Program badges are icon and text lockups that highlight and reinforce existing programs and services at eBay related to trust, authentication, and guarantees.

Overview

Anatomy

A program badge is a lockup featuring a program-specific icon and the name of the program. For the approved set of program icons, see the Icon library.

Icon
Text
Lockup

Size

Program badges come in both 24px and 16px icon lockups and use regular-weight text.

Orientation

Single line

This single line lockup is the primary version that is used across applications.

Double line

This double line lockup is a secondary treatment that may be used when space is limited in marketing materials.

Filled and unfilled icons

Only two programs in our system use filled icons: Authenticity Guarantee and Guaranteed Fit. All other programs use outlined icons. While some programs use a similar icon to Authenticity Guarantee, only Authenticity Guarantee should be displayed as filled at this time. A few AG filled exceptions exist, which are outlined in this section.

Item tiles

Authenticity Guarantee and Guaranteed Fit program badges are always filled across item tiles and marketing applications.

All program badges across item tiles should appear in blue, with the exception of Guaranteed Fit which is always green.

AG Filled exception: Feature groupings

When Authenticity Guarantee appears alongside other icons within a feature or details group—and is already shown elsewhere on the page—it may be displayed as an outlined, black icon to align with the surrounding icons.

This is commonly seen in the Shop with Confidence section on the View Item page and within Authenticity Guarantee popovers.

AG Filled exception: Feature groupings

This is commonly seen in the Shop with Confidence section on the View Item page and within Authenticity Guarantee popovers.

Color framework

Program badges help communicate trust and provide visual clarity. To ensure prominence, they are primarily displayed in our accent blue across item tiles and other key placements. A few color exceptions exist, which are outlined in this section.

Item tiles

All program badges across item tiles should appear in blue, with the exception of Guaranteed Fit which is always green.

Key placements

Key placements are locations where a program badge appears independently, without being grouped with other elements.

View item

A program badge placed at the the top of the page.

Checkout

A program badge highlighted at the end of a checkout flow.

Tone-on-tone

When program badges are used in a layout that has a specific color scheme, the color should match the type and other UI elements to maintain consistency, legibility, and accessibility.

Color exception: Shop with Confidence

On the View Item page, program badges can appear further down in the “Shop with Confidence” module. It’s common to find program badges with other trust signals and icons in this section. This is a color exception because the program badge appears alongside other icons. In this context, black is used to match the visual hierarchy, since the badge is already shown elsewhere on the page.

Color exception: Features and details

Similar to the Shop with Confidence section on the View Item page, layouts that present additional features and details may use icons that match the style and color of the surrounding icons.

Alignment

Text wrapping

Some moments require a program name to wrap onto a second line of text. This can occur for longer program names or as a result of localizing text for another language. When wrapping text, anchor the icon in the upper left, center-aligned with the first line of text.

Rows and cells

Within sections like the “shop with confidence” module on View Item pages, the alignment of program icons are middle-aligned with the row’s height.

Large badge multi-line

Vertically middle-align program icon and text when there are 2 lines or less. With 3 or more lines, top-align icon and text. This treatment provides increased visual attention.

Small badge multi-line

Left-align sub copy underneath small program badge lockups when there is a clean edge line down the page. Keeping an edge will help with scannability.

In marketing

Authenticity Guarantee and Guaranteed Fit are two of our most prominently marketed programs. Both consistently use their filled icons across all marketing applications. Learn more in the UI graphics expression and banner component.

Authenticity Guarantee

Guaranteed Fit

Icon and text separated

It is possible to separate the program badge icon and text if the program name is being used as the headline. These layouts are more nuanced and should be developed in partnership with the brand team.

Overline

One of the common use cases for using program badges will be found in the overline of a banner. The overline sits above the banner’s title. The color matches the color scheme of the banner text and button.

Product

Do use program icons to represent their programs.

Don’t use program icons for anything other than their programs.

Do strive to limit to` a single program badge on item tiles.

Exception: While stacking multiple programs on item tiles is generally discouraged, certain programs—such as eBay for Charity—are exceptions to this guideline if needed.

Do left-align sub copy underneath program badges to maintain a clean edge line for better scannability.

Don’t indent sub copy to the program name—resulting in an uncomfortable edge line and disrupting scannability.

Don’t use tooltips with program badges. This treatment is often redundant and inaccessible without other visual indicators.

Don’t place other icons or links in close proximity to program badges. These badges are meant to be simple visual indicators.

Don’t create your own color combinations for program badges.

Don’t use bold weight for program badge text.

Marketing

Do use filled icons for Authenticity Guarantee and Guarantee Fit at all times.

Don’t mix outlined and filled icons for Authenticity Guarantee and Guaranteed Fit.

Do follow the color scheme of the layout. For tone-on-tone, the program badge should match the text and button color.

Don’t use a blue program badge over a colored background.

Do follow the provided spec for a double line program lockup.

Don’t text wrap the single line program lockup to two lines to create the double line lockup.

Do place program badges in the text overline when referencing programs in product banners.

Don’t randomly place a program badge lockup in a product banner. This creates unclear content hierarchy.

Specs

These specs apply to all program badges.

Single line 24px

Single line 16px

The double line lockup is built by scaling the 24px icon to 32px. Once the lockup is built to these specs, it can be scaled proportionally to any size needed.

Resources

Strategy and stakeholders must vet a program before it becomes official. Our program badges are a finite set that will grow over time as we expand our program offerings.

To discuss icon needs, reach out to the OneExperience (OX) team or sign up for office hours. Please do not create new program badge icons without consulting OX. Do not alter or edit program badge icons.