Blueweb
How to use
Use an Avatar to visually represent a user when no profile picture is available. It helps users quickly identify themselves or others across the interface.
The Avatar displays the user’s initials, generated from the information provided in their profile. It is designed to be simple, consistent, and easy to recognize at a glance.
Sizes
The Avatar has two fixed size variants:
Do not resize the Avatar. Only these two sizes must be used to ensure visual consistency across products.
Do’s and Don’ts
Do
Use the avatar size that matches the layout density.
Don't
Don’t use an avatar size that breaks the visual balance of the layout.
Do
Always use uppercase letters, as this is how the avatar is displayed on the website.
Don't
Don’t use lowercase or custom formatting.
Accessibility
- When used as a clickable element, make sure it is keyboard accessible and clearly indicated as interactive.
- Do not rely on the Avatar alone to convey critical information.
Content
- The Avatar displays two initials only, based on the user’s profile information.
- Always use uppercase letters in the Initials text string in Figma, as this matches the production output.
- Do not add symbols, numbers, or extra characters.
Availability
Each global component provides a shared design direction across platforms. Implementation is owned by each platform team, so development status may vary per platform.
iOS
Android
Kiosk
Design status
Ready