diff --git a/docs/src/pages/components/Button.svx b/docs/src/pages/components/Button.svx
index efe7681d..7edd934f 100644
--- a/docs/src/pages/components/Button.svx
+++ b/docs/src/pages/components/Button.svx
@@ -37,7 +37,7 @@
 
 ### Danger tertiary, icon-only button
 
-<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
+<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
   <div class="body-short-01">
     You must provide an <strong>iconDescription</strong> for the button tooltip.
   </div>
@@ -55,7 +55,7 @@
 
 ### Icon-only button
 
-<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
+<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
   <div class="body-short-01">
     You must provide an <strong>iconDescription</strong> for the button tooltip.
   </div>
@@ -131,7 +131,7 @@ If an `href` value is specified, the component will render an [anchor element](h
 
 Set `expressive` to `true` to use Carbon's expressive typesetting.
 
-<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
+<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
   <div class="body-short-01">
     Expressive styles only work with the default, "lg", and "xl" button sizes.
   </div>
diff --git a/docs/src/pages/components/Checkbox.svx b/docs/src/pages/components/Checkbox.svx
index a389340e..12be8a0d 100644
--- a/docs/src/pages/components/Checkbox.svx
+++ b/docs/src/pages/components/Checkbox.svx
@@ -33,7 +33,7 @@ The `checked` prop supports two-way binding.
 
 An alternative to `checked` is binding an array of values using `group`. This API in inspired by Svelte [group inputs]([group](https://svelte.dev/tutorial/group-inputs)).
 
-<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
+<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
   <div class="body-short-01">
     If using <strong>bind:group</strong>, <strong>bind:checked</strong> will only support one-way binding.
   </div>
diff --git a/docs/src/pages/components/ComboBox.svx b/docs/src/pages/components/ComboBox.svx
index 15466601..b5d11af5 100644
--- a/docs/src/pages/components/ComboBox.svx
+++ b/docs/src/pages/components/ComboBox.svx
@@ -3,7 +3,7 @@
   import Preview from "../../components/Preview.svelte";
 </script>
 
-<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
+<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
   <div class="body-short-01">
     Since version 0.53, <strong>selectedIndex</strong> has been replaced with <strong>selectedId</strong>.
   </div>
diff --git a/docs/src/pages/components/DataTable.svx b/docs/src/pages/components/DataTable.svx
index 45fd46cd..6828a2e9 100644
--- a/docs/src/pages/components/DataTable.svx
+++ b/docs/src/pages/components/DataTable.svx
@@ -12,11 +12,11 @@ components: ["DataTable", "Pagination","Toolbar", "ToolbarContent", "ToolbarSear
 
 `DataTable` is keyed for both rendering and sorting purposes.
 
-<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
+<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
   <div class="body-short-01">Every <code>headers</code> object must have a unique "key" property.</div>
 </InlineNotification>
 
-<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
+<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
   <div class="body-short-01">Every <code>rows</code> object must have a unique "id" property.</div>
 </InlineNotification>
 
diff --git a/docs/src/pages/components/DatePicker.svx b/docs/src/pages/components/DatePicker.svx
index e142a8ae..732690a8 100644
--- a/docs/src/pages/components/DatePicker.svx
+++ b/docs/src/pages/components/DatePicker.svx
@@ -63,7 +63,7 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"]
 
 ### Single
 
-<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
+<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
   <div class="body-short-01">
     If using Rollup, specify <strong>inlineDynamicImports: true</strong> in your <strong>rollup.config.js</strong>.
   </div>
diff --git a/docs/src/pages/components/Dropdown.svx b/docs/src/pages/components/Dropdown.svx
index a7a3413f..d93ce89b 100644
--- a/docs/src/pages/components/Dropdown.svx
+++ b/docs/src/pages/components/Dropdown.svx
@@ -7,7 +7,7 @@ components: ["Dropdown", "DropdownSkeleton"]
   import Preview from "../../components/Preview.svelte";
 </script>
 
-<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
+<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
   <div class="body-short-01">
     Since version 0.53, <strong>selectedIndex</strong> has been replaced with <strong>selectedId</strong>.
   </div>
diff --git a/docs/src/pages/components/Icon.svx b/docs/src/pages/components/Icon.svx
index 802fe427..c034ce0e 100644
--- a/docs/src/pages/components/Icon.svx
+++ b/docs/src/pages/components/Icon.svx
@@ -7,7 +7,7 @@
   import Preview from "../../components/Preview.svelte";
 </script>
 
-<InlineNotification svx-ignore title="Deprecation warning" kind="warning" hideCloseButton>
+<InlineNotification svx-ignore lowContrast title="Deprecation warning" kind="warning" hideCloseButton>
   <div>
     This component will be removed in the next major release. Use icons from <OutboundLink href="https://github.com/carbon-design-system/carbon-icons-svelte">carbon-icons-svelte</OutboundLink> instead.
   </div>
diff --git a/docs/src/pages/components/OrderedList.svx b/docs/src/pages/components/OrderedList.svx
index 9cc58175..3178257e 100644
--- a/docs/src/pages/components/OrderedList.svx
+++ b/docs/src/pages/components/OrderedList.svx
@@ -7,7 +7,7 @@ components: ["OrderedList", "ListItem"]
   import Preview from "../../components/Preview.svelte";
 </script>
 
-<InlineNotification svx-ignore title="Tip:" kind="info" hideCloseButton>
+<InlineNotification svx-ignore lowContrast title="Tip:" kind="info" hideCloseButton>
   <div class="body-short-01">
     Consider using the <Link href="/components/RecursiveList#ordered">RecursiveList</Link> component for rendering tree structured data.
    </div>
diff --git a/docs/src/pages/components/RecursiveList.svx b/docs/src/pages/components/RecursiveList.svx
index 8b6d7412..e1bc3dbc 100644
--- a/docs/src/pages/components/RecursiveList.svx
+++ b/docs/src/pages/components/RecursiveList.svx
@@ -7,7 +7,7 @@ This component uses the [svelte:self API](https://svelte.dev/docs#svelte_self) t
 
 A child node can render text, a link, HTML content, and other children.
 
-<InlineNotification svx-ignore title="Warning:" kind="warning" hideCloseButton>
+<InlineNotification svx-ignore lowContrast title="Warning:" kind="warning" hideCloseButton>
   <div class="body-short-01">
     HTML content provided via the <code>html</code> prop is not sanitized.
   </div>
diff --git a/docs/src/pages/components/ToggleSmall.svx b/docs/src/pages/components/ToggleSmall.svx
index 26230d05..dfa8cbde 100644
--- a/docs/src/pages/components/ToggleSmall.svx
+++ b/docs/src/pages/components/ToggleSmall.svx
@@ -7,7 +7,7 @@ components: ["ToggleSmall", "ToggleSmallSkeleton"]
   import Preview from "../../components/Preview.svelte";
 </script>
 
-<InlineNotification svx-ignore title="Deprecation warning" kind="warning" hideCloseButton>
+<InlineNotification svx-ignore lowContrast title="Deprecation warning" kind="warning" hideCloseButton>
   <div>
     This component will be removed in the next major release. Use the <Link href="/components/Toggle#small-size">Toggle small variant</Link> instead.
   </div>
diff --git a/docs/src/pages/components/TreeView.svx b/docs/src/pages/components/TreeView.svx
index d97b5057..99fa7a2a 100644
--- a/docs/src/pages/components/TreeView.svx
+++ b/docs/src/pages/components/TreeView.svx
@@ -11,7 +11,7 @@ Optional properties include `disabled`, `expanded`, `icon`, and `children`.
 
 A parent node contains `children` while a leaf node does not.
 
-<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
+<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
   <div class="body-short-01">Every node must have a unique id.</div>
 </InlineNotification>
 
diff --git a/docs/src/pages/components/UnorderedList.svx b/docs/src/pages/components/UnorderedList.svx
index 2eea512e..b4d4570f 100644
--- a/docs/src/pages/components/UnorderedList.svx
+++ b/docs/src/pages/components/UnorderedList.svx
@@ -7,7 +7,7 @@ components: ["UnorderedList", "ListItem"]
   import Preview from "../../components/Preview.svelte";
 </script>
 
-<InlineNotification svx-ignore title="Tip:" kind="info" hideCloseButton>
+<InlineNotification svx-ignore lowContrast title="Tip:" kind="info" hideCloseButton>
   <div class="body-short-01">
    Consider using the <Link href="/components/RecursiveList#unordered">RecursiveList</Link> component for rendering tree structured data.
   </div>