diff --git a/frontend/playwright/ui/visual-specs/visual-dashboard.spec.js b/frontend/playwright/ui/visual-specs/visual-dashboard.spec.js
index d4563b69d2..007092884f 100644
--- a/frontend/playwright/ui/visual-specs/visual-dashboard.spec.js
+++ b/frontend/playwright/ui/visual-specs/visual-dashboard.spec.js
@@ -672,3 +672,39 @@ test.describe("Templates section controls", () => {
     );
   });
 });
+
+test.describe("Context notification", () => {
+  const shot = { maxDiffPixelRatio: 0, threshold: 0 };
+
+  test("Info and warning levels", async ({ page }) => {
+    await page.goto("/?screen=settings-profile");
+
+    // Info: the change email modal.
+    await page.getByText("Change email", { exact: true }).click();
+    const info = page.locator("[class*='modal-container'] aside");
+    await expect(info).toBeVisible();
+    await expect(info).toHaveScreenshot(shot);
+    await page.keyboard.press("Escape");
+    await expect(info).toBeHidden();
+
+    // Warning: the delete account modal.
+    await page.getByText("Want to remove your account?").click();
+    const warning = page.locator("[class*='modal-container'] aside");
+    await expect(warning).toBeVisible();
+    await expect(warning).toHaveScreenshot(shot);
+  });
+
+  test("Warning with html content", async ({ page }) => {
+    const dashboardPage = new DashboardPage(page);
+    await dashboardPage.goToDashboard();
+    await dashboardPage.fontsLink.click();
+    await page
+      .locator("#font-upload")
+      .setInputFiles("playwright/data/render-wasm/assets/ebgaramond.ttf");
+    const warning = page
+      .locator("[class*='dashboard-fonts-hero'] aside")
+      .last();
+    await expect(warning).toBeVisible();
+    await expect(warning).toHaveScreenshot(shot);
+  });
+});
diff --git a/frontend/src/app/main/ui/notifications/context_notification.cljs b/frontend/src/app/main/ui/notifications/context_notification.cljs
index 923a4958a3..9455f284c2 100644
--- a/frontend/src/app/main/ui/notifications/context_notification.cljs
+++ b/frontend/src/app/main/ui/notifications/context_notification.cljs
@@ -10,29 +10,16 @@
    [app.common.data :as d]
    [app.common.data.macros :as dm]
    [app.main.ui.components.link-button :as lb]
-   [app.main.ui.icons :as deprecated-icon]
+   [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
    [rumext.v2 :as mf]))
 
-(def ^:private neutral-icon
-  (deprecated-icon/icon-xref :msg-neutral (stl/css :icon)))
-
-(def ^:private error-icon
-  (deprecated-icon/icon-xref :delete-text (stl/css :icon)))
-
-(def ^:private success-icon
-  (deprecated-icon/icon-xref :status-tick (stl/css :icon)))
-
-(def ^:private info-icon
-  (deprecated-icon/icon-xref :help (stl/css :icon)))
-
-(defn get-icon-by-level
+(defn- level->icon-id
   [level]
   (case level
-    :warning neutral-icon
-    :error error-icon
-    :success success-icon
-    :info info-icon
-    neutral-icon))
+    :error   i/delete-text
+    :success i/status-tick
+    :info    i/help
+    i/msg-neutral))
 
 (mf/defc context-notification
   "They are persistent, informative and non-actionable.
@@ -49,7 +36,8 @@
                                  :success      (= level :success)
                                  :info         (= level :info)))}
 
-   (get-icon-by-level level)
+   [:> icon* {:icon-id (level->icon-id level)
+              :class (stl/css :icon)}]
 
    ;; The content can arrive in markdown format, in these cases
    ;;  we will use the prop is-html to true to indicate it and
diff --git a/frontend/src/app/main/ui/notifications/context_notification.scss b/frontend/src/app/main/ui/notifications/context_notification.scss
index e4cb80b794..cd8de495c1 100644
--- a/frontend/src/app/main/ui/notifications/context_notification.scss
+++ b/frontend/src/app/main/ui/notifications/context_notification.scss
@@ -4,71 +4,65 @@
 //
 // Copyright (c) KALEIDOS SUBSIDIARY SL
 
-@use "refactor/common-refactor.scss" as deprecated;
+@use "ds/_borders.scss" as *;
+@use "ds/_sizes.scss" as *;
+@use "ds/typography.scss" as *;
 
 .context-notification {
-  --context-notification-bg-color: var(--alert-background-color-default);
-  --context-notification-fg-color: var(--alert-text-foreground-color-default);
-  --context-notification-icon-color: var(--alert-icon-foreground-color-default);
-  --context-notification-border-color: var(--alert-border-color-default);
+  --context-notification-bg-color: var(--color-background-primary);
+  --context-notification-fg-color: var(--color-foreground-primary);
+  --context-notification-icon-color: var(--color-foreground-primary);
+  --context-notification-border-color: var(--color-background-quaternary);
 
   box-sizing: border-box;
   display: grid;
-  grid-template-columns: deprecated.$s-16 1fr;
-  gap: deprecated.$s-8;
-  min-height: deprecated.$s-32;
-  height: fit-content;
-  width: 100%;
-  padding: deprecated.$s-8;
-  border: deprecated.$s-1 solid var(--context-notification-border-color);
-  border-radius: deprecated.$br-8;
+  grid-template-columns: $sz-16 1fr;
+  gap: var(--sp-s);
+  min-block-size: $sz-32;
+  block-size: fit-content;
+  inline-size: 100%;
+  padding: var(--sp-s);
+  border: $b-1 solid var(--context-notification-border-color);
+  border-radius: $br-8;
   background-color: var(--context-notification-bg-color);
 }
 
 .warning {
-  --context-notification-bg-color: var(--alert-background-color-warning);
-  --context-notification-fg-color: var(--alert-text-foreground-color-warning);
-  --context-notification-icon-color: var(--alert-icon-foreground-color-warning);
-  --context-notification-border-color: var(--alert-border-color-warning);
+  --context-notification-bg-color: var(--color-background-warning);
+  --context-notification-fg-color: var(--color-foreground-primary);
+  --context-notification-icon-color: var(--color-accent-warning);
+  --context-notification-border-color: var(--color-accent-warning);
 }
 
 .success {
-  --context-notification-bg-color: var(--alert-background-color-success);
-  --context-notification-fg-color: var(--alert-text-foreground-color-success);
-  --context-notification-icon-color: var(--alert-icon-foreground-color-success);
-  --context-notification-border-color: var(--alert-border-color-success);
+  --context-notification-bg-color: var(--color-background-success);
+  --context-notification-fg-color: var(--color-foreground-primary);
+  --context-notification-icon-color: var(--color-accent-success);
+  --context-notification-border-color: var(--color-accent-success);
 }
 
 .info {
-  --context-notification-bg-color: var(--alert-background-color-info);
-  --context-notification-fg-color: var(--alert-text-foreground-color-info);
-  --context-notification-icon-color: var(--alert-icon-foreground-color-info);
-  --context-notification-border-color: var(--alert-border-color-info);
-}
-
-.default {
-  --context-notification-bg-color: var(--alert-background-color-default);
-  --context-notification-fg-color: var(--alert-text-foreground-color-default);
-  --context-notification-icon-color: var(--alert-icon-foreground-color-default);
-  --context-notification-border-color: var(--alert-border-color-default);
+  --context-notification-bg-color: var(--color-background-info);
+  --context-notification-fg-color: var(--color-foreground-primary);
+  --context-notification-icon-color: var(--color-accent-info);
+  --context-notification-border-color: var(--color-accent-info);
 }
 
 .error {
-  --context-notification-bg-color: var(--alert-background-color-error);
-  --context-notification-fg-color: var(--alert-text-foreground-color-error);
-  --context-notification-icon-color: var(--alert-icon-foreground-color-error);
-  --context-notification-border-color: var(--alert-border-color-error);
+  --context-notification-bg-color: var(--color-background-error);
+  --context-notification-fg-color: var(--color-foreground-primary);
+  --context-notification-icon-color: var(--color-accent-error);
+  --context-notification-border-color: var(--color-accent-error);
 }
 
 .icon {
-  @extend %button-icon;
-
+  flex-shrink: 0;
   align-self: self-start;
-  stroke: var(--context-notification-icon-color);
+  color: var(--context-notification-icon-color);
 }
 
 .context-text {
-  @include deprecated.body-small-typography;
+  @include use-typography("body-small");
 
   align-self: center;
   color: var(--context-notification-fg-color);
@@ -81,12 +75,12 @@
 
 .link,
 .contain-html .context-text a {
-  @include deprecated.body-small-typography;
+  @include use-typography("body-small");
 
   align-self: center;
   display: inline;
-  text-align: left;
-  height: deprecated.$s-16;
+  text-align: start;
+  block-size: $sz-16;
   margin: 0;
-  color: var(--modal-link-foreground-color);
+  color: var(--color-accent-primary);
 }