Spectrum Design Data
  • Components
  • Tokens
  • Registry
  • AI
  • Specification
  • Tools
  • Avatar

    Token Type Value Resolved Deprecated Deprecated comment Replaced by
    avatar-border-color alias {gray-25} light: rgb(255, 255, 255)
    dark: rgb(17, 17, 17)
    wireframe: rgb(254, 254, 255)
    No - -
    avatar-border-width alias {border-width-100} 1px No - -
    avatar-opacity-disabled alias {opacity-disabled} 0.3 No - -
    avatar-size-100 scale-set - desktop: 24px
    mobile: 28px
    No - -
    avatar-size-1000 scale-set - desktop: 64px
    mobile: 72px
    No - -
    avatar-size-1100 scale-set - desktop: 72px
    mobile: 80px
    No - -
    avatar-size-1200 scale-set - desktop: 80px
    mobile: 88px
    No - -
    avatar-size-1300 scale-set - desktop: 88px
    mobile: 96px
    No - -
    avatar-size-1400 scale-set - desktop: 96px
    mobile: 104px
    No - -
    avatar-size-1500 scale-set - desktop: 104px
    mobile: 112px
    No - -
    avatar-size-200 scale-set - desktop: 28px
    mobile: 32px
    No - -
    avatar-size-300 scale-set - desktop: 32px
    mobile: 36px
    No - -
    avatar-size-400 scale-set - desktop: 36px
    mobile: 40px
    No - -
    avatar-size-50 scale-set - desktop: 16px
    mobile: 20px
    No - -
    avatar-size-500 scale-set - desktop: 40px
    mobile: 44px
    No - -
    avatar-size-600 scale-set - desktop: 44px
    mobile: 48px
    No - -
    avatar-size-700 scale-set - desktop: 48px
    mobile: 52px
    No - -
    avatar-size-75 scale-set - desktop: 20px
    mobile: 24px
    No - -
    avatar-size-800 scale-set - desktop: 52px
    mobile: 56px
    No - -
    avatar-size-900 scale-set - desktop: 56px
    mobile: 64px
    No - -
    avatar-to-avatar-100 scale-set - desktop: -6px
    mobile: -7px
    Yes Use semantic token base-gap-medium instead. Implementations could negate value eg calc(-1 * token-name) Replaced by base-gap-medium
    avatar-to-avatar-200 scale-set - desktop: -7px
    mobile: -8px
    Yes Use semantic token base-gap-large instead. Implementations could negate value eg calc(-1 * token-name) Replaced by base-gap-large
    avatar-to-avatar-300 scale-set - desktop: -8px
    mobile: -9px
    Yes Use semantic token base-gap-extra-large instead. Implementations could negate value eg calc(-1 * token-name) Replaced by base-gap-extra-large
    avatar-to-avatar-400 scale-set - desktop: -9px
    mobile: -10px
    Yes Use semantic token base-gap-2x-large instead. Implementations could negate value eg calc(-1 * token-name) Replaced by base-gap-2x-large
    avatar-to-avatar-50 scale-set - desktop: -4px
    mobile: -5px
    Yes Use semantic token base-gap-extra-small instead. Implementations could negate value eg calc(-1 * token-name) Replaced by base-gap-extra-small
    avatar-to-avatar-500 scale-set - desktop: -10px
    mobile: -11px
    Yes Use semantic token base-gap-3x-large instead. Implementations could negate value eg calc(-1 * token-name) Replaced by base-gap-3x-large
    avatar-to-avatar-75 scale-set - desktop: -5px
    mobile: -6px
    Yes Use semantic token base-gap-small instead. Implementations could negate value eg calc(-1 * token-name) Replaced by base-gap-small
    gradient-stop-1-avatar gradient-stop 0 0 No - -
    gradient-stop-2-avatar gradient-stop 0.6666 0.6666 No - -
    gradient-stop-3-avatar gradient-stop 1 1 No - -