Avatar
Avatars are visual representations of users and stores.
- Skin
- Marko
- React
Human
Avatars help humanize the product experience by connecting users with the product and to each other.
Personalized
Avatars are meant to be personalized and work most efficiently when they are representative of the customer, user, or brand.
- Signed-out
- Default
- Image
- eBay
Signed-out
We use signed-out avatars when a new user comes to eBay for the first time or when a current user completely signs out. This variation has no personalized attributes since there’s nothing to display without access to user information.
Default
We automatically assign a default avatar when a new user signs up for an account without uploading a custom image. The avatar’s color is assigned from our 8 color combinations based on user ID. Within the avatar is the first character of the user ID. The characters A–Z, <>’*”, 0–9 can be used. When letters are placed, they should always be uppercased. This avatar follows the user throughout their experience until they upload a custom image.
User selected image
Users can personalize their avatars to better represent their authentic selves. We use the image avatar for photos, logos, and artwork to provide customization for users. These customized avatars help improve comprehension by facilitating identification through imagery instead of just text.
eBay
We use the eBay avatar to let users know they’re communicating directly with eBay through their shopping experience. This avatar typically appears within the messaging experience and through email correspondence.
Size
Since we use avatars across native and web experiences, they’re displayed in various sizes. Our avatars are designed at 48px and are scaled up or down from there. Our 7 core avatar sizes are 32, 40, 48, 56, 64, 96, and 128 pixels. The character in the avatar does not scale up or honor larger font-size settings. It's treated more like an "icon."
Color
Our default avatar uses a balanced family of 8 color combinations. Learn more about these color combinations in the Color pairing tool.
Image cropping (square and 4:3)
Square, 4:3, and aspect ratios in between are set to "fill." These dimensions allow images to fully occupy the avatar’s shape with minimal cropping of the original content.
Image cropping (below 4:3)
Crops narrower than a 4:3 aspect ratio, such as 16:9 or more extreme formats, are adjusted to “fit.” This ensures that logos and other important areas of an image are not inadvertently cut off.
Image scrim
The avatar component uses the image component, which automatically applies a subtle scrim over the image. This scrim helps maintain a clear visual outline, even when extreme or unexpected cropping occurs or when a white background is used.
Sizing
Do use the provided avatar sizes.
Don’t create arbitrary sizes.
Styling
Do use the 8 color combinations provided for the default avatar.
Don’t create custom color palettes for the default avatar.
Do use a single character within the default avatar.
Don’t use more than one character within the default avatar.
Do use uppercase for the character within the default avatar.
Don’t use lowercase for the character within the default avatar.
Do use a circle shape for avatars.
Don’t use other shapes for avatars.
Do use approved characters (A–Z, <>’*”, 0–9) in the default avatar.
Don’t use emojis or other unapproved characters in the default avatar.
Do use the signed-out avatar to represent signed-out users.
Don’t use the signed-out avatar to represent signed-in users.
Image handling
Do follow the image cropping guidance. 16:9 ratio images are set to “fit”.
Don’t set 16:9 ratio images to “fill,” as this will result in poor cropping.
Do use the image scrim over all image-based avatars.
Don’t remove the image scrim, as this can lead to a poorly cropped avatar with an unclear outline.
