Components · Data display
Avatar
A fully rounded user image or initials on a muted surface. Five sizes from 16px (dense table cells) to 48px (profile headers); use 44px or larger for anything tappable.
Preview
Light
AC
AC
AC
AC
Dark
AC
AC
AC
AC
Accessibility
AC
AC
AC
AC
Spec
Values and token references straight from the Zetta spec.
avatar
- backgroundColor
- {colors.surface-muted}
- textColor
- {colors.muted}
- borderRadius
- {rounded.full}
- fontFamily
- Geist
- fontSize
- 13px
- fontWeight
- 500
- sizeXs
- 16px
- sizeSm
- 24px
- sizeMd
- 40px
- sizeLg
- 44px
- sizeXl
- 48px
avatar-image
- borderRadius
- {rounded.full}
- objectFit
- cover
Build with the skill
No package to install — hand this to your AI to generate the avatar in your stack.
Implement the Zetta "Avatar" component in this project's stack using the zetta-design-md skill.
- Apply the `avatar` spec from the skill (variants: xs, sm, md, lg, xl).
- Use this project's own component conventions and framework idioms.
- Reference the Zetta design tokens (CSS variables) for every color, radius, and shadow — never hardcode values.
- Implement all states (hover, focus, active, disabled, and invalid where applicable) with a visible 2px focus ring.
- Honor the Zetta guardrails (brand never shifts hue, shadows for overlays only, etc.) and verify in Light, Dark, and Accessibility.Anatomy & rules
- Full radius,
surface-mutedfill,mutedinitials (13 / 500). Image covers (object-fit: cover). - Sizes: 16 / 24 / 40 / 44 / 48px. Use
lg(44px) or larger for any tappable avatar (SC 2.5.5).
Known gaps
- Status indicator (online dot) and an avatar-group / stack pattern are not yet specified.