A circular component used to represent a user or entity. Avatars can display a profile picture, user initials, a generic icon, or an overflow count, and are available in six sizes and six colour themes.
Variants
| Variant | Description |
|---|
Picture | Displays a circular cropped photograph. No colour prop applies — only available in Neutral. Supports Default and Hovered states across all sizes. |
Initials | Displays one or two initials as text on a coloured background. Available in all sizes and all colour options. Supports Default and Hovered states. |
Icon | Displays a user icon on a coloured background. Available in all sizes and all colour options. Supports Default and Hovered states. |
+ number | Displays a numeric overflow count (e.g. "+3") used at the end of an avatar stack. Only available in Neutral colour. Supports Default and Hovered states across all sizes. |
Typography
Typography only applies to the Initials and + number variants. The text style token scales with avatar size. All sizes share the same font family (Figtree) and weight (semibold / 600).
| Avatar Size | Typography Token | Font Size | Line Height |
|---|
xs | co.sys.typography.body.2xs.semibold | 10px | 14px |
sm | co.sys.typography.body.xs.semibold | 12px | 16px |
md | co.sys.typography.body.sm.semibold | 14px | 20px |
lg* (default) | co.sys.typography.body.md.semibold | 16px | 24px |
xl | co.sys.typography.body.lg.semibold | 20px | 32px |
2xl | co.sys.typography.body.lg.semibold | 20px | 32px |
The shared type properties for all sizes are:
| Property | Token | Value |
|---|
| Font family | co.sys.typography.body.xs.semibold.font-family | Figtree |
| Font weight | co.sys.typography.body.xs.semibold.font-weight | semibold (600) |
Note: xl and 2xl share the same typography token (body.lg.semibold). The lg* size carries an asterisk in Figma indicating it is the default size. Typography tokens do not apply to the Picture or Icon variants.
Colors & States
The hover behaviour is consistent across all colours: the border switches from its default neutral/xsubtle value to co.sys.color.border.brand.default. The surface colour does not change on hover for any colour.
Neutral
Used for the Picture, + number, and Icon/Initials variants where no brand accent colour is needed. The surface uses the standard neutral background and the border uses the neutral default stroke.
Default
| Property | Token | Value |
|---|
| Surface | co.sys.color.surface.neutral.default | #f9f8f7 |
| Border | co.sys.color.border.neutral.default | #e0dcd9 |
| Text | co.sys.color.text.neutral.default | #5a5857 |
| Icon | — | N/A (rendered as image asset) |
Hovered
| Property | Token | Value |
|---|
| Surface | co.sys.color.surface.neutral.default | #f9f8f7 |
| Border | co.sys.color.border.brand.default | #594672 |
| Text | co.sys.color.text.neutral.default | #5a5857 |
| Icon | — | N/A (rendered as image asset) |
Purple
The primary brand-aligned accent colour. Used as the default for Icon and Initials variants. Text uses the brand text token.
Default
| Property | Token | Value |
|---|
| Surface | co.sys.color.support.purple.subtle | #d4c7e5 |
| Border | co.sys.color.border.neutral.xsubtle | #f3f1f0 |
| Text | co.sys.color.comp.text.brand.default | #594672 |
| Icon | — | N/A (rendered as image asset) |
Hovered
| Property | Token | Value |
|---|
| Surface | co.sys.color.support.purple.subtle | #d4c7e5 |
| Border | co.sys.color.border.brand.default | #594672 |
| Text | co.sys.color.comp.text.brand.default | #594672 |
| Icon | — | N/A (rendered as image asset) |
Orange
A warm accent colour for Icon and Initials variants.
Default
| Property | Token | Value |
|---|
| Surface | co.sys.color.support.orange.subtle | #ffd1b7 |
| Border | co.sys.color.border.neutral.xsubtle | #f3f1f0 |
| Text | co.sys.color.comp.text.brand.default | #594672 |
| Icon | — | N/A (rendered as image asset) |
Hovered
| Property | Token | Value |
|---|
| Surface | co.sys.color.support.orange.subtle | #ffd1b7 |
| Border | co.sys.color.border.brand.default | #594672 |
| Text | co.sys.color.comp.text.brand.default | #594672 |
| Icon | — | N/A (rendered as image asset) |
Green
A semantic success-toned accent colour for Icon and Initials variants.
Default
| Property | Token | Value |
|---|
| Surface | co.sys.color.support.green.subtle | #dae7d9 |
| Border | co.sys.color.border.neutral.xsubtle | #f3f1f0 |
| Text | co.sys.color.comp.text.brand.default | #594672 |
| Icon | — | N/A (rendered as image asset) |
Hovered
| Property | Token | Value |
|---|
| Surface | co.sys.color.support.green.subtle | #dae7d9 |
| Border | co.sys.color.border.brand.default | #594672 |
| Text | co.sys.color.comp.text.brand.default | #594672 |
| Icon | — | N/A (rendered as image asset) |
Blue
A cool accent colour for Icon and Initials variants.
Default
| Property | Token | Value |
|---|
| Surface | co.sys.color.support.blue.subtle | #bdc1ed |
| Border | co.sys.color.border.neutral.xsubtle | #f3f1f0 |
| Text | co.sys.color.comp.text.brand.default | #594672 |
| Icon | — | N/A (rendered as image asset) |
Hovered
| Property | Token | Value |
|---|
| Surface | co.sys.color.support.blue.subtle | #bdc1ed |
| Border | co.sys.color.border.brand.default | #594672 |
| Text | co.sys.color.comp.text.brand.default | #594672 |
| Icon | — | N/A (rendered as image asset) |
Teal
A teal/cyan accent colour for Icon and Initials variants.
Default
| Property | Token | Value |
|---|
| Surface | co.sys.color.support.teal.subtle | #c1dde1 |
| Border | co.sys.color.border.neutral.xsubtle | #f3f1f0 |
| Text | co.sys.color.comp.text.brand.default | #594672 |
| Icon | — | N/A (rendered as image asset) |
Hovered
| Property | Token | Value |
|---|
| Surface | co.sys.color.support.teal.subtle | #c1dde1 |
| Border | co.sys.color.border.brand.default | #594672 |
| Text | co.sys.color.comp.text.brand.default | #594672 |
| Icon | — | N/A (rendered as image asset) |
Picture — Hovered state
The Picture variant has no background surface. On hover, only a border is applied over the image.
Default
| Property | Token | Value |
|---|
| Surface | — | No background applied |
| Border | — | No border applied |
| Text | — | N/A |
| Icon | — | N/A |
Hovered
| Property | Token | Value |
|---|
| Surface | — | No background applied |
| Border | co.sys.color.border.brand.default | #594672 |
| Text | — | N/A |
| Icon | — | N/A |
Design Tokens
Note: Typography tokens are documented in the Typography section above and are not repeated here.
| Property | Token | Value |
|---|
| Border radius | co.sys.border-radius.pill | 9999px |
| Border width | co.sys.border.width.normal | 1px |
Container size — xs | co.sys.size.md | 20px |
Container size — sm | co.sys.size.lg | 24px |
Container size — md | co.sys.size.xl | 32px |
Container size — lg* (default) | co.sys.size.2xl | 40px |
Container size — xl | co.sys.size.5xl | 64px |
Container size — 2xl | co.sys.size.6xl | 72px |
Icon inner size — xs | co.sys.size.xs | 12px |
Icon inner size — sm and md | co.sys.size.sm | 16px |