diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap
index 9e9d025049..ce4bfc6166 100644
--- a/src/__integ__/__snapshots__/themes.test.ts.snap
+++ b/src/__integ__/__snapshots__/themes.test.ts.snap
@@ -132,11 +132,14 @@ Object {
   "color-border-divider-interactive-default": "#687078",
   "color-border-divider-panel-bottom": "rgba(0, 28, 36, 0.15)",
   "color-border-divider-panel-side": "transparent",
+  "color-border-divider-secondary": "#eaeded",
   "color-border-dropdown-container": "transparent",
   "color-border-dropdown-group": "#eaeded",
   "color-border-dropdown-item-default": "#eaeded",
   "color-border-dropdown-item-dimmed-hover": "#879596",
+  "color-border-dropdown-item-focused": "#0073bb",
   "color-border-dropdown-item-hover": "#879596",
+  "color-border-dropdown-item-selected": "#eaeded",
   "color-border-dropdown-item-top": "#eaeded",
   "color-border-editable-cell-hover": "#879596",
   "color-border-input-default": "#687078",
@@ -495,7 +498,6 @@ Object {
   "motion-keyframes-status-icon-error": "awsui-none-35003c",
   "shadow-container": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)",
   "shadow-container-active": "0px 4px 8px rgba(0, 28, 36, 0.45)",
-  "shadow-container-stacked": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)",
   "shadow-dropdown": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)",
   "shadow-dropup": "0 -1px 1px 0 rgba(0, 28, 36, 0.3), 1px -1px 1px 0 rgba(0, 28, 36, 0.15), -1px -1px 1px 0 rgba(0, 28, 36, 0.15)",
   "shadow-flash-collapsed": "0px 2px 2px rgba(0, 0, 0, 0.15)",
@@ -740,11 +742,14 @@ Object {
   "color-border-divider-interactive-default": "#687078",
   "color-border-divider-panel-bottom": "rgba(0, 0, 0, 0.3)",
   "color-border-divider-panel-side": "transparent",
+  "color-border-divider-secondary": "#414750",
   "color-border-dropdown-container": "transparent",
   "color-border-dropdown-group": "#414750",
   "color-border-dropdown-item-default": "#414750",
   "color-border-dropdown-item-dimmed-hover": "#879596",
+  "color-border-dropdown-item-focused": "#00a1c9",
   "color-border-dropdown-item-hover": "#879596",
+  "color-border-dropdown-item-selected": "#414750",
   "color-border-dropdown-item-top": "#414750",
   "color-border-editable-cell-hover": "#879596",
   "color-border-input-default": "#879596",
@@ -1103,7 +1108,6 @@ Object {
   "motion-keyframes-status-icon-error": "awsui-none-35003c",
   "shadow-container": "0 1px 1px 0 rgba(0, 0, 0, 0.3), 1px 1px 1px 0 rgba(0, 0, 0, 0.3), -1px 1px 1px 0 rgba(0, 0, 0, 0.3)",
   "shadow-container-active": "0px 4px 8px rgba(0, 28, 36, 0.45)",
-  "shadow-container-stacked": "0 1px 1px 0 rgba(0, 0, 0, 0.3), 1px 1px 1px 0 rgba(0, 0, 0, 0.3), -1px 1px 1px 0 rgba(0, 0, 0, 0.3)",
   "shadow-dropdown": "0 1px 1px 0 rgba(0, 0, 0, 0.3), 1px 1px 1px 0 rgba(0, 0, 0, 0.3), -1px 1px 1px 0 rgba(0, 0, 0, 0.3)",
   "shadow-dropup": "0 -1px 1px 0 rgba(0, 0, 0, 0.3), 1px -1px 1px 0 rgba(0, 0, 0, 0.3), -1px -1px 1px 0 rgba(0, 0, 0, 0.3)",
   "shadow-flash-collapsed": "0px 2px 2px rgba(0, 0, 0, 0.15)",
@@ -1348,11 +1352,14 @@ Object {
   "color-border-divider-interactive-default": "#687078",
   "color-border-divider-panel-bottom": "rgba(0, 28, 36, 0.15)",
   "color-border-divider-panel-side": "transparent",
+  "color-border-divider-secondary": "#eaeded",
   "color-border-dropdown-container": "transparent",
   "color-border-dropdown-group": "#eaeded",
   "color-border-dropdown-item-default": "#eaeded",
   "color-border-dropdown-item-dimmed-hover": "#879596",
+  "color-border-dropdown-item-focused": "#0073bb",
   "color-border-dropdown-item-hover": "#879596",
+  "color-border-dropdown-item-selected": "#eaeded",
   "color-border-dropdown-item-top": "#eaeded",
   "color-border-editable-cell-hover": "#879596",
   "color-border-input-default": "#687078",
@@ -1711,7 +1718,6 @@ Object {
   "motion-keyframes-status-icon-error": "awsui-none-35003c",
   "shadow-container": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)",
   "shadow-container-active": "0px 4px 8px rgba(0, 28, 36, 0.45)",
-  "shadow-container-stacked": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)",
   "shadow-dropdown": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)",
   "shadow-dropup": "0 -1px 1px 0 rgba(0, 28, 36, 0.3), 1px -1px 1px 0 rgba(0, 28, 36, 0.15), -1px -1px 1px 0 rgba(0, 28, 36, 0.15)",
   "shadow-flash-collapsed": "0px 2px 2px rgba(0, 0, 0, 0.15)",
@@ -1956,11 +1962,14 @@ Object {
   "color-border-divider-interactive-default": "#687078",
   "color-border-divider-panel-bottom": "rgba(0, 28, 36, 0.15)",
   "color-border-divider-panel-side": "transparent",
+  "color-border-divider-secondary": "#eaeded",
   "color-border-dropdown-container": "transparent",
   "color-border-dropdown-group": "#eaeded",
   "color-border-dropdown-item-default": "#eaeded",
   "color-border-dropdown-item-dimmed-hover": "#879596",
+  "color-border-dropdown-item-focused": "#0073bb",
   "color-border-dropdown-item-hover": "#879596",
+  "color-border-dropdown-item-selected": "#eaeded",
   "color-border-dropdown-item-top": "#eaeded",
   "color-border-editable-cell-hover": "#879596",
   "color-border-input-default": "#687078",
@@ -2319,7 +2328,6 @@ Object {
   "motion-keyframes-status-icon-error": "awsui-none-35003c",
   "shadow-container": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)",
   "shadow-container-active": "0px 4px 8px rgba(0, 28, 36, 0.45)",
-  "shadow-container-stacked": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)",
   "shadow-dropdown": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)",
   "shadow-dropup": "0 -1px 1px 0 rgba(0, 28, 36, 0.3), 1px -1px 1px 0 rgba(0, 28, 36, 0.15), -1px -1px 1px 0 rgba(0, 28, 36, 0.15)",
   "shadow-flash-collapsed": "0px 2px 2px rgba(0, 0, 0, 0.15)",
@@ -2435,13 +2443,13 @@ Object {
 exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" 1`] = `
 Object {
   "border-active-width": "4px",
-  "border-code-editor-status-divider-width": "2px",
+  "border-code-editor-status-divider-width": "1px",
   "border-container-sticky-width": "0px",
   "border-container-top-width": "0px",
   "border-control-focus-ring-shadow-spread": "0px",
   "border-control-invalid-focus-ring-shadow-spread": "2px",
   "border-divider-list-width": "1px",
-  "border-divider-section-width": "2px",
+  "border-divider-section-width": "1px",
   "border-dropdown-virtual-offset-width": "2px",
   "border-field-width": "2px",
   "border-invalid-width": "8px",
@@ -2451,7 +2459,7 @@ Object {
   "border-line-chart-width": "2px",
   "border-link-focus-ring-outline": "0",
   "border-link-focus-ring-shadow-spread": "2px",
-  "border-panel-header-width": "2px",
+  "border-panel-header-width": "1px",
   "border-panel-top-width": "1px",
   "border-radius-alert": "12px",
   "border-radius-badge": "4px",
@@ -2471,7 +2479,7 @@ Object {
   "border-radius-tiles": "8px",
   "border-radius-token": "8px",
   "border-radius-tutorial-panel-item": "8px",
-  "border-table-sticky-width": "2px",
+  "border-table-sticky-width": "1px",
   "color-background-badge-icon": "#d91515",
   "color-background-button-link-active": "#d3e7f9",
   "color-background-button-link-hover": "#f2f8fd",
@@ -2560,15 +2568,18 @@ Object {
   "color-border-control-default": "#7d8998",
   "color-border-control-disabled": "#d1d5db",
   "color-border-divider-active": "#000716",
-  "color-border-divider-default": "#e9ebed",
+  "color-border-divider-default": "#b6bec9",
   "color-border-divider-interactive-default": "#7d8998",
-  "color-border-divider-panel-bottom": "#e9ebed",
-  "color-border-divider-panel-side": "#e9ebed",
+  "color-border-divider-panel-bottom": "#b6bec9",
+  "color-border-divider-panel-side": "#b6bec9",
+  "color-border-divider-secondary": "#e9ebed",
   "color-border-dropdown-container": "#9ba7b6",
-  "color-border-dropdown-group": "#e9ebed",
-  "color-border-dropdown-item-default": "#e9ebed",
+  "color-border-dropdown-group": "#b6bec9",
+  "color-border-dropdown-item-default": "#b6bec9",
   "color-border-dropdown-item-dimmed-hover": "#7d8998",
+  "color-border-dropdown-item-focused": "#414d5c",
   "color-border-dropdown-item-hover": "#7d8998",
+  "color-border-dropdown-item-selected": "#0972d3",
   "color-border-dropdown-item-top": "transparent",
   "color-border-editable-cell-hover": "#7d8998",
   "color-border-input-default": "#7d8998",
@@ -2587,7 +2598,7 @@ Object {
   "color-border-status-info": "#0972d3",
   "color-border-status-success": "#037f0c",
   "color-border-status-warning": "#8d6605",
-  "color-border-tabs-divider": "#e9ebed",
+  "color-border-tabs-divider": "#b6bec9",
   "color-border-tabs-shadow": "rgba(0, 7, 22, 0.12)",
   "color-border-tabs-underline": "#0972d3",
   "color-border-tiles-disabled": "#e9ebed",
@@ -2801,8 +2812,8 @@ Object {
   "color-text-group-label": "#414d5c",
   "color-text-heading-default": "#000716",
   "color-text-heading-secondary": "#414d5c",
-  "color-text-home-header-default": "#ffffff",
-  "color-text-home-header-secondary": "#d1d5db",
+  "color-text-home-header-default": "#e9ebed",
+  "color-text-home-header-secondary": "#b6bec9",
   "color-text-icon-subtle": "#5f6b7a",
   "color-text-input-disabled": "#9ba7b6",
   "color-text-input-placeholder": "#5f6b7a",
@@ -2927,20 +2938,19 @@ Object {
   "motion-keyframes-status-icon-error": "awsui-status-icon-error-35003c",
   "shadow-container": "0px 0px 1px 1px #e9ebed, 0px 1px 8px 2px rgba(0, 7, 22, 0.12)",
   "shadow-container-active": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a",
-  "shadow-container-stacked": "-1px 1px 1px 0px #e9ebed, 1px 1px 1px 0px #e9ebed, 0px 9px 8px -7px rgb(0 7 22 / 12%), 8px 0px 8px -7px rgb(0 7 22 / 12%), -8px 0px 8px -7px rgb(0 7 22 / 12%)",
   "shadow-dropdown": "0px 4px 20px 1px rgba(0, 7, 22, 0.1)",
   "shadow-dropup": "0px 4px 20px 1px rgba(0, 7, 22, 0.1)",
   "shadow-flash-collapsed": "0px 4px 4px rgba(0, 0, 0, 0.25)",
-  "shadow-flash-sticky": "0px 6px 36px rgba(0, 7, 22, 0.1)",
+  "shadow-flash-sticky": "0px 4px 8px rgba(0, 7, 22, 0.1)",
   "shadow-modal": "0px 4px 20px 1px rgba(0, 7, 22, 0.1)",
-  "shadow-panel": "0px 1px 1px 1px #e9ebed, 0px 6px 36px rgba(0, 7, 22, 0.1)",
+  "shadow-panel": "0px 0px 0px 1px #b6bec9",
   "shadow-panel-toggle": "0px 6px 12px 1px rgba(0, 7, 22, 0.12)",
   "shadow-popover": "0px 4px 20px 1px rgba(0, 7, 22, 0.1)",
   "shadow-split-bottom": "0px -36px 36px -36px rgba(0, 7, 22, 0.1)",
   "shadow-split-side": "-1px 0px 1px 0px #e9ebed, -36px 6px 36px -36px rgba(0, 7, 22, 0.1)",
-  "shadow-sticky": "0px 4px 20px 1px rgba(0, 7, 22, 0.1)",
-  "shadow-sticky-column-first": "4px 0px 20px 1px rgba(0, 7, 22, 0.1)",
-  "shadow-sticky-column-last": "-4px 0 20px 1px rgba(0, 28, 36, 0.1)",
+  "shadow-sticky": "0px 4px 8px 1px rgba(0, 7, 22, 0.1)",
+  "shadow-sticky-column-first": "4px 0px 8px 1px rgba(0, 7, 22, 0.1)",
+  "shadow-sticky-column-last": "-4px 0 8px 1px rgba(0, 28, 36, 0.1)",
   "shadow-sticky-embedded": "0px 2px 0px 0px #e9ebed, 0px 16px 16px -12px rgba(0, 7, 22, 0.1)",
   "size-calendar-grid-width": "238px",
   "size-control": "16px",
@@ -3043,13 +3053,13 @@ Object {
 exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-compact" 1`] = `
 Object {
   "border-active-width": "4px",
-  "border-code-editor-status-divider-width": "2px",
+  "border-code-editor-status-divider-width": "1px",
   "border-container-sticky-width": "0px",
   "border-container-top-width": "0px",
   "border-control-focus-ring-shadow-spread": "0px",
   "border-control-invalid-focus-ring-shadow-spread": "2px",
   "border-divider-list-width": "1px",
-  "border-divider-section-width": "2px",
+  "border-divider-section-width": "1px",
   "border-dropdown-virtual-offset-width": "2px",
   "border-field-width": "2px",
   "border-invalid-width": "8px",
@@ -3059,7 +3069,7 @@ Object {
   "border-line-chart-width": "2px",
   "border-link-focus-ring-outline": "0",
   "border-link-focus-ring-shadow-spread": "2px",
-  "border-panel-header-width": "2px",
+  "border-panel-header-width": "1px",
   "border-panel-top-width": "1px",
   "border-radius-alert": "12px",
   "border-radius-badge": "4px",
@@ -3079,7 +3089,7 @@ Object {
   "border-radius-tiles": "8px",
   "border-radius-token": "8px",
   "border-radius-tutorial-panel-item": "8px",
-  "border-table-sticky-width": "2px",
+  "border-table-sticky-width": "1px",
   "color-background-badge-icon": "#d91515",
   "color-background-button-link-active": "#d3e7f9",
   "color-background-button-link-hover": "#f2f8fd",
@@ -3168,15 +3178,18 @@ Object {
   "color-border-control-default": "#7d8998",
   "color-border-control-disabled": "#d1d5db",
   "color-border-divider-active": "#000716",
-  "color-border-divider-default": "#e9ebed",
+  "color-border-divider-default": "#b6bec9",
   "color-border-divider-interactive-default": "#7d8998",
-  "color-border-divider-panel-bottom": "#e9ebed",
-  "color-border-divider-panel-side": "#e9ebed",
+  "color-border-divider-panel-bottom": "#b6bec9",
+  "color-border-divider-panel-side": "#b6bec9",
+  "color-border-divider-secondary": "#e9ebed",
   "color-border-dropdown-container": "#9ba7b6",
-  "color-border-dropdown-group": "#e9ebed",
-  "color-border-dropdown-item-default": "#e9ebed",
+  "color-border-dropdown-group": "#b6bec9",
+  "color-border-dropdown-item-default": "#b6bec9",
   "color-border-dropdown-item-dimmed-hover": "#7d8998",
+  "color-border-dropdown-item-focused": "#414d5c",
   "color-border-dropdown-item-hover": "#7d8998",
+  "color-border-dropdown-item-selected": "#0972d3",
   "color-border-dropdown-item-top": "transparent",
   "color-border-editable-cell-hover": "#7d8998",
   "color-border-input-default": "#7d8998",
@@ -3195,7 +3208,7 @@ Object {
   "color-border-status-info": "#0972d3",
   "color-border-status-success": "#037f0c",
   "color-border-status-warning": "#8d6605",
-  "color-border-tabs-divider": "#e9ebed",
+  "color-border-tabs-divider": "#b6bec9",
   "color-border-tabs-shadow": "rgba(0, 7, 22, 0.12)",
   "color-border-tabs-underline": "#0972d3",
   "color-border-tiles-disabled": "#e9ebed",
@@ -3409,8 +3422,8 @@ Object {
   "color-text-group-label": "#414d5c",
   "color-text-heading-default": "#000716",
   "color-text-heading-secondary": "#414d5c",
-  "color-text-home-header-default": "#ffffff",
-  "color-text-home-header-secondary": "#d1d5db",
+  "color-text-home-header-default": "#e9ebed",
+  "color-text-home-header-secondary": "#b6bec9",
   "color-text-icon-subtle": "#5f6b7a",
   "color-text-input-disabled": "#9ba7b6",
   "color-text-input-placeholder": "#5f6b7a",
@@ -3535,20 +3548,19 @@ Object {
   "motion-keyframes-status-icon-error": "awsui-status-icon-error-35003c",
   "shadow-container": "0px 0px 1px 1px #e9ebed, 0px 1px 8px 2px rgba(0, 7, 22, 0.12)",
   "shadow-container-active": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a",
-  "shadow-container-stacked": "-1px 1px 1px 0px #e9ebed, 1px 1px 1px 0px #e9ebed, 0px 9px 8px -7px rgb(0 7 22 / 12%), 8px 0px 8px -7px rgb(0 7 22 / 12%), -8px 0px 8px -7px rgb(0 7 22 / 12%)",
   "shadow-dropdown": "0px 4px 20px 1px rgba(0, 7, 22, 0.1)",
   "shadow-dropup": "0px 4px 20px 1px rgba(0, 7, 22, 0.1)",
   "shadow-flash-collapsed": "0px 4px 4px rgba(0, 0, 0, 0.25)",
-  "shadow-flash-sticky": "0px 6px 36px rgba(0, 7, 22, 0.1)",
+  "shadow-flash-sticky": "0px 4px 8px rgba(0, 7, 22, 0.1)",
   "shadow-modal": "0px 4px 20px 1px rgba(0, 7, 22, 0.1)",
-  "shadow-panel": "0px 1px 1px 1px #e9ebed, 0px 6px 36px rgba(0, 7, 22, 0.1)",
+  "shadow-panel": "0px 0px 0px 1px #b6bec9",
   "shadow-panel-toggle": "0px 6px 12px 1px rgba(0, 7, 22, 0.12)",
   "shadow-popover": "0px 4px 20px 1px rgba(0, 7, 22, 0.1)",
   "shadow-split-bottom": "0px -36px 36px -36px rgba(0, 7, 22, 0.1)",
   "shadow-split-side": "-1px 0px 1px 0px #e9ebed, -36px 6px 36px -36px rgba(0, 7, 22, 0.1)",
-  "shadow-sticky": "0px 4px 20px 1px rgba(0, 7, 22, 0.1)",
-  "shadow-sticky-column-first": "4px 0px 20px 1px rgba(0, 7, 22, 0.1)",
-  "shadow-sticky-column-last": "-4px 0 20px 1px rgba(0, 28, 36, 0.1)",
+  "shadow-sticky": "0px 4px 8px 1px rgba(0, 7, 22, 0.1)",
+  "shadow-sticky-column-first": "4px 0px 8px 1px rgba(0, 7, 22, 0.1)",
+  "shadow-sticky-column-last": "-4px 0 8px 1px rgba(0, 28, 36, 0.1)",
   "shadow-sticky-embedded": "0px 2px 0px 0px #e9ebed, 0px 16px 16px -12px rgba(0, 7, 22, 0.1)",
   "size-calendar-grid-width": "238px",
   "size-control": "16px",
@@ -3651,13 +3663,13 @@ Object {
 exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-content-header" 1`] = `
 Object {
   "border-active-width": "4px",
-  "border-code-editor-status-divider-width": "2px",
+  "border-code-editor-status-divider-width": "1px",
   "border-container-sticky-width": "0px",
   "border-container-top-width": "0px",
   "border-control-focus-ring-shadow-spread": "0px",
   "border-control-invalid-focus-ring-shadow-spread": "2px",
   "border-divider-list-width": "1px",
-  "border-divider-section-width": "2px",
+  "border-divider-section-width": "1px",
   "border-dropdown-virtual-offset-width": "2px",
   "border-field-width": "2px",
   "border-invalid-width": "8px",
@@ -3667,7 +3679,7 @@ Object {
   "border-line-chart-width": "2px",
   "border-link-focus-ring-outline": "0",
   "border-link-focus-ring-shadow-spread": "2px",
-  "border-panel-header-width": "2px",
+  "border-panel-header-width": "1px",
   "border-panel-top-width": "1px",
   "border-radius-alert": "12px",
   "border-radius-badge": "4px",
@@ -3687,7 +3699,7 @@ Object {
   "border-radius-tiles": "8px",
   "border-radius-token": "8px",
   "border-radius-tutorial-panel-item": "8px",
-  "border-table-sticky-width": "2px",
+  "border-table-sticky-width": "1px",
   "color-background-badge-icon": "#eb6f6f",
   "color-background-button-link-active": "#354150",
   "color-background-button-link-hover": "#192534",
@@ -3700,7 +3712,7 @@ Object {
   "color-background-button-primary-disabled": "#354150",
   "color-background-button-primary-hover": "#89bdee",
   "color-background-calendar-today": "#354150",
-  "color-background-cell-shaded": "#232f3e",
+  "color-background-cell-shaded": "#192534",
   "color-background-code-editor-gutter-active-line-default": "#7d8998",
   "color-background-code-editor-gutter-active-line-error": "#eb6f6f",
   "color-background-code-editor-gutter-default": "#192534",
@@ -3715,12 +3727,12 @@ Object {
   "color-background-dropdown-item-default": "#192534",
   "color-background-dropdown-item-dimmed": "transparent",
   "color-background-dropdown-item-filter-match": "#354150",
-  "color-background-dropdown-item-hover": "#354150",
-  "color-background-dropdown-item-selected": "#192534",
+  "color-background-dropdown-item-hover": "#081120",
+  "color-background-dropdown-item-selected": "#00142b",
   "color-background-home-header": "#000716",
   "color-background-input-default": "#000716",
   "color-background-input-disabled": "#192534",
-  "color-background-item-selected": "#192534",
+  "color-background-item-selected": "#00142b",
   "color-background-layout-main": "#000716",
   "color-background-layout-mobile-panel": "#000716",
   "color-background-layout-panel-content": "#0f1b2a",
@@ -3778,13 +3790,16 @@ Object {
   "color-border-divider-active": "#fbfbfb",
   "color-border-divider-default": "#414d5c",
   "color-border-divider-interactive-default": "#d1d5db",
-  "color-border-divider-panel-bottom": "rgba(0, 7, 22, 1)",
+  "color-border-divider-panel-bottom": "#414d5c",
   "color-border-divider-panel-side": "#414d5c",
+  "color-border-divider-secondary": "#232f3e",
   "color-border-dropdown-container": "#5f6b7a",
   "color-border-dropdown-group": "#414d5c",
   "color-border-dropdown-item-default": "#414d5c",
   "color-border-dropdown-item-dimmed-hover": "#7d8998",
+  "color-border-dropdown-item-focused": "#d1d5db",
   "color-border-dropdown-item-hover": "#5f6b7a",
+  "color-border-dropdown-item-selected": "#539fe5",
   "color-border-dropdown-item-top": "transparent",
   "color-border-editable-cell-hover": "#5f6b7a",
   "color-border-input-default": "#5f6b7a",
@@ -3973,8 +3988,8 @@ Object {
   "color-shadow-default": "rgba(0, 7, 22, 1)",
   "color-stroke-chart-line": "#7d8998",
   "color-text-accent": "#539fe5",
-  "color-text-body-default": "#d1d5db",
-  "color-text-body-secondary": "#d1d5db",
+  "color-text-body-default": "#b6bec9",
+  "color-text-body-secondary": "#b6bec9",
   "color-text-breadcrumb-current": "#7d8998",
   "color-text-breadcrumb-icon": "#5f6b7a",
   "color-text-button-inline-icon-default": "#539fe5",
@@ -3998,7 +4013,7 @@ Object {
   "color-text-counter": "#8d99a8",
   "color-text-disabled": "#5f6b7a",
   "color-text-dropdown-footer": "#8d99a8",
-  "color-text-dropdown-group-label": "#8d99a8",
+  "color-text-dropdown-group-label": "#b6bec9",
   "color-text-dropdown-header": "#fbfbfb",
   "color-text-dropdown-item-default": "#d1d5db",
   "color-text-dropdown-item-dimmed": "#5f6b7a",
@@ -4008,20 +4023,20 @@ Object {
   "color-text-dropdown-item-secondary": "#8d99a8",
   "color-text-dropdown-item-secondary-hover": "#d1d5db",
   "color-text-empty": "#d1d5db",
-  "color-text-expandable-section-default": "#fbfbfb",
+  "color-text-expandable-section-default": "#d1d5db",
   "color-text-expandable-section-hover": "#539fe5",
   "color-text-expandable-section-navigation-icon-default": "#d1d5db",
   "color-text-form-default": "#d1d5db",
   "color-text-form-label": "#d1d5db",
   "color-text-form-secondary": "#8d99a8",
-  "color-text-group-label": "#8d99a8",
-  "color-text-heading-default": "#e9ebed",
+  "color-text-group-label": "#b6bec9",
+  "color-text-heading-default": "#d1d5db",
   "color-text-heading-secondary": "#8d99a8",
-  "color-text-home-header-default": "#ffffff",
-  "color-text-home-header-secondary": "#d1d5db",
+  "color-text-home-header-default": "#e9ebed",
+  "color-text-home-header-secondary": "#b6bec9",
   "color-text-icon-subtle": "#9ba7b6",
   "color-text-input-disabled": "#5f6b7a",
-  "color-text-input-placeholder": "#7d8998",
+  "color-text-input-placeholder": "#8d99a8",
   "color-text-input-placeholder-disabled": "#5f6b7a",
   "color-text-interactive-active": "#fbfbfb",
   "color-text-interactive-default": "#d1d5db",
@@ -4141,22 +4156,21 @@ Object {
   "motion-keyframes-fade-out": "awsui-fade-out-35003c",
   "motion-keyframes-scale-popup": "awsui-scale-popup-35003c",
   "motion-keyframes-status-icon-error": "awsui-status-icon-error-35003c",
-  "shadow-container": "none",
-  "shadow-container-active": "0px 1px 1px 1px #192534, 0px 6px 36px #000716",
-  "shadow-container-stacked": "0px 9px 8px -7px rgb(0 7 22 / 60%), 8px 0px 8px -7px rgb(0 7 22 / 60%), -8px 0px 8px -7px rgb(0 7 22 / 60%)",
-  "shadow-dropdown": "0px 4px 20px 1px rgba(0, 7, 22, 1)",
-  "shadow-dropup": "0px 4px 20px 1px rgba(0, 7, 22, 1)",
+  "shadow-container": "0px 1px 8px 2px rgba(0, 7, 22, 0.6)",
+  "shadow-container-active": "0px 1px 1px 1px #192534, 0px 6px 36px #00040c",
+  "shadow-dropdown": "0px 4px 20px 1px rgba(0, 4, 12, 1)",
+  "shadow-dropup": "0px 4px 20px 1px rgba(0, 4, 12, 1)",
   "shadow-flash-collapsed": "0px 4px 4px rgba(0, 0, 0, 0.25)",
-  "shadow-flash-sticky": "0px 6px 36px rgba(0, 7, 22, 0.1)",
-  "shadow-modal": "0px 4px 20px 1px rgba(0, 7, 22, 1)",
-  "shadow-panel": "0px 1px 1px 1px #e9ebed, 0px 6px 36px rgba(0, 7, 22, 0.1)",
+  "shadow-flash-sticky": "0px 4px 8px rgba(0, 7, 22, 0.1)",
+  "shadow-modal": "0px 4px 20px 1px rgba(0, 4, 12, 1)",
+  "shadow-panel": "0px 0px 0px 1px #b6bec9",
   "shadow-panel-toggle": "0px 6px 12px 1px rgba(0, 7, 22, 0.12)",
-  "shadow-popover": "0px 4px 20px 1px rgba(0, 7, 22, 1)",
+  "shadow-popover": "0px 4px 20px 1px rgba(0, 4, 12, 1)",
   "shadow-split-bottom": "0px -36px 36px -36px rgba(0, 7, 22, 1)",
   "shadow-split-side": "-1px 0px 1px 0px #192534, -36px 6px 36px -36px rgba(0, 7, 22, 1)",
-  "shadow-sticky": "0px 4px 20px 1px rgba(0, 7, 22, 1)",
-  "shadow-sticky-column-first": "0px 4px 20px 1px rgba(0, 7, 22, 1)",
-  "shadow-sticky-column-last": "0px 4px 20px 1px rgba(0, 7, 22, 1)",
+  "shadow-sticky": "0px 4px 8px 1px rgba(0, 7, 22, 0.5)",
+  "shadow-sticky-column-first": "0px 4px 8px 1px rgba(0, 7, 22, 0.5)",
+  "shadow-sticky-column-last": "0px 4px 8px 1px rgba(0, 7, 22, 0.5)",
   "shadow-sticky-embedded": "0px 2px 0px 0px #414d5c, 0px 16px 16px -12px rgba(0, 7, 22, 1)",
   "size-calendar-grid-width": "238px",
   "size-control": "16px",
@@ -4259,13 +4273,13 @@ Object {
 exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-dark" 1`] = `
 Object {
   "border-active-width": "4px",
-  "border-code-editor-status-divider-width": "2px",
+  "border-code-editor-status-divider-width": "1px",
   "border-container-sticky-width": "0px",
   "border-container-top-width": "0px",
   "border-control-focus-ring-shadow-spread": "0px",
   "border-control-invalid-focus-ring-shadow-spread": "2px",
   "border-divider-list-width": "1px",
-  "border-divider-section-width": "2px",
+  "border-divider-section-width": "1px",
   "border-dropdown-virtual-offset-width": "2px",
   "border-field-width": "2px",
   "border-invalid-width": "8px",
@@ -4275,7 +4289,7 @@ Object {
   "border-line-chart-width": "2px",
   "border-link-focus-ring-outline": "0",
   "border-link-focus-ring-shadow-spread": "2px",
-  "border-panel-header-width": "2px",
+  "border-panel-header-width": "1px",
   "border-panel-top-width": "1px",
   "border-radius-alert": "12px",
   "border-radius-badge": "4px",
@@ -4295,7 +4309,7 @@ Object {
   "border-radius-tiles": "8px",
   "border-radius-token": "8px",
   "border-radius-tutorial-panel-item": "8px",
-  "border-table-sticky-width": "2px",
+  "border-table-sticky-width": "1px",
   "color-background-badge-icon": "#eb6f6f",
   "color-background-button-link-active": "#354150",
   "color-background-button-link-hover": "#192534",
@@ -4308,7 +4322,7 @@ Object {
   "color-background-button-primary-disabled": "#354150",
   "color-background-button-primary-hover": "#89bdee",
   "color-background-calendar-today": "#354150",
-  "color-background-cell-shaded": "#232f3e",
+  "color-background-cell-shaded": "#192534",
   "color-background-code-editor-gutter-active-line-default": "#7d8998",
   "color-background-code-editor-gutter-active-line-error": "#eb6f6f",
   "color-background-code-editor-gutter-default": "#192534",
@@ -4323,12 +4337,12 @@ Object {
   "color-background-dropdown-item-default": "#192534",
   "color-background-dropdown-item-dimmed": "transparent",
   "color-background-dropdown-item-filter-match": "#354150",
-  "color-background-dropdown-item-hover": "#354150",
-  "color-background-dropdown-item-selected": "#192534",
+  "color-background-dropdown-item-hover": "#081120",
+  "color-background-dropdown-item-selected": "#00142b",
   "color-background-home-header": "#000716",
   "color-background-input-default": "#0f1b2a",
   "color-background-input-disabled": "#192534",
-  "color-background-item-selected": "#192534",
+  "color-background-item-selected": "#00142b",
   "color-background-layout-main": "#0f1b2a",
   "color-background-layout-mobile-panel": "#000716",
   "color-background-layout-panel-content": "#0f1b2a",
@@ -4386,13 +4400,16 @@ Object {
   "color-border-divider-active": "#fbfbfb",
   "color-border-divider-default": "#414d5c",
   "color-border-divider-interactive-default": "#d1d5db",
-  "color-border-divider-panel-bottom": "rgba(0, 7, 22, 1)",
+  "color-border-divider-panel-bottom": "#414d5c",
   "color-border-divider-panel-side": "#414d5c",
+  "color-border-divider-secondary": "#232f3e",
   "color-border-dropdown-container": "#5f6b7a",
   "color-border-dropdown-group": "#414d5c",
   "color-border-dropdown-item-default": "#414d5c",
   "color-border-dropdown-item-dimmed-hover": "#7d8998",
+  "color-border-dropdown-item-focused": "#d1d5db",
   "color-border-dropdown-item-hover": "#5f6b7a",
+  "color-border-dropdown-item-selected": "#539fe5",
   "color-border-dropdown-item-top": "transparent",
   "color-border-editable-cell-hover": "#5f6b7a",
   "color-border-input-default": "#5f6b7a",
@@ -4581,8 +4598,8 @@ Object {
   "color-shadow-default": "rgba(0, 7, 22, 1)",
   "color-stroke-chart-line": "#7d8998",
   "color-text-accent": "#539fe5",
-  "color-text-body-default": "#d1d5db",
-  "color-text-body-secondary": "#d1d5db",
+  "color-text-body-default": "#b6bec9",
+  "color-text-body-secondary": "#b6bec9",
   "color-text-breadcrumb-current": "#7d8998",
   "color-text-breadcrumb-icon": "#5f6b7a",
   "color-text-button-inline-icon-default": "#539fe5",
@@ -4606,7 +4623,7 @@ Object {
   "color-text-counter": "#8d99a8",
   "color-text-disabled": "#5f6b7a",
   "color-text-dropdown-footer": "#8d99a8",
-  "color-text-dropdown-group-label": "#8d99a8",
+  "color-text-dropdown-group-label": "#b6bec9",
   "color-text-dropdown-header": "#fbfbfb",
   "color-text-dropdown-item-default": "#d1d5db",
   "color-text-dropdown-item-dimmed": "#5f6b7a",
@@ -4616,20 +4633,20 @@ Object {
   "color-text-dropdown-item-secondary": "#8d99a8",
   "color-text-dropdown-item-secondary-hover": "#d1d5db",
   "color-text-empty": "#d1d5db",
-  "color-text-expandable-section-default": "#fbfbfb",
+  "color-text-expandable-section-default": "#d1d5db",
   "color-text-expandable-section-hover": "#539fe5",
   "color-text-expandable-section-navigation-icon-default": "#d1d5db",
   "color-text-form-default": "#d1d5db",
   "color-text-form-label": "#d1d5db",
   "color-text-form-secondary": "#8d99a8",
-  "color-text-group-label": "#8d99a8",
-  "color-text-heading-default": "#e9ebed",
+  "color-text-group-label": "#b6bec9",
+  "color-text-heading-default": "#d1d5db",
   "color-text-heading-secondary": "#8d99a8",
-  "color-text-home-header-default": "#ffffff",
-  "color-text-home-header-secondary": "#d1d5db",
+  "color-text-home-header-default": "#e9ebed",
+  "color-text-home-header-secondary": "#b6bec9",
   "color-text-icon-subtle": "#9ba7b6",
   "color-text-input-disabled": "#5f6b7a",
-  "color-text-input-placeholder": "#7d8998",
+  "color-text-input-placeholder": "#8d99a8",
   "color-text-input-placeholder-disabled": "#5f6b7a",
   "color-text-interactive-active": "#fbfbfb",
   "color-text-interactive-default": "#d1d5db",
@@ -4750,21 +4767,20 @@ Object {
   "motion-keyframes-scale-popup": "awsui-scale-popup-35003c",
   "motion-keyframes-status-icon-error": "awsui-status-icon-error-35003c",
   "shadow-container": "0px 1px 8px 2px rgba(0, 7, 22, 0.6)",
-  "shadow-container-active": "0px 1px 1px 1px #192534, 0px 6px 36px #000716",
-  "shadow-container-stacked": "0px 9px 8px -7px rgb(0 7 22 / 60%), 8px 0px 8px -7px rgb(0 7 22 / 60%), -8px 0px 8px -7px rgb(0 7 22 / 60%)",
-  "shadow-dropdown": "0px 4px 20px 1px rgba(0, 7, 22, 1)",
-  "shadow-dropup": "0px 4px 20px 1px rgba(0, 7, 22, 1)",
+  "shadow-container-active": "0px 1px 1px 1px #192534, 0px 6px 36px #00040c",
+  "shadow-dropdown": "0px 4px 20px 1px rgba(0, 4, 12, 1)",
+  "shadow-dropup": "0px 4px 20px 1px rgba(0, 4, 12, 1)",
   "shadow-flash-collapsed": "0px 4px 4px rgba(0, 0, 0, 0.25)",
-  "shadow-flash-sticky": "0px 6px 36px rgba(0, 7, 22, 1)",
-  "shadow-modal": "0px 4px 20px 1px rgba(0, 7, 22, 1)",
-  "shadow-panel": "0px 1px 1px 1px #192534, 0px 6px 36px rgba(0, 7, 22, 1)",
+  "shadow-flash-sticky": "0px 4px 8px rgba(0, 7, 22, 0.5)",
+  "shadow-modal": "0px 4px 20px 1px rgba(0, 4, 12, 1)",
+  "shadow-panel": "0px 0px 0px 1px #414d5c",
   "shadow-panel-toggle": "0px 6px 12px 1px rgba(0, 7, 22, 1)",
-  "shadow-popover": "0px 4px 20px 1px rgba(0, 7, 22, 1)",
+  "shadow-popover": "0px 4px 20px 1px rgba(0, 4, 12, 1)",
   "shadow-split-bottom": "0px -36px 36px -36px rgba(0, 7, 22, 1)",
   "shadow-split-side": "-1px 0px 1px 0px #192534, -36px 6px 36px -36px rgba(0, 7, 22, 1)",
-  "shadow-sticky": "0px 4px 20px 1px rgba(0, 7, 22, 1)",
-  "shadow-sticky-column-first": "0px 4px 20px 1px rgba(0, 7, 22, 1)",
-  "shadow-sticky-column-last": "0px 4px 20px 1px rgba(0, 7, 22, 1)",
+  "shadow-sticky": "0px 4px 8px 1px rgba(0, 7, 22, 0.5)",
+  "shadow-sticky-column-first": "0px 4px 8px 1px rgba(0, 7, 22, 0.5)",
+  "shadow-sticky-column-last": "0px 4px 8px 1px rgba(0, 7, 22, 0.5)",
   "shadow-sticky-embedded": "0px 2px 0px 0px #414d5c, 0px 16px 16px -12px rgba(0, 7, 22, 1)",
   "size-calendar-grid-width": "238px",
   "size-control": "16px",
diff --git a/src/__tests__/__snapshots__/design-tokens.test.ts.snap b/src/__tests__/__snapshots__/design-tokens.test.ts.snap
index 0683201a58..4eb3b274a5 100644
--- a/src/__tests__/__snapshots__/design-tokens.test.ts.snap
+++ b/src/__tests__/__snapshots__/design-tokens.test.ts.snap
@@ -433,6 +433,20 @@ Object {
             "light": "#545b64",
           },
         },
+        "color-border-divider-secondary": Object {
+          "$description": "The border color for row dividers. For example: row dividers for table and collection preferences.",
+          "$value": Object {
+            "dark": "#414750",
+            "light": "#eaeded",
+          },
+        },
+        "color-border-dropdown-item-focused": Object {
+          "$description": "The color of focus states for dropdown items. For example: the focus ring around selectable elements in the dropdown of button dropdown, select, and multi-select.",
+          "$value": Object {
+            "dark": "#00a1c9",
+            "light": "#0073bb",
+          },
+        },
         "color-border-dropdown-item-hover": Object {
           "$description": "The border color of dropdown items on hover. For example: border of hovered items in select, multiselect, autosuggest, and hovered days in datepicker.",
           "$value": Object {
@@ -1750,7 +1764,7 @@ Object {
           },
         },
         "color-text-heading-default": Object {
-          "$description": "The default color for headings 1-5. For example: headings in tables, card collections, containers, form sections, forms, and app layout panels.",
+          "$description": "The default color for headings 2-5. For example: headings in containers, form sections, forms, and app layout panels.",
           "$value": Object {
             "dark": "#eaeded",
             "light": "#16191f",
@@ -2693,6 +2707,20 @@ Object {
             "light": "#eaeded",
           },
         },
+        "color-border-divider-secondary": Object {
+          "$description": "The border color for row dividers. For example: row dividers for table and collection preferences.",
+          "$value": Object {
+            "dark": "#414750",
+            "light": "#eaeded",
+          },
+        },
+        "color-border-dropdown-item-focused": Object {
+          "$description": "The color of focus states for dropdown items. For example: the focus ring around selectable elements in the dropdown of button dropdown, select, and multi-select.",
+          "$value": Object {
+            "dark": "#00a1c9",
+            "light": "#0073bb",
+          },
+        },
         "color-border-dropdown-item-hover": Object {
           "$description": "The border color of dropdown items on hover. For example: border of hovered items in select, multiselect, autosuggest, and hovered days in datepicker.",
           "$value": Object {
@@ -4010,7 +4038,7 @@ Object {
           },
         },
         "color-text-heading-default": Object {
-          "$description": "The default color for headings 1-5. For example: headings in tables, card collections, containers, form sections, forms, and app layout panels.",
+          "$description": "The default color for headings 2-5. For example: headings in containers, form sections, forms, and app layout panels.",
           "$value": Object {
             "dark": "#eaeded",
             "light": "#16191f",
@@ -4953,6 +4981,20 @@ Object {
             "light": "#fafafa",
           },
         },
+        "color-border-divider-secondary": Object {
+          "$description": "The border color for row dividers. For example: row dividers for table and collection preferences.",
+          "$value": Object {
+            "dark": "#414750",
+            "light": "#eaeded",
+          },
+        },
+        "color-border-dropdown-item-focused": Object {
+          "$description": "The color of focus states for dropdown items. For example: the focus ring around selectable elements in the dropdown of button dropdown, select, and multi-select.",
+          "$value": Object {
+            "dark": "#00a1c9",
+            "light": "#0073bb",
+          },
+        },
         "color-border-dropdown-item-hover": Object {
           "$description": "The border color of dropdown items on hover. For example: border of hovered items in select, multiselect, autosuggest, and hovered days in datepicker.",
           "$value": Object {
@@ -6270,7 +6312,7 @@ Object {
           },
         },
         "color-text-heading-default": Object {
-          "$description": "The default color for headings 1-5. For example: headings in tables, card collections, containers, form sections, forms, and app layout panels.",
+          "$description": "The default color for headings 2-5. For example: headings in containers, form sections, forms, and app layout panels.",
           "$value": Object {
             "dark": "#eaeded",
             "light": "#16191f",
@@ -7213,6 +7255,20 @@ Object {
             "light": "#16191f",
           },
         },
+        "color-border-divider-secondary": Object {
+          "$description": "The border color for row dividers. For example: row dividers for table and collection preferences.",
+          "$value": Object {
+            "dark": "#414750",
+            "light": "#eaeded",
+          },
+        },
+        "color-border-dropdown-item-focused": Object {
+          "$description": "The color of focus states for dropdown items. For example: the focus ring around selectable elements in the dropdown of button dropdown, select, and multi-select.",
+          "$value": Object {
+            "dark": "#00a1c9",
+            "light": "#0073bb",
+          },
+        },
         "color-border-dropdown-item-hover": Object {
           "$description": "The border color of dropdown items on hover. For example: border of hovered items in select, multiselect, autosuggest, and hovered days in datepicker.",
           "$value": Object {
@@ -8530,7 +8586,7 @@ Object {
           },
         },
         "color-text-heading-default": Object {
-          "$description": "The default color for headings 1-5. For example: headings in tables, card collections, containers, form sections, forms, and app layout panels.",
+          "$description": "The default color for headings 2-5. For example: headings in containers, form sections, forms, and app layout panels.",
           "$value": Object {
             "dark": "#eaeded",
             "light": "#16191f",
@@ -9473,6 +9529,20 @@ Object {
             "light": "#414750",
           },
         },
+        "color-border-divider-secondary": Object {
+          "$description": "The border color for row dividers. For example: row dividers for table and collection preferences.",
+          "$value": Object {
+            "dark": "#414750",
+            "light": "#414750",
+          },
+        },
+        "color-border-dropdown-item-focused": Object {
+          "$description": "The color of focus states for dropdown items. For example: the focus ring around selectable elements in the dropdown of button dropdown, select, and multi-select.",
+          "$value": Object {
+            "dark": "#00a1c9",
+            "light": "#00a1c9",
+          },
+        },
         "color-border-dropdown-item-hover": Object {
           "$description": "The border color of dropdown items on hover. For example: border of hovered items in select, multiselect, autosuggest, and hovered days in datepicker.",
           "$value": Object {
@@ -10790,7 +10860,7 @@ Object {
           },
         },
         "color-text-heading-default": Object {
-          "$description": "The default color for headings 1-5. For example: headings in tables, card collections, containers, form sections, forms, and app layout panels.",
+          "$description": "The default color for headings 2-5. For example: headings in containers, form sections, forms, and app layout panels.",
           "$value": Object {
             "dark": "#eaeded",
             "light": "#eaeded",
@@ -11733,6 +11803,20 @@ Object {
         "light": "#eaeded",
       },
     },
+    "color-border-divider-secondary": Object {
+      "$description": "The border color for row dividers. For example: row dividers for table and collection preferences.",
+      "$value": Object {
+        "dark": "#414750",
+        "light": "#eaeded",
+      },
+    },
+    "color-border-dropdown-item-focused": Object {
+      "$description": "The color of focus states for dropdown items. For example: the focus ring around selectable elements in the dropdown of button dropdown, select, and multi-select.",
+      "$value": Object {
+        "dark": "#00a1c9",
+        "light": "#0073bb",
+      },
+    },
     "color-border-dropdown-item-hover": Object {
       "$description": "The border color of dropdown items on hover. For example: border of hovered items in select, multiselect, autosuggest, and hovered days in datepicker.",
       "$value": Object {
@@ -13050,7 +13134,7 @@ Object {
       },
     },
     "color-text-heading-default": Object {
-      "$description": "The default color for headings 1-5. For example: headings in tables, card collections, containers, form sections, forms, and app layout panels.",
+      "$description": "The default color for headings 2-5. For example: headings in containers, form sections, forms, and app layout panels.",
       "$value": Object {
         "dark": "#eaeded",
         "light": "#16191f",
@@ -13693,7 +13777,7 @@ Object {
         "color-background-cell-shaded": Object {
           "$description": "The background color of shaded table cells.",
           "$value": Object {
-            "dark": "#232f3e",
+            "dark": "#192534",
             "light": "#f8f8f8",
           },
         },
@@ -13749,7 +13833,7 @@ Object {
         "color-background-dropdown-item-hover": Object {
           "$description": "The background color of dropdown items on hover. For example: background of hovered items in select, multiselect, autosuggest, and datepicker dropdowns.",
           "$value": Object {
-            "dark": "#354150",
+            "dark": "#081120",
             "light": "#f4f4f4",
           },
         },
@@ -13777,7 +13861,7 @@ Object {
         "color-background-item-selected": Object {
           "$description": "The background color of a selected item. For example: tokens, selected table rows, cards, and tile backgrounds.",
           "$value": Object {
-            "dark": "#192534",
+            "dark": "#00142b",
             "light": "#f2f8fd",
           },
         },
@@ -13998,6 +14082,20 @@ Object {
             "light": "#414d5c",
           },
         },
+        "color-border-divider-secondary": Object {
+          "$description": "The border color for row dividers. For example: row dividers for table and collection preferences.",
+          "$value": Object {
+            "dark": "#232f3e",
+            "light": "#e9ebed",
+          },
+        },
+        "color-border-dropdown-item-focused": Object {
+          "$description": "The color of focus states for dropdown items. For example: the focus ring around selectable elements in the dropdown of button dropdown, select, and multi-select.",
+          "$value": Object {
+            "dark": "#d1d5db",
+            "light": "#414d5c",
+          },
+        },
         "color-border-dropdown-item-hover": Object {
           "$description": "The border color of dropdown items on hover. For example: border of hovered items in select, multiselect, autosuggest, and hovered days in datepicker.",
           "$value": Object {
@@ -15198,14 +15296,14 @@ Object {
         "color-text-body-default": Object {
           "$description": "The default color of non-heading text and body content. For example: text in a paragraph tag, table cell data, form field labels and values.",
           "$value": Object {
-            "dark": "#d1d5db",
+            "dark": "#b6bec9",
             "light": "#000716",
           },
         },
         "color-text-body-secondary": Object {
           "$description": "The color of text that is secondary to base text. For example: text in the navigation and tools panels.",
           "$value": Object {
-            "dark": "#d1d5db",
+            "dark": "#b6bec9",
             "light": "#414d5c",
           },
         },
@@ -15310,14 +15408,14 @@ Object {
         "color-text-group-label": Object {
           "$description": "The default color for group labels. For example: group label in dropdown part of button dropdown, select, and multiselect, and group label in table and cards' preferences content selector.",
           "$value": Object {
-            "dark": "#8d99a8",
+            "dark": "#b6bec9",
             "light": "#414d5c",
           },
         },
         "color-text-heading-default": Object {
-          "$description": "The default color for headings 1-5. For example: headings in tables, card collections, containers, form sections, forms, and app layout panels.",
+          "$description": "The default color for headings 2-5. For example: headings in containers, form sections, forms, and app layout panels.",
           "$value": Object {
-            "dark": "#e9ebed",
+            "dark": "#d1d5db",
             "light": "#000716",
           },
         },
@@ -15331,15 +15429,15 @@ Object {
         "color-text-home-header-default": Object {
           "$description": "The color of the home header's text, displayed on the Service's home page.",
           "$value": Object {
-            "dark": "#ffffff",
-            "light": "#ffffff",
+            "dark": "#e9ebed",
+            "light": "#e9ebed",
           },
         },
         "color-text-home-header-secondary": Object {
           "$description": "The color of the home header's secondary text, displayed on the Service's home page.",
           "$value": Object {
-            "dark": "#d1d5db",
-            "light": "#d1d5db",
+            "dark": "#b6bec9",
+            "light": "#b6bec9",
           },
         },
         "color-text-input-disabled": Object {
@@ -15352,7 +15450,7 @@ Object {
         "color-text-input-placeholder": Object {
           "$description": "The color of placeholder text in an input. For example: placeholder text in an input, autosuggest, datepicker, and the trigger of a select and multiselect.",
           "$value": Object {
-            "dark": "#7d8998",
+            "dark": "#8d99a8",
             "light": "#5f6b7a",
           },
         },
@@ -15682,7 +15780,7 @@ Object {
         "shadow-container-active": Object {
           "$description": "Shadow for containers and cards in active state.",
           "$value": Object {
-            "dark": "0px 1px 1px 1px #192534, 0px 6px 36px #000716",
+            "dark": "0px 1px 1px 1px #192534, 0px 6px 36px #00040c",
             "light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a",
           },
         },
@@ -15953,8 +16051,8 @@ Object {
         "color-background-cell-shaded": Object {
           "$description": "The background color of shaded table cells.",
           "$value": Object {
-            "dark": "#232f3e",
-            "light": "#232f3e",
+            "dark": "#192534",
+            "light": "#192534",
           },
         },
         "color-background-container-content": Object {
@@ -16009,8 +16107,8 @@ Object {
         "color-background-dropdown-item-hover": Object {
           "$description": "The background color of dropdown items on hover. For example: background of hovered items in select, multiselect, autosuggest, and datepicker dropdowns.",
           "$value": Object {
-            "dark": "#354150",
-            "light": "#354150",
+            "dark": "#081120",
+            "light": "#081120",
           },
         },
         "color-background-home-header": Object {
@@ -16037,8 +16135,8 @@ Object {
         "color-background-item-selected": Object {
           "$description": "The background color of a selected item. For example: tokens, selected table rows, cards, and tile backgrounds.",
           "$value": Object {
-            "dark": "#192534",
-            "light": "#192534",
+            "dark": "#00142b",
+            "light": "#00142b",
           },
         },
         "color-background-layout-main": Object {
@@ -16258,6 +16356,20 @@ Object {
             "light": "#d1d5db",
           },
         },
+        "color-border-divider-secondary": Object {
+          "$description": "The border color for row dividers. For example: row dividers for table and collection preferences.",
+          "$value": Object {
+            "dark": "#232f3e",
+            "light": "#232f3e",
+          },
+        },
+        "color-border-dropdown-item-focused": Object {
+          "$description": "The color of focus states for dropdown items. For example: the focus ring around selectable elements in the dropdown of button dropdown, select, and multi-select.",
+          "$value": Object {
+            "dark": "#d1d5db",
+            "light": "#d1d5db",
+          },
+        },
         "color-border-dropdown-item-hover": Object {
           "$description": "The border color of dropdown items on hover. For example: border of hovered items in select, multiselect, autosuggest, and hovered days in datepicker.",
           "$value": Object {
@@ -17458,15 +17570,15 @@ Object {
         "color-text-body-default": Object {
           "$description": "The default color of non-heading text and body content. For example: text in a paragraph tag, table cell data, form field labels and values.",
           "$value": Object {
-            "dark": "#d1d5db",
-            "light": "#d1d5db",
+            "dark": "#b6bec9",
+            "light": "#b6bec9",
           },
         },
         "color-text-body-secondary": Object {
           "$description": "The color of text that is secondary to base text. For example: text in the navigation and tools panels.",
           "$value": Object {
-            "dark": "#d1d5db",
-            "light": "#d1d5db",
+            "dark": "#b6bec9",
+            "light": "#b6bec9",
           },
         },
         "color-text-breadcrumb-current": Object {
@@ -17570,15 +17682,15 @@ Object {
         "color-text-group-label": Object {
           "$description": "The default color for group labels. For example: group label in dropdown part of button dropdown, select, and multiselect, and group label in table and cards' preferences content selector.",
           "$value": Object {
-            "dark": "#8d99a8",
-            "light": "#8d99a8",
+            "dark": "#b6bec9",
+            "light": "#b6bec9",
           },
         },
         "color-text-heading-default": Object {
-          "$description": "The default color for headings 1-5. For example: headings in tables, card collections, containers, form sections, forms, and app layout panels.",
+          "$description": "The default color for headings 2-5. For example: headings in containers, form sections, forms, and app layout panels.",
           "$value": Object {
-            "dark": "#e9ebed",
-            "light": "#e9ebed",
+            "dark": "#d1d5db",
+            "light": "#d1d5db",
           },
         },
         "color-text-heading-secondary": Object {
@@ -17591,15 +17703,15 @@ Object {
         "color-text-home-header-default": Object {
           "$description": "The color of the home header's text, displayed on the Service's home page.",
           "$value": Object {
-            "dark": "#ffffff",
-            "light": "#ffffff",
+            "dark": "#e9ebed",
+            "light": "#e9ebed",
           },
         },
         "color-text-home-header-secondary": Object {
           "$description": "The color of the home header's secondary text, displayed on the Service's home page.",
           "$value": Object {
-            "dark": "#d1d5db",
-            "light": "#d1d5db",
+            "dark": "#b6bec9",
+            "light": "#b6bec9",
           },
         },
         "color-text-input-disabled": Object {
@@ -17612,8 +17724,8 @@ Object {
         "color-text-input-placeholder": Object {
           "$description": "The color of placeholder text in an input. For example: placeholder text in an input, autosuggest, datepicker, and the trigger of a select and multiselect.",
           "$value": Object {
-            "dark": "#7d8998",
-            "light": "#7d8998",
+            "dark": "#8d99a8",
+            "light": "#8d99a8",
           },
         },
         "color-text-interactive-active": Object {
@@ -17942,7 +18054,7 @@ Object {
         "shadow-container-active": Object {
           "$description": "Shadow for containers and cards in active state.",
           "$value": Object {
-            "dark": "0px 1px 1px 1px #192534, 0px 6px 36px #000716",
+            "dark": "0px 1px 1px 1px #192534, 0px 6px 36px #00040c",
             "light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a",
           },
         },
@@ -18213,7 +18325,7 @@ Object {
         "color-background-cell-shaded": Object {
           "$description": "The background color of shaded table cells.",
           "$value": Object {
-            "dark": "#232f3e",
+            "dark": "#192534",
             "light": "#f8f8f8",
           },
         },
@@ -18269,7 +18381,7 @@ Object {
         "color-background-dropdown-item-hover": Object {
           "$description": "The background color of dropdown items on hover. For example: background of hovered items in select, multiselect, autosuggest, and datepicker dropdowns.",
           "$value": Object {
-            "dark": "#354150",
+            "dark": "#081120",
             "light": "#f4f4f4",
           },
         },
@@ -18297,7 +18409,7 @@ Object {
         "color-background-item-selected": Object {
           "$description": "The background color of a selected item. For example: tokens, selected table rows, cards, and tile backgrounds.",
           "$value": Object {
-            "dark": "#192534",
+            "dark": "#00142b",
             "light": "#f2f8fd",
           },
         },
@@ -18515,9 +18627,23 @@ Object {
           "$description": "The default color for dividers. For example: dividers in column layout, expanding sections, side nav, help panel, between table rows and dropdown items, and inside containers.",
           "$value": Object {
             "dark": "#414d5c",
+            "light": "#b6bec9",
+          },
+        },
+        "color-border-divider-secondary": Object {
+          "$description": "The border color for row dividers. For example: row dividers for table and collection preferences.",
+          "$value": Object {
+            "dark": "#232f3e",
             "light": "#e9ebed",
           },
         },
+        "color-border-dropdown-item-focused": Object {
+          "$description": "The color of focus states for dropdown items. For example: the focus ring around selectable elements in the dropdown of button dropdown, select, and multi-select.",
+          "$value": Object {
+            "dark": "#d1d5db",
+            "light": "#414d5c",
+          },
+        },
         "color-border-dropdown-item-hover": Object {
           "$description": "The border color of dropdown items on hover. For example: border of hovered items in select, multiselect, autosuggest, and hovered days in datepicker.",
           "$value": Object {
@@ -19718,14 +19844,14 @@ Object {
         "color-text-body-default": Object {
           "$description": "The default color of non-heading text and body content. For example: text in a paragraph tag, table cell data, form field labels and values.",
           "$value": Object {
-            "dark": "#d1d5db",
+            "dark": "#b6bec9",
             "light": "#000716",
           },
         },
         "color-text-body-secondary": Object {
           "$description": "The color of text that is secondary to base text. For example: text in the navigation and tools panels.",
           "$value": Object {
-            "dark": "#d1d5db",
+            "dark": "#b6bec9",
             "light": "#414d5c",
           },
         },
@@ -19830,14 +19956,14 @@ Object {
         "color-text-group-label": Object {
           "$description": "The default color for group labels. For example: group label in dropdown part of button dropdown, select, and multiselect, and group label in table and cards' preferences content selector.",
           "$value": Object {
-            "dark": "#8d99a8",
+            "dark": "#b6bec9",
             "light": "#414d5c",
           },
         },
         "color-text-heading-default": Object {
-          "$description": "The default color for headings 1-5. For example: headings in tables, card collections, containers, form sections, forms, and app layout panels.",
+          "$description": "The default color for headings 2-5. For example: headings in containers, form sections, forms, and app layout panels.",
           "$value": Object {
-            "dark": "#e9ebed",
+            "dark": "#d1d5db",
             "light": "#000716",
           },
         },
@@ -19851,15 +19977,15 @@ Object {
         "color-text-home-header-default": Object {
           "$description": "The color of the home header's text, displayed on the Service's home page.",
           "$value": Object {
-            "dark": "#ffffff",
-            "light": "#ffffff",
+            "dark": "#e9ebed",
+            "light": "#e9ebed",
           },
         },
         "color-text-home-header-secondary": Object {
           "$description": "The color of the home header's secondary text, displayed on the Service's home page.",
           "$value": Object {
-            "dark": "#d1d5db",
-            "light": "#d1d5db",
+            "dark": "#b6bec9",
+            "light": "#b6bec9",
           },
         },
         "color-text-input-disabled": Object {
@@ -19872,7 +19998,7 @@ Object {
         "color-text-input-placeholder": Object {
           "$description": "The color of placeholder text in an input. For example: placeholder text in an input, autosuggest, datepicker, and the trigger of a select and multiselect.",
           "$value": Object {
-            "dark": "#7d8998",
+            "dark": "#8d99a8",
             "light": "#5f6b7a",
           },
         },
@@ -20202,7 +20328,7 @@ Object {
         "shadow-container-active": Object {
           "$description": "Shadow for containers and cards in active state.",
           "$value": Object {
-            "dark": "0px 1px 1px 1px #192534, 0px 6px 36px #000716",
+            "dark": "0px 1px 1px 1px #192534, 0px 6px 36px #00040c",
             "light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a",
           },
         },
@@ -20473,7 +20599,7 @@ Object {
         "color-background-cell-shaded": Object {
           "$description": "The background color of shaded table cells.",
           "$value": Object {
-            "dark": "#232f3e",
+            "dark": "#192534",
             "light": "#f8f8f8",
           },
         },
@@ -20529,7 +20655,7 @@ Object {
         "color-background-dropdown-item-hover": Object {
           "$description": "The background color of dropdown items on hover. For example: background of hovered items in select, multiselect, autosuggest, and datepicker dropdowns.",
           "$value": Object {
-            "dark": "#354150",
+            "dark": "#081120",
             "light": "#f4f4f4",
           },
         },
@@ -20557,7 +20683,7 @@ Object {
         "color-background-item-selected": Object {
           "$description": "The background color of a selected item. For example: tokens, selected table rows, cards, and tile backgrounds.",
           "$value": Object {
-            "dark": "#192534",
+            "dark": "#00142b",
             "light": "#f2f8fd",
           },
         },
@@ -20778,6 +20904,20 @@ Object {
             "light": "#fbfbfb",
           },
         },
+        "color-border-divider-secondary": Object {
+          "$description": "The border color for row dividers. For example: row dividers for table and collection preferences.",
+          "$value": Object {
+            "dark": "#232f3e",
+            "light": "#e9ebed",
+          },
+        },
+        "color-border-dropdown-item-focused": Object {
+          "$description": "The color of focus states for dropdown items. For example: the focus ring around selectable elements in the dropdown of button dropdown, select, and multi-select.",
+          "$value": Object {
+            "dark": "#d1d5db",
+            "light": "#414d5c",
+          },
+        },
         "color-border-dropdown-item-hover": Object {
           "$description": "The border color of dropdown items on hover. For example: border of hovered items in select, multiselect, autosuggest, and hovered days in datepicker.",
           "$value": Object {
@@ -21985,7 +22125,7 @@ Object {
         "color-text-body-secondary": Object {
           "$description": "The color of text that is secondary to base text. For example: text in the navigation and tools panels.",
           "$value": Object {
-            "dark": "#d1d5db",
+            "dark": "#b6bec9",
             "light": "#414d5c",
           },
         },
@@ -22090,14 +22230,14 @@ Object {
         "color-text-group-label": Object {
           "$description": "The default color for group labels. For example: group label in dropdown part of button dropdown, select, and multiselect, and group label in table and cards' preferences content selector.",
           "$value": Object {
-            "dark": "#8d99a8",
+            "dark": "#b6bec9",
             "light": "#414d5c",
           },
         },
         "color-text-heading-default": Object {
-          "$description": "The default color for headings 1-5. For example: headings in tables, card collections, containers, form sections, forms, and app layout panels.",
+          "$description": "The default color for headings 2-5. For example: headings in containers, form sections, forms, and app layout panels.",
           "$value": Object {
-            "dark": "#e9ebed",
+            "dark": "#d1d5db",
             "light": "#000716",
           },
         },
@@ -22111,15 +22251,15 @@ Object {
         "color-text-home-header-default": Object {
           "$description": "The color of the home header's text, displayed on the Service's home page.",
           "$value": Object {
-            "dark": "#ffffff",
-            "light": "#ffffff",
+            "dark": "#e9ebed",
+            "light": "#e9ebed",
           },
         },
         "color-text-home-header-secondary": Object {
           "$description": "The color of the home header's secondary text, displayed on the Service's home page.",
           "$value": Object {
-            "dark": "#d1d5db",
-            "light": "#d1d5db",
+            "dark": "#b6bec9",
+            "light": "#b6bec9",
           },
         },
         "color-text-input-disabled": Object {
@@ -22132,7 +22272,7 @@ Object {
         "color-text-input-placeholder": Object {
           "$description": "The color of placeholder text in an input. For example: placeholder text in an input, autosuggest, datepicker, and the trigger of a select and multiselect.",
           "$value": Object {
-            "dark": "#7d8998",
+            "dark": "#8d99a8",
             "light": "#5f6b7a",
           },
         },
@@ -22462,7 +22602,7 @@ Object {
         "shadow-container-active": Object {
           "$description": "Shadow for containers and cards in active state.",
           "$value": Object {
-            "dark": "0px 1px 1px 1px #192534, 0px 6px 36px #000716",
+            "dark": "0px 1px 1px 1px #192534, 0px 6px 36px #00040c",
             "light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a",
           },
         },
@@ -22733,7 +22873,7 @@ Object {
         "color-background-cell-shaded": Object {
           "$description": "The background color of shaded table cells.",
           "$value": Object {
-            "dark": "#232f3e",
+            "dark": "#192534",
             "light": "#f8f8f8",
           },
         },
@@ -22789,7 +22929,7 @@ Object {
         "color-background-dropdown-item-hover": Object {
           "$description": "The background color of dropdown items on hover. For example: background of hovered items in select, multiselect, autosuggest, and datepicker dropdowns.",
           "$value": Object {
-            "dark": "#354150",
+            "dark": "#081120",
             "light": "#f4f4f4",
           },
         },
@@ -22817,7 +22957,7 @@ Object {
         "color-background-item-selected": Object {
           "$description": "The background color of a selected item. For example: tokens, selected table rows, cards, and tile backgrounds.",
           "$value": Object {
-            "dark": "#192534",
+            "dark": "#00142b",
             "light": "#f2f8fd",
           },
         },
@@ -23038,6 +23178,20 @@ Object {
             "light": "#000716",
           },
         },
+        "color-border-divider-secondary": Object {
+          "$description": "The border color for row dividers. For example: row dividers for table and collection preferences.",
+          "$value": Object {
+            "dark": "#232f3e",
+            "light": "#e9ebed",
+          },
+        },
+        "color-border-dropdown-item-focused": Object {
+          "$description": "The color of focus states for dropdown items. For example: the focus ring around selectable elements in the dropdown of button dropdown, select, and multi-select.",
+          "$value": Object {
+            "dark": "#d1d5db",
+            "light": "#414d5c",
+          },
+        },
         "color-border-dropdown-item-hover": Object {
           "$description": "The border color of dropdown items on hover. For example: border of hovered items in select, multiselect, autosuggest, and hovered days in datepicker.",
           "$value": Object {
@@ -24245,7 +24399,7 @@ Object {
         "color-text-body-secondary": Object {
           "$description": "The color of text that is secondary to base text. For example: text in the navigation and tools panels.",
           "$value": Object {
-            "dark": "#d1d5db",
+            "dark": "#b6bec9",
             "light": "#414d5c",
           },
         },
@@ -24350,14 +24504,14 @@ Object {
         "color-text-group-label": Object {
           "$description": "The default color for group labels. For example: group label in dropdown part of button dropdown, select, and multiselect, and group label in table and cards' preferences content selector.",
           "$value": Object {
-            "dark": "#8d99a8",
+            "dark": "#b6bec9",
             "light": "#414d5c",
           },
         },
         "color-text-heading-default": Object {
-          "$description": "The default color for headings 1-5. For example: headings in tables, card collections, containers, form sections, forms, and app layout panels.",
+          "$description": "The default color for headings 2-5. For example: headings in containers, form sections, forms, and app layout panels.",
           "$value": Object {
-            "dark": "#e9ebed",
+            "dark": "#d1d5db",
             "light": "#000716",
           },
         },
@@ -24371,15 +24525,15 @@ Object {
         "color-text-home-header-default": Object {
           "$description": "The color of the home header's text, displayed on the Service's home page.",
           "$value": Object {
-            "dark": "#ffffff",
-            "light": "#ffffff",
+            "dark": "#e9ebed",
+            "light": "#e9ebed",
           },
         },
         "color-text-home-header-secondary": Object {
           "$description": "The color of the home header's secondary text, displayed on the Service's home page.",
           "$value": Object {
-            "dark": "#d1d5db",
-            "light": "#d1d5db",
+            "dark": "#b6bec9",
+            "light": "#b6bec9",
           },
         },
         "color-text-input-disabled": Object {
@@ -24392,7 +24546,7 @@ Object {
         "color-text-input-placeholder": Object {
           "$description": "The color of placeholder text in an input. For example: placeholder text in an input, autosuggest, datepicker, and the trigger of a select and multiselect.",
           "$value": Object {
-            "dark": "#7d8998",
+            "dark": "#8d99a8",
             "light": "#5f6b7a",
           },
         },
@@ -24722,7 +24876,7 @@ Object {
         "shadow-container-active": Object {
           "$description": "Shadow for containers and cards in active state.",
           "$value": Object {
-            "dark": "0px 1px 1px 1px #192534, 0px 6px 36px #000716",
+            "dark": "0px 1px 1px 1px #192534, 0px 6px 36px #00040c",
             "light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a",
           },
         },
@@ -24993,8 +25147,8 @@ Object {
         "color-background-cell-shaded": Object {
           "$description": "The background color of shaded table cells.",
           "$value": Object {
-            "dark": "#232f3e",
-            "light": "#232f3e",
+            "dark": "#192534",
+            "light": "#192534",
           },
         },
         "color-background-container-content": Object {
@@ -25049,8 +25203,8 @@ Object {
         "color-background-dropdown-item-hover": Object {
           "$description": "The background color of dropdown items on hover. For example: background of hovered items in select, multiselect, autosuggest, and datepicker dropdowns.",
           "$value": Object {
-            "dark": "#354150",
-            "light": "#354150",
+            "dark": "#081120",
+            "light": "#081120",
           },
         },
         "color-background-home-header": Object {
@@ -25077,8 +25231,8 @@ Object {
         "color-background-item-selected": Object {
           "$description": "The background color of a selected item. For example: tokens, selected table rows, cards, and tile backgrounds.",
           "$value": Object {
-            "dark": "#192534",
-            "light": "#192534",
+            "dark": "#00142b",
+            "light": "#00142b",
           },
         },
         "color-background-layout-main": Object {
@@ -25298,6 +25452,20 @@ Object {
             "light": "#414d5c",
           },
         },
+        "color-border-divider-secondary": Object {
+          "$description": "The border color for row dividers. For example: row dividers for table and collection preferences.",
+          "$value": Object {
+            "dark": "#232f3e",
+            "light": "#232f3e",
+          },
+        },
+        "color-border-dropdown-item-focused": Object {
+          "$description": "The color of focus states for dropdown items. For example: the focus ring around selectable elements in the dropdown of button dropdown, select, and multi-select.",
+          "$value": Object {
+            "dark": "#d1d5db",
+            "light": "#d1d5db",
+          },
+        },
         "color-border-dropdown-item-hover": Object {
           "$description": "The border color of dropdown items on hover. For example: border of hovered items in select, multiselect, autosuggest, and hovered days in datepicker.",
           "$value": Object {
@@ -26498,15 +26666,15 @@ Object {
         "color-text-body-default": Object {
           "$description": "The default color of non-heading text and body content. For example: text in a paragraph tag, table cell data, form field labels and values.",
           "$value": Object {
-            "dark": "#d1d5db",
-            "light": "#d1d5db",
+            "dark": "#b6bec9",
+            "light": "#b6bec9",
           },
         },
         "color-text-body-secondary": Object {
           "$description": "The color of text that is secondary to base text. For example: text in the navigation and tools panels.",
           "$value": Object {
-            "dark": "#d1d5db",
-            "light": "#d1d5db",
+            "dark": "#b6bec9",
+            "light": "#b6bec9",
           },
         },
         "color-text-breadcrumb-current": Object {
@@ -26610,15 +26778,15 @@ Object {
         "color-text-group-label": Object {
           "$description": "The default color for group labels. For example: group label in dropdown part of button dropdown, select, and multiselect, and group label in table and cards' preferences content selector.",
           "$value": Object {
-            "dark": "#8d99a8",
-            "light": "#8d99a8",
+            "dark": "#b6bec9",
+            "light": "#b6bec9",
           },
         },
         "color-text-heading-default": Object {
-          "$description": "The default color for headings 1-5. For example: headings in tables, card collections, containers, form sections, forms, and app layout panels.",
+          "$description": "The default color for headings 2-5. For example: headings in containers, form sections, forms, and app layout panels.",
           "$value": Object {
-            "dark": "#e9ebed",
-            "light": "#e9ebed",
+            "dark": "#d1d5db",
+            "light": "#d1d5db",
           },
         },
         "color-text-heading-secondary": Object {
@@ -26631,15 +26799,15 @@ Object {
         "color-text-home-header-default": Object {
           "$description": "The color of the home header's text, displayed on the Service's home page.",
           "$value": Object {
-            "dark": "#ffffff",
-            "light": "#ffffff",
+            "dark": "#e9ebed",
+            "light": "#e9ebed",
           },
         },
         "color-text-home-header-secondary": Object {
           "$description": "The color of the home header's secondary text, displayed on the Service's home page.",
           "$value": Object {
-            "dark": "#d1d5db",
-            "light": "#d1d5db",
+            "dark": "#b6bec9",
+            "light": "#b6bec9",
           },
         },
         "color-text-input-disabled": Object {
@@ -26652,8 +26820,8 @@ Object {
         "color-text-input-placeholder": Object {
           "$description": "The color of placeholder text in an input. For example: placeholder text in an input, autosuggest, datepicker, and the trigger of a select and multiselect.",
           "$value": Object {
-            "dark": "#7d8998",
-            "light": "#7d8998",
+            "dark": "#8d99a8",
+            "light": "#8d99a8",
           },
         },
         "color-text-interactive-active": Object {
@@ -26982,8 +27150,8 @@ Object {
         "shadow-container-active": Object {
           "$description": "Shadow for containers and cards in active state.",
           "$value": Object {
-            "dark": "0px 1px 1px 1px #192534, 0px 6px 36px #000716",
-            "light": "0px 1px 1px 1px #192534, 0px 6px 36px #000716",
+            "dark": "0px 1px 1px 1px #192534, 0px 6px 36px #00040c",
+            "light": "0px 1px 1px 1px #192534, 0px 6px 36px #00040c",
           },
         },
         "space-container-horizontal": Object {
@@ -27253,8 +27421,8 @@ Object {
         "color-background-cell-shaded": Object {
           "$description": "The background color of shaded table cells.",
           "$value": Object {
-            "dark": "#232f3e",
-            "light": "#232f3e",
+            "dark": "#192534",
+            "light": "#192534",
           },
         },
         "color-background-container-content": Object {
@@ -27309,8 +27477,8 @@ Object {
         "color-background-dropdown-item-hover": Object {
           "$description": "The background color of dropdown items on hover. For example: background of hovered items in select, multiselect, autosuggest, and datepicker dropdowns.",
           "$value": Object {
-            "dark": "#354150",
-            "light": "#354150",
+            "dark": "#081120",
+            "light": "#081120",
           },
         },
         "color-background-home-header": Object {
@@ -27337,8 +27505,8 @@ Object {
         "color-background-item-selected": Object {
           "$description": "The background color of a selected item. For example: tokens, selected table rows, cards, and tile backgrounds.",
           "$value": Object {
-            "dark": "#192534",
-            "light": "#192534",
+            "dark": "#00142b",
+            "light": "#00142b",
           },
         },
         "color-background-layout-main": Object {
@@ -27558,6 +27726,20 @@ Object {
             "light": "#414d5c",
           },
         },
+        "color-border-divider-secondary": Object {
+          "$description": "The border color for row dividers. For example: row dividers for table and collection preferences.",
+          "$value": Object {
+            "dark": "#232f3e",
+            "light": "#232f3e",
+          },
+        },
+        "color-border-dropdown-item-focused": Object {
+          "$description": "The color of focus states for dropdown items. For example: the focus ring around selectable elements in the dropdown of button dropdown, select, and multi-select.",
+          "$value": Object {
+            "dark": "#d1d5db",
+            "light": "#d1d5db",
+          },
+        },
         "color-border-dropdown-item-hover": Object {
           "$description": "The border color of dropdown items on hover. For example: border of hovered items in select, multiselect, autosuggest, and hovered days in datepicker.",
           "$value": Object {
@@ -28758,15 +28940,15 @@ Object {
         "color-text-body-default": Object {
           "$description": "The default color of non-heading text and body content. For example: text in a paragraph tag, table cell data, form field labels and values.",
           "$value": Object {
-            "dark": "#d1d5db",
-            "light": "#d1d5db",
+            "dark": "#b6bec9",
+            "light": "#b6bec9",
           },
         },
         "color-text-body-secondary": Object {
           "$description": "The color of text that is secondary to base text. For example: text in the navigation and tools panels.",
           "$value": Object {
-            "dark": "#d1d5db",
-            "light": "#d1d5db",
+            "dark": "#b6bec9",
+            "light": "#b6bec9",
           },
         },
         "color-text-breadcrumb-current": Object {
@@ -28870,15 +29052,15 @@ Object {
         "color-text-group-label": Object {
           "$description": "The default color for group labels. For example: group label in dropdown part of button dropdown, select, and multiselect, and group label in table and cards' preferences content selector.",
           "$value": Object {
-            "dark": "#8d99a8",
-            "light": "#8d99a8",
+            "dark": "#b6bec9",
+            "light": "#b6bec9",
           },
         },
         "color-text-heading-default": Object {
-          "$description": "The default color for headings 1-5. For example: headings in tables, card collections, containers, form sections, forms, and app layout panels.",
+          "$description": "The default color for headings 2-5. For example: headings in containers, form sections, forms, and app layout panels.",
           "$value": Object {
-            "dark": "#e9ebed",
-            "light": "#e9ebed",
+            "dark": "#d1d5db",
+            "light": "#d1d5db",
           },
         },
         "color-text-heading-secondary": Object {
@@ -28891,15 +29073,15 @@ Object {
         "color-text-home-header-default": Object {
           "$description": "The color of the home header's text, displayed on the Service's home page.",
           "$value": Object {
-            "dark": "#ffffff",
-            "light": "#ffffff",
+            "dark": "#e9ebed",
+            "light": "#e9ebed",
           },
         },
         "color-text-home-header-secondary": Object {
           "$description": "The color of the home header's secondary text, displayed on the Service's home page.",
           "$value": Object {
-            "dark": "#d1d5db",
-            "light": "#d1d5db",
+            "dark": "#b6bec9",
+            "light": "#b6bec9",
           },
         },
         "color-text-input-disabled": Object {
@@ -28912,8 +29094,8 @@ Object {
         "color-text-input-placeholder": Object {
           "$description": "The color of placeholder text in an input. For example: placeholder text in an input, autosuggest, datepicker, and the trigger of a select and multiselect.",
           "$value": Object {
-            "dark": "#7d8998",
-            "light": "#7d8998",
+            "dark": "#8d99a8",
+            "light": "#8d99a8",
           },
         },
         "color-text-interactive-active": Object {
@@ -29242,7 +29424,7 @@ Object {
         "shadow-container-active": Object {
           "$description": "Shadow for containers and cards in active state.",
           "$value": Object {
-            "dark": "0px 1px 1px 1px #192534, 0px 6px 36px #000716",
+            "dark": "0px 1px 1px 1px #192534, 0px 6px 36px #00040c",
             "light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a",
           },
         },
@@ -29513,7 +29695,7 @@ Object {
     "color-background-cell-shaded": Object {
       "$description": "The background color of shaded table cells.",
       "$value": Object {
-        "dark": "#232f3e",
+        "dark": "#192534",
         "light": "#f8f8f8",
       },
     },
@@ -29569,7 +29751,7 @@ Object {
     "color-background-dropdown-item-hover": Object {
       "$description": "The background color of dropdown items on hover. For example: background of hovered items in select, multiselect, autosuggest, and datepicker dropdowns.",
       "$value": Object {
-        "dark": "#354150",
+        "dark": "#081120",
         "light": "#f4f4f4",
       },
     },
@@ -29597,7 +29779,7 @@ Object {
     "color-background-item-selected": Object {
       "$description": "The background color of a selected item. For example: tokens, selected table rows, cards, and tile backgrounds.",
       "$value": Object {
-        "dark": "#192534",
+        "dark": "#00142b",
         "light": "#f2f8fd",
       },
     },
@@ -29815,9 +29997,23 @@ Object {
       "$description": "The default color for dividers. For example: dividers in column layout, expanding sections, side nav, help panel, between table rows and dropdown items, and inside containers.",
       "$value": Object {
         "dark": "#414d5c",
+        "light": "#b6bec9",
+      },
+    },
+    "color-border-divider-secondary": Object {
+      "$description": "The border color for row dividers. For example: row dividers for table and collection preferences.",
+      "$value": Object {
+        "dark": "#232f3e",
         "light": "#e9ebed",
       },
     },
+    "color-border-dropdown-item-focused": Object {
+      "$description": "The color of focus states for dropdown items. For example: the focus ring around selectable elements in the dropdown of button dropdown, select, and multi-select.",
+      "$value": Object {
+        "dark": "#d1d5db",
+        "light": "#414d5c",
+      },
+    },
     "color-border-dropdown-item-hover": Object {
       "$description": "The border color of dropdown items on hover. For example: border of hovered items in select, multiselect, autosuggest, and hovered days in datepicker.",
       "$value": Object {
@@ -31018,14 +31214,14 @@ Object {
     "color-text-body-default": Object {
       "$description": "The default color of non-heading text and body content. For example: text in a paragraph tag, table cell data, form field labels and values.",
       "$value": Object {
-        "dark": "#d1d5db",
+        "dark": "#b6bec9",
         "light": "#000716",
       },
     },
     "color-text-body-secondary": Object {
       "$description": "The color of text that is secondary to base text. For example: text in the navigation and tools panels.",
       "$value": Object {
-        "dark": "#d1d5db",
+        "dark": "#b6bec9",
         "light": "#414d5c",
       },
     },
@@ -31130,14 +31326,14 @@ Object {
     "color-text-group-label": Object {
       "$description": "The default color for group labels. For example: group label in dropdown part of button dropdown, select, and multiselect, and group label in table and cards' preferences content selector.",
       "$value": Object {
-        "dark": "#8d99a8",
+        "dark": "#b6bec9",
         "light": "#414d5c",
       },
     },
     "color-text-heading-default": Object {
-      "$description": "The default color for headings 1-5. For example: headings in tables, card collections, containers, form sections, forms, and app layout panels.",
+      "$description": "The default color for headings 2-5. For example: headings in containers, form sections, forms, and app layout panels.",
       "$value": Object {
-        "dark": "#e9ebed",
+        "dark": "#d1d5db",
         "light": "#000716",
       },
     },
@@ -31151,15 +31347,15 @@ Object {
     "color-text-home-header-default": Object {
       "$description": "The color of the home header's text, displayed on the Service's home page.",
       "$value": Object {
-        "dark": "#ffffff",
-        "light": "#ffffff",
+        "dark": "#e9ebed",
+        "light": "#e9ebed",
       },
     },
     "color-text-home-header-secondary": Object {
       "$description": "The color of the home header's secondary text, displayed on the Service's home page.",
       "$value": Object {
-        "dark": "#d1d5db",
-        "light": "#d1d5db",
+        "dark": "#b6bec9",
+        "light": "#b6bec9",
       },
     },
     "color-text-input-disabled": Object {
@@ -31172,7 +31368,7 @@ Object {
     "color-text-input-placeholder": Object {
       "$description": "The color of placeholder text in an input. For example: placeholder text in an input, autosuggest, datepicker, and the trigger of a select and multiselect.",
       "$value": Object {
-        "dark": "#7d8998",
+        "dark": "#8d99a8",
         "light": "#5f6b7a",
       },
     },
@@ -31502,7 +31698,7 @@ Object {
     "shadow-container-active": Object {
       "$description": "Shadow for containers and cards in active state.",
       "$value": Object {
-        "dark": "0px 1px 1px 1px #192534, 0px 6px 36px #000716",
+        "dark": "0px 1px 1px 1px #192534, 0px 6px 36px #00040c",
         "light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a",
       },
     },
diff --git a/src/app-layout/__integ__/app-layout-drawers.test.ts b/src/app-layout/__integ__/app-layout-drawers.test.ts
index 3a95eb134c..83527f1963 100644
--- a/src/app-layout/__integ__/app-layout-drawers.test.ts
+++ b/src/app-layout/__integ__/app-layout-drawers.test.ts
@@ -94,7 +94,7 @@ const setupTest = (
 
 for (const visualRefresh of ['true', 'false']) {
   describe(`visualRefresh=${visualRefresh}`, () => {
-    // there is an extra border inside drawer box in visual refresh
+    // there is an extra 2 borders inside drawer box in visual refresh
     const vrBorderOffset = visualRefresh === 'true' ? 2 : 0;
 
     test(
@@ -131,7 +131,7 @@ for (const visualRefresh of ['true', 'false']) {
         // there are different layouts between these two designs
         await expect(page.getActiveDrawerWidth()).resolves.toEqual(290 + vrBorderOffset);
         await page.dragResizerTo({ x: 0, y: 0 });
-        await expect(page.getActiveDrawerWidth()).resolves.toEqual(visualRefresh === 'true' ? 448 : 520);
+        await expect(page.getActiveDrawerWidth()).resolves.toEqual(visualRefresh === 'true' ? 447 : 520);
       })
     );
 
diff --git a/src/app-layout/__integ__/app-layout-refresh-content-width.test.ts b/src/app-layout/__integ__/app-layout-refresh-content-width.test.ts
index 37ecca1ebd..31f5893739 100644
--- a/src/app-layout/__integ__/app-layout-refresh-content-width.test.ts
+++ b/src/app-layout/__integ__/app-layout-refresh-content-width.test.ts
@@ -45,6 +45,8 @@ function setupTest(viewportWidth: number, testFn: (page: AppLayoutRefreshNotofic
   });
 }
 
+const vrBorderOffset = 1;
+
 describe('Default width per contentType', () => {
   const testCases = [
     { viewPortWidth: 1920, navigationWidth: 280, contentWidth: 1280, toolsWidth: 290 }, // XXXS - L breakpoint
@@ -62,8 +64,8 @@ describe('Default width per contentType', () => {
 
           // Open the drawers and check their width
           await page.setDrawersOpen();
-          await expect(page.getNavigationWidth()).resolves.toBe(navigationWidth);
-          await expect(page.getToolsWidth()).resolves.toBe(toolsWidth);
+          await expect(page.getNavigationWidth()).resolves.toBe(navigationWidth + vrBorderOffset);
+          await expect(page.getToolsWidth()).resolves.toBe(toolsWidth + vrBorderOffset);
         })
       );
     }
diff --git a/src/app-layout/visual-refresh/drawers.scss b/src/app-layout/visual-refresh/drawers.scss
index 3d711cb2ef..2f46cea8d2 100644
--- a/src/app-layout/visual-refresh/drawers.scss
+++ b/src/app-layout/visual-refresh/drawers.scss
@@ -20,7 +20,6 @@
 
   &.has-open-drawer {
     background-color: awsui.$color-background-container-content;
-    box-shadow: awsui.$shadow-panel;
   }
 
   @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
@@ -163,6 +162,7 @@
 
   &.is-drawer-open {
     border-right: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+    border-left: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
     opacity: 1;
     width: var(#{custom-props.$drawerSize});
   }
diff --git a/src/app-layout/visual-refresh/navigation.scss b/src/app-layout/visual-refresh/navigation.scss
index 951177e294..ad31b59127 100644
--- a/src/app-layout/visual-refresh/navigation.scss
+++ b/src/app-layout/visual-refresh/navigation.scss
@@ -87,7 +87,6 @@ nav.show-navigation {
 
 nav.navigation {
   background-color: awsui.$color-background-container-content;
-  box-shadow: awsui.$shadow-panel;
   bottom: 0;
   height: 100%;
   overflow-x: hidden;
@@ -97,6 +96,7 @@ nav.navigation {
   position: relative;
   word-wrap: break-word;
   pointer-events: auto;
+  border-right: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
 
   // Animation for the Navigation opacity and width when it is added to the DOM
   @keyframes openNavigation {
diff --git a/src/app-layout/visual-refresh/split-panel.scss b/src/app-layout/visual-refresh/split-panel.scss
index ccbd9d7bab..745a4f9c19 100644
--- a/src/app-layout/visual-refresh/split-panel.scss
+++ b/src/app-layout/visual-refresh/split-panel.scss
@@ -84,6 +84,7 @@ section.split-panel-bottom {
   */
   &.is-split-panel-open.position-bottom {
     box-shadow: awsui.$shadow-split-bottom;
+
     &.animating {
       @include styles.with-motion {
         animation: openSplitPanelBottom awsui.$motion-duration-refresh-only-fast;
@@ -108,8 +109,12 @@ section.split-panel-side {
   be persistent in the DOM when closed.
   */
   &.is-split-panel-open.position-side {
-    box-shadow: awsui.$shadow-panel;
     max-width: var(#{custom-props.$splitPanelMaxWidth}, 280px);
     min-width: var(#{custom-props.$splitPanelMinWidth}, 280px);
+    border-left: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
+
+    &:not(.has-open-drawer) {
+      border-right: awsui.$border-divider-section-width solid awsui.$color-border-divider-panel-side;
+    }
   }
 }
diff --git a/src/app-layout/visual-refresh/split-panel.tsx b/src/app-layout/visual-refresh/split-panel.tsx
index 707af31c92..d0b0ea2a94 100644
--- a/src/app-layout/visual-refresh/split-panel.tsx
+++ b/src/app-layout/visual-refresh/split-panel.tsx
@@ -123,6 +123,8 @@ function SplitPanelSide() {
     splitPanelMaxWidth,
     splitPanelMinWidth,
     splitPanelControlId,
+    isToolsOpen,
+    activeDrawerId,
   } = useAppLayoutInternals();
 
   if (!splitPanel) {
@@ -135,6 +137,7 @@ function SplitPanelSide() {
       aria-hidden={!isSplitPanelOpen || splitPanelPosition === 'bottom' ? true : false}
       className={clsx(styles['split-panel-side'], styles[`position-${splitPanelPosition}`], {
         [styles['is-split-panel-open']]: isSplitPanelOpen,
+        [styles['has-open-drawer']]: !!activeDrawerId || isToolsOpen,
       })}
       style={{
         [customCssProps.splitPanelMaxWidth]: `${splitPanelMaxWidth}px`,
diff --git a/src/app-layout/visual-refresh/tools.scss b/src/app-layout/visual-refresh/tools.scss
index 62d4b9f11d..b19ee13663 100644
--- a/src/app-layout/visual-refresh/tools.scss
+++ b/src/app-layout/visual-refresh/tools.scss
@@ -61,7 +61,6 @@ viewport size and state of the Tools drawer.
 
 .tools {
   background-color: awsui.$color-background-container-content;
-  box-shadow: awsui.$shadow-panel;
   flex-shrink: 0;
   height: 100%;
   overflow-y: auto;
@@ -93,6 +92,8 @@ viewport size and state of the Tools drawer.
 
   // Apply the animation when the Tools is opened
   &.is-tools-open {
+    border-left: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
+
     &.animating {
       @include styles.with-motion {
         animation: openTools awsui.$motion-duration-refresh-only-fast;
@@ -168,6 +169,7 @@ handleSplitPanelMaxWidth function in the context.
       display: flex;
       flex-direction: column;
       gap: awsui.$space-xs;
+
       &.animating {
         @include styles.with-motion {
           animation: showButtons awsui.$motion-duration-refresh-only-fast;
diff --git a/src/button-dropdown/category-elements/styles.scss b/src/button-dropdown/category-elements/styles.scss
index 0d2699d1fa..c629204455 100644
--- a/src/button-dropdown/category-elements/styles.scss
+++ b/src/button-dropdown/category-elements/styles.scss
@@ -55,7 +55,7 @@
         color: awsui.$color-text-dropdown-item-dimmed;
       }
       &.is-focused {
-        border-color: awsui.$color-border-item-focused;
+        border-color: awsui.$color-border-dropdown-item-focused;
         box-shadow: inset 0 0 0 awsui.$border-control-focus-ring-shadow-spread awsui.$color-border-item-focused;
       }
     }
diff --git a/src/button-dropdown/item-element/styles.scss b/src/button-dropdown/item-element/styles.scss
index 4dc4fea6f2..d9e0007bac 100644
--- a/src/button-dropdown/item-element/styles.scss
+++ b/src/button-dropdown/item-element/styles.scss
@@ -45,7 +45,7 @@
       }
 
       &.is-focused {
-        border-color: awsui.$color-border-item-focused;
+        border-color: awsui.$color-border-dropdown-item-focused;
         box-shadow: inset 0 0 0 awsui.$border-control-focus-ring-shadow-spread awsui.$color-border-item-focused;
       }
     }
diff --git a/src/cards/index.tsx b/src/cards/index.tsx
index 78c5eda26a..03f8e51831 100644
--- a/src/cards/index.tsx
+++ b/src/cards/index.tsx
@@ -230,6 +230,7 @@ const CardsList = <T,>({
 }) => {
   const selectable = !!selectionType;
   const canClickEntireCard = selectable && entireCardClickable;
+  const isRefresh = useVisualRefresh();
 
   const { moveFocusDown, moveFocusUp } = useSelectionFocusMove(selectionType, items.length);
 
@@ -268,7 +269,7 @@ const CardsList = <T,>({
           role={listItemRole}
         >
           <div
-            className={styles['card-inner']}
+            className={clsx(styles['card-inner'], isRefresh && styles.refresh)}
             onClick={
               canClickEntireCard
                 ? event => {
diff --git a/src/cards/styles.scss b/src/cards/styles.scss
index 7f8ca17ced..0cf2ce48b2 100644
--- a/src/cards/styles.scss
+++ b/src/cards/styles.scss
@@ -10,6 +10,31 @@
 @use '../container/shared' as container;
 @use './motion';
 
+@mixin card-style {
+  border-radius: awsui.$border-radius-container;
+  box-sizing: border-box;
+
+  &::before {
+    @include styles.base-pseudo-element;
+    // Reset border color to prevent it from flashing black during card selection animation
+    border-color: transparent;
+    border-top: awsui.$border-container-top-width solid awsui.$color-border-container-top;
+    border-radius: awsui.$border-radius-container;
+    z-index: 1;
+  }
+
+  &::after {
+    @include styles.base-pseudo-element;
+    border-radius: awsui.$border-radius-container;
+  }
+  &:not(.refresh)::after {
+    box-shadow: awsui.$shadow-container;
+  }
+  &.refresh::after {
+    border: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
+  }
+}
+
 .root {
   @include styles.styles-reset();
   @include styles.default-text-style;
@@ -17,7 +42,6 @@
 
 .header {
   &-variant-full-page.header-refresh {
-    @include container.borders-and-shadows;
     padding-top: 0;
     padding-left: 0;
     padding-right: 0;
@@ -78,9 +102,9 @@
     background-color: awsui.$color-background-container-content;
     margin: 0 0 awsui.$space-grid-gutter awsui.$space-grid-gutter;
     padding: awsui.$space-card-vertical awsui.$space-card-horizontal;
-    @include styles.container-shadow;
     width: 100%;
     min-width: 0;
+    @include card-style;
   }
   &-header {
     @include styles.font-heading-m;
diff --git a/src/collection-preferences/content-display/content-display-option.scss b/src/collection-preferences/content-display/content-display-option.scss
index 84eef3bc4d..7f7349016b 100644
--- a/src/collection-preferences/content-display/content-display-option.scss
+++ b/src/collection-preferences/content-display/content-display-option.scss
@@ -37,7 +37,7 @@ $border-radius: awsui.$border-radius-item;
 .content-display-option {
   list-style: none;
   position: relative;
-  border-top: awsui.$border-divider-list-width solid awsui.$color-border-divider-default;
+  border-top: awsui.$border-divider-list-width solid awsui.$color-border-divider-secondary;
   &:not(.placeholder).sorting {
     @include animated;
   }
diff --git a/src/collection-preferences/visible-content.scss b/src/collection-preferences/visible-content.scss
index ffde60b14a..9e0e13ad83 100644
--- a/src/collection-preferences/visible-content.scss
+++ b/src/collection-preferences/visible-content.scss
@@ -6,7 +6,7 @@
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
 
-$border: awsui.$border-divider-list-width solid awsui.$color-border-divider-default;
+$border: awsui.$border-divider-list-width solid awsui.$color-border-divider-secondary;
 
 .visible-content,
 .visible-content-toggle,
diff --git a/src/container/__tests__/sticky-header.test.tsx b/src/container/__tests__/sticky-header.test.tsx
index 4934a3a6ec..cc69ce5f85 100644
--- a/src/container/__tests__/sticky-header.test.tsx
+++ b/src/container/__tests__/sticky-header.test.tsx
@@ -95,6 +95,28 @@ test('should set isStuck to false when rootTop is larger than than headerTop', (
   expect(result.current.isStuck).toBe(false);
 });
 
+test('should not set isStuck to true when rootTop has a border and is larger than than headerTop', () => {
+  (supportsStickyPosition as jest.Mock).mockReturnValue(true);
+
+  const rootRef = {
+    current: document.createElement('div'),
+  };
+  rootRef.current.getBoundingClientRect = jest.fn().mockReturnValue({ top: 199 });
+  rootRef.current.style.borderTopWidth = '1px';
+
+  const headerRef = {
+    current: document.createElement('div'),
+  };
+  headerRef.current.getBoundingClientRect = jest.fn().mockReturnValue({ top: 200 });
+
+  const { result } = renderHook(() => useStickyHeader(rootRef, headerRef, true, 0, 0, false));
+  act(() => {
+    window.dispatchEvent(new Event('scroll'));
+  });
+
+  expect(result.current.isStuck).toBe(false);
+});
+
 test('should set isStuck to false when headerRef is null', () => {
   (supportsStickyPosition as jest.Mock).mockReturnValue(true);
 
diff --git a/src/container/internal.tsx b/src/container/internal.tsx
index bee268bc76..70ed2bed14 100644
--- a/src/container/internal.tsx
+++ b/src/container/internal.tsx
@@ -131,7 +131,8 @@ export default function InternalContainer({
         styles[`variant-${variant}`],
         fitHeight && styles['fit-height'],
         hasMedia && (mediaPosition === 'side' ? styles['with-side-media'] : styles['with-top-media']),
-        shouldHaveStickyStyles && [styles['sticky-enabled']]
+        shouldHaveStickyStyles && [styles['sticky-enabled']],
+        isRefresh && styles.refresh
       )}
       ref={mergedRef}
     >
@@ -151,7 +152,7 @@ export default function InternalContainer({
         {header && (
           <StickyHeaderContext.Provider value={{ isStuck }}>
             <div
-              className={clsx(styles.header, styles[`header-variant-${variant}`], {
+              className={clsx(isRefresh && styles.refresh, styles.header, styles[`header-variant-${variant}`], {
                 [styles['header-sticky-disabled']]: __stickyHeader && !isSticky,
                 [styles['header-sticky-enabled']]: isSticky,
                 [styles['header-dynamic-height']]: hasDynamicHeight,
diff --git a/src/container/shared.scss b/src/container/shared.scss
index cb49f328a8..a6e71236d2 100644
--- a/src/container/shared.scss
+++ b/src/container/shared.scss
@@ -15,10 +15,6 @@ $footer-padding: awsui.$space-scaled-s awsui.$space-container-horizontal;
 $header-focus-visible-padding: calc(#{awsui.$space-scaled-s} - #{awsui.$border-divider-section-width})
   calc(#{awsui.$space-l} - #{awsui.$border-divider-section-width});
 
-@mixin borders-and-shadows {
-  @include styles.container-shadow;
-}
-
 @mixin divider {
   border-top: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
 }
diff --git a/src/container/styles.scss b/src/container/styles.scss
index 42c9895631..8d39460969 100644
--- a/src/container/styles.scss
+++ b/src/container/styles.scss
@@ -24,17 +24,17 @@
   &.variant {
     &-default,
     &-stacked {
-      // Border and shadows are applied with ::before and ::after elements (respectively)
-      @include shared.borders-and-shadows;
       background-color: awsui.$color-background-container-content;
+      // Border and shadows are applied with ::before and ::after elements (respectively)
+      @include styles.container-style;
     }
-
     // Meld container bottom corners into next adjoining container
     &-stacked:not(:last-child),
     &-stacked:not(:last-child)::before,
     &-stacked:not(:last-child)::after {
       border-bottom-right-radius: 0;
       border-bottom-left-radius: 0;
+      border-bottom-width: 0;
     }
     // Meld container top corners into preceding container
     &-stacked + &-stacked,
@@ -44,17 +44,13 @@
       border-top-right-radius: 0;
     }
     // Replace container border with a divider
-    &-stacked + &-stacked::before {
+    &-stacked + &-stacked:not(.refresh)::before {
       @include shared.divider;
     }
-    // Reset container shadow to prevent unwanted overflow
-    &-stacked + &-stacked::after {
-      box-shadow: awsui.$shadow-container-stacked;
-    }
   }
 
   // To ensure the top border/divider is visible on sticky elements which have a higher z-index
-  &.sticky-enabled {
+  &.sticky-enabled:not(.refresh) {
     &::before {
       top: calc(-1 * #{awsui.$border-container-top-width});
     }
@@ -176,11 +172,11 @@
   }
 
   &-variant-cards {
+    // Border and shadows are applied with ::before and ::after elements (respectively)
+    @include styles.container-style;
     &:not(.header-sticky-enabled) {
       position: relative;
     }
-    @include shared.borders-and-shadows;
-
     &.header-stuck::after,
     &.header-stuck::before {
       border: 0;
diff --git a/src/container/use-sticky-header.ts b/src/container/use-sticky-header.ts
index 58d543da5c..9fb3c420c5 100644
--- a/src/container/use-sticky-header.ts
+++ b/src/container/use-sticky-header.ts
@@ -121,8 +121,10 @@ export const useStickyHeader = (
   // box-shadow, applied here by a "header-stuck" className
   const checkIfStuck = useCallback(() => {
     if (rootRef.current && headerRef.current) {
-      const rootTop = rootRef.current.getBoundingClientRect().top;
+      const rootTopBorderWidth = parseFloat(getComputedStyle(rootRef.current).borderTopWidth) || 0;
+      const rootTop = rootRef.current.getBoundingClientRect().top + rootTopBorderWidth;
       const headerTop = headerRef.current.getBoundingClientRect().top;
+
       if (rootTop < headerTop) {
         setIsStuck(true);
       } else {
diff --git a/src/header/styles.scss b/src/header/styles.scss
index 802534473f..401553a85b 100644
--- a/src/header/styles.scss
+++ b/src/header/styles.scss
@@ -128,7 +128,6 @@
 .title {
   @include styles.text-wrapping;
   color: awsui.$color-text-heading-default;
-
   &-variant-h1 {
     font-size: awsui.$font-size-heading-xl;
     padding-top: awsui.$space-scaled-2x-xxs;
diff --git a/src/internal/components/abstract-switch/styles.scss b/src/internal/components/abstract-switch/styles.scss
index b87e987468..3d9c244f18 100644
--- a/src/internal/components/abstract-switch/styles.scss
+++ b/src/internal/components/abstract-switch/styles.scss
@@ -13,6 +13,10 @@
   display: block;
 }
 
+.label {
+  color: awsui.$color-text-form-default;
+}
+
 .outline {
   display: none;
   &.show-outline {
diff --git a/src/internal/components/selectable-item/styles.scss b/src/internal/components/selectable-item/styles.scss
index 2539989028..afd06f96b9 100644
--- a/src/internal/components/selectable-item/styles.scss
+++ b/src/internal/components/selectable-item/styles.scss
@@ -53,7 +53,7 @@
   }
 
   &.highlighted {
-    z-index: 2;
+    z-index: 3;
     background-color: awsui.$color-background-dropdown-item-hover;
     border-color: awsui.$color-border-dropdown-item-hover;
     &.disabled {
@@ -64,12 +64,18 @@
   }
 
   &.selected {
+    z-index: 2;
     background-color: awsui.$color-background-dropdown-item-selected;
+    border-color: awsui.$color-border-dropdown-item-selected;
     // smooth adjacent selected borders to avoid bubble effect (visual refresh)
     &.next-item-selected {
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
     }
+    &.highlighted {
+      border-color: awsui.$color-border-dropdown-item-hover;
+      z-index: 3;
+    }
   }
 
   &.selected + &.selected {
@@ -78,7 +84,7 @@
   }
 
   &.highlighted.is-keyboard {
-    border-color: awsui.$color-border-item-focused;
+    border-color: awsui.$color-border-dropdown-item-focused;
     box-shadow: inset 0 0 0 awsui.$border-control-focus-ring-shadow-spread awsui.$color-border-item-focused;
   }
 
diff --git a/src/internal/styles/forms/mixins.scss b/src/internal/styles/forms/mixins.scss
index c8ec27f76d..7727eb88fd 100644
--- a/src/internal/styles/forms/mixins.scss
+++ b/src/internal/styles/forms/mixins.scss
@@ -130,11 +130,15 @@
   }
 }
 
-@mixin container-shadow {
+@mixin container-style {
   border-radius: awsui.$border-radius-container;
   box-sizing: border-box;
 
-  &::before {
+  &.refresh {
+    border: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
+  }
+
+  &:not(.refresh)::before {
     @include utils.base-pseudo-element;
     // Reset border color to prevent it from flashing black during card selection animation
     border-color: transparent;
@@ -143,17 +147,10 @@
     z-index: 1;
   }
 
-  &::after {
+  &:not(.refresh)::after {
     @include utils.base-pseudo-element;
-    box-shadow: awsui.$shadow-container;
     border-radius: awsui.$border-radius-container;
-    mix-blend-mode: multiply;
-  }
-
-  // HACK: because of the issues with IE's box shadow rendering we draw
-  // a border and don't mind the pixel fitting
-  @media screen and (-ms-high-contrast: active) {
-    border: constants.$control-border-width solid awsui.$color-border-container-top;
+    box-shadow: awsui.$shadow-container;
   }
 }
 
diff --git a/src/split-panel/side.tsx b/src/split-panel/side.tsx
index b9be327c55..a29cf3e2de 100644
--- a/src/split-panel/side.tsx
+++ b/src/split-panel/side.tsx
@@ -42,9 +42,7 @@ export function SplitPanelContentSide({
       ref={splitPanelRef}
     >
       <div
-        className={clsx(styles['drawer-content-side'], {
-          [styles.refresh]: isRefresh,
-        })}
+        className={clsx(styles['drawer-content-side'])}
         style={{
           top: topOffset,
           bottom: bottomOffset,
diff --git a/src/split-panel/styles.scss b/src/split-panel/styles.scss
index 4a50c3bc83..3a0e994ac0 100644
--- a/src/split-panel/styles.scss
+++ b/src/split-panel/styles.scss
@@ -53,11 +53,6 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
     }
   }
 
-  &.refresh {
-    border-right: awsui.$border-divider-section-width solid awsui.$color-border-divider-panel-side;
-    box-sizing: border-box;
-  }
-
   & > [aria-hidden='true'] {
     display: none;
   }
@@ -77,13 +72,13 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
 .position-bottom {
   position: fixed;
   overflow-y: auto;
-  border-left: awsui.$border-divider-section-width solid awsui.$color-border-divider-panel-bottom;
-  border-right: awsui.$border-divider-section-width solid awsui.$color-border-divider-panel-bottom;
   border-top: awsui.$border-panel-top-width solid awsui.$color-border-divider-panel-bottom;
 
   &:not(.refresh) {
     // custom shadow because the existing one does not have shadow on top
     box-shadow: awsui.$shadow-split-bottom;
+    border-left: awsui.$border-divider-section-width solid awsui.$color-border-divider-panel-bottom;
+    border-right: awsui.$border-divider-section-width solid awsui.$color-border-divider-panel-bottom;
   }
   &.drawer-closed {
     overflow: hidden;
diff --git a/src/table/__integ__/sticky-scrollbar.test.ts b/src/table/__integ__/sticky-scrollbar.test.ts
index e3a9dd6f01..be8eda9b5f 100644
--- a/src/table/__integ__/sticky-scrollbar.test.ts
+++ b/src/table/__integ__/sticky-scrollbar.test.ts
@@ -17,11 +17,13 @@ class StickyScrollbarPage extends BasePageObject {
   }
 }
 
-const setupTest = (testFn: (page: StickyScrollbarPage) => Promise<void>) => {
+const setupTest = (testFn: (page: StickyScrollbarPage) => Promise<void>, isVisualRefresh?: boolean) => {
   return useBrowser(async browser => {
     const page = new StickyScrollbarPage(browser);
     await page.setWindowSize({ width: 600, height: 400 });
-    await browser.url('#/light/table/sticky-scrollbar');
+    await browser.url(
+      `#/light/table/sticky-scrollbar?${isVisualRefresh ? 'visualRefresh=true' : 'visualRefresh=false'}`
+    );
 
     await testFn(page);
   });
@@ -34,12 +36,18 @@ describe('Sticky scrollbar', () => {
       await expect(page.isExisting(await page.findVisibleScrollbar())).resolves.toEqual(true);
     })
   );
-  test(
-    `scrollbarWidth is equal to tableWidth`,
-    setupTest(async page => {
-      const { width: scrollbarWidth } = await page.getBoundingBox(await page.findVisibleScrollbar());
-      const { width: tableWidth } = await page.getBoundingBox(await page.findTable());
-      expect(scrollbarWidth).toEqual(tableWidth);
+
+  [false, true].forEach(visualRefresh =>
+    describe(`visualRefresh=${visualRefresh}`, () => {
+      test(
+        `scrollbarWidth is equal to tableWidth`,
+        setupTest(async page => {
+          const { width: scrollbarWidth } = await page.getBoundingBox(await page.findVisibleScrollbar());
+          const { width: tableWidth } = await page.getBoundingBox(await page.findTable());
+          const borderOffset = visualRefresh ? 2 : 0;
+          expect(scrollbarWidth).toEqual(tableWidth - borderOffset);
+        }, visualRefresh)
+      );
     })
   );
 
diff --git a/src/table/body-cell/styles.scss b/src/table/body-cell/styles.scss
index 6052db1db6..25f253b5ea 100644
--- a/src/table/body-cell/styles.scss
+++ b/src/table/body-cell/styles.scss
@@ -30,7 +30,7 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
   padding: $cell-vertical-padding $cell-horizontal-padding $cell-vertical-padding-w-border;
   border-top: awsui.$border-divider-list-width solid transparent;
   word-wrap: break-word;
-  border-bottom: awsui.$border-divider-list-width solid awsui.$color-border-divider-default;
+  border-bottom: awsui.$border-divider-list-width solid awsui.$color-border-divider-secondary;
   font-weight: inherit;
   &:not(.body-cell-wrap) {
     white-space: nowrap;
diff --git a/src/table/resizer/styles.scss b/src/table/resizer/styles.scss
index cd74eecdef..e1f4f02ede 100644
--- a/src/table/resizer/styles.scss
+++ b/src/table/resizer/styles.scss
@@ -27,7 +27,7 @@ th:not(:last-child) > .divider {
   min-height: awsui.$line-height-heading-xs;
   max-height: calc(100% - #{$gap});
   margin: auto;
-  border-left: awsui.$border-divider-section-width solid awsui.$color-border-divider-interactive-default;
+  border-left: awsui.$border-item-width solid awsui.$color-border-divider-interactive-default;
   box-sizing: border-box;
 
   &-disabled {
diff --git a/src/wizard/styles.scss b/src/wizard/styles.scss
index eef5bc32c2..ade7662c53 100644
--- a/src/wizard/styles.scss
+++ b/src/wizard/styles.scss
@@ -38,7 +38,7 @@
   > ul {
     background: awsui.$color-background-container-content;
     position: relative;
-    @include styles.container-shadow;
+    @include styles.container-style;
     margin: 0;
     padding: awsui.$space-scaled-m awsui.$space-l awsui.$space-scaled-l awsui.$space-m;
     width: 280px;
diff --git a/src/wizard/wizard-navigation.tsx b/src/wizard/wizard-navigation.tsx
index f9bf43296a..33080cb1ee 100644
--- a/src/wizard/wizard-navigation.tsx
+++ b/src/wizard/wizard-navigation.tsx
@@ -53,7 +53,7 @@ export default function Navigation({
       className={clsx(styles.navigation, hidden && styles.hidden, isVisualRefresh && styles.refresh)}
       aria-label={i18nStrings.navigationAriaLabel}
     >
-      <ul>
+      <ul className={clsx(isVisualRefresh && styles.refresh)}>
         {steps.map((step, index: number) =>
           isVisualRefresh ? (
             <NavigationStepVisualRefresh
diff --git a/style-dictionary/classic/colors.ts b/style-dictionary/classic/colors.ts
index 1240111630..5a9d82a523 100644
--- a/style-dictionary/classic/colors.ts
+++ b/style-dictionary/classic/colors.ts
@@ -56,13 +56,15 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorBorderContainerTop: { light: '{colorGrey200}', dark: '{colorGrey700}' },
   colorBorderControlDefault: { light: '{colorGrey550}' },
   colorBorderDividerActive: '{colorGrey550}',
-  colorBorderDividerDefault: { dark: '{colorGrey650}' },
+  colorBorderDividerDefault: { light: '{colorGrey200}', dark: '{colorGrey650}' },
   colorBorderDividerInteractiveDefault: '{colorGrey550}',
   colorBorderDividerPanelBottom: '{colorShadowSide}',
   colorBorderDividerPanelSide: 'transparent',
+  colorBorderDividerSecondary: { light: '{colorGrey200}', dark: '{colorGrey650}' },
   colorBorderDropdownContainer: 'transparent',
   colorBorderDropdownItemHover: { dark: '{colorGrey500}' },
   colorBorderDropdownItemDimmedHover: `{colorBorderDropdownItemHover}`,
+  colorBorderDropdownItemSelected: '{colorBorderDropdownItemDefault}',
   colorBorderDropdownItemTop: '{colorBorderDropdownItemDefault}',
   colorBorderInputDefault: { light: '{colorGrey550}', dark: '{colorGrey500}' },
   colorBorderItemFocused: { light: '{colorBlue600}' },
@@ -73,6 +75,7 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorBorderSegmentDefault: { light: '{colorGrey550}', dark: '{colorGrey500}' },
   colorBorderSegmentDisabled: '{colorBorderButtonNormalDisabled}',
   colorBorderSegmentHover: { light: '{colorGrey900}', dark: '{colorWhite}' },
+  colorBorderDropdownItemFocused: { light: '{colorBlue600}', dark: '{colorBlue500}' },
   colorBorderStatusError: { dark: '{colorRed600}' },
   colorBorderStatusSuccess: { dark: '{colorGreen600}' },
   colorBorderTabsDivider: { light: '{colorGrey400}', dark: '{colorGrey650}' },
@@ -85,6 +88,8 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorStrokeCodeEditorResizeHandler: '{colorGrey550}',
   colorStrokeCodeEditorGutterActiveLineDefault: { dark: '{colorGrey650}' },
   colorTextAccent: { light: '{colorBlue600}', dark: '{colorBlue400}' },
+  colorTextBodyDefault: { light: '{colorGrey900}', dark: '{colorGrey300}' },
+  colorTextBodySecondary: { light: '{colorGrey600}', dark: '{colorGrey300}' },
   colorTextBreadcrumbCurrent: { dark: '{colorGrey300}' },
   colorTextBreadcrumbIcon: { light: '{colorGrey550}' },
   colorTextButtonInlineIconDefault: '{colorTextInteractiveDefault}',
@@ -104,8 +109,11 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorTextExpandableSectionDefault: '{colorTextInteractiveDefault}',
   colorTextExpandableSectionHover: '{colorTextInteractiveHover}',
   colorTextExpandableSectionNavigationIconDefault: '{colorTextIconCaret}',
-  colorTextHeadingSecondary: { dark: '{colorGrey300}' },
-  colorTextHomeHeaderDefault: { dark: '{colorGrey200}' },
+  colorTextHeadingDefault: { light: '{colorGrey900}', dark: '{colorGrey200}' },
+  colorTextHeadingSecondary: { light: '{colorGrey600}', dark: '{colorGrey300}' },
+  colorTextHomeHeaderDefault: { light: '{colorWhite}', dark: '{colorGrey200}' },
+  colorTextHomeHeaderSecondary: '{colorGrey300}',
+  colorTextFormDefault: { light: '{colorGrey900}', dark: '{colorGrey300}' },
   colorTextInputDisabled: { light: '{colorGrey500}' },
   colorTextInputPlaceholder: { light: '{colorGrey550}', dark: '{colorGrey500}' },
   colorTextInputPlaceholderDisabled: '{colorTextInputPlaceholder}',
@@ -132,6 +140,7 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorDropzoneBackgroundHover: { light: '{colorBlue300}', dark: '{colorBlue600}' },
   colorDropzoneTextActive: { light: '{colorGrey600}', dark: '{colorGrey900}' },
   colorDropzoneTextHover: { light: '{colorBlue900}', dark: '{colorWhite}' },
+  colorBackgroundDropdownItemHover: { light: '{colorGrey150}', dark: '{colorGrey650}' },
 };
 
 const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = merge(
diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts
index 44cf270da7..005ff3cbcf 100644
--- a/style-dictionary/utils/token-names.ts
+++ b/style-dictionary/utils/token-names.ts
@@ -24,6 +24,7 @@ export type ColorPaletteTokenName =
   | 'colorGrey150'
   | 'colorGrey200'
   | 'colorGrey300'
+  | 'colorGrey350'
   | 'colorGrey400'
   | 'colorGrey450'
   | 'colorGrey500'
@@ -33,6 +34,7 @@ export type ColorPaletteTokenName =
   | 'colorGrey700'
   | 'colorGrey750'
   | 'colorGrey800'
+  | 'colorGrey850'
   | 'colorGrey900'
   | 'colorGrey950'
   | 'colorOrange100'
@@ -303,6 +305,7 @@ export type ColorsTokenName =
   | 'colorBorderControlDisabled'
   | 'colorBorderDividerActive'
   | 'colorBorderDividerDefault'
+  | 'colorBorderDividerSecondary'
   | 'colorBorderDividerPanelBottom'
   | 'colorBorderDividerPanelSide'
   | 'colorBorderDropdownContainer'
@@ -316,6 +319,7 @@ export type ColorsTokenName =
   | 'colorBorderInputDefault'
   | 'colorBorderInputDisabled'
   | 'colorBorderItemFocused'
+  | 'colorBorderDropdownItemFocused'
   | 'colorBorderItemPlaceholder'
   | 'colorBorderItemSelected'
   | 'colorBorderLayout'
diff --git a/style-dictionary/visual-refresh/borders.ts b/style-dictionary/visual-refresh/borders.ts
index 474526869f..191fe1abf8 100644
--- a/style-dictionary/visual-refresh/borders.ts
+++ b/style-dictionary/visual-refresh/borders.ts
@@ -10,7 +10,7 @@ export const tokens: StyleDictionary.BordersDictionary = {
   borderControlFocusRingShadowSpread: '0px',
   borderControlInvalidFocusRingShadowSpread: '2px',
   borderDividerListWidth: '1px',
-  borderDividerSectionWidth: '2px',
+  borderDividerSectionWidth: '1px',
   borderDropdownVirtualOffsetWidth: '2px',
   borderFieldWidth: '2px',
   borderInvalidWidth: '8px',
@@ -18,7 +18,7 @@ export const tokens: StyleDictionary.BordersDictionary = {
   borderLineChartDashArray: '3 5',
   borderLineChartLineJoin: 'round',
   borderLineChartWidth: '2px',
-  borderPanelHeaderWidth: '2px',
+  borderPanelHeaderWidth: '1px',
   borderPanelTopWidth: '1px',
   borderRadiusAlert: '{borderRadiusFlashbar}',
   borderRadiusBadge: '4px',
@@ -38,7 +38,7 @@ export const tokens: StyleDictionary.BordersDictionary = {
   borderRadiusTiles: '{borderRadiusInput}',
   borderRadiusToken: '{borderRadiusInput}',
   borderRadiusTutorialPanelItem: '{borderRadiusInput}',
-  borderTableStickyWidth: '2px',
+  borderTableStickyWidth: '1px',
   borderLinkFocusRingOutline: '0',
   borderLinkFocusRingShadowSpread: '2px',
 };
diff --git a/style-dictionary/visual-refresh/color-palette.ts b/style-dictionary/visual-refresh/color-palette.ts
index ef869109f3..90ba3052ec 100644
--- a/style-dictionary/visual-refresh/color-palette.ts
+++ b/style-dictionary/visual-refresh/color-palette.ts
@@ -26,6 +26,7 @@ export const tokens: StyleDictionary.ColorPaletteDictionary = {
   colorGrey150: '#f4f4f4',
   colorGrey200: '#e9ebed',
   colorGrey300: '#d1d5db',
+  colorGrey350: '#b6bec9',
   colorGrey400: '#9ba7b6',
   colorGrey450: '#8d99a8',
   colorGrey500: '#7d8998',
@@ -35,6 +36,7 @@ export const tokens: StyleDictionary.ColorPaletteDictionary = {
   colorGrey700: '#232f3e',
   colorGrey750: '#192534',
   colorGrey800: '#0f1b2a',
+  colorGrey850: '#081120',
   colorGrey900: '#000716',
   colorGrey950: '#222222',
   colorOrange100: '#fef6f0',
diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts
index c072508c67..f604ecf366 100644
--- a/style-dictionary/visual-refresh/colors.ts
+++ b/style-dictionary/visual-refresh/colors.ts
@@ -26,7 +26,7 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorBackgroundButtonPrimaryDisabled: { light: '{colorGrey200}', dark: '{colorGrey650}' },
   colorBackgroundButtonPrimaryHover: '{colorBorderButtonNormalHover}',
   colorBackgroundCalendarToday: { light: '{colorGrey150}', dark: '{colorGrey650}' },
-  colorBackgroundCellShaded: { light: '{colorGrey125}', dark: '{colorGrey700}' },
+  colorBackgroundCellShaded: { light: '{colorGrey125}', dark: '{colorGrey750}' },
   colorBackgroundCodeEditorGutterActiveLineDefault: { light: '{colorGrey550}', dark: '{colorGrey500}' },
   colorBackgroundCodeEditorGutterActiveLineError: '{colorTextStatusError}',
   colorBackgroundCodeEditorGutterDefault: { light: '{colorGrey150}', dark: '{colorGrey750}' },
@@ -41,12 +41,12 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorBackgroundDropdownItemDefault: { light: '{colorWhite}', dark: '{colorGrey750}' },
   colorBackgroundDropdownItemDimmed: 'transparent',
   colorBackgroundDropdownItemFilterMatch: { light: '{colorBlue100}', dark: '{colorGrey650}' },
-  colorBackgroundDropdownItemHover: { light: '{colorGrey150}', dark: '{colorGrey650}' },
+  colorBackgroundDropdownItemHover: { light: '{colorGrey150}', dark: '{colorGrey850}' },
   colorBackgroundDropdownItemSelected: '{colorBackgroundItemSelected}',
   colorBackgroundHomeHeader: '{colorGrey900}',
   colorBackgroundInputDefault: { light: '{colorWhite}', dark: '{colorGrey800}' },
   colorBackgroundInputDisabled: { light: '{colorGrey200}', dark: '{colorGrey750}' },
-  colorBackgroundItemSelected: { light: '{colorBlue100}', dark: '{colorGrey750}' },
+  colorBackgroundItemSelected: { light: '{colorBlue100}', dark: '{colorBlue900}' },
   colorBackgroundLayoutMain: { light: '{colorWhite}', dark: '{colorGrey800}' },
   colorBackgroundLayoutMobilePanel: '{colorGrey900}',
   colorBackgroundLayoutPanelContent: '{colorBackgroundContainerContent}',
@@ -100,9 +100,10 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorBorderControlDefault: '{colorGrey500}',
   colorBorderControlDisabled: '{colorBackgroundControlDisabled}',
   colorBorderDividerActive: { light: '{colorGrey900}', dark: '{colorGrey100}' },
-  colorBorderDividerDefault: { light: '{colorGrey200}', dark: '{colorGrey600}' },
-  colorBorderDividerPanelBottom: { light: '{colorBorderDividerDefault}', dark: '{colorGreyTransparent}' },
+  colorBorderDividerDefault: { light: '{colorGrey350}', dark: '{colorGrey600}' },
+  colorBorderDividerPanelBottom: '{colorBorderDividerDefault}',
   colorBorderDividerPanelSide: '{colorBorderDividerDefault}',
+  colorBorderDividerSecondary: { light: '{colorGrey200}', dark: '{colorGrey700}' },
   colorBorderDropdownContainer: { light: '{colorGrey400}', dark: '{colorGrey550}' },
   colorBorderDropdownGroup: '{colorBorderDropdownItemDefault}',
   colorBorderDropdownItemDefault: '{colorBorderDividerDefault}',
@@ -114,6 +115,7 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorBorderInputDefault: { light: '{colorGrey500}', dark: '{colorGrey550}' },
   colorBorderInputDisabled: '{colorBackgroundInputDisabled}',
   colorBorderItemFocused: { light: '{colorBlue600}', dark: '{colorBlue500}' },
+  colorBorderDropdownItemFocused: { light: '{colorGrey600}', dark: '{colorGrey300}' },
   colorBorderItemPlaceholder: '{colorBorderItemSelected}',
   colorBorderItemSelected: { light: '{colorBlue600}', dark: '{colorBlue500}' },
   colorBorderLayout: { light: '{colorGrey300}', dark: '{colorGrey650}' },
@@ -128,7 +130,7 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorBorderStatusSuccess: { light: '{colorGreen600}', dark: '{colorGreen500}' },
   colorBorderStatusWarning: { light: '{colorYellow800}', dark: '{colorYellow700}' },
   colorBorderDividerInteractiveDefault: { light: '{colorGrey500}', dark: '{colorGrey300}' },
-  colorBorderTabsDivider: { light: '{colorGrey200}', dark: '{colorGrey600}' },
+  colorBorderTabsDivider: { light: '{colorGrey350}', dark: '{colorGrey600}' },
   colorBorderTabsShadow: '{colorGreyTransparent}',
   colorBorderTabsUnderline: '{colorTextAccent}',
   colorBorderTilesDisabled: '{colorBackgroundTilesDisabled}',
@@ -143,8 +145,8 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorStrokeCodeEditorGutterActiveLineDefault: { light: '{colorGrey300}', dark: '{colorGrey750}' },
   colorStrokeCodeEditorGutterActiveLineHover: { light: '{colorGrey100}', dark: '{colorGrey900}' },
   colorTextAccent: { light: '{colorBlue600}', dark: '{colorBlue500}' },
-  colorTextBodyDefault: { light: '{colorGrey900}', dark: '{colorGrey300}' },
-  colorTextBodySecondary: { light: '{colorGrey600}', dark: '{colorGrey300}' },
+  colorTextBodyDefault: { light: '{colorGrey900}', dark: '{colorGrey350}' },
+  colorTextBodySecondary: { light: '{colorGrey600}', dark: '{colorGrey350}' },
   colorTextBreadcrumbCurrent: { light: '{colorGrey550}', dark: '{colorGrey500}' },
   colorTextBreadcrumbIcon: { light: '{colorGrey500}', dark: '{colorTextInteractiveDisabled}' },
   colorTextButtonInlineIconDefault: '{colorTextLinkDefault}',
@@ -182,21 +184,21 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorTextDropdownItemSecondary: '{colorTextFormSecondary}',
   colorTextDropdownItemSecondaryHover: { light: '{colorGrey550}', dark: '{colorGrey300}' },
   colorTextEmpty: { light: '{colorGrey550}', dark: '{colorGrey300}' },
-  colorTextExpandableSectionDefault: '{colorTextInteractiveActive}',
+  colorTextExpandableSectionDefault: { light: '{colorGrey900}', dark: '{colorGrey300}' },
   colorTextExpandableSectionHover: '{colorTextAccent}',
   colorTextExpandableSectionNavigationIconDefault: '{colorTextInteractiveDefault}',
   colorTextFormDefault: { light: '{colorGrey900}', dark: '{colorGrey300}' },
   colorTextFormLabel: '{colorTextFormDefault}',
   colorTextFormSecondary: { light: '{colorGrey550}', dark: '{colorGrey450}' },
-  colorTextGroupLabel: { light: '{colorGrey600}', dark: '{colorGrey450}' },
-  colorTextHeadingDefault: { light: '{colorGrey900}', dark: '{colorGrey200}' },
+  colorTextGroupLabel: { light: '{colorGrey600}', dark: '{colorGrey350}' },
+  colorTextHeadingDefault: { light: '{colorGrey900}', dark: '{colorGrey300}' },
   colorTextHeadingSecondary: { light: '{colorGrey600}', dark: '{colorGrey450}' },
-  colorTextHomeHeaderDefault: '{colorWhite}',
-  colorTextHomeHeaderSecondary: '{colorGrey300}',
+  colorTextHomeHeaderDefault: '{colorGrey200}',
+  colorTextHomeHeaderSecondary: '{colorGrey350}',
   colorTextIconCaret: { light: '{colorGrey500}', dark: '{colorGrey450}' },
   colorTextIconSubtle: { light: '{colorGrey550}', dark: '{colorGrey400}' },
   colorTextInputDisabled: { light: '{colorGrey400}', dark: '{colorGrey550}' },
-  colorTextInputPlaceholder: { light: '{colorGrey550}', dark: '{colorGrey500}' },
+  colorTextInputPlaceholder: { light: '{colorGrey550}', dark: '{colorGrey450}' },
   colorTextInputPlaceholderDisabled: '{colorTextInputDisabled}',
   colorTextInteractiveActive: { light: '{colorGrey900}', dark: '{colorGrey100}' },
   colorTextInteractiveDefault: { light: '{colorGrey600}', dark: '{colorGrey300}' },
diff --git a/style-dictionary/visual-refresh/contexts/header.ts b/style-dictionary/visual-refresh/contexts/header.ts
index 572888c294..6dc682451b 100644
--- a/style-dictionary/visual-refresh/contexts/header.ts
+++ b/style-dictionary/visual-refresh/contexts/header.ts
@@ -20,7 +20,6 @@ const colorTokens: StyleDictionary.ColorsDictionary = {
 };
 
 const shadowsTokens: StyleDictionary.ShadowsDictionary = {
-  shadowContainer: 'none',
   shadowFlashSticky: parentShadowsTokens.shadowFlashSticky,
   shadowPanel: parentShadowsTokens.shadowPanel,
   shadowPanelToggle: parentShadowsTokens.shadowPanelToggle,
diff --git a/style-dictionary/visual-refresh/metadata/colors.ts b/style-dictionary/visual-refresh/metadata/colors.ts
index 325a2c64c4..265c130e95 100644
--- a/style-dictionary/visual-refresh/metadata/colors.ts
+++ b/style-dictionary/visual-refresh/metadata/colors.ts
@@ -273,6 +273,11 @@ const metadata: StyleDictionary.MetadataIndex = {
     public: true,
     themeable: true,
   },
+  colorBorderDividerSecondary: {
+    description: 'The border color for row dividers. For example: row dividers for table and collection preferences.',
+    public: true,
+    themeable: true,
+  },
   colorBorderDropdownItemHover: {
     description:
       'The border color of dropdown items on hover. For example: border of hovered items in select, multiselect, autosuggest, and hovered days in datepicker.',
@@ -299,6 +304,12 @@ const metadata: StyleDictionary.MetadataIndex = {
     public: true,
     themeable: true,
   },
+  colorBorderDropdownItemFocused: {
+    description:
+      'The color of focus states for dropdown items. For example: the focus ring around selectable elements in the dropdown of button dropdown, select, and multi-select.',
+    public: true,
+    themeable: true,
+  },
   colorBorderSegmentActive: {
     description: 'The border color of the active segment in a segmented control.',
     public: true,
@@ -489,7 +500,7 @@ const metadata: StyleDictionary.MetadataIndex = {
   },
   colorTextHeadingDefault: {
     description:
-      'The default color for headings 1-5. For example: headings in tables, card collections, containers, form sections, forms, and app layout panels.',
+      'The default color for headings 2-5. For example: headings in containers, form sections, forms, and app layout panels.',
     public: true,
     themeable: true,
   },
diff --git a/style-dictionary/visual-refresh/shadows.ts b/style-dictionary/visual-refresh/shadows.ts
index c68eab9074..b64ee591d7 100644
--- a/style-dictionary/visual-refresh/shadows.ts
+++ b/style-dictionary/visual-refresh/shadows.ts
@@ -16,19 +16,19 @@ const tokens: StyleDictionary.ShadowsDictionary = {
   },
   shadowContainerActive: {
     light: '0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a',
-    dark: '0px 1px 1px 1px #192534, 0px 6px 36px #000716',
+    dark: '0px 1px 1px 1px #192534, 0px 6px 36px #00040c',
   },
-  shadowDropdown: { light: '0px 4px 20px 1px rgba(0, 7, 22, 0.10)', dark: '0px 4px 20px 1px rgba(0, 7, 22, 1)' },
+  shadowDropdown: { light: '0px 4px 20px 1px rgba(0, 7, 22, 0.10)', dark: '0px 4px 20px 1px rgba(0, 4, 12, 1)' },
   shadowDropup: '{shadowDropdown}',
   shadowFlashCollapsed: '0px 4px 4px rgba(0, 0, 0, 0.25)',
   shadowFlashSticky: {
-    light: '0px 6px 36px rgba(0, 7, 22, 0.10)',
-    dark: '0px 6px 36px rgba(0, 7, 22, 1)',
+    light: '0px 4px 8px rgba(0, 7, 22, 0.10)',
+    dark: '0px 4px 8px rgba(0, 7, 22, 0.5)',
   },
   shadowModal: '{shadowDropdown}',
   shadowPanel: {
-    light: '0px 1px 1px 1px #e9ebed, 0px 6px 36px rgba(0, 7, 22, 0.10)',
-    dark: '0px 1px 1px 1px #192534, 0px 6px 36px rgba(0, 7, 22, 1)', // 1px grey-750 faux border
+    light: '0px 0px 0px 1px #b6bec9',
+    dark: '0px 0px 0px 1px #414d5c',
   },
   shadowPanelToggle: { light: '0px 6px 12px 1px rgba(0, 7, 22, 0.12)', dark: '0px 6px 12px 1px rgba(0, 7, 22, 1)' },
   shadowPopover: '{shadowDropdown}',
@@ -40,18 +40,18 @@ const tokens: StyleDictionary.ShadowsDictionary = {
     light: '-1px 0px 1px 0px #e9ebed, -36px 6px 36px -36px rgba(0, 7, 22, 0.10)',
     dark: '-1px 0px 1px 0px #192534, -36px 6px 36px -36px rgba(0, 7, 22, 1)',
   },
-  shadowSticky: '{shadowDropdown}',
+  shadowSticky: { light: '0px 4px 8px 1px rgba(0, 7, 22, 0.10)', dark: '0px 4px 8px 1px rgba(0, 7, 22, 0.5)' },
   shadowStickyEmbedded: {
     light: '0px 2px 0px 0px #e9ebed, 0px 16px 16px -12px rgba(0, 7, 22, 0.10)', // 2px grey-200 faux bottom border
     dark: '0px 2px 0px 0px #414d5c, 0px 16px 16px -12px rgba(0, 7, 22, 1)', // 2px grey-600 faux bottom border
   },
   shadowStickyColumnFirst: {
-    light: '4px 0px 20px 1px rgba(0, 7, 22, 0.1)',
-    dark: '0px 4px 20px 1px rgba(0, 7, 22, 1)',
+    light: '4px 0px 8px 1px rgba(0, 7, 22, 0.1)',
+    dark: '0px 4px 8px 1px rgba(0, 7, 22, 0.5)',
   },
   shadowStickyColumnLast: {
-    light: '-4px 0 20px 1px rgba(0, 28, 36, 0.1)',
-    dark: '0px 4px 20px 1px rgba(0, 7, 22, 1)',
+    light: '-4px 0 8px 1px rgba(0, 28, 36, 0.1)',
+    dark: '0px 4px 8px 1px rgba(0, 7, 22, 0.5)',
   },
 };