diff --git a/404.html b/404.html
index 5771f55b17..ebaa915778 100644
--- a/404.html
+++ b/404.html
@@ -522,9 +522,7 @@
- All Patterns
-
- Announcement
+ All Patterns
Card
diff --git a/about/index.html b/about/index.html
index 5a083c545a..2d3ff0cbd0 100644
--- a/about/index.html
+++ b/about/index.html
@@ -542,9 +542,7 @@
- All Patterns
-
- Announcement
+ All Patterns
Card
diff --git a/about/roadmap/index.html b/about/roadmap/index.html
index b77f91fa8f..11a1583755 100644
--- a/about/roadmap/index.html
+++ b/about/roadmap/index.html
@@ -537,9 +537,7 @@
- All Patterns
-
- Announcement
+ All Patterns
Card
diff --git a/accessibility/accessibility-tools/index.html b/accessibility/accessibility-tools/index.html
index 830c580810..5741645f2d 100644
--- a/accessibility/accessibility-tools/index.html
+++ b/accessibility/accessibility-tools/index.html
@@ -523,9 +523,7 @@
- All Patterns
-
- Announcement
+ All Patterns
Card
diff --git a/accessibility/assistive-tech/index.html b/accessibility/assistive-tech/index.html
index cc0c0d3f69..ee2df983df 100644
--- a/accessibility/assistive-tech/index.html
+++ b/accessibility/assistive-tech/index.html
@@ -521,9 +521,7 @@
- All Patterns
-
- Announcement
+ All Patterns
Card
diff --git a/accessibility/ci-cd/index.html b/accessibility/ci-cd/index.html
index 1272a3f55b..700eceb9f9 100644
--- a/accessibility/ci-cd/index.html
+++ b/accessibility/ci-cd/index.html
@@ -523,9 +523,7 @@
- All Patterns
-
- Announcement
+ All Patterns
Card
diff --git a/accessibility/content/index.html b/accessibility/content/index.html
index f7cc215213..d9a3f275f0 100644
--- a/accessibility/content/index.html
+++ b/accessibility/content/index.html
@@ -548,9 +548,7 @@
- All Patterns
-
- Announcement
+ All Patterns
Card
diff --git a/accessibility/contributors/index.html b/accessibility/contributors/index.html
index 616d483eb9..3657aa960d 100644
--- a/accessibility/contributors/index.html
+++ b/accessibility/contributors/index.html
@@ -521,9 +521,7 @@
- All Patterns
-
- Announcement
+ All Patterns
Card
diff --git a/accessibility/design/index.html b/accessibility/design/index.html
index f047bce137..21db1ec984 100644
--- a/accessibility/design/index.html
+++ b/accessibility/design/index.html
@@ -521,9 +521,7 @@
- All Patterns
-
- Announcement
+ All Patterns
Card
diff --git a/accessibility/development/index.html b/accessibility/development/index.html
index 2212156203..3b18240abd 100644
--- a/accessibility/development/index.html
+++ b/accessibility/development/index.html
@@ -524,9 +524,7 @@
- All Patterns
-
- Announcement
+ All Patterns
Card
diff --git a/accessibility/index.html b/accessibility/index.html
index e2726705cb..68cf3b750e 100644
--- a/accessibility/index.html
+++ b/accessibility/index.html
@@ -523,9 +523,7 @@
- All Patterns
-
- Announcement
+ All Patterns
Card
diff --git a/accessibility/manual-testing/index.html b/accessibility/manual-testing/index.html
index 1e1b86c8f0..06a80bfd96 100644
--- a/accessibility/manual-testing/index.html
+++ b/accessibility/manual-testing/index.html
@@ -529,9 +529,7 @@
- All Patterns
-
- Announcement
+ All Patterns
Card
diff --git a/accessibility/resources/index.html b/accessibility/resources/index.html
index 60e6c251db..6c2f604f43 100644
--- a/accessibility/resources/index.html
+++ b/accessibility/resources/index.html
@@ -521,9 +521,7 @@
- All Patterns
-
- Announcement
+ All Patterns
Card
diff --git a/accessibility/screen-readers-computer/index.html b/accessibility/screen-readers-computer/index.html
index 7ceb3ff897..40493d4c95 100644
--- a/accessibility/screen-readers-computer/index.html
+++ b/accessibility/screen-readers-computer/index.html
@@ -521,9 +521,7 @@
- All Patterns
-
- Announcement
+ All Patterns
Card
diff --git a/accessibility/screen-readers-mobile/index.html b/accessibility/screen-readers-mobile/index.html
index 59e07b213b..ce7656608e 100644
--- a/accessibility/screen-readers-mobile/index.html
+++ b/accessibility/screen-readers-mobile/index.html
@@ -521,9 +521,7 @@
- All Patterns
-
- Announcement
+ All Patterns
Card
diff --git a/accessibility/screen-readers/index.html b/accessibility/screen-readers/index.html
index ff133614bd..8024a19e60 100644
--- a/accessibility/screen-readers/index.html
+++ b/accessibility/screen-readers/index.html
@@ -527,9 +527,7 @@
- All Patterns
-
- Announcement
+ All Patterns
Card
diff --git a/assets/color/color-a11y-color-contrast-body-code-text.svg b/assets/color/color-a11y-color-contrast-body-code-text.svg
new file mode 100644
index 0000000000..ff834024e5
--- /dev/null
+++ b/assets/color/color-a11y-color-contrast-body-code-text.svg
@@ -0,0 +1,14 @@
+
diff --git a/assets/color/color-a11y-color-contrast-layering.svg b/assets/color/color-a11y-color-contrast-layering.svg
new file mode 100644
index 0000000000..9d4b202cbb
--- /dev/null
+++ b/assets/color/color-a11y-color-contrast-layering.svg
@@ -0,0 +1,35 @@
+
diff --git a/assets/color/color-a11y-color-contrast-links.svg b/assets/color/color-a11y-color-contrast-links.svg
new file mode 100644
index 0000000000..acade2e75d
--- /dev/null
+++ b/assets/color/color-a11y-color-contrast-links.svg
@@ -0,0 +1,9 @@
+
diff --git a/assets/color/color-a11y-contrast-body-code-text.png b/assets/color/color-a11y-contrast-body-code-text.png
deleted file mode 100644
index d5b644ea77..0000000000
Binary files a/assets/color/color-a11y-contrast-body-code-text.png and /dev/null differ
diff --git a/assets/color/color-a11y-contrast-layering.png b/assets/color/color-a11y-contrast-layering.png
deleted file mode 100644
index 4cd5d27a28..0000000000
Binary files a/assets/color/color-a11y-contrast-layering.png and /dev/null differ
diff --git a/assets/color/color-a11y-contrast-links.png b/assets/color/color-a11y-contrast-links.png
deleted file mode 100644
index bbe72e6d36..0000000000
Binary files a/assets/color/color-a11y-contrast-links.png and /dev/null differ
diff --git a/assets/color/color-a11y-red-text-on-bgs.svg b/assets/color/color-a11y-red-text-on-bgs.svg
new file mode 100644
index 0000000000..85ac135645
--- /dev/null
+++ b/assets/color/color-a11y-red-text-on-bgs.svg
@@ -0,0 +1,78 @@
+
diff --git a/assets/color/color-a11y-using-color-alone.png b/assets/color/color-a11y-using-color-alone.png
deleted file mode 100644
index 5e01502240..0000000000
Binary files a/assets/color/color-a11y-using-color-alone.png and /dev/null differ
diff --git a/assets/color/color-a11y-using-color-alone.svg b/assets/color/color-a11y-using-color-alone.svg
new file mode 100644
index 0000000000..48d2db82e8
--- /dev/null
+++ b/assets/color/color-a11y-using-color-alone.svg
@@ -0,0 +1,88 @@
+
diff --git a/assets/color/color-communication.svg b/assets/color/color-communication.svg
new file mode 100644
index 0000000000..3edea50837
--- /dev/null
+++ b/assets/color/color-communication.svg
@@ -0,0 +1,134 @@
+
diff --git a/assets/color/color-semantic-tokens.svg b/assets/color/color-semantic-tokens.svg
new file mode 100644
index 0000000000..bcfc1821bc
--- /dev/null
+++ b/assets/color/color-semantic-tokens.svg
@@ -0,0 +1,56 @@
+
diff --git a/assets/color/color-usage-backgrounds-canvas.svg b/assets/color/color-usage-backgrounds-canvas.svg
new file mode 100644
index 0000000000..0c72af154f
--- /dev/null
+++ b/assets/color/color-usage-backgrounds-canvas.svg
@@ -0,0 +1,22 @@
+
diff --git a/assets/color/color-usage-basic-text.svg b/assets/color/color-usage-basic-text.svg
new file mode 100644
index 0000000000..287f0ed02f
--- /dev/null
+++ b/assets/color/color-usage-basic-text.svg
@@ -0,0 +1,35 @@
+
diff --git a/assets/color/color-usage-best-practice-2-do.svg b/assets/color/color-usage-best-practice-2-do.svg
new file mode 100644
index 0000000000..68e6fa6a23
--- /dev/null
+++ b/assets/color/color-usage-best-practice-2-do.svg
@@ -0,0 +1,8 @@
+
diff --git a/assets/color/color-usage-best-practice-2-dont.svg b/assets/color/color-usage-best-practice-2-dont.svg
new file mode 100644
index 0000000000..87cc407b8b
--- /dev/null
+++ b/assets/color/color-usage-best-practice-2-dont.svg
@@ -0,0 +1,8 @@
+
diff --git a/assets/color/color-usage-best-practices-1-do.svg b/assets/color/color-usage-best-practices-1-do.svg
new file mode 100644
index 0000000000..9f524702ea
--- /dev/null
+++ b/assets/color/color-usage-best-practices-1-do.svg
@@ -0,0 +1,41 @@
+
diff --git a/assets/color/color-usage-best-practices-1-dont.svg b/assets/color/color-usage-best-practices-1-dont.svg
new file mode 100644
index 0000000000..d59fc0200c
--- /dev/null
+++ b/assets/color/color-usage-best-practices-1-dont.svg
@@ -0,0 +1,41 @@
+
diff --git a/assets/color/color-usage-brand-red.svg b/assets/color/color-usage-brand-red.svg
new file mode 100644
index 0000000000..2ccfff2f21
--- /dev/null
+++ b/assets/color/color-usage-brand-red.svg
@@ -0,0 +1,42 @@
+
diff --git a/assets/color/color-usage-icons.svg b/assets/color/color-usage-icons.svg
new file mode 100644
index 0000000000..5a12c0c13c
--- /dev/null
+++ b/assets/color/color-usage-icons.svg
@@ -0,0 +1,328 @@
+
diff --git a/assets/color/color-usage-interactivity.svg b/assets/color/color-usage-interactivity.svg
new file mode 100644
index 0000000000..309251191f
--- /dev/null
+++ b/assets/color/color-usage-interactivity.svg
@@ -0,0 +1,166 @@
+
diff --git a/assets/color/color-usage-layering-theme-dark.svg b/assets/color/color-usage-layering-theme-dark.svg
new file mode 100644
index 0000000000..3bd5d4e357
--- /dev/null
+++ b/assets/color/color-usage-layering-theme-dark.svg
@@ -0,0 +1,6 @@
+
diff --git a/assets/color/color-usage-layering-theme-light.svg b/assets/color/color-usage-layering-theme-light.svg
new file mode 100644
index 0000000000..edd26d4983
--- /dev/null
+++ b/assets/color/color-usage-layering-theme-light.svg
@@ -0,0 +1,6 @@
+
diff --git a/assets/color/color-usage-red-orange.svg b/assets/color/color-usage-red-orange.svg
new file mode 100644
index 0000000000..37c9403040
--- /dev/null
+++ b/assets/color/color-usage-red-orange.svg
@@ -0,0 +1,45 @@
+
diff --git a/assets/color/color-usage-status.svg b/assets/color/color-usage-status.svg
new file mode 100644
index 0000000000..1eca5caaf6
--- /dev/null
+++ b/assets/color/color-usage-status.svg
@@ -0,0 +1,162 @@
+
diff --git a/assets/color/color-usage-surface.svg b/assets/color/color-usage-surface.svg
new file mode 100644
index 0000000000..5ee7d0f21b
--- /dev/null
+++ b/assets/color/color-usage-surface.svg
@@ -0,0 +1,71 @@
+
diff --git a/assets/color/contrast-layering.png b/assets/color/contrast-layering.png
deleted file mode 100644
index 47fd131c13..0000000000
Binary files a/assets/color/contrast-layering.png and /dev/null differ
diff --git a/assets/color/using-color-alone.png b/assets/color/using-color-alone.png
deleted file mode 100644
index 84ce1d60e3..0000000000
Binary files a/assets/color/using-color-alone.png and /dev/null differ
diff --git a/assets/packages/@rhds/elements/elements/rh-accordion/docs/20-guidelines.md b/assets/packages/@rhds/elements/elements/rh-accordion/docs/20-guidelines.md
index 0d72e8496d..4d9634a89e 100644
--- a/assets/packages/@rhds/elements/elements/rh-accordion/docs/20-guidelines.md
+++ b/assets/packages/@rhds/elements/elements/rh-accordion/docs/20-guidelines.md
@@ -166,35 +166,76 @@ smaller.
## Best practices
-### One panel
-Do not display one panel only, use an expandable section instead.
+### One panel
-
-
-
+
+
+
+
+
+
Use accordion in groups of two or more.
+
+
+
+
+
+
+
Do not display one panel only.
+
+
### Text readability
-Text within panels should not exceed `750px` to maintain optimal readability.
+
+
+
+
-
-
-
+
The text in a panel should be limited to a maximum width of 750px, which maintains optimal readability.
+
+
+
+
+
+
+
+
Do not allow text within panels to fill the entire width of a panel, if the text would exceed a width of 750px.
+
### Mixing themes
-Do not use a dark theme accordion in a light theme environment and vice versa.
+
+
+
+
+
+
An accordion group should match the theme of the container it’s in. This ensures that all of the text is visible and has adequate color contrast.
+
+
+
+
+
+
+
Do not use a light theme accordion in a dark theme environment and vice versa because it may cause accessibility and usability issues.
+
+
-
-
-
diff --git a/assets/packages/@rhds/elements/elements/rh-accordion/docs/accordion-best-practices-mixing-themes-do.svg b/assets/packages/@rhds/elements/elements/rh-accordion/docs/accordion-best-practices-mixing-themes-do.svg
new file mode 100644
index 0000000000..c80ec218db
--- /dev/null
+++ b/assets/packages/@rhds/elements/elements/rh-accordion/docs/accordion-best-practices-mixing-themes-do.svg
@@ -0,0 +1,43 @@
+
diff --git a/assets/packages/@rhds/elements/elements/rh-accordion/docs/accordion-best-practices-mixing-themes-dont.svg b/assets/packages/@rhds/elements/elements/rh-accordion/docs/accordion-best-practices-mixing-themes-dont.svg
new file mode 100644
index 0000000000..3548cbee33
--- /dev/null
+++ b/assets/packages/@rhds/elements/elements/rh-accordion/docs/accordion-best-practices-mixing-themes-dont.svg
@@ -0,0 +1,49 @@
+
diff --git a/assets/packages/@rhds/elements/elements/rh-accordion/docs/accordion-best-practices-one-panel-do.svg b/assets/packages/@rhds/elements/elements/rh-accordion/docs/accordion-best-practices-one-panel-do.svg
new file mode 100644
index 0000000000..1665df4241
--- /dev/null
+++ b/assets/packages/@rhds/elements/elements/rh-accordion/docs/accordion-best-practices-one-panel-do.svg
@@ -0,0 +1,26 @@
+
diff --git a/assets/packages/@rhds/elements/elements/rh-accordion/docs/accordion-best-practices-one-panel-dont.svg b/assets/packages/@rhds/elements/elements/rh-accordion/docs/accordion-best-practices-one-panel-dont.svg
new file mode 100644
index 0000000000..1b8dc825e7
--- /dev/null
+++ b/assets/packages/@rhds/elements/elements/rh-accordion/docs/accordion-best-practices-one-panel-dont.svg
@@ -0,0 +1,15 @@
+
diff --git a/assets/packages/@rhds/elements/elements/rh-accordion/docs/accordion-best-practices-text-readability-do.svg b/assets/packages/@rhds/elements/elements/rh-accordion/docs/accordion-best-practices-text-readability-do.svg
new file mode 100644
index 0000000000..4d7d57d6ff
--- /dev/null
+++ b/assets/packages/@rhds/elements/elements/rh-accordion/docs/accordion-best-practices-text-readability-do.svg
@@ -0,0 +1,49 @@
+
diff --git a/assets/packages/@rhds/elements/elements/rh-accordion/docs/accordion-best-practices-text-readability-dont.svg b/assets/packages/@rhds/elements/elements/rh-accordion/docs/accordion-best-practices-text-readability-dont.svg
new file mode 100644
index 0000000000..fa895e5f35
--- /dev/null
+++ b/assets/packages/@rhds/elements/elements/rh-accordion/docs/accordion-best-practices-text-readability-dont.svg
@@ -0,0 +1,49 @@
+
diff --git a/assets/packages/@rhds/elements/elements/rh-timestamp/docs/20-guidelines.md b/assets/packages/@rhds/elements/elements/rh-timestamp/docs/20-guidelines.md
index 057019d621..16ab5a80a1 100644
--- a/assets/packages/@rhds/elements/elements/rh-timestamp/docs/20-guidelines.md
+++ b/assets/packages/@rhds/elements/elements/rh-timestamp/docs/20-guidelines.md
@@ -258,8 +258,24 @@ Just like text, a timestamp will break to two lines as breakpoints get smaller.
### Headings
-Do not apply a timestamp to headings.
-
-
-
-
\ No newline at end of file
+
+
+
+
+
+
Use timestamp as part of the body copy.
+
+
+
+
+
+
+
Do not apply a timestamp to headings.
+
+
\ No newline at end of file
diff --git a/assets/packages/@rhds/elements/elements/rh-timestamp/docs/timestamp-best-practices-headings-do.svg b/assets/packages/@rhds/elements/elements/rh-timestamp/docs/timestamp-best-practices-headings-do.svg
new file mode 100644
index 0000000000..7924588bc1
--- /dev/null
+++ b/assets/packages/@rhds/elements/elements/rh-timestamp/docs/timestamp-best-practices-headings-do.svg
@@ -0,0 +1,5 @@
+
diff --git a/assets/packages/@rhds/elements/elements/rh-timestamp/docs/timestamp-best-practices-headings-dont.svg b/assets/packages/@rhds/elements/elements/rh-timestamp/docs/timestamp-best-practices-headings-dont.svg
new file mode 100644
index 0000000000..769a1812cf
--- /dev/null
+++ b/assets/packages/@rhds/elements/elements/rh-timestamp/docs/timestamp-best-practices-headings-dont.svg
@@ -0,0 +1,5 @@
+
diff --git a/assets/packages/@rhds/elements/elements/rh-tooltip/docs/20-guidelines.md b/assets/packages/@rhds/elements/elements/rh-tooltip/docs/20-guidelines.md
index 1193e15a77..e26b9840d1 100644
--- a/assets/packages/@rhds/elements/elements/rh-tooltip/docs/20-guidelines.md
+++ b/assets/packages/@rhds/elements/elements/rh-tooltip/docs/20-guidelines.md
@@ -86,35 +86,74 @@ A tooltip can generally be used on both large and small breakpoints if the conte
### White on white
-Do not use a dark theme tooltip in light theme environments.
-
-
-
-
+
+
+
+
+
+
Use the tooltip that corresponds with the theme of the container it’s in.
+
+
+
+
+
+
+
Do not use a dark theme tooltip in light theme environments and vice versa.
+
+
### Cut off by browser window
-A tooltip should not be cut off by the browser window. Change the orientation if it does.
-
-
-
-
+
+
+
+
+
+
Place the tooltip so that the whole element is visible.
+
+
+
+
+
+
+
A tooltip should not be cut off by the browser window. Change the orientation if it does.
+
+
### Unnecessary pairing
-Do not add a tooltip to interface elements or actions that do not require further explanation.
-
-
-
-
+
+
+
+
+
+
Tooltips should be used if a user might need to know more information to understand the page or to complete an action.
+
+
+
+
+
+
+
Do not add a tooltip to interface elements or actions that do not require further explanation.