diff --git a/elements/rh-audio-player/docs/30-guidelines.md b/elements/rh-audio-player/docs/30-guidelines.md
index e95b8f1023..7ca6644e8a 100644
--- a/elements/rh-audio-player/docs/30-guidelines.md
+++ b/elements/rh-audio-player/docs/30-guidelines.md
@@ -261,22 +261,50 @@ The Full player will change to the Compact player and the Compact player will ch
 
 ## Best practices 
 
-### Full player 
-Be careful when using the Full player near too many other elements.
-
-<uxdot-example width-adjustment="712px" danger>
-  <img src="../audio-player-best-practice-1.png" 
-      alt="Image of the Full player used near lots of other elements"
-      width="712"
-      height="382">
-</uxdot-example>
-
-### Contextual menu 
-Do not alter contextual menu theming.
-
-<uxdot-example width-adjustment="712px" danger>
-  <img src="../audio-player-best-practice-2.png"
-      alt="Image of Compact players with contextual menus that are a different theme than the audio player which is incorrect usage"
-      width="712"
-      height="482">
-</uxdot-example>
+### Full player
+
+<uxdot-best-practice variant="do">
+  <uxdot-example slot="image" width-adjustment="716px">
+    <img src="../audio-player-best-practices-full-player-do.png" 
+        alt="Heading, compact audio player, and a default call to action"
+        width="716"
+        height="187">
+  </uxdot-example>
+
+  <p>Use the compact or mini size if a player needs to appear near other elements.</p>
+</uxdot-best-practice>
+
+<uxdot-best-practice variant="dont">
+  <uxdot-example slot="image" width-adjustment="1012px">
+    <img  src="../audio-player-best-practices-full-player-dont.png" 
+        alt="Heading, full player, and a call to action in a group next to a card"
+        width="1012"
+        height="352">
+  </uxdot-example>
+
+  <p>Avoid using the full player near too many other elements.</p>
+</uxdot-best-practice>
+
+### Contextual menu
+
+<uxdot-best-practice variant="do">
+  <uxdot-example slot="image" width-adjustment="794px">
+    <img src="../audio-player-best-practices-contextual-menu-do.png" 
+        alt="Light theme contextual menu paired with light theme player and dark theme contextual menu paired with dark theme player"
+        width="794"
+        height="480">
+  </uxdot-example>
+
+  <p>Retain the theming of the contextual menu that’s built into the audio player.</p>
+</uxdot-best-practice>
+
+<uxdot-best-practice variant="dont">
+  <uxdot-example slot="image" width-adjustment="794px">
+    <img  src="../audio-player-best-practices-contextual-menu-dont.png" 
+        alt="Dark theme contextual menu paired with light theme player and purple theme contextual menu paired with dark theme player"
+        width="794"
+        height="480">
+  </uxdot-example>
+
+  <p>Do not alter contextual menu theming.</p>
+</uxdot-best-practice>
\ No newline at end of file
diff --git a/elements/rh-audio-player/docs/audio-player-best-practice-1.png b/elements/rh-audio-player/docs/audio-player-best-practice-1.png
deleted file mode 100755
index ca278cb814..0000000000
Binary files a/elements/rh-audio-player/docs/audio-player-best-practice-1.png and /dev/null differ
diff --git a/elements/rh-audio-player/docs/audio-player-best-practice-2.png b/elements/rh-audio-player/docs/audio-player-best-practice-2.png
deleted file mode 100755
index a5973b723a..0000000000
Binary files a/elements/rh-audio-player/docs/audio-player-best-practice-2.png and /dev/null differ
diff --git a/elements/rh-audio-player/docs/audio-player-best-practices-contextual-menu-do.png b/elements/rh-audio-player/docs/audio-player-best-practices-contextual-menu-do.png
new file mode 100644
index 0000000000..9b27a7dc3c
Binary files /dev/null and b/elements/rh-audio-player/docs/audio-player-best-practices-contextual-menu-do.png differ
diff --git a/elements/rh-audio-player/docs/audio-player-best-practices-contextual-menu-dont.png b/elements/rh-audio-player/docs/audio-player-best-practices-contextual-menu-dont.png
new file mode 100644
index 0000000000..e6a449eb81
Binary files /dev/null and b/elements/rh-audio-player/docs/audio-player-best-practices-contextual-menu-dont.png differ
diff --git a/elements/rh-audio-player/docs/audio-player-best-practices-full-player-do.png b/elements/rh-audio-player/docs/audio-player-best-practices-full-player-do.png
new file mode 100644
index 0000000000..121e775d5b
Binary files /dev/null and b/elements/rh-audio-player/docs/audio-player-best-practices-full-player-do.png differ
diff --git a/elements/rh-audio-player/docs/audio-player-best-practices-full-player-dont.png b/elements/rh-audio-player/docs/audio-player-best-practices-full-player-dont.png
new file mode 100644
index 0000000000..0471fdcb68
Binary files /dev/null and b/elements/rh-audio-player/docs/audio-player-best-practices-full-player-dont.png differ