| State |
Support |
Visual change |
Tokens |
| Default |
Yes |
The picture, or the fallback: initials in a pastel tag pair derived from the name (seven hues) |
color-tag-<hue>-background, color-tag-<hue>-foreground |
| Loading |
Yes |
The fallback shows; delay can hold it back |
- |
| Loaded |
Yes |
The picture fades in and the fallback goes |
motion-skeleton-reveal-duration |
| Error |
Yes |
If the picture fails, the fallback stays |
- |
| Online, busy, offline |
With status |
Filled green, filled red, hollow grey dot |
color-status-success-emphasis, color-status-danger-emphasis, color-status-neutral-emphasis |
| Hover, pressed, focus, disabled |
No |
Avatar is not interactive |
- |
| Size |
Box |
Status dot |
Icon |
Initials style |
xs |
24 px |
8 px |
12 px |
12 px / 16 px, medium |
sm (default) |
32 px |
8 px |
16 px |
12 px / 16 px, medium |
md |
40 px |
12 px |
20 px |
14 px / 20 px, medium |
lg |
48 px |
12 px |
24 px |
16 px / 24 px, semibold |
xl |
64 px |
16 px |
32 px |
20 px / 28 px, semibold |
| Property |
Value |
Token |
| Person shape |
Circle |
radius-full |
| Company shape |
Square with 8 px corners |
radius-md |
| Status ring |
2 px, surface colour |
color-surface-default |
| Group overlap |
8 px |
space-md |
Values follow the selected brand; switch the brand in the top bar.
| Token | Sample | Light mode | Dark mode |
|---|
--bigbang-avatar-size-xs | | 24px24px24px | 24px24px24px |
--bigbang-avatar-size-sm | | 32px32px32px | 32px32px32px |
--bigbang-avatar-size-md | | 40px40px40px | 40px40px40px |
--bigbang-avatar-size-lg | | 48px48px48px | 48px48px48px |
--bigbang-avatar-size-xl | | 64px64px64px | 64px64px64px |
--bigbang-avatar-status-size-xs | | 8px8px8px | 8px8px8px |
--bigbang-avatar-status-size-md | | 12px12px12px | 12px12px12px |
--bigbang-avatar-status-size-xl | | 16px16px16px | 16px16px16px |
--bigbang-color-status-success-emphasis | | #2da264#2da264#2da264 | #7dd09b#7dd09b#7dd09b |
--bigbang-color-status-danger-emphasis | | #e1595b#e1595b#e1595b | #ff9a97#ff9a97#ff9a97 |
--bigbang-color-status-neutral-emphasis | | #737373#737373#737373 | #a1a1a1#a1a1a1#a1a1a1 |
--bigbang-color-status-brand-background | | #edf5f8#fcf1ec#f0f3ff | #092932#3c190a#1d2046 |
--bigbang-color-status-brand-foreground | | #125768#7b3717#3e4490 | #a4d0df#f3b9a1#b9c4ff |
--bigbang-color-surface-default | | #f7f7f7#f7f7f7#f7f7f7 | #1e1e1e#1e1e1e#1e1e1e |
--bigbang-color-surface-layer-2 | | #ededed#ededed#ededed | #303030#303030#303030 |
--bigbang-radius-md | | 8px8px8px | 8px8px8px |
--bigbang-radius-full | | 9999px9999px9999px | 9999px9999px9999px |
--bigbang-space-md | | 8px8px8px | 8px8px8px |
--bigbang-motion-skeleton-reveal-duration | | 0.11s0.11s0.11s | 0.11s0.11s0.11s |
| Interaction |
Motion |
Reduced motion |
| Picture loads |
Opacity 0 → 1, motion-skeleton-reveal-duration (110 ms), motion.reveal |
The same short fade; no movement |
| Status dot appears |
The same fade |
Same |
Fallback delay (delay) |
The fallback stays hidden until the delay passes |
Same |
| Anything else |
Nothing changes on hover, press or focus |
Nothing to reduce |
Values come from tokens; see Motion for details.