A-One Design System

Avatars represent users across the platform. Initials avatars use gradient backgrounds from a set of 6 color families. Status dots indicate online/offline/busy/away state.

Sizes

Sizes: Five sizes from XS (24px) to XL (64px). Default is MD (40px). Use .avatar-xs, .avatar-sm, .avatar-lg, or .avatar-xl to override.

XS (24px)

SM (32px)

MD (40px)

LG (48px)

XL (64px)

<div class="avatar avatar-sm avatar-primary" role="img" aria-label="Jane Doe"><span>JD</span></div>

Initials with Colors

Colors: Six color families for initials avatars. Application logic hashes the user's name to pick a color. Each uses a light tinted background with darker text.

Primary

Blue

Green

Red

Orange

Magenta

<div class="avatar avatar-blue" role="img" aria-label="Claire Davies"><span>CD</span></div>

Image Avatars

Images: Place an <img> with .avatar-image inside the .avatar wrapper. The image is cropped to a circle via object-cover and rounded-full.

<div class="avatar"><img class="avatar-image" src="..." alt="User Name"></div>

Icon Placeholder

Fallback: When no image or initials are available, use .avatar-icon for a neutral gray placeholder with a user icon.

<div class="avatar avatar-icon" role="img" aria-label="User"><i class="fa-solid fa-user"></i></div>

Status Dots

Presence indicators: Add a .avatar-status span inside the avatar with a status modifier. Dot size scales automatically with avatar size.

Status Types

Online

Offline

Busy

Away

Dot Scaling with Size

<div class="avatar avatar-blue" role="img" aria-label="Sam Collins, Online"><span>SC</span><span class="avatar-status avatar-status-online"><span class="tw:sr-only">Online</span></span></div>

Mixed Row

Realistic usage: A mix of initials, image, and icon avatars with various sizes and status indicators, as they would appear in a user list or team view.