diff --git a/.changeset/chilled-dolphins-eat.md b/.changeset/chilled-dolphins-eat.md
new file mode 100644
index 00000000000..d9be6bed5fb
--- /dev/null
+++ b/.changeset/chilled-dolphins-eat.md
@@ -0,0 +1,7 @@
+---
+'@primer/react': minor
+---
+
+Adds components to support skeleton loading states, and uses those components to replace ad-hoc skeleton loading states in Primer React components.
+
+<!-- Changed components: SkeletonAvatar, SkeletonBox, SkeletonText -->
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Default-dark-colorblind-linux.png
new file mode 100644
index 00000000000..5d1f2798c79
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Default-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Default-dark-dimmed-linux.png
new file mode 100644
index 00000000000..9a0225828fd
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Default-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Default-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..9c1a99c98f7
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Default-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Default-dark-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Default-dark-linux.png
new file mode 100644
index 00000000000..5d1f2798c79
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Default-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Default-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..5d1f2798c79
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Default-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Default-light-colorblind-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Default-light-colorblind-linux.png
new file mode 100644
index 00000000000..919026b3fa6
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Default-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Default-light-high-contrast-linux.png
new file mode 100644
index 00000000000..d758f1b58a0
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Default-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Default-light-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Default-light-linux.png
new file mode 100644
index 00000000000..255cdc5242a
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Default-light-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Default-light-tritanopia-linux.png
new file mode 100644
index 00000000000..919026b3fa6
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Default-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAStack-dark-colorblind-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAStack-dark-colorblind-linux.png
new file mode 100644
index 00000000000..2661c2da64e
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAStack-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAStack-dark-dimmed-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAStack-dark-dimmed-linux.png
new file mode 100644
index 00000000000..1e19cc326ac
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAStack-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAStack-dark-high-contrast-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAStack-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..82677475e59
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAStack-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAStack-dark-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAStack-dark-linux.png
new file mode 100644
index 00000000000..2661c2da64e
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAStack-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAStack-dark-tritanopia-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAStack-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..2661c2da64e
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAStack-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAStack-light-colorblind-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAStack-light-colorblind-linux.png
new file mode 100644
index 00000000000..93368586296
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAStack-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAStack-light-high-contrast-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAStack-light-high-contrast-linux.png
new file mode 100644
index 00000000000..ab05ccf081d
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAStack-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAStack-light-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAStack-light-linux.png
new file mode 100644
index 00000000000..93368586296
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAStack-light-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAStack-light-tritanopia-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAStack-light-tritanopia-linux.png
new file mode 100644
index 00000000000..93368586296
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAStack-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAnAvatarPair-dark-colorblind-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAnAvatarPair-dark-colorblind-linux.png
new file mode 100644
index 00000000000..5fad12c072d
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAnAvatarPair-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAnAvatarPair-dark-dimmed-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAnAvatarPair-dark-dimmed-linux.png
new file mode 100644
index 00000000000..44497b868a4
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAnAvatarPair-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAnAvatarPair-dark-high-contrast-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAnAvatarPair-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..5d86e790ff3
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAnAvatarPair-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAnAvatarPair-dark-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAnAvatarPair-dark-linux.png
new file mode 100644
index 00000000000..5fad12c072d
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAnAvatarPair-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAnAvatarPair-dark-tritanopia-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAnAvatarPair-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..5fad12c072d
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAnAvatarPair-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAnAvatarPair-light-colorblind-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAnAvatarPair-light-colorblind-linux.png
new file mode 100644
index 00000000000..b4d0bb12d5d
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAnAvatarPair-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAnAvatarPair-light-high-contrast-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAnAvatarPair-light-high-contrast-linux.png
new file mode 100644
index 00000000000..5635263ff7d
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAnAvatarPair-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAnAvatarPair-light-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAnAvatarPair-light-linux.png
new file mode 100644
index 00000000000..0a7a01118b1
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAnAvatarPair-light-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAnAvatarPair-light-tritanopia-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAnAvatarPair-light-tritanopia-linux.png
new file mode 100644
index 00000000000..b4d0bb12d5d
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-InAnAvatarPair-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Size-dark-colorblind-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Size-dark-colorblind-linux.png
new file mode 100644
index 00000000000..daf3cd5682c
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Size-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Size-dark-dimmed-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Size-dark-dimmed-linux.png
new file mode 100644
index 00000000000..236a04fabf9
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Size-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Size-dark-high-contrast-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Size-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..3a239e8e49a
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Size-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Size-dark-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Size-dark-linux.png
new file mode 100644
index 00000000000..daf3cd5682c
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Size-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Size-dark-tritanopia-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Size-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..daf3cd5682c
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Size-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Size-light-colorblind-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Size-light-colorblind-linux.png
new file mode 100644
index 00000000000..7fb6bbf86fb
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Size-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Size-light-high-contrast-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Size-light-high-contrast-linux.png
new file mode 100644
index 00000000000..877f9e6ff6a
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Size-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Size-light-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Size-light-linux.png
new file mode 100644
index 00000000000..14f6bfc7558
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Size-light-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Size-light-tritanopia-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Size-light-tritanopia-linux.png
new file mode 100644
index 00000000000..7fb6bbf86fb
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Size-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-SizeResponsive-dark-colorblind-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-SizeResponsive-dark-colorblind-linux.png
new file mode 100644
index 00000000000..875790278cb
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-SizeResponsive-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-SizeResponsive-dark-dimmed-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-SizeResponsive-dark-dimmed-linux.png
new file mode 100644
index 00000000000..398a9826878
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-SizeResponsive-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-SizeResponsive-dark-high-contrast-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-SizeResponsive-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..4fa2593d98b
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-SizeResponsive-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-SizeResponsive-dark-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-SizeResponsive-dark-linux.png
new file mode 100644
index 00000000000..875790278cb
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-SizeResponsive-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-SizeResponsive-dark-tritanopia-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-SizeResponsive-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..875790278cb
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-SizeResponsive-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-SizeResponsive-light-colorblind-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-SizeResponsive-light-colorblind-linux.png
new file mode 100644
index 00000000000..1b9e18408bb
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-SizeResponsive-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-SizeResponsive-light-high-contrast-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-SizeResponsive-light-high-contrast-linux.png
new file mode 100644
index 00000000000..2964fc09f59
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-SizeResponsive-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-SizeResponsive-light-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-SizeResponsive-light-linux.png
new file mode 100644
index 00000000000..17eb798828b
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-SizeResponsive-light-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-SizeResponsive-light-tritanopia-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-SizeResponsive-light-tritanopia-linux.png
new file mode 100644
index 00000000000..1b9e18408bb
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-SizeResponsive-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Square-dark-colorblind-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Square-dark-colorblind-linux.png
new file mode 100644
index 00000000000..c6854317539
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Square-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Square-dark-dimmed-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Square-dark-dimmed-linux.png
new file mode 100644
index 00000000000..b35d340f4ce
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Square-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Square-dark-high-contrast-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Square-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..af751461446
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Square-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Square-dark-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Square-dark-linux.png
new file mode 100644
index 00000000000..c6854317539
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Square-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Square-dark-tritanopia-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Square-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..c6854317539
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Square-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Square-light-colorblind-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Square-light-colorblind-linux.png
new file mode 100644
index 00000000000..0ba2be219b9
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Square-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Square-light-high-contrast-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Square-light-high-contrast-linux.png
new file mode 100644
index 00000000000..025c05b5b1e
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Square-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Square-light-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Square-light-linux.png
new file mode 100644
index 00000000000..7950a6d0006
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Square-light-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Square-light-tritanopia-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Square-light-tritanopia-linux.png
new file mode 100644
index 00000000000..0ba2be219b9
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonAvatar-Square-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Default-dark-colorblind-linux.png
new file mode 100644
index 00000000000..1fb210fd857
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Default-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Default-dark-dimmed-linux.png
new file mode 100644
index 00000000000..4b702fb0f1b
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Default-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Default-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..c1ca3dd2617
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Default-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Default-dark-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Default-dark-linux.png
new file mode 100644
index 00000000000..1fb210fd857
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Default-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Default-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..1fb210fd857
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Default-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Default-light-colorblind-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Default-light-colorblind-linux.png
new file mode 100644
index 00000000000..52a5f3f63aa
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Default-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Default-light-high-contrast-linux.png
new file mode 100644
index 00000000000..e0f3175d3a3
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Default-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Default-light-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Default-light-linux.png
new file mode 100644
index 00000000000..52a5f3f63aa
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Default-light-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Default-light-tritanopia-linux.png
new file mode 100644
index 00000000000..52a5f3f63aa
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Default-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Height-dark-colorblind-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Height-dark-colorblind-linux.png
new file mode 100644
index 00000000000..62aebe2accd
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Height-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Height-dark-dimmed-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Height-dark-dimmed-linux.png
new file mode 100644
index 00000000000..027908e5369
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Height-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Height-dark-high-contrast-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Height-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..78738879b46
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Height-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Height-dark-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Height-dark-linux.png
new file mode 100644
index 00000000000..62aebe2accd
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Height-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Height-dark-tritanopia-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Height-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..62aebe2accd
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Height-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Height-light-colorblind-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Height-light-colorblind-linux.png
new file mode 100644
index 00000000000..5d419e59b97
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Height-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Height-light-high-contrast-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Height-light-high-contrast-linux.png
new file mode 100644
index 00000000000..6d402d8c76a
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Height-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Height-light-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Height-light-linux.png
new file mode 100644
index 00000000000..5d419e59b97
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Height-light-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Height-light-tritanopia-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Height-light-tritanopia-linux.png
new file mode 100644
index 00000000000..5d419e59b97
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Height-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Width-dark-colorblind-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Width-dark-colorblind-linux.png
new file mode 100644
index 00000000000..ded3eeb4ba5
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Width-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Width-dark-dimmed-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Width-dark-dimmed-linux.png
new file mode 100644
index 00000000000..34436ee5b28
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Width-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Width-dark-high-contrast-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Width-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..77036ea62a6
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Width-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Width-dark-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Width-dark-linux.png
new file mode 100644
index 00000000000..ded3eeb4ba5
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Width-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Width-dark-tritanopia-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Width-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..ded3eeb4ba5
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Width-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Width-light-colorblind-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Width-light-colorblind-linux.png
new file mode 100644
index 00000000000..7921ce83425
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Width-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Width-light-high-contrast-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Width-light-high-contrast-linux.png
new file mode 100644
index 00000000000..e34f65113a3
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Width-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Width-light-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Width-light-linux.png
new file mode 100644
index 00000000000..7921ce83425
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Width-light-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Width-light-tritanopia-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Width-light-tritanopia-linux.png
new file mode 100644
index 00000000000..7921ce83425
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBone-Width-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Default-dark-colorblind-linux.png
new file mode 100644
index 00000000000..3dce00a0790
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Default-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Default-dark-dimmed-linux.png
new file mode 100644
index 00000000000..b3f62041f38
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Default-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Default-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..c82d11806cf
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Default-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Default-dark-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Default-dark-linux.png
new file mode 100644
index 00000000000..3dce00a0790
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Default-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Default-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..3dce00a0790
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Default-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Default-light-colorblind-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Default-light-colorblind-linux.png
new file mode 100644
index 00000000000..f092b0690b0
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Default-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Default-light-high-contrast-linux.png
new file mode 100644
index 00000000000..7edd6adc76f
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Default-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Default-light-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Default-light-linux.png
new file mode 100644
index 00000000000..f092b0690b0
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Default-light-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Default-light-tritanopia-linux.png
new file mode 100644
index 00000000000..f092b0690b0
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Default-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Height-dark-colorblind-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Height-dark-colorblind-linux.png
new file mode 100644
index 00000000000..6d13ebf4de2
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Height-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Height-dark-dimmed-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Height-dark-dimmed-linux.png
new file mode 100644
index 00000000000..2d304b7542a
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Height-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Height-dark-high-contrast-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Height-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..01af5baffc1
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Height-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Height-dark-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Height-dark-linux.png
new file mode 100644
index 00000000000..6d13ebf4de2
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Height-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Height-dark-tritanopia-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Height-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..6d13ebf4de2
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Height-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Height-light-colorblind-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Height-light-colorblind-linux.png
new file mode 100644
index 00000000000..4f1c3a0cf79
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Height-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Height-light-high-contrast-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Height-light-high-contrast-linux.png
new file mode 100644
index 00000000000..04a84e582d3
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Height-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Height-light-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Height-light-linux.png
new file mode 100644
index 00000000000..4f1c3a0cf79
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Height-light-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Height-light-tritanopia-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Height-light-tritanopia-linux.png
new file mode 100644
index 00000000000..4f1c3a0cf79
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Height-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Width-dark-colorblind-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Width-dark-colorblind-linux.png
new file mode 100644
index 00000000000..97c2abdca11
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Width-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Width-dark-dimmed-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Width-dark-dimmed-linux.png
new file mode 100644
index 00000000000..f3a41bfe509
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Width-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Width-dark-high-contrast-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Width-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..6da7a4b73c5
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Width-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Width-dark-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Width-dark-linux.png
new file mode 100644
index 00000000000..97c2abdca11
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Width-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Width-dark-tritanopia-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Width-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..97c2abdca11
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Width-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Width-light-colorblind-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Width-light-colorblind-linux.png
new file mode 100644
index 00000000000..a1568b13ce7
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Width-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Width-light-high-contrast-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Width-light-high-contrast-linux.png
new file mode 100644
index 00000000000..a74bf38a34c
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Width-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Width-light-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Width-light-linux.png
new file mode 100644
index 00000000000..a1568b13ce7
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Width-light-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Width-light-tritanopia-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Width-light-tritanopia-linux.png
new file mode 100644
index 00000000000..a1568b13ce7
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonBox-Width-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyLarge-dark-colorblind-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyLarge-dark-colorblind-linux.png
new file mode 100644
index 00000000000..f6fa5a46fbf
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyLarge-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyLarge-dark-dimmed-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyLarge-dark-dimmed-linux.png
new file mode 100644
index 00000000000..36bc03e1d7d
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyLarge-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyLarge-dark-high-contrast-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyLarge-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..b8f68ffb40a
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyLarge-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyLarge-dark-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyLarge-dark-linux.png
new file mode 100644
index 00000000000..f6fa5a46fbf
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyLarge-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyLarge-dark-tritanopia-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyLarge-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..f6fa5a46fbf
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyLarge-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyLarge-light-colorblind-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyLarge-light-colorblind-linux.png
new file mode 100644
index 00000000000..f93f50cff0c
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyLarge-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyLarge-light-high-contrast-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyLarge-light-high-contrast-linux.png
new file mode 100644
index 00000000000..1b00eec2b82
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyLarge-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyLarge-light-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyLarge-light-linux.png
new file mode 100644
index 00000000000..f93f50cff0c
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyLarge-light-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyLarge-light-tritanopia-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyLarge-light-tritanopia-linux.png
new file mode 100644
index 00000000000..f93f50cff0c
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyLarge-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyMedium-dark-colorblind-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyMedium-dark-colorblind-linux.png
new file mode 100644
index 00000000000..38ae883bdb4
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyMedium-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyMedium-dark-dimmed-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyMedium-dark-dimmed-linux.png
new file mode 100644
index 00000000000..b6ad7025057
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyMedium-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyMedium-dark-high-contrast-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyMedium-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..d79e93d41dc
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyMedium-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyMedium-dark-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyMedium-dark-linux.png
new file mode 100644
index 00000000000..38ae883bdb4
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyMedium-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyMedium-dark-tritanopia-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyMedium-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..38ae883bdb4
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyMedium-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyMedium-light-colorblind-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyMedium-light-colorblind-linux.png
new file mode 100644
index 00000000000..2ffacaa612e
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyMedium-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyMedium-light-high-contrast-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyMedium-light-high-contrast-linux.png
new file mode 100644
index 00000000000..1f2258290f0
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyMedium-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyMedium-light-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyMedium-light-linux.png
new file mode 100644
index 00000000000..2ffacaa612e
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyMedium-light-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyMedium-light-tritanopia-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyMedium-light-tritanopia-linux.png
new file mode 100644
index 00000000000..2ffacaa612e
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodyMedium-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodySmall-dark-colorblind-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodySmall-dark-colorblind-linux.png
new file mode 100644
index 00000000000..a64bc7148a6
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodySmall-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodySmall-dark-dimmed-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodySmall-dark-dimmed-linux.png
new file mode 100644
index 00000000000..1b1045d2937
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodySmall-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodySmall-dark-high-contrast-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodySmall-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..da89f0214fa
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodySmall-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodySmall-dark-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodySmall-dark-linux.png
new file mode 100644
index 00000000000..a64bc7148a6
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodySmall-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodySmall-dark-tritanopia-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodySmall-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..a64bc7148a6
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodySmall-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodySmall-light-colorblind-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodySmall-light-colorblind-linux.png
new file mode 100644
index 00000000000..d85dbdcf1de
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodySmall-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodySmall-light-high-contrast-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodySmall-light-high-contrast-linux.png
new file mode 100644
index 00000000000..b64faf6456d
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodySmall-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodySmall-light-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodySmall-light-linux.png
new file mode 100644
index 00000000000..d85dbdcf1de
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodySmall-light-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodySmall-light-tritanopia-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodySmall-light-tritanopia-linux.png
new file mode 100644
index 00000000000..d85dbdcf1de
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-BodySmall-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Default-dark-colorblind-linux.png
new file mode 100644
index 00000000000..38ae883bdb4
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Default-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Default-dark-dimmed-linux.png
new file mode 100644
index 00000000000..b6ad7025057
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Default-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Default-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..d79e93d41dc
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Default-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Default-dark-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Default-dark-linux.png
new file mode 100644
index 00000000000..38ae883bdb4
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Default-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Default-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..38ae883bdb4
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Default-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Default-light-colorblind-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Default-light-colorblind-linux.png
new file mode 100644
index 00000000000..2ffacaa612e
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Default-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Default-light-high-contrast-linux.png
new file mode 100644
index 00000000000..1f2258290f0
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Default-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Default-light-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Default-light-linux.png
new file mode 100644
index 00000000000..2ffacaa612e
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Default-light-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Default-light-tritanopia-linux.png
new file mode 100644
index 00000000000..2ffacaa612e
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Default-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Display-dark-colorblind-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Display-dark-colorblind-linux.png
new file mode 100644
index 00000000000..9b7556040cb
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Display-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Display-dark-dimmed-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Display-dark-dimmed-linux.png
new file mode 100644
index 00000000000..cc857dfb450
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Display-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Display-dark-high-contrast-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Display-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..353bcaaead6
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Display-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Display-dark-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Display-dark-linux.png
new file mode 100644
index 00000000000..9b7556040cb
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Display-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Display-dark-tritanopia-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Display-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..9b7556040cb
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Display-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Display-light-colorblind-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Display-light-colorblind-linux.png
new file mode 100644
index 00000000000..ba933e79a08
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Display-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Display-light-high-contrast-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Display-light-high-contrast-linux.png
new file mode 100644
index 00000000000..08729a0d1e2
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Display-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Display-light-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Display-light-linux.png
new file mode 100644
index 00000000000..ba933e79a08
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Display-light-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Display-light-tritanopia-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Display-light-tritanopia-linux.png
new file mode 100644
index 00000000000..ba933e79a08
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Display-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Subtitle-dark-colorblind-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Subtitle-dark-colorblind-linux.png
new file mode 100644
index 00000000000..bb8ced6ee5d
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Subtitle-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Subtitle-dark-dimmed-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Subtitle-dark-dimmed-linux.png
new file mode 100644
index 00000000000..eb83743cd56
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Subtitle-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Subtitle-dark-high-contrast-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Subtitle-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..272350c1f75
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Subtitle-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Subtitle-dark-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Subtitle-dark-linux.png
new file mode 100644
index 00000000000..bb8ced6ee5d
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Subtitle-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Subtitle-dark-tritanopia-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Subtitle-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..bb8ced6ee5d
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Subtitle-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Subtitle-light-colorblind-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Subtitle-light-colorblind-linux.png
new file mode 100644
index 00000000000..a5f2d0dabff
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Subtitle-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Subtitle-light-high-contrast-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Subtitle-light-high-contrast-linux.png
new file mode 100644
index 00000000000..3111506986f
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Subtitle-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Subtitle-light-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Subtitle-light-linux.png
new file mode 100644
index 00000000000..a5f2d0dabff
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Subtitle-light-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Subtitle-light-tritanopia-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Subtitle-light-tritanopia-linux.png
new file mode 100644
index 00000000000..a5f2d0dabff
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-Subtitle-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleLarge-dark-colorblind-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleLarge-dark-colorblind-linux.png
new file mode 100644
index 00000000000..3408df19b71
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleLarge-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleLarge-dark-dimmed-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleLarge-dark-dimmed-linux.png
new file mode 100644
index 00000000000..f103c672681
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleLarge-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleLarge-dark-high-contrast-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleLarge-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..a501179ae63
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleLarge-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleLarge-dark-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleLarge-dark-linux.png
new file mode 100644
index 00000000000..3408df19b71
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleLarge-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleLarge-dark-tritanopia-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleLarge-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..3408df19b71
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleLarge-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleLarge-light-colorblind-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleLarge-light-colorblind-linux.png
new file mode 100644
index 00000000000..dedbf0397e0
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleLarge-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleLarge-light-high-contrast-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleLarge-light-high-contrast-linux.png
new file mode 100644
index 00000000000..34d60fa690b
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleLarge-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleLarge-light-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleLarge-light-linux.png
new file mode 100644
index 00000000000..dedbf0397e0
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleLarge-light-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleLarge-light-tritanopia-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleLarge-light-tritanopia-linux.png
new file mode 100644
index 00000000000..dedbf0397e0
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleLarge-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleMedium-dark-colorblind-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleMedium-dark-colorblind-linux.png
new file mode 100644
index 00000000000..bb8ced6ee5d
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleMedium-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleMedium-dark-dimmed-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleMedium-dark-dimmed-linux.png
new file mode 100644
index 00000000000..eb83743cd56
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleMedium-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleMedium-dark-high-contrast-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleMedium-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..272350c1f75
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleMedium-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleMedium-dark-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleMedium-dark-linux.png
new file mode 100644
index 00000000000..bb8ced6ee5d
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleMedium-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleMedium-dark-tritanopia-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleMedium-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..bb8ced6ee5d
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleMedium-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleMedium-light-colorblind-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleMedium-light-colorblind-linux.png
new file mode 100644
index 00000000000..a5f2d0dabff
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleMedium-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleMedium-light-high-contrast-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleMedium-light-high-contrast-linux.png
new file mode 100644
index 00000000000..3111506986f
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleMedium-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleMedium-light-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleMedium-light-linux.png
new file mode 100644
index 00000000000..a5f2d0dabff
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleMedium-light-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleMedium-light-tritanopia-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleMedium-light-tritanopia-linux.png
new file mode 100644
index 00000000000..a5f2d0dabff
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleMedium-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleSmall-dark-colorblind-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleSmall-dark-colorblind-linux.png
new file mode 100644
index 00000000000..f6fa5a46fbf
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleSmall-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleSmall-dark-dimmed-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleSmall-dark-dimmed-linux.png
new file mode 100644
index 00000000000..36bc03e1d7d
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleSmall-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleSmall-dark-high-contrast-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleSmall-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..b8f68ffb40a
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleSmall-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleSmall-dark-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleSmall-dark-linux.png
new file mode 100644
index 00000000000..f6fa5a46fbf
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleSmall-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleSmall-dark-tritanopia-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleSmall-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..f6fa5a46fbf
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleSmall-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleSmall-light-colorblind-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleSmall-light-colorblind-linux.png
new file mode 100644
index 00000000000..f93f50cff0c
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleSmall-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleSmall-light-high-contrast-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleSmall-light-high-contrast-linux.png
new file mode 100644
index 00000000000..1b00eec2b82
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleSmall-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleSmall-light-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleSmall-light-linux.png
new file mode 100644
index 00000000000..f93f50cff0c
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleSmall-light-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleSmall-light-tritanopia-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleSmall-light-tritanopia-linux.png
new file mode 100644
index 00000000000..f93f50cff0c
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-TitleSmall-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMaxWidth-dark-colorblind-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMaxWidth-dark-colorblind-linux.png
new file mode 100644
index 00000000000..bee89fe3dd3
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMaxWidth-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMaxWidth-dark-dimmed-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMaxWidth-dark-dimmed-linux.png
new file mode 100644
index 00000000000..2d9e036f2da
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMaxWidth-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMaxWidth-dark-high-contrast-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMaxWidth-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..1553ec64fb6
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMaxWidth-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMaxWidth-dark-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMaxWidth-dark-linux.png
new file mode 100644
index 00000000000..bee89fe3dd3
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMaxWidth-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMaxWidth-dark-tritanopia-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMaxWidth-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..bee89fe3dd3
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMaxWidth-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMaxWidth-light-colorblind-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMaxWidth-light-colorblind-linux.png
new file mode 100644
index 00000000000..b5643bfd22f
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMaxWidth-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMaxWidth-light-high-contrast-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMaxWidth-light-high-contrast-linux.png
new file mode 100644
index 00000000000..7979ec51f4e
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMaxWidth-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMaxWidth-light-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMaxWidth-light-linux.png
new file mode 100644
index 00000000000..b5643bfd22f
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMaxWidth-light-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMaxWidth-light-tritanopia-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMaxWidth-light-tritanopia-linux.png
new file mode 100644
index 00000000000..b5643bfd22f
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMaxWidth-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMultipleLines-dark-colorblind-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMultipleLines-dark-colorblind-linux.png
new file mode 100644
index 00000000000..705c256d3c0
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMultipleLines-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMultipleLines-dark-dimmed-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMultipleLines-dark-dimmed-linux.png
new file mode 100644
index 00000000000..759725192ed
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMultipleLines-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMultipleLines-dark-high-contrast-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMultipleLines-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..465f4491080
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMultipleLines-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMultipleLines-dark-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMultipleLines-dark-linux.png
new file mode 100644
index 00000000000..705c256d3c0
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMultipleLines-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMultipleLines-dark-tritanopia-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMultipleLines-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..705c256d3c0
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMultipleLines-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMultipleLines-light-colorblind-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMultipleLines-light-colorblind-linux.png
new file mode 100644
index 00000000000..d3ddf65e99e
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMultipleLines-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMultipleLines-light-high-contrast-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMultipleLines-light-high-contrast-linux.png
new file mode 100644
index 00000000000..42e50a60c11
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMultipleLines-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMultipleLines-light-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMultipleLines-light-linux.png
new file mode 100644
index 00000000000..d3ddf65e99e
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMultipleLines-light-linux.png differ
diff --git a/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMultipleLines-light-tritanopia-linux.png b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMultipleLines-light-tritanopia-linux.png
new file mode 100644
index 00000000000..d3ddf65e99e
Binary files /dev/null and b/.playwright/snapshots/components/Skeletons.test.ts-snapshots/SkeletonText-WithMultipleLines-light-tritanopia-linux.png differ
diff --git a/e2e/components/Skeletons.test.ts b/e2e/components/Skeletons.test.ts
new file mode 100644
index 00000000000..dd8ee5171b2
--- /dev/null
+++ b/e2e/components/Skeletons.test.ts
@@ -0,0 +1,712 @@
+import {test, expect} from '@playwright/test'
+import {visit} from '../test-helpers/storybook'
+import {themes} from '../test-helpers/themes'
+
+test.describe('Skeleton', () => {
+  //
+  // SkeletonAvatar
+  //
+  test.describe('SkeletonAvatar - Default', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-skeleton-skeletonavatar--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`SkeletonAvatar.Default.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-skeleton-skeletonavatar--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
+
+  test.describe('SkeletonAvatar - In A Stack', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-skeleton-skeletonavatar-features--in-a-stack',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
+            `SkeletonAvatar.InAStack.${theme}.png`,
+          )
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-skeleton-skeletonavatar-features--in-a-stack',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
+
+  test.describe('SkeletonAvatar - In An AvatarPair', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-skeleton-skeletonavatar-features--in-an-avatar-pair',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
+            `SkeletonAvatar.InAnAvatarPair.${theme}.png`,
+          )
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-skeleton-skeletonavatar-features--in-an-avatar-pair',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
+
+  test.describe('SkeletonAvatar - Size', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-skeleton-skeletonavatar-features--size',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`SkeletonAvatar.Size.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-skeleton-skeletonavatar-features--size',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
+
+  test.describe('SkeletonAvatar - Size Responsive', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-skeleton-skeletonavatar-features--size-responsive',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
+            `SkeletonAvatar.SizeResponsive.${theme}.png`,
+          )
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-skeleton-skeletonavatar-features--size-responsive',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
+
+  test.describe('SkeletonAvatar - Square', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-skeleton-skeletonavatar-features--square',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`SkeletonAvatar.Square.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-skeleton-skeletonavatar-features--square',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
+
+  //
+  // SkeletonBox
+  //
+  test.describe('SkeletonBox - Default', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-skeleton-skeletonbox--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`SkeletonBox.Default.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-skeleton-skeletonbox--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
+
+  test.describe('SkeletonBox - Height', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-skeleton-skeletonbox-features--custom-height',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`SkeletonBox.Height.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-skeleton-skeletonbox-features--custom-height',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
+
+  test.describe('SkeletonBox - Width', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-skeleton-skeletonbox-features--custom-width',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`SkeletonBox.Width.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-skeleton-skeletonbox-features--custom-width',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
+
+  //
+  // SkeletonText
+  //
+  test.describe('SkeletonText - Default', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-skeleton-skeletontext--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`SkeletonText.Default.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-skeleton-skeletontext--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
+
+  test.describe('SkeletonText - Body Large', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-skeleton-skeletontext-features--body-large',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`SkeletonText.BodyLarge.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-skeleton-skeletontext-features--body-large',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
+
+  test.describe('SkeletonText - Body Medium', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-skeleton-skeletontext-features--body-medium',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
+            `SkeletonText.BodyMedium.${theme}.png`,
+          )
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-skeleton-skeletontext-features--body-medium',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
+
+  test.describe('SkeletonText - Body Small', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-skeleton-skeletontext-features--body-small',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`SkeletonText.BodySmall.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-skeleton-skeletontext-features--body-small',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
+
+  test.describe('SkeletonText - Display', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-skeleton-skeletontext-features--display',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`SkeletonText.Display.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-skeleton-skeletontext-features--display',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
+
+  test.describe('SkeletonText - Subtitle', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-skeleton-skeletontext-features--subtitle',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`SkeletonText.Subtitle.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-skeleton-skeletontext-features--subtitle',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
+
+  test.describe('SkeletonText - Title Large', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-skeleton-skeletontext-features--title-large',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
+            `SkeletonText.TitleLarge.${theme}.png`,
+          )
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-skeleton-skeletontext-features--title-large',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
+
+  test.describe('SkeletonText - Title Medium', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-skeleton-skeletontext-features--title-medium',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
+            `SkeletonText.TitleMedium.${theme}.png`,
+          )
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-skeleton-skeletontext-features--title-medium',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
+
+  test.describe('SkeletonText - Title Small', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-skeleton-skeletontext-features--title-small',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
+            `SkeletonText.TitleSmall.${theme}.png`,
+          )
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-skeleton-skeletontext-features--title-small',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
+
+  test.describe('SkeletonText - With Max Width', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-skeleton-skeletontext-features--with-max-width',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
+            `SkeletonText.WithMaxWidth.${theme}.png`,
+          )
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-skeleton-skeletontext-features--with-max-width',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
+
+  test.describe('SkeletonText - With Multiple Lines', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-skeleton-skeletontext-features--with-multiple-lines',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
+            `SkeletonText.WithMultipleLines.${theme}.png`,
+          )
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-skeleton-skeletontext-features--with-multiple-lines',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
+})
diff --git a/packages/react/src/Avatar/Avatar.tsx b/packages/react/src/Avatar/Avatar.tsx
index 01f2fa89356..a24622b47c7 100644
--- a/packages/react/src/Avatar/Avatar.tsx
+++ b/packages/react/src/Avatar/Avatar.tsx
@@ -54,7 +54,9 @@ const Avatar = React.forwardRef<HTMLImageElement, AvatarProps>(function Avatar(
         sxProp as SxProp,
       )
     : merge({'--avatar-size': `${size}px`} as React.CSSProperties, sxProp as SxProp)
-  return <StyledAvatar ref={ref} alt={alt} size={size} square={square} sx={avatarSx} {...rest} />
+  return (
+    <StyledAvatar data-component="Avatar" ref={ref} alt={alt} size={size} square={square} sx={avatarSx} {...rest} />
+  )
 })
 
 if (__DEV__) {
diff --git a/packages/react/src/AvatarPair/AvatarPair.tsx b/packages/react/src/AvatarPair/AvatarPair.tsx
index 0f95b6b9cf2..58c40250321 100644
--- a/packages/react/src/AvatarPair/AvatarPair.tsx
+++ b/packages/react/src/AvatarPair/AvatarPair.tsx
@@ -3,14 +3,24 @@ import styled from 'styled-components'
 import type {AvatarProps} from '../Avatar'
 import Avatar from '../Avatar'
 import {get} from '../constants'
-import type {BoxProps} from '../Box'
-import Box from '../Box'
-
-const ChildAvatar = styled(Avatar)`
-  position: absolute;
-  right: -15%;
-  bottom: -9%;
-  box-shadow: ${get('shadows.avatar.childShadow')};
+import Box, {type BoxProps} from '../Box'
+import {SkeletonAvatar} from '../drafts/Skeleton/SkeletonAvatar'
+
+const StyledAvatarPair = styled(Box)`
+  position: relative;
+  display: inline-flex;
+
+  [data-component='Avatar']:last-child,
+  [data-component='SkeletonAvatar']:last-child {
+    position: absolute;
+    right: -15%;
+    bottom: -9%;
+    box-shadow: ${get('shadows.avatar.childShadow')};
+  }
+
+  [data-component='SkeletonAvatar']:last-child {
+    box-shadow: inset ${get('shadows.avatar.childShadow')};
+  }
 `
 
 export type AvatarPairProps = BoxProps
@@ -25,14 +35,14 @@ const AvatarPair = ({children, ...rest}: AvatarPairProps) => {
       return React.cloneElement(child as React.ReactElement<AvatarProps>, {size: 40})
     }
 
-    return <ChildAvatar bg="canvas.default" {...child.props} size={20} />
+    if (child.type === SkeletonAvatar) {
+      return <SkeletonAvatar {...child.props} size={20} />
+    }
+
+    return <Avatar bg="canvas.default" {...child.props} size={20} />
   })
 
-  return (
-    <Box position="relative" display="inline-flex" {...rest}>
-      {avatars}
-    </Box>
-  )
+  return <StyledAvatarPair {...rest}>{avatars}</StyledAvatarPair>
 }
 
 // styled() changes this
diff --git a/packages/react/src/AvatarStack/AvatarStack.tsx b/packages/react/src/AvatarStack/AvatarStack.tsx
index 60a2f9b1fab..bef8faa5b08 100644
--- a/packages/react/src/AvatarStack/AvatarStack.tsx
+++ b/packages/react/src/AvatarStack/AvatarStack.tsx
@@ -150,7 +150,7 @@ const AvatarStackWrapper = styled.span<StyledAvatarStackWrapperProps>`
       margin-left: ${get('space.1')};
       opacity: 100%;
       visibility: visible;
-      ${props => (props.count === 1 ? '' : `box-shadow: 0 0 0 4px ${get('colors.canvas.default')};`)}
+      ${props => (props.count === 1 ? '' : `box-shadow: inset 0 0 0 4px ${get('colors.canvas.default')};`)}
       transition:
         margin 0.2s ease-in-out,
         opacity 0.2s ease-in-out,
diff --git a/packages/react/src/DataTable/Table.tsx b/packages/react/src/DataTable/Table.tsx
index 3d8b97d8ed4..f1b9edf9dc7 100644
--- a/packages/react/src/DataTable/Table.tsx
+++ b/packages/react/src/DataTable/Table.tsx
@@ -1,7 +1,7 @@
 import {SortAscIcon, SortDescIcon} from '@primer/octicons-react'
 import clsx from 'clsx'
 import React from 'react'
-import styled, {keyframes} from 'styled-components'
+import styled from 'styled-components'
 import Box from '../Box'
 import Text from '../Text'
 import {get} from '../constants'
@@ -12,16 +12,13 @@ import type {Column, CellAlignment} from './column'
 import type {UniqueRow} from './row'
 import {SortDirection} from './sorting'
 import {useTableLayout} from './useTable'
+import {SkeletonText} from '../drafts/Skeleton/SkeletonText'
 import {ScrollableRegion} from '../internal/components/ScrollableRegion'
 
 // ----------------------------------------------------------------------------
 // Table
 // ----------------------------------------------------------------------------
 
-const shimmer = keyframes`
-  from { mask-position: 200%; }
-  to { mask-position: 0%; }
-`
 const StyledTable = styled.table<React.ComponentPropsWithoutRef<'table'>>`
   /* Default table styles */
   --table-border-radius: 0.375rem;
@@ -199,30 +196,12 @@ const StyledTable = styled.table<React.ComponentPropsWithoutRef<'table'>>`
     }
   }
 
-  .TableCellSkeletonItem:not(:last-of-type) {
-    border-bottom: 1px solid ${get('colors.border.default')};
+  .TableCellSkeletonItem [data-component='SkeletonText'] {
+    width: var(--skeleton-item-width);
   }
 
-  .TableCellSkeletonItem::before {
-    display: block;
-    content: '';
-    height: 1rem;
-    width: var(--skeleton-item-width, 67%);
-    background-color: ${get('colors.canvas.subtle')};
-    border-radius: 3px;
-
-    @media (prefers-reduced-motion: no-preference) {
-      mask-image: linear-gradient(75deg, #000 30%, rgba(0, 0, 0, 0.65) 80%);
-      mask-size: 200%;
-      animation: ${shimmer};
-      animation-duration: 1s;
-      animation-iteration-count: infinite;
-    }
-
-    @media (forced-colors: active) {
-      outline: 1px solid transparent;
-      outline-offset: -1px;
-    }
+  .TableCellSkeletonItem:not(:last-of-type) {
+    border-bottom: 1px solid ${get('colors.border.default')};
   }
 
   /* Grid layout */
@@ -623,7 +602,11 @@ function TableSkeleton<Data extends UniqueRow>({cellPadding, columns, rows = 10,
                 <VisuallyHidden>Loading</VisuallyHidden>
                 <div className="TableCellSkeletonItems">
                   {Array.from({length: rows}).map((_, i) => {
-                    return <div key={i} className="TableCellSkeletonItem" />
+                    return (
+                      <div key={i} className="TableCellSkeletonItem">
+                        <SkeletonText />
+                      </div>
+                    )
                   })}
                 </div>
               </TableCell>
diff --git a/packages/react/src/Token/__tests__/__snapshots__/Token.test.tsx.snap b/packages/react/src/Token/__tests__/__snapshots__/Token.test.tsx.snap
index d33f927cebf..5b47071d189 100644
--- a/packages/react/src/Token/__tests__/__snapshots__/Token.test.tsx.snap
+++ b/packages/react/src/Token/__tests__/__snapshots__/Token.test.tsx.snap
@@ -176,6 +176,7 @@ exports[`Token components AvatarToken renders all sizes 1`] = `
       <img
         alt=""
         className="c3"
+        data-component="Avatar"
         height={16}
         size={16}
         src="https://avatars.githubusercontent.com/mperrotti"
@@ -401,6 +402,7 @@ exports[`Token components AvatarToken renders all sizes 2`] = `
       <img
         alt=""
         className="c3"
+        data-component="Avatar"
         height={20}
         size={20}
         src="https://avatars.githubusercontent.com/mperrotti"
@@ -626,6 +628,7 @@ exports[`Token components AvatarToken renders all sizes 3`] = `
       <img
         alt=""
         className="c3"
+        data-component="Avatar"
         height={24}
         size={24}
         src="https://avatars.githubusercontent.com/mperrotti"
@@ -853,6 +856,7 @@ exports[`Token components AvatarToken renders all sizes 4`] = `
       <img
         alt=""
         className="c3"
+        data-component="Avatar"
         height={32}
         size={32}
         src="https://avatars.githubusercontent.com/mperrotti"
@@ -1015,6 +1019,7 @@ exports[`Token components AvatarToken renders isSelected 1`] = `
       <img
         alt=""
         className="c3"
+        data-component="Avatar"
         height={20}
         size={20}
         src="https://avatars.githubusercontent.com/mperrotti"
@@ -1206,6 +1211,7 @@ exports[`Token components AvatarToken renders with a remove button 1`] = `
       <img
         alt=""
         className="c3"
+        data-component="Avatar"
         height={20}
         size={20}
         src="https://avatars.githubusercontent.com/mperrotti"
diff --git a/packages/react/src/TreeView/TreeView.tsx b/packages/react/src/TreeView/TreeView.tsx
index 51d970d444a..736842c6076 100644
--- a/packages/react/src/TreeView/TreeView.tsx
+++ b/packages/react/src/TreeView/TreeView.tsx
@@ -6,7 +6,7 @@ import {
 } from '@primer/octicons-react'
 import clsx from 'clsx'
 import React, {useCallback, useEffect} from 'react'
-import styled, {keyframes} from 'styled-components'
+import styled from 'styled-components'
 import {ConfirmationDialog} from '../ConfirmationDialog/ConfirmationDialog'
 import Spinner from '../Spinner'
 import Text from '../Text'
@@ -21,6 +21,8 @@ import sx from '../sx'
 import {getAccessibleName} from './shared'
 import {getFirstChildElement, useRovingTabIndex} from './useRovingTabIndex'
 import {useTypeahead} from './useTypeahead'
+import {SkeletonAvatar} from '../drafts/Skeleton/SkeletonAvatar'
+import {SkeletonText} from '../drafts/Skeleton/SkeletonText'
 
 // ----------------------------------------------------------------------------
 // Context
@@ -709,12 +711,7 @@ function usePreviousValue<T>(value: T): T {
   return ref.current
 }
 
-const shimmer = keyframes`
-  from { mask-position: 200%; }
-  to { mask-position: 0%; }
-`
-
-const SkeletonItem = styled.span.attrs({className: 'PRIVATE_TreeView-item-skeleton'})`
+const StyledSkeletonItemContainer = styled.span.attrs({className: 'PRIVATE_TreeView-item-skeleton'})`
   display: flex;
   align-items: center;
   column-gap: 0.5rem;
@@ -724,40 +721,6 @@ const SkeletonItem = styled.span.attrs({className: 'PRIVATE_TreeView-item-skelet
     height: 2.75rem;
   }
 
-  @media (prefers-reduced-motion: no-preference) {
-    mask-image: linear-gradient(75deg, #000 30%, rgba(0, 0, 0, 0.65) 80%);
-    mask-size: 200%;
-    animation: ${shimmer};
-    animation-duration: 1s;
-    animation-iteration-count: infinite;
-  }
-
-  &::before {
-    content: '';
-    display: block;
-    width: 1rem;
-    height: 1rem;
-    background-color: ${get('colors.neutral.subtle')};
-    border-radius: 3px;
-    @media (forced-colors: active) {
-      outline: 1px solid transparent;
-      outline-offset: -1px;
-    }
-  }
-
-  &::after {
-    content: '';
-    display: block;
-    width: var(--tree-item-loading-width, 67%);
-    height: 1rem;
-    background-color: ${get('colors.neutral.subtle')};
-    border-radius: 3px;
-    @media (forced-colors: active) {
-      outline: 1px solid transparent;
-      outline-offset: -1px;
-    }
-  }
-
   &:nth-of-type(5n + 1) {
     --tree-item-loading-width: 67%;
   }
@@ -779,6 +742,19 @@ const SkeletonItem = styled.span.attrs({className: 'PRIVATE_TreeView-item-skelet
   }
 `
 
+const StyledSkeletonText = styled(SkeletonText)`
+  width: var(--tree-item-loading-width, 67%);
+`
+
+const SkeletonItem = () => {
+  return (
+    <StyledSkeletonItemContainer>
+      <SkeletonAvatar size={16} square />
+      <StyledSkeletonText />
+    </StyledSkeletonItemContainer>
+  )
+}
+
 type LoadingItemProps = {
   count?: number
 }
diff --git a/packages/react/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap
index d0c348d5dfb..f3c1df84433 100644
--- a/packages/react/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap
@@ -128,7 +128,7 @@ exports[`Avatar respects alignRight props 1`] = `
   transition: margin 0.2s ease-in-out,opacity 0.2s ease-in-out,visibility 0.2s ease-in-out,box-shadow 0.1s ease-in-out;
 }
 
-.c0 .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):hover .pc-AvatarItem box-shadow:0 0 0 4px function (props) {
+.c0 .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):hover .pc-AvatarItem box-shadow:inset 0 0 0 4px function (props) {
   return: (0,_core.get)(props.theme,path,fallback);
 }
 
diff --git a/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap b/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap
index 0827eddd768..da927281e67 100644
--- a/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap
+++ b/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap
@@ -298,6 +298,9 @@ exports[`@primer/react/drafts should not update exports without a semver change
   "type SelectPanelProps",
   "type SelectPanelSecondaryActionProps",
   "type ShowSuggestionsEvent",
+  "SkeletonAvatar",
+  "SkeletonBox",
+  "SkeletonText",
   "type SlotConfig",
   "Stack",
   "type StackItemProps",
@@ -398,6 +401,9 @@ exports[`@primer/react/experimental should not update exports without a semver c
   "type SelectPanelProps",
   "type SelectPanelSecondaryActionProps",
   "type ShowSuggestionsEvent",
+  "SkeletonAvatar",
+  "SkeletonBox",
+  "SkeletonText",
   "type SlotConfig",
   "Stack",
   "type StackItemProps",
diff --git a/packages/react/src/drafts/Skeleton/Skeleton.examples.stories.tsx b/packages/react/src/drafts/Skeleton/Skeleton.examples.stories.tsx
new file mode 100644
index 00000000000..b98503b5b82
--- /dev/null
+++ b/packages/react/src/drafts/Skeleton/Skeleton.examples.stories.tsx
@@ -0,0 +1,228 @@
+import React, {Suspense} from 'react'
+import type {Meta} from '@storybook/react'
+import type {ComponentProps} from '../../utils/types'
+import {SkeletonText} from './SkeletonText'
+import {Avatar, Box, Button, IconButton, Text} from '../../'
+import {SkeletonAvatar} from './SkeletonAvatar'
+import {VisuallyHidden} from '../../internal/components/VisuallyHidden'
+import {KebabHorizontalIcon} from '@primer/octicons-react'
+
+export default {
+  title: 'Drafts/Components/Skeleton/Examples',
+} as Meta<ComponentProps<typeof SkeletonText>>
+
+const COMMENT_LIST_LENGTH = 3
+
+const mockData = {
+  username: 'monalisa',
+  date: 'on Jan 1',
+  comment:
+    'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.',
+  avatarSrc: 'https://avatars.githubusercontent.com/u/92997159?v=4',
+}
+
+const CommentCard = ({children}: {children: React.ReactNode}) => (
+  <Box
+    sx={{
+      borderWidth: '1px',
+      borderColor: 'border.default',
+      borderStyle: 'solid',
+      borderRadius: 2,
+      fontSize: 1,
+      lineHeight: 'default',
+      p: 3,
+    }}
+  >
+    {children}
+  </Box>
+)
+
+const CommentCardHeading = ({children}: {children: React.ReactNode}) => (
+  <Box
+    className="CommentCardHeading"
+    sx={{
+      alignItems: 'center',
+      display: 'flex',
+      gap: 2,
+      mb: 3,
+      '.CommentCardHeading__text': {
+        flexGrow: 1,
+      },
+    }}
+  >
+    {children}
+  </Box>
+)
+
+export const CommentsLoading = () => {
+  const [loading, setLoading] = React.useState(true)
+  const [loadingFinished, setLoadingFinished] = React.useState(false)
+
+  const toggleLoadingState = () => {
+    setLoading(!loading)
+    setLoadingFinished(loading)
+  }
+
+  return (
+    <>
+      {/** read by screen readers in place of the comments in a skeleton loading state */}
+      {loading ? <VisuallyHidden>Comments are loading</VisuallyHidden> : null}
+      {/** when loading is completed, it should be announced by the screen-reader */}
+      <VisuallyHidden aria-live="polite">{loadingFinished ? 'Comments are loaded' : null}</VisuallyHidden>
+      <Box sx={{'> * + *': {marginBlockStart: '1rem'}}}>
+        <Button onClick={toggleLoadingState}>{loading ? 'Stop loading' : 'Start loading'}</Button>
+        {Array.from({length: COMMENT_LIST_LENGTH}, (_, index) => (
+          /* aria-busy is passed so the screenreader doesn't announce the skeleton state */
+          <CommentCard key={index} aria-busy={loading}>
+            <CommentCardHeading>
+              {loading ? (
+                <>
+                  <SkeletonAvatar size={32} />
+                  <SkeletonText maxWidth="80px" className="CommentCardHeading__text" />
+                </>
+              ) : (
+                <>
+                  <Avatar src={mockData.avatarSrc} size={32} />
+                  <Box sx={{alignItems: 'center', display: 'flex', flexGrow: 1, gap: 1}}>
+                    <Text>{mockData.username}</Text>
+                    <Text
+                      sx={{
+                        color: 'fg.muted',
+                        flexGrow: 1,
+                      }}
+                    >
+                      {mockData.date}
+                    </Text>
+                    {/* buttons and interactive elements should not be represented as skeleton items or shown in any way until they're ready to accept input */}
+                    <IconButton
+                      icon={KebabHorizontalIcon}
+                      size="small"
+                      aria-label="Comment actions"
+                      variant="invisible"
+                    />
+                  </Box>
+                </>
+              )}
+            </CommentCardHeading>
+            {loading ? <SkeletonText lines={2} /> : <Text>{mockData.comment}</Text>}
+          </CommentCard>
+        ))}
+      </Box>
+    </>
+  )
+}
+
+export const CommentsLoadingWithSuspense = () => {
+  const dataPromise = React.useMemo(() => getData({key: 'comments-loading-with-suspense', delay: 3000}), [])
+  const [loadingStatus, setLoadingStatus] = React.useState<string>('pending')
+
+  React.useEffect(() => {
+    const fetchData = async () => {
+      try {
+        await dataPromise
+        setLoadingStatus('fulfilled')
+      } catch (error) {
+        // Handle error if needed
+      }
+    }
+
+    fetchData()
+  }, [dataPromise])
+
+  return (
+    <>
+      {/** read by screen readers in place of the comments in a skeleton loading state */}
+      {loadingStatus === 'pending' ? <VisuallyHidden>Comments are loading</VisuallyHidden> : null}
+      {/** when loading is completed, it should be announced by the screen-reader */}
+      <VisuallyHidden aria-live="polite">{loadingStatus === 'fulfilled' ? 'Comments are loaded' : null}</VisuallyHidden>
+
+      {/* aria-busy is passed so the screenreader doesn't announce the skeleton state */}
+      <Box sx={{'> * + *': {marginBlockStart: '1rem'}}} aria-busy={loadingStatus === 'pending'}>
+        {Array.from({length: COMMENT_LIST_LENGTH}, (_, index) => (
+          <CommentCard key={index}>
+            <Suspense
+              fallback={
+                <>
+                  <CommentCardHeading>
+                    <SkeletonAvatar size={32} />
+                    <SkeletonText maxWidth="80px" className="CommentCardHeading__text" />
+                  </CommentCardHeading>
+                  <SkeletonText lines={2} />
+                </>
+              }
+            >
+              <SuspendedCommentCardContent promise={dataPromise} />
+            </Suspense>
+          </CommentCard>
+        ))}
+      </Box>
+    </>
+  )
+}
+
+const SuspendedCommentCardContent = ({promise}: {promise: Promise<typeof mockData>}) => {
+  const fetchedData = use(promise)
+
+  return (
+    <>
+      <CommentCardHeading>
+        <Avatar src={fetchedData.avatarSrc} size={32} />
+        <Box sx={{alignItems: 'center', display: 'flex', flexGrow: 1, gap: 1}}>
+          <Text>{fetchedData.username}</Text>
+          <Text
+            sx={{
+              color: 'fg.muted',
+              flexGrow: 1,
+            }}
+          >
+            {fetchedData.date}
+          </Text>
+          {/* buttons and interactive elements should not be represented as skeleton items or shown in any way until they're ready to accept input */}
+          <IconButton icon={KebabHorizontalIcon} size="small" aria-label="Comment actions" variant="invisible" />
+        </Box>
+      </CommentCardHeading>
+      <Text>{fetchedData.comment}</Text>
+    </>
+  )
+}
+
+// ----- Suspense implementation details ----
+const cache = new Map()
+const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms))
+
+const getData = ({key = '0', delay = 1000}: {key: string; delay?: number}) => {
+  if (!cache.has(key)) cache.set(key, fetchData(delay))
+  return cache.get(key)
+}
+// return a promise!
+const fetchData = async (delay: number) => {
+  await sleep(delay)
+  return mockData
+}
+
+/* lifted from the examples at https://react.dev/reference/react/Suspense */
+// @ts-ignore copied from untyped example
+function use(promise) {
+  if (promise.status === 'fulfilled') {
+    return promise.value
+  } else if (promise.status === 'rejected') {
+    throw promise.reason
+  } else if (promise.status === 'pending') {
+    throw promise
+  } else {
+    promise.status = 'pending'
+
+    // eslint-disable-next-line github/no-then
+    promise.then(
+      (result: Record<string, unknown>) => {
+        promise.status = 'fulfilled'
+        promise.value = result
+      },
+      (error: Error) => {
+        promise.status = 'rejected'
+        promise.reason = error
+      },
+    )
+    throw promise
+  }
+}
diff --git a/packages/react/src/drafts/Skeleton/SkeletonAvatar.docs.json b/packages/react/src/drafts/Skeleton/SkeletonAvatar.docs.json
new file mode 100644
index 00000000000..8c7d95c58c8
--- /dev/null
+++ b/packages/react/src/drafts/Skeleton/SkeletonAvatar.docs.json
@@ -0,0 +1,29 @@
+{
+    "id": "skeleton_avatar",
+    "name": "SkeletonAvatar",
+    "status": "draft",
+    "a11yReviewed": false,
+    "stories": [],
+    "importPath": "@primer/react/drafts",
+    "props": [
+      {
+        "name": "size",
+        "type": "number | { narrow?: number; regular?: number; wide?: number; }",
+        "defaultValue": "20",
+        "description": "The size of the avatar in pixels."
+      },
+      {
+        "name": "square",
+        "type": "boolean",
+        "defaultValue": "false",
+        "description": "If true, the avatar will be square instead of circular."
+      },
+      {
+        "name": "className",
+        "type": "string",
+        "description": "Class name for custom styling."
+      }
+    ],
+    "subcomponents": []
+  }
+  
\ No newline at end of file
diff --git a/packages/react/src/drafts/Skeleton/SkeletonAvatar.features.stories.tsx b/packages/react/src/drafts/Skeleton/SkeletonAvatar.features.stories.tsx
new file mode 100644
index 00000000000..6858acad6db
--- /dev/null
+++ b/packages/react/src/drafts/Skeleton/SkeletonAvatar.features.stories.tsx
@@ -0,0 +1,60 @@
+import React from 'react'
+import type {Meta} from '@storybook/react'
+import type {ComponentProps} from '../../utils/types'
+import {SkeletonAvatar} from './SkeletonAvatar'
+import {AvatarStack, AvatarPair} from '../../'
+
+export default {
+  title: 'Drafts/Components/Skeleton/SkeletonAvatar/Features',
+  component: SkeletonAvatar,
+} as Meta<ComponentProps<typeof SkeletonAvatar>>
+
+export const Square = () => <SkeletonAvatar square />
+
+export const Size = () => (
+  <div>
+    <SkeletonAvatar size={4} />
+    <SkeletonAvatar size={8} />
+    <SkeletonAvatar size={12} />
+    <SkeletonAvatar size={16} />
+    <SkeletonAvatar size={20} />
+    <SkeletonAvatar size={24} />
+    <SkeletonAvatar size={28} />
+    <SkeletonAvatar size={32} />
+    <SkeletonAvatar size={40} />
+    <SkeletonAvatar size={48} />
+    <SkeletonAvatar size={56} />
+    <SkeletonAvatar size={64} />
+  </div>
+)
+
+export const SizeResponsive = () => (
+  <div>
+    <SkeletonAvatar size={{narrow: 4, regular: 8, wide: 12}} />
+    <SkeletonAvatar size={{narrow: 8, regular: 12, wide: 16}} />
+    <SkeletonAvatar size={{narrow: 12, regular: 16, wide: 20}} />
+    <SkeletonAvatar size={{narrow: 16, regular: 20, wide: 24}} />
+    <SkeletonAvatar size={{narrow: 20, regular: 24, wide: 28}} />
+    <SkeletonAvatar size={{narrow: 24, regular: 28, wide: 32}} />
+    <SkeletonAvatar size={{narrow: 28, regular: 32, wide: 40}} />
+    <SkeletonAvatar size={{narrow: 32, regular: 40, wide: 48}} />
+    <SkeletonAvatar size={{narrow: 40, regular: 48, wide: 56}} />
+    <SkeletonAvatar size={{narrow: 48, regular: 56, wide: 64}} />
+  </div>
+)
+
+export const InAStack = () => (
+  <AvatarStack>
+    <SkeletonAvatar />
+    <SkeletonAvatar />
+    <SkeletonAvatar />
+    <SkeletonAvatar />
+  </AvatarStack>
+)
+
+export const InAnAvatarPair = () => (
+  <AvatarPair>
+    <SkeletonAvatar />
+    <SkeletonAvatar />
+  </AvatarPair>
+)
diff --git a/packages/react/src/drafts/Skeleton/SkeletonAvatar.stories.tsx b/packages/react/src/drafts/Skeleton/SkeletonAvatar.stories.tsx
new file mode 100644
index 00000000000..de52bdf2ee2
--- /dev/null
+++ b/packages/react/src/drafts/Skeleton/SkeletonAvatar.stories.tsx
@@ -0,0 +1,54 @@
+import React from 'react'
+import type {Meta, StoryFn} from '@storybook/react'
+import type {ComponentProps} from '../../utils/types'
+import {SkeletonAvatar, type SkeletonAvatarProps} from './SkeletonAvatar'
+import {parseSizeFromArgs} from '../../Avatar/storyHelpers'
+import {DEFAULT_AVATAR_SIZE} from '../../Avatar/Avatar'
+
+export default {
+  title: 'Drafts/Components/Skeleton/SkeletonAvatar',
+  component: SkeletonAvatar,
+} as Meta<ComponentProps<typeof SkeletonAvatar>>
+
+type Args = {
+  size?: number
+  sizeAtNarrow?: number
+  sizeAtRegular?: number
+  sizeAtWide?: number
+} & Omit<SkeletonAvatarProps, 'size'>
+
+export const Default = () => <SkeletonAvatar />
+
+export const Playground: StoryFn<Args> = args => {
+  return <SkeletonAvatar size={parseSizeFromArgs(args)} square={args.square} />
+}
+
+Playground.args = {
+  size: DEFAULT_AVATAR_SIZE,
+}
+
+Playground.argTypes = {
+  size: {
+    control: {
+      type: 'number',
+    },
+  },
+  sizeAtNarrow: {
+    name: 'size.narrow',
+    control: {
+      type: 'number',
+    },
+  },
+  sizeAtRegular: {
+    name: 'size.regular',
+    control: {
+      type: 'number',
+    },
+  },
+  sizeAtWide: {
+    name: 'size.wide',
+    control: {
+      type: 'number',
+    },
+  },
+}
diff --git a/packages/react/src/drafts/Skeleton/SkeletonAvatar.tsx b/packages/react/src/drafts/Skeleton/SkeletonAvatar.tsx
new file mode 100644
index 00000000000..6299f2be940
--- /dev/null
+++ b/packages/react/src/drafts/Skeleton/SkeletonAvatar.tsx
@@ -0,0 +1,52 @@
+import React from 'react'
+import {getBreakpointDeclarations} from '../../utils/getBreakpointDeclarations'
+import {get} from '../../constants'
+import {isResponsiveValue} from '../../hooks/useResponsiveValue'
+import type {AvatarProps} from '../../Avatar'
+import {DEFAULT_AVATAR_SIZE} from '../../Avatar/Avatar'
+import {SkeletonBox} from './SkeletonBox'
+
+export type SkeletonAvatarProps = Pick<AvatarProps, 'size' | 'square'> & {
+  /** Class name for custom styling */
+  className?: string
+}
+
+const avatarSkeletonStyles = {
+  '&[data-component="SkeletonAvatar"]': {
+    borderRadius: '50%',
+    boxShadow: `0 0 0 1px ${get('colors.avatar.border')}`,
+    display: 'inline-block',
+    lineHeight: get('lineHeights.condensedUltra'),
+    height: 'var(--avatar-size)',
+    width: 'var(--avatar-size)',
+  },
+
+  '&[data-avatar-shape="square"]': {
+    borderRadius: 'clamp(4px, var(--avatar-size) - 24px, 6px)',
+  },
+}
+
+export const SkeletonAvatar: React.FC<SkeletonAvatarProps> = ({size = DEFAULT_AVATAR_SIZE, square, ...rest}) => {
+  const avatarSx = isResponsiveValue(size)
+    ? {
+        ...getBreakpointDeclarations(
+          size,
+          '--avatar-size' as keyof React.CSSProperties,
+          value => `${value || DEFAULT_AVATAR_SIZE}px`,
+        ),
+        ...avatarSkeletonStyles,
+      }
+    : {
+        '--avatar-size': `${size}px`,
+        ...avatarSkeletonStyles,
+      }
+
+  return (
+    <SkeletonBox
+      sx={avatarSx}
+      {...rest}
+      data-component="SkeletonAvatar"
+      data-avatar-shape={square ? 'square' : undefined}
+    />
+  )
+}
diff --git a/packages/react/src/drafts/Skeleton/SkeletonBox.docs.json b/packages/react/src/drafts/Skeleton/SkeletonBox.docs.json
new file mode 100644
index 00000000000..f61f5563af4
--- /dev/null
+++ b/packages/react/src/drafts/Skeleton/SkeletonBox.docs.json
@@ -0,0 +1,27 @@
+{
+    "id": "skeleton_box",
+    "name": "SkeletonBox",
+    "status": "draft",
+    "a11yReviewed": false,
+    "stories": [],
+    "importPath": "@primer/react/drafts",
+    "props": [
+      {
+        "name": "width",
+        "type": "string",
+        "description": "Width of the skeleton box. Accepts any valid CSS `width` value."
+      },
+      {
+        "name": "height",
+        "defaultValue": "1rem",
+        "type": "string",
+        "description": "Height of the skeleton box. Accepts any valid CSS `height` value."
+      },
+      {
+        "name": "sx",
+        "type": "SystemStyleObject"
+      }
+    ],
+    "subcomponents": []
+  }
+  
\ No newline at end of file
diff --git a/packages/react/src/drafts/Skeleton/SkeletonBox.features.stories.tsx b/packages/react/src/drafts/Skeleton/SkeletonBox.features.stories.tsx
new file mode 100644
index 00000000000..8f4d1dc6894
--- /dev/null
+++ b/packages/react/src/drafts/Skeleton/SkeletonBox.features.stories.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import type {Meta} from '@storybook/react'
+import type {ComponentProps} from '../../utils/types'
+import {SkeletonBox} from './SkeletonBox'
+
+export default {
+  title: 'Drafts/Components/Skeleton/SkeletonBox/Features',
+  component: SkeletonBox,
+} as Meta<ComponentProps<typeof SkeletonBox>>
+
+export const CustomHeight = () => <SkeletonBox height="4rem" />
+
+export const CustomWidth = () => <SkeletonBox width="300px" />
diff --git a/packages/react/src/drafts/Skeleton/SkeletonBox.stories.tsx b/packages/react/src/drafts/Skeleton/SkeletonBox.stories.tsx
new file mode 100644
index 00000000000..c28f8bed6ee
--- /dev/null
+++ b/packages/react/src/drafts/Skeleton/SkeletonBox.stories.tsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import type {Meta, StoryFn} from '@storybook/react'
+import type {ComponentProps} from '../../utils/types'
+import {SkeletonBox} from './SkeletonBox'
+
+export default {
+  title: 'Drafts/Components/Skeleton/SkeletonBox',
+  component: SkeletonBox,
+} as Meta<ComponentProps<typeof SkeletonBox>>
+
+export const Default = () => <SkeletonBox />
+
+export const Playground: StoryFn<ComponentProps<typeof SkeletonBox>> = args => <SkeletonBox {...args} />
+
+Playground.argTypes = {
+  sx: {
+    controls: false,
+    table: {
+      disable: true,
+    },
+  },
+  height: {
+    type: 'string',
+  },
+  width: {
+    type: 'string',
+  },
+}
diff --git a/packages/react/src/drafts/Skeleton/SkeletonBox.tsx b/packages/react/src/drafts/Skeleton/SkeletonBox.tsx
new file mode 100644
index 00000000000..a5b2a0af465
--- /dev/null
+++ b/packages/react/src/drafts/Skeleton/SkeletonBox.tsx
@@ -0,0 +1,40 @@
+import type React from 'react'
+import styled, {keyframes} from 'styled-components'
+import sx, {type SxProp} from '../../sx'
+import {get} from '../../constants'
+
+type SkeletonBoxProps = {
+  /** Height of the skeleton "box". Accepts any valid CSS `height` value. */
+  height?: React.CSSProperties['height']
+  /** Width of the skeleton "box". Accepts any valid CSS `width` value. */
+  width?: React.CSSProperties['width']
+} & SxProp
+
+const shimmer = keyframes`
+  from { mask-position: 200%; }
+  to { mask-position: 0%; }
+`
+
+export const SkeletonBox = styled.div<SkeletonBoxProps>`
+  animation: ${shimmer};
+  display: block;
+  background-color: var(--bgColor-muted, ${get('colors.canvas.subtle')});
+  border-radius: 3px;
+  height: ${props => props.height || '1rem'};
+  width: ${props => props.width};
+
+  @media (prefers-reduced-motion: no-preference) {
+    mask-image: linear-gradient(75deg, #000 30%, rgba(0, 0, 0, 0.65) 80%);
+    mask-size: 200%;
+    animation: ${shimmer};
+    animation-duration: 1s;
+    animation-iteration-count: infinite;
+  }
+
+  @media (forced-colors: active) {
+    outline: 1px solid transparent;
+    outline-offset: -1px;
+  }
+
+  ${sx};
+`
diff --git a/packages/react/src/drafts/Skeleton/SkeletonText.docs.json b/packages/react/src/drafts/Skeleton/SkeletonText.docs.json
new file mode 100644
index 00000000000..7054031c0c0
--- /dev/null
+++ b/packages/react/src/drafts/Skeleton/SkeletonText.docs.json
@@ -0,0 +1,34 @@
+{
+    "id": "skeleton_text",
+    "name": "SkeletonText",
+    "status": "draft",
+    "a11yReviewed": false,
+    "stories": [],
+    "importPath": "@primer/react/drafts",
+    "props": [
+      {
+        "name": "size",
+        "defaultValue": "'bodyMedium'",
+        "type": "'display' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall' | 'subtitle'",
+        "description": "Size of the text that the skeleton is replacing."
+      },
+      {
+        "name": "lines",
+        "defaultValue": "1",
+        "type": "number",
+        "description": "Number of lines of skeleton text to render."
+      },
+      {
+        "name": "maxWidth",
+        "type": "string",
+        "description": "Maximum width that the line(s) of skeleton text can take up.  Accepts any valid CSS `max-width` value."
+      },
+      {
+        "name": "className",
+        "type": "string",
+        "description": "Class name for custom styling."
+      }
+    ],
+    "subcomponents": []
+  }
+  
\ No newline at end of file
diff --git a/packages/react/src/drafts/Skeleton/SkeletonText.features.stories.tsx b/packages/react/src/drafts/Skeleton/SkeletonText.features.stories.tsx
new file mode 100644
index 00000000000..37fc5ee7314
--- /dev/null
+++ b/packages/react/src/drafts/Skeleton/SkeletonText.features.stories.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import type {Meta} from '@storybook/react'
+import type {ComponentProps} from '../../utils/types'
+import {SkeletonText} from './SkeletonText'
+
+export default {
+  title: 'Drafts/Components/Skeleton/SkeletonText/Features',
+  component: SkeletonText,
+} as Meta<ComponentProps<typeof SkeletonText>>
+
+export const WithMaxWidth = () => <SkeletonText maxWidth={200} />
+
+export const WithMultipleLines = () => <SkeletonText lines={3} />
+
+export const Display = () => <SkeletonText size="display" />
+
+export const Subtitle = () => <SkeletonText size="subtitle" />
+
+export const TitleLarge = () => <SkeletonText size="titleLarge" />
+
+export const TitleMedium = () => <SkeletonText size="titleMedium" />
+
+export const TitleSmall = () => <SkeletonText size="titleSmall" />
+
+export const BodyLarge = () => <SkeletonText size="bodyLarge" />
+
+export const BodyMedium = () => <SkeletonText size="bodyMedium" />
+
+export const BodySmall = () => <SkeletonText size="bodySmall" />
diff --git a/packages/react/src/drafts/Skeleton/SkeletonText.stories.tsx b/packages/react/src/drafts/Skeleton/SkeletonText.stories.tsx
new file mode 100644
index 00000000000..e455787b92b
--- /dev/null
+++ b/packages/react/src/drafts/Skeleton/SkeletonText.stories.tsx
@@ -0,0 +1,30 @@
+import React from 'react'
+import type {Meta, StoryFn} from '@storybook/react'
+import type {ComponentProps} from '../../utils/types'
+import {SkeletonText} from './SkeletonText'
+
+export default {
+  title: 'Drafts/Components/Skeleton/SkeletonText',
+  component: SkeletonText,
+} as Meta<ComponentProps<typeof SkeletonText>>
+
+export const Default = () => <SkeletonText />
+
+export const Playground: StoryFn<ComponentProps<typeof SkeletonText>> = args => <SkeletonText {...args} />
+
+Playground.args = {
+  size: 'bodyMedium',
+  lines: 1,
+}
+
+Playground.argTypes = {
+  lines: {
+    type: 'number',
+  },
+  maxWidth: {
+    type: 'string',
+  },
+  size: {
+    type: 'string',
+  },
+}
diff --git a/packages/react/src/drafts/Skeleton/SkeletonText.tsx b/packages/react/src/drafts/Skeleton/SkeletonText.tsx
new file mode 100644
index 00000000000..5c33c482d70
--- /dev/null
+++ b/packages/react/src/drafts/Skeleton/SkeletonText.tsx
@@ -0,0 +1,106 @@
+import React from 'react'
+import Box from '../../Box'
+import {SkeletonBox} from './SkeletonBox'
+
+type SkeletonTextProps = {
+  /** Size of the text that the skeleton is replacing. */
+  size?: 'display' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall' | 'subtitle'
+  /** Number of lines of skeleton text to render. */
+  lines?: number
+  /** Maximum width that the line(s) of skeleton text can take up.  Accepts any valid CSS `max-width` value. */
+  maxWidth?: React.CSSProperties['maxWidth']
+  /** Class name for custom styling */
+  className?: string
+}
+
+const skeletonTextStyles = {
+  '&[data-component="SkeletonText"]': {
+    '--font-size': 'var(--text-body-size-medium, 0.875rem)',
+    '--line-height': 'var(--text-body-lineHeight-medium, 1.4285)',
+    '--leading': 'calc(var(--font-size) * var(--line-height) - var(--font-size))',
+    borderRadius: 'var(--borderRadius-small, 0.1875rem)',
+    height: 'var(--font-size)',
+    marginBlock: 'calc(var(--leading) / 2)',
+  },
+  '&[data-in-multiline="true"]': {
+    marginBlockEnd: 'calc(var(--leading) * 2)',
+  },
+  '&[data-in-multiline="true"]:last-child': {
+    maxWidth: '65%',
+    minWidth: '50px',
+    marginBottom: 0,
+  },
+  '@supports (margin-block: mod(1px, 1px))': {
+    '&[data-component="SkeletonText"]': {
+      '--leading': 'mod(var(--font-size) * var(--line-height), var(--font-size))',
+    },
+  },
+  '&[data-text-skeleton-size="display"], &[data-text-skeleton-size="titleLarge"]': {
+    borderRadius: 'var(--borderRadius-medium, 0.375rem)',
+  },
+  '&[data-text-skeleton-size="display"]': {
+    '--font-size': 'var(--text-display-size, 2.5rem)',
+    '--line-height': 'var(--text-display-lineHeight, 1.4)',
+  },
+  '&[data-text-skeleton-size="titleLarge"]': {
+    '--font-size': 'var(--text-title-size-large, 2.5rem)',
+    '--line-height': 'var(--text-title-lineHeight-large, 1.5)',
+  },
+  '&[data-text-skeleton-size="titleMedium"]': {
+    '--font-size': 'var(--text-title-size-medium, 1.25rem)',
+    '--line-height': 'var(--text-title-lineHeight-medium, 1.6)',
+  },
+  '&[data-text-skeleton-size="titleSmall"]': {
+    '--font-size': 'var(--text-title-size-small, 1rem)',
+    '--line-height': 'var(--text-title-lineHeight-small, 1.5)',
+  },
+  '&[data-text-skeleton-size="subtitle"]': {
+    '--font-size': 'var(--text-subtitle-size, 1.25rem)',
+    '--line-height': 'var(--text-subtitle-lineHeight, 1.6)',
+  },
+  '&[data-text-skeleton-size="bodyLarge"]': {
+    '--font-size': 'var(--text-body-size-large, 1rem)',
+    '--line-height': 'var(--text-body-lineHeight-large, 1.5)',
+  },
+  '&[data-text-skeleton-size="bodySmall"]': {
+    '--font-size': 'var(--text-body-size-small, 0.75rem)',
+    '--line-height': 'var(--text-body-lineHeight-small, 1.6666)',
+  },
+}
+
+export const SkeletonText: React.FC<SkeletonTextProps> = ({lines = 1, maxWidth, size = 'bodyMedium', ...rest}) => {
+  return lines < 2 ? (
+    <SkeletonBox
+      data-component="SkeletonText"
+      data-text-skeleton-size={size}
+      width="100%"
+      sx={{
+        maxWidth,
+        ...skeletonTextStyles,
+      }}
+      {...rest}
+    />
+  ) : (
+    <Box
+      data-component="multilineContainer"
+      sx={{
+        maxWidth,
+        /* The tiny `paddingBlock` prevents margin collapse between the first skeleton line
+         * and a bottom margin above it.
+         */
+        paddingBlock: '0.1px',
+      }}
+    >
+      {Array.from({length: lines}, (_, index) => (
+        <SkeletonBox
+          key={index}
+          data-component="SkeletonText"
+          data-in-multiline="true"
+          data-text-skeleton-size={size}
+          sx={skeletonTextStyles}
+          {...rest}
+        />
+      ))}
+    </Box>
+  )
+}
diff --git a/packages/react/src/drafts/Skeleton/index.ts b/packages/react/src/drafts/Skeleton/index.ts
new file mode 100644
index 00000000000..90f0e92e597
--- /dev/null
+++ b/packages/react/src/drafts/Skeleton/index.ts
@@ -0,0 +1,3 @@
+export {SkeletonBox} from './SkeletonBox'
+export {SkeletonText} from './SkeletonText'
+export {SkeletonAvatar} from './SkeletonAvatar'
diff --git a/packages/react/src/drafts/index.ts b/packages/react/src/drafts/index.ts
index 60079f9be9b..1b0948d673e 100644
--- a/packages/react/src/drafts/index.ts
+++ b/packages/react/src/drafts/index.ts
@@ -74,3 +74,5 @@ export * from '../ActionBar'
 
 export {Stack} from '../Stack'
 export type {StackProps, StackItemProps} from '../Stack'
+
+export {SkeletonBox, SkeletonText, SkeletonAvatar} from './Skeleton'