Do use program icons to represent their programs.
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.
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
Program badges come in both 24px and 16px icon lockups and use regular-weight text.
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.
Program badges help visualize and convey trust. To create visual hierarchy, we use different badge colors based on quantity of badges in a viewable area and level of importance.
If a program badge is meant to be one of the most important elements on a page, it can stand out by using our blue accent color. Blue is not a requirement, but simply an option. Alternately, if there are many program badges on a page, they may cause too much visual noise and should instead use black to decrease the visual hierarchy. Learn more by visiting Color tokens.
Number of badges
View Item (1 badge)
On the View Item page, a single program badge can appear at the very top of the page above the item’s title. This location provides high-level trust through our blue accent color.
Checkout (1 badge)
A program badge like eBay Money Back Guarantee is common during the checkout process when all items are eligible for the program. This uses our blue accent color to ensure high-level trust during the final step before purchase.
Shop with confidence (1 badge)
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 one program badge is surrounded by other icons and black is used instead of our blue accent color.
Search Results Page (3+ badges)
Throughout the SRP, program badges appear consistently at the bottom of item tiles. Badges only appear on item tiles that match the program’s criteria, and only one badge appears at a time. Since there are many program badges on a page like this, it’s okay to use black to allow them to visually sit back within the design.
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 and text depends on the amount of lines of text that are present.
Vertically center-align program icon and text when there are 2 lines or less. With 3 or more lines, top-align icon and text. The icon can be placed within a circle background to provide better visual anchoring.
Large badge multi-line
Vertically center-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.
Outlined
Every program has an outlined icon that is associated with it. These icons will be used across the majority of applications.
Filled
There are two programs that have filled variants for their icons—Authenticity Guarantee and eBay Money Back Guarantee. The filled variants are only used when placing on top of photography and to draw more attention to the program. If there are two or more icons in a layout and one of them is filled, the others should also be filled. This only applies for these two programs.
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.
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.
Product
Don’t use program icons for anything other than their programs.
Do use a single program badge on item tiles.
Don’t stack multiple program badges in item tiles. Use only the most significant program badge.
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 all program badges in a layout if there is at least one icon that is filled.
Don’t mix outlined and filled icons for program badges in the same layout.
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 use the filled Authenticity Guarantee and eBay Money Back Guarantee icons on top of imagery when needed.
Don’t use the outlined Authenticity Guarantee and eBay Money Back Guarantee icons on top of imagery.
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.
Single line 24px
Single line 16px
Double line
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.
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.
| Date | Notes |
|---|---|
| Jun, 2024 |
|
| Apr, 2023 |
|
| Dec, 2022 |
|
| Oct, 2022 |
|
