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
The eBay Guaranteed Fit program should only be represented with a filled icon; do not use an outlined version. Authenticity Guarantee on the other hand has both filled and outlined variants. The filled variant is 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.
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.
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.
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.
Icon library
View our suite of available icons.
Color tokens
Learn about our color tokens.
Item tile
Learn how to build and use item tiles.
Color
Learn how to use our color across product and marketing applications.
Marketing UI graphics
Learn how to use our UI graphics in marketing applications.
Type tokens
View the tokens that we use to consistently apply these styles to any string in development.
