diff --git a/packages/components/src/avatar/docs/Avatar.stories.mdx b/packages/components/src/avatar/docs/Avatar.stories.mdx
index 66a03a267..dbd91527f 100644
--- a/packages/components/src/avatar/docs/Avatar.stories.mdx
+++ b/packages/components/src/avatar/docs/Avatar.stories.mdx
@@ -68,13 +68,11 @@ An avatar component can vary in size.
 <Preview scope={{ ChrisHadfield }}>
     <Story name="size">
         <Inline alignY="center">
-            <Avatar size="2xs" src={ChrisHadfield} name="Chris Hadfield" />
             <Avatar size="xs" src={ChrisHadfield} name="Chris Hadfield" />
             <Avatar size="sm" src={ChrisHadfield} name="Chris Hadfield" />
-            <Avatar name="Chris Hadfield" src={ChrisHadfield} />
+            <Avatar size="md" src={ChrisHadfield} name="Chris Hadfield" />
             <Avatar size="lg" src={ChrisHadfield} name="Chris Hadfield" />
             <Avatar size="xl" src={ChrisHadfield} name="Chris Hadfield" />
-            <Avatar size="2xl" src={ChrisHadfield} name="Chris Hadfield" />
         </Inline>
     </Story>
 </Preview>
diff --git a/packages/components/src/avatar/src/Avatar.css b/packages/components/src/avatar/src/Avatar.css
index 41912e4df..6da2c14df 100644
--- a/packages/components/src/avatar/src/Avatar.css
+++ b/packages/components/src/avatar/src/Avatar.css
@@ -1,50 +1,35 @@
 .o-ui-avatar {
     display: inline-flex;
+    aspect-ratio: 1/1;
     flex-shrink: 0;
-    border-radius: var(--o-ui-br-circular);
+    border-radius: var(--hop-shape-circle);
     overflow: hidden;
 }
 
 /* SIZES */
-.o-ui-avatar-2xs {
-    width: var(--o-ui-sz-3);
-    height: var(--o-ui-sz-3);
-}
-
 .o-ui-avatar-xs {
-    width: var(--o-ui-sz-4);
-    height: var(--o-ui-sz-4);
+    width: 1rem;
 }
 
 .o-ui-avatar-sm {
-    width: var(--o-ui-sz-5);
-    height: var(--o-ui-sz-5);
+    width: 1.5rem;
 }
 
 .o-ui-avatar-md {
-    width: var(--o-ui-sz-6);
-    height: var(--o-ui-sz-6);
+    width: 2rem;
 }
 
 .o-ui-avatar-lg {
-    width: var(--o-ui-sz-7);
-    height: var(--o-ui-sz-7);
+    width: 3rem;
 }
 
 .o-ui-avatar-xl {
-    width: var(--o-ui-sz-8);
-    height: var(--o-ui-sz-8);
-}
-
-.o-ui-avatar-2xl {
-    width: var(--o-ui-sz-9);
-    height: var(--o-ui-sz-9);
+    width: 4rem;
 }
 
 /* IMAGE */
 .o-ui-avatar-image {
     width: 100%;
-    height: 100%;
 }
 
 /* TEXT */
@@ -52,7 +37,7 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    color: var(--o-ui-white);
+    color: rgba(var(--o-ui-black) / 0.75);
     width: 100%;
     height: 100%;
     background-color: transparent;
@@ -65,13 +50,31 @@
     align-items: center;
 }
 
+.o-ui-avatar-group .o-ui-avatar:not(.o-ui-avatar-group-remainings) {
+    border: 1px solid var(--hop-neutral-surface);
+}
+
+.o-ui-avatar-group .o-ui-avatar-xs:not(:first-child):not(.o-ui-avatar-group-remainings),
+.o-ui-avatar-group .o-ui-avatar-sm:not(:first-child):not(.o-ui-avatar-group-remainings) {
+    margin-left: calc(-1 * var(--hop-space-inline-xs));
+}
+
+.o-ui-avatar-group .o-ui-avatar-md:not(:first-child):not(.o-ui-avatar-group-remainings),
+.o-ui-avatar-group .o-ui-avatar-lg:not(:first-child):not(.o-ui-avatar-group-remainings),
+.o-ui-avatar-group .o-ui-avatar-xl:not(:first-child):not(.o-ui-avatar-group-remainings) {
+    margin-left: calc(-1 * var(--hop-space-inline-sm));
+}
+
 /* GROUPS | REMAININGS */
 .o-ui-avatar-group-remainings {
-    background-color: var(--o-ui-bg-alias-mid-break);
+    background-color: transparent;
+    margin-left: var(--hop-space-inline-sm);
+    width: auto;
 }
 
 .o-ui-avatar-group-remainings .o-ui-avatar-text {
-    color: var(--o-ui-text-alias-secondary);
+    color: var(--hop-neutral-text-weak);
+    font-weight: var(--hop-body-sm-semibold-font-weight);
 }
 
 /* GROUPS | REMAININGS | TOOLTIP */
@@ -87,9 +90,9 @@
 }
 
 .o-ui-avatar-group-remainings-list-item:not(:last-child) {
-    margin-bottom: var(--o-ui-sp-2);
+    margin-bottom: var(--hop-space-stack-sm);
 }
 
 .o-ui-avatar-group-remainings-list-item-avatar {
-    margin-right: var(--o-ui-sp-2);
+    margin-right: var(--hop-space-stack-sm);
 }
diff --git a/packages/components/src/avatar/src/Avatar.tsx b/packages/components/src/avatar/src/Avatar.tsx
index f3a222257..855112aa5 100644
--- a/packages/components/src/avatar/src/Avatar.tsx
+++ b/packages/components/src/avatar/src/Avatar.tsx
@@ -34,7 +34,7 @@ export interface InnerAvatarProps extends SlotProps, InternalProps, StyledCompon
     /**
      * An avatar can vary in size.
      */
-    size?: ResponsiveProp<"2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl">;
+    size?: ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl">;
     /**
      * The url of a remote image or an image object.
      */
@@ -71,20 +71,14 @@ function AvatarImage({
 }
 
 const O365InitialsColorsForName = [
-    "#99B433",
-    "#6BA5E7",
-    "#E773BD",
-    "#00A300",
-    "#1E7145",
-    "#FF0097",
-    "#7E3878",
-    "#603CBA",
-    "#5E4B8B",
-    "#00ABA9",
-    "#2D89EF",
-    "#2B5797",
-    "#DA532C",
-    "#B91D47"
+    "#95B1FF",
+    "#A3D6CB",
+    "#FFBF92",
+    "#AAD89D",
+    "#9FD2F7",
+    "#EAC96D",
+    "#E5DED6",
+    "#FFBCB7"
 ];
 
 function AvatarInitials({ "aria-label": ariaLabel, name, size }: Partial<InnerAvatarProps>) {
@@ -127,9 +121,8 @@ function AvatarInitials({ "aria-label": ariaLabel, name, size }: Partial<InnerAv
 
 /* eslint-disable sort-keys, sort-keys-fix/sort-keys-fix */
 const textSize = createSizeAdapter({
-    "2xs": "xs",
     "xs": "xs",
-    "sm": "sm",
+    "sm": "xs",
     "md": "md",
     "lg": "lg",
     "xl": "xl",
diff --git a/packages/components/src/avatar/src/AvatarGroup.tsx b/packages/components/src/avatar/src/AvatarGroup.tsx
index 57f7a628c..db2abb026 100644
--- a/packages/components/src/avatar/src/AvatarGroup.tsx
+++ b/packages/components/src/avatar/src/AvatarGroup.tsx
@@ -12,12 +12,12 @@ export interface InnerAvatarGroupProps extends Omit<AbstractGroupProps<typeof De
     /**
      * The avatars of the group can vary in size.
      */
-    size?: ResponsiveProp<"2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl">;
+    size?: ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl">;
 }
 
 interface RemainingAvatarsProps {
     avatars: ReactElement[];
-    size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
 }
 
 function RemainingAvatars({ avatars, size, ...rest }: RemainingAvatarsProps) {
@@ -109,7 +109,7 @@ export function InnerAvatarGroup({
                 {
                     as,
                     className: "o-ui-avatar-group",
-                    gap: 1 as const,
+                    gap: 0 as const,
                     orientation: "horizontal" as const,
                     ref: forwardedRef,
                     wrap: wrapValue
diff --git a/packages/components/src/avatar/tests/chromatic/Avatar.stories.tsx b/packages/components/src/avatar/tests/chromatic/Avatar.stories.tsx
index e5d9af843..d864e455f 100644
--- a/packages/components/src/avatar/tests/chromatic/Avatar.stories.tsx
+++ b/packages/components/src/avatar/tests/chromatic/Avatar.stories.tsx
@@ -27,13 +27,11 @@ export const LocalImage: AvatarStory = {
     storyName: "local image",
     render: () => (
         <Inline alignY="center">
-            <Avatar src={Person} size="2xs" name="Neil Armstrong" />
             <Avatar src={Person} size="xs" name="Neil Armstrong" />
             <Avatar src={Person} size="sm" name="Neil Armstrong" />
             <Avatar src={Person} name="Neil Armstrong" />
             <Avatar src={Person} size="lg" name="Neil Armstrong" />
             <Avatar src={Person} size="xl" name="Neil Armstrong" />
-            <Avatar src={Person} size="2xl" name="Neil Armstrong" />
         </Inline>
     )
 };
@@ -44,7 +42,7 @@ export const RemoteImage: AvatarStory = {
         chromatic: { delay: 500 }
     },
     render: () => (
-        <Avatar size="2xl" name="Neil Armstrong" src="https://randomuser.me/api/portraits/men/10.jpg" />
+        <Avatar size="xl" name="Neil Armstrong" src="https://randomuser.me/api/portraits/men/10.jpg" />
     )
 };
 
@@ -52,13 +50,11 @@ export const FailingRemoteSrc: AvatarStory = {
     storyName: "failing remote src",
     render: () => (
         <Inline alignY="center">
-            <Avatar size="2xs" src="https://www.google.com" name="Neil Armstrong" />
             <Avatar size="xs" src="https://www.google.com" name="Neil Armstrong" />
             <Avatar size="sm" src="https://www.google.com" name="Neil Armstrong" />
             <Avatar src="https://www.google.com" name="Neil Armstrong" />
             <Avatar size="lg" src="https://www.google.com" name="Neil Armstrong" />
             <Avatar size="xl" src="https://www.google.com" name="Neil Armstrong" />
-            <Avatar size="2xl" src="https://www.google.com" name="Neil Armstrong" />
         </Inline>
     )
 };
@@ -68,13 +64,11 @@ export const Initials: AvatarStory = {
     render: () => (
         <Stack>
             <Inline alignY="center">
-                <Avatar size="2xs" name="Neil Armstrong" />
                 <Avatar size="xs" name="Neil Armstrong" />
                 <Avatar size="sm" name="Neil Armstrong" />
                 <Avatar name="Neil Armstrong" />
                 <Avatar size="lg" name="Neil Armstrong" />
                 <Avatar size="xl" name="Neil Armstrong" />
-                <Avatar size="2xl" name="Neil Armstrong" />
             </Inline>
             <Inline>
                 <Avatar name="Sally Ride" />
@@ -90,13 +84,11 @@ export const EmptySrc: AvatarStory = {
     storyName: "empty src",
     render: () => (
         <Inline alignY="center">
-            <Avatar src="" size="2xs" name="Neil Armstrong" />
             <Avatar src="" size="xs" name="Neil Armstrong" />
             <Avatar src="" size="sm" name="Neil Armstrong" />
             <Avatar src="" name="Neil Armstrong" />
             <Avatar src="" size="lg" name="Neil Armstrong" />
             <Avatar src="" size="xl" name="Neil Armstrong" />
-            <Avatar src="" size="2xl" name="Neil Armstrong" />
         </Inline>
     )
 };
diff --git a/packages/components/src/avatar/tests/chromatic/AvatarGroup.stories.tsx b/packages/components/src/avatar/tests/chromatic/AvatarGroup.stories.tsx
index fdbf71bfd..d78365af6 100644
--- a/packages/components/src/avatar/tests/chromatic/AvatarGroup.stories.tsx
+++ b/packages/components/src/avatar/tests/chromatic/AvatarGroup.stories.tsx
@@ -28,10 +28,6 @@ export const Default: AvatarGroupStory = {
     render: () => (
         <Inline gap={13}>
             <Stack>
-                <AvatarGroup size="2xs">
-                    <Avatar name="Sally Ride" />
-                    <Avatar name="Alan Shepard" />
-                </AvatarGroup>
                 <AvatarGroup size="xs">
                     <Avatar name="Sally Ride" />
                     <Avatar name="Alan Shepard" />
@@ -52,18 +48,8 @@ export const Default: AvatarGroupStory = {
                     <Avatar name="Sally Ride" />
                     <Avatar name="Alan Shepard" />
                 </AvatarGroup>
-                <AvatarGroup size="2xl">
-                    <Avatar name="Sally Ride" />
-                    <Avatar name="Alan Shepard" />
-                </AvatarGroup>
             </Stack>
             <Stack>
-                <AvatarGroup size="2xs">
-                    <Avatar name="Sally Ride" />
-                    <Avatar name="Alan Shepard" />
-                    <Avatar name="Chris Hadfield" />
-                    <Avatar name="Christa McAuliffe" />
-                </AvatarGroup>
                 <AvatarGroup size="xs">
                     <Avatar name="Sally Ride" />
                     <Avatar name="Alan Shepard" />
@@ -94,12 +80,6 @@ export const Default: AvatarGroupStory = {
                     <Avatar name="Chris Hadfield" />
                     <Avatar name="Christa McAuliffe" />
                 </AvatarGroup>
-                <AvatarGroup size="2xl">
-                    <Avatar name="Sally Ride" />
-                    <Avatar name="Alan Shepard" />
-                    <Avatar name="Chris Hadfield" />
-                    <Avatar name="Christa McAuliffe" />
-                </AvatarGroup>
             </Stack>
         </Inline>
     )
@@ -124,13 +104,6 @@ export const WithRemainings: AvatarGroupStory = {
     storyName: "with remainings",
     render: () => (
         <Stack>
-            <AvatarGroup size="2xs">
-                <Avatar name="Sally Ride" />
-                <Avatar name="Alan Shepard" />
-                <Avatar name="Chris Hadfield" />
-                <Avatar name="Christa McAuliffe" />
-                <Avatar name="Neil Armstrong" />
-            </AvatarGroup>
             <AvatarGroup size="xs">
                 <Avatar name="Sally Ride" />
                 <Avatar name="Alan Shepard" />
@@ -166,13 +139,6 @@ export const WithRemainings: AvatarGroupStory = {
                 <Avatar name="Christa McAuliffe" />
                 <Avatar name="Neil Armstrong" />
             </AvatarGroup>
-            <AvatarGroup size="2xl">
-                <Avatar name="Sally Ride" />
-                <Avatar name="Alan Shepard" />
-                <Avatar name="Chris Hadfield" />
-                <Avatar name="Christa McAuliffe" />
-                <Avatar name="Neil Armstrong" />
-            </AvatarGroup>
         </Stack>
     )
 };
@@ -181,7 +147,7 @@ export const Overflow: AvatarGroupStory = {
     storyName: "overflow",
     render: () => (
         <Div width={10}>
-            <AvatarGroup size="2xl">
+            <AvatarGroup size="xl">
                 <Avatar name="Sally Ride" />
                 <Avatar name="Alan Shepard" />
                 <Avatar name="Chris Hadfield" />
diff --git a/packages/components/src/listbox/src/ListboxOption.tsx b/packages/components/src/listbox/src/ListboxOption.tsx
index be5c1ec1a..f82e54bf6 100644
--- a/packages/components/src/listbox/src/ListboxOption.tsx
+++ b/packages/components/src/listbox/src/ListboxOption.tsx
@@ -107,7 +107,7 @@ export function InnerListboxOption({
         avatar: (avatarElement: ReactElement, slotElements: SlotElements) => {
             return {
                 className: "o-ui-listbox-option-avatar",
-                size: isNil(slotElements.description) ? "2xs" : "sm"
+                size: isNil(slotElements.description) ? "xs" : "sm"
             };
         },
         description: {
diff --git a/packages/components/src/menu/src/MenuItem.tsx b/packages/components/src/menu/src/MenuItem.tsx
index 1ca417fab..dba25a5d8 100644
--- a/packages/components/src/menu/src/MenuItem.tsx
+++ b/packages/components/src/menu/src/MenuItem.tsx
@@ -62,7 +62,7 @@ export function InnerMenuItem({
         avatar: (avatarElement: ReactElement, slotElements: SlotElements) => {
             return {
                 className: "o-ui-menu-item-option-avatar",
-                size: isNil(slotElements.description) ? "2xs" : "md"
+                size: isNil(slotElements.description) ? "xs" : "md"
             };
         },
         description: {