diff --git a/dev/notification.html b/dev/notification.html
index 1d688276f38..d5e2e36a67c 100644
--- a/dev/notification.html
+++ b/dev/notification.html
@@ -8,9 +8,9 @@
     <script type="module" src="./common.js"></script>
     <script type="module">
       import '@vaadin/button';
-      import '@vaadin/checkbox-group';
-      import '@vaadin/checkbox';
       import '@vaadin/integer-field';
+      import '@vaadin/icon';
+      import '@vaadin/icons';
       import '@vaadin/select';
       import { html } from 'lit';
       import { Notification } from '@vaadin/notification';
@@ -63,10 +63,7 @@
       }
 
       const positionSelect = document.querySelector('#position');
-      positionSelect.items = [
-        { label: 'All', value: 'all' },
-        { label: 'Random', value: 'random' },
-        { component: 'hr' },
+      const positionOptions = [
         { label: 'Top Stretch', value: 'top-stretch' },
         { label: 'Top Start', value: 'top-start' },
         { label: 'Top Center', value: 'top-center' },
@@ -77,22 +74,90 @@
         { label: 'Bottom End', value: 'bottom-end' },
         { label: 'Bottom Stretch', value: 'bottom-stretch' },
       ];
-      positionSelect.value = 'random';
+      positionSelect.renderer = function (root, select) {
+        root.innerHTML = `
+          <vaadin-select-list-box>
+            <vaadin-select-item value="all">All</vaadin-select-item>
+            <vaadin-select-item value="random">Random</vaadin-select-item>
+            <hr role="separator">
+          ${positionOptions
+            .map(({ label, value }) => {
+              return `<vaadin-select-item value="${value}">${label}</vaadin-select-item>`;
+            })
+            .join('')}
+          </vaadin-select-list-box>
+        `;
+      };
+      positionSelect.value = 'top-start';
 
       const durationInput = document.querySelector('#duration');
+      durationInput.value = 0;
+
+      const styleSelect = document.querySelector('#style');
+      const styleOptions = [
+        { label: 'Neutral', value: '' },
+        { label: 'Neutral, Primary', value: 'v-primary' },
+        { label: 'Purple', value: 'aura-accent-purple' },
+        { label: 'Info', value: 'v-info' },
+        { label: 'Info, Primary', value: 'v-primary v-info' },
+        { label: 'Success', value: 'v-success' },
+        { label: 'Success, Primary', value: 'v-primary v-success' },
+        { label: 'Warning', value: 'v-warning' },
+        { label: 'Warning, Primary', value: 'v-primary v-warning' },
+        { label: 'Orange', value: 'aura-accent-orange' },
+        { label: 'Error', value: 'v-error' },
+        { label: 'Error, Primary', value: 'v-primary v-error' },
+      ].filter((style) => {
+        const theme = document.documentElement.dataset.theme;
+        if (
+          theme?.startsWith('base') ||
+          (theme?.startsWith('lumo') && style.value.startsWith('aura')) ||
+          (theme?.startsWith('aura') && style.value.startsWith('v-primary'))
+        ) {
+          return false;
+        }
+        return true;
+      });
+      styleSelect.renderer = function (root, select) {
+        root.innerHTML = `
+          <vaadin-select-list-box>
+            <vaadin-select-item value="random">Random</vaadin-select-item>
+            <hr role="separator">
+          ${styleOptions
+            .map(({ label, value }) => {
+              return `<vaadin-select-item value="${value}" class="${value}">${label}</vaadin-select-item>`;
+            })
+            .join('')}
+          </vaadin-select-list-box>
+        `;
+      };
+      styleSelect.value = 'random';
 
       function showNotification(position) {
         let notification;
 
+        let style = styleSelect.value;
+        if (style === 'random' && styleOptions.length > 0) {
+          style = styleOptions[parseInt(Math.random() * styleOptions.length)].value;
+        }
+
         const close = () => {
           notification.close();
         };
 
         notification = Notification.show(
-          html`${generateRandomSentence()} <vaadin-button @click="${close}">Close</vaadin-button>`,
+          html`<div class="content">
+              <vaadin-icon icon="vaadin:info-circle"></vaadin-icon>
+              ${generateRandomSentence()}
+            </div>
+            <div class="actions">
+              <vaadin-button @click="${close}" theme="primary">Open</vaadin-button>
+              <vaadin-button @click="${close}">Dismiss</vaadin-button>
+            </div>`,
           {
             position,
             duration: durationInput.value !== '' ? parseInt(durationInput.value) * 1000 : 1000 + Math.random() * 6000,
+            className: style,
           },
         );
       }
@@ -100,14 +165,13 @@
       document.querySelector('#show-notification').addEventListener('click', () => {
         let position = positionSelect.value;
 
-        const posOptions = positionSelect.items.slice(3);
         if (position === 'all') {
-          posOptions.forEach(({ value }) => {
+          positionOptions.forEach(({ value }) => {
             showNotification(value);
           });
         } else {
           if (position === 'random') {
-            position = posOptions[parseInt(Math.random() * posOptions.length)].value;
+            position = positionOptions[parseInt(Math.random() * positionOptions.length)].value;
           }
           showNotification(position);
         }
@@ -121,23 +185,173 @@
         justify-content: center;
       }
 
+      vaadin-select-item::part(content) {
+        position: relative;
+        display: flex;
+        align-items: center;
+        gap: var(--vaadin-gap-s);
+      }
+
+      vaadin-select-item::part(checkmark) {
+        order: 1;
+      }
+
+      vaadin-select-list-box hr {
+        margin-inline-start: 8px;
+      }
+
+      #position {
+        width: 10.5em;
+      }
+
+      #position vaadin-select-item::part(content)::before {
+        content: "";
+        width: 28px;
+        height: 20px;
+        border-radius: 4px;
+        background: var(--vaadin-background-container-strong);
+        border: 1px solid var(--vaadin-border-color-secondary);
+      }
+
+      #position vaadin-select-item:not([value="all"], [value="random"])::part(content)::after {
+        content: "";
+        position: absolute;
+        width: 10px;
+        height: 4px;
+        background: var(--vaadin-text-color-secondary);
+        top: 2px;
+        margin-left: 2px;
+        border-radius: 3px;
+      }
+
+      #position vaadin-select-item[value^="bottom"]::part(content)::after {
+        top: auto;
+        bottom: 2px;
+      }
+
+      #position vaadin-select-item:is([value$="center"], [value="middle"])::part(content)::after {
+        margin-left: 10px;
+      }
+
+      #position vaadin-select-item[value$="end"]::part(content)::after {
+        margin-left: 18px;
+      }
+
+      #position vaadin-select-item[value$="stretch"]::part(content)::after {
+        width: 26px;
+        height: 3px;
+      }
+
+      #position vaadin-select-item[value="middle"]::part(content)::after {
+        top: 9px;
+      }
+
+      #position vaadin-select-item[value="random"]::part(content)::after {
+        position: absolute;
+        content: "?";
+        color: var(--vaadin-text-color-secondary);
+        font-weight: 600;
+        width: 30px;
+        text-align: center;
+      }
+
+      #position vaadin-select-item[value="all"]::part(content)::before {
+        background: var(--vaadin-text-color-secondary);
+      }
+
+      #position vaadin-select-item[value="all"]::part(content)::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        width: 30px;
+        height: 16px;
+        border-radius: 3px;
+        border-block: 3px solid var(--vaadin-border-color);
+        background: repeating-linear-gradient(transparent 3px, currentColor 3px, currentColor 4px, transparent 4px, transparent 8px) border-box,
+        repeating-linear-gradient(-0.25turn, transparent 10px, currentColor 10px, currentColor 11px, transparent 11px, transparent 21px) content-box;
+        color: var(--vaadin-background-color);
+      }
+
       #duration {
         width: 7em;
       }
 
+      html[data-theme^="base"] #style {
+        display: none;
+      }
+
+      #style {
+        width: 8em;
+      }
+
+      #style vaadin-select-item:not([value="random"])::part(content)::before {
+        content: "";
+        background: var(--aura-accent-color, currentColor);
+        width: 0.5em;
+        height: 0.5em;
+        border-radius: 50%;
+      }
+
+      #style vaadin-select-item[value=""]::part(content)::before {
+        --aura-accent-color: var(--aura-neutral);
+        color: var(--lumo-contrast-50pct);
+      }
+
+      #style vaadin-select-item.v-info::part(content)::before {
+        color: var(--lumo-primary-color-50pct);
+      }
+
+      #style vaadin-select-item.v-warning::part(content)::before {
+        color: var(--lumo-warning-color-10pct);
+      }
+
+      #style vaadin-select-item.v-error::part(content)::before {
+        color: var(--lumo-error-color-50pct);
+      }
+
+      #style vaadin-select-item.v-success::part(content)::before {
+        color: var(--lumo-success-color-50pct);
+      }
+
+      #style vaadin-select-item.v-info.v-primary::part(content)::before {
+        color: var(--lumo-primary-color);
+      }
+
+      #style vaadin-select-item.v-warning.v-primary::part(content)::before {
+        color: var(--lumo-warning-color);
+      }
+
+      #style vaadin-select-item.v-error.v-primary::part(content)::before {
+        color: var(--lumo-error-color);
+      }
+
+      #style vaadin-select-item.v-success.v-primary::part(content)::before {
+        color: var(--lumo-success-color);
+      }
+
       vaadin-notification-card::part(content) {
-        display: grid;
-        grid-template-columns: 1fr minmax(0, auto);
+        display: flex;
         align-items: center;
-        gap: 1em;
+        gap: var(--vaadin-gap-m);
       }
 
-      vaadin-notification-card > * {
-        grid-column: 1;
+      vaadin-notification-card > .content {
+        display: flex;
+        gap: var(--vaadin-gap-s);
       }
 
-      vaadin-notification-card > vaadin-button {
-        grid-column: 2;
+      vaadin-notification-card > .actions {
+        margin-inline-start: auto;
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--vaadin-gap-xs);
+        align-self: start;
+        max-width: fit-content;
+        flex-shrink: 999;
+
+        vaadin-button {
+          flex-grow: 1;
+        }
       }
     </style>
   </head>
@@ -146,11 +360,13 @@
     <section class="section">
       <vaadin-select label="Position" id="position"></vaadin-select>
 
-      <vaadin-integer-field label="Duration" id="duration" placeholder="0–7" theme="align-right">
+      <vaadin-integer-field label="Duration" id="duration" placeholder="0–7" theme="align-right" clear-button-visible>
         <span slot="suffix">sec</span>
       </vaadin-integer-field>
 
-      <vaadin-button id="show-notification">Show</vaadin-button>
+      <vaadin-select label="Style" id="style"></vaadin-select>
+
+      <vaadin-button id="show-notification" theme="primary">Show</vaadin-button>
     </section>
   </body>
 </html>
diff --git a/packages/aura/src/color.css b/packages/aura/src/color.css
index de1dc5b800e..91461bd1626 100644
--- a/packages/aura/src/color.css
+++ b/packages/aura/src/color.css
@@ -54,7 +54,6 @@
 :where(:root),
 :where(:host),
 vaadin-app-layout > :not([slot]),
-vaadin-notification-container,
 vaadin-avatar,
 vaadin-button,
 vaadin-upload-button,
@@ -63,6 +62,9 @@ vaadin-crud-edit,
 vaadin-drawer-toggle,
 vaadin-menu-bar-button,
 vaadin-menu-bar-item,
+vaadin-notification-container,
+vaadin-notification-card,
+vaadin-notification-card::part(overlay),
 vaadin-checkbox::part(checkbox),
 vaadin-radio-button::part(radio),
 vaadin-side-nav-item::part(content),
@@ -75,7 +77,11 @@ vaadin-tab,
   .aura-accent-yellow,
   .aura-accent-green,
   .aura-accent-blue,
-  .aura-accent-purple
+  .aura-accent-purple,
+  .v-info,
+  .v-success,
+  .v-warning,
+  .v-error
 ) {
   --aura-neutral-light: oklch(
     from var(--aura-background-color-light) calc(0.2 - 0.05 * var(--aura-contrast-level)) calc(c * l * 0.8) h
@@ -197,25 +203,25 @@ vaadin-tab,
   --aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark));
 }
 
-:is(#id, .aura-accent-neutral) {
+:is(#id, .aura-accent-neutral, .v-neutral) {
   --aura-accent-color-light: var(--aura-neutral-light);
   --aura-accent-color-dark: var(--aura-neutral-dark);
   --aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark));
 }
 
-:is(#id, [theme~='danger'], [theme~='error'], .aura-accent-red) {
+:is(#id, [theme~='danger'], [theme~='error'], .aura-accent-red, .v-error) {
   --aura-accent-color-light: var(--aura-red);
   --aura-accent-color-dark: var(--aura-red);
   --aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark));
 }
 
-:is(#id, .aura-accent-green) {
+:is(#id, .aura-accent-green, .v-success) {
   --aura-accent-color-light: var(--aura-green);
   --aura-accent-color-dark: var(--aura-green);
   --aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark));
 }
 
-:is(#id, .aura-accent-yellow) {
+:is(#id, .aura-accent-yellow, .v-warning) {
   --aura-accent-color-light: var(--aura-yellow);
   --aura-accent-color-dark: var(--aura-yellow);
   --aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark));
@@ -233,7 +239,7 @@ vaadin-tab,
   --aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark));
 }
 
-:is(#id, .aura-accent-blue) {
+:is(#id, .aura-accent-blue, .v-info) {
   --aura-accent-color-light: var(--aura-blue);
   --aura-accent-color-dark: var(--aura-blue);
   --aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark));
diff --git a/packages/aura/src/components/notification.css b/packages/aura/src/components/notification.css
index fee2707ce24..a61b76f67ed 100644
--- a/packages/aura/src/components/notification.css
+++ b/packages/aura/src/components/notification.css
@@ -11,13 +11,34 @@ vaadin-notification-container {
 
 vaadin-notification-card::part(overlay) {
   --aura-surface-level: 3.5;
-  --vaadin-notification-background: var(--aura-surface-color);
+  background: var(--vaadin-notification-background, var(--aura-surface-color));
 
   /* TODO probably should be in base styles */
   /* Keeps notifications on top of MDL view transitions */
   view-transition-name: vaadin-notification;
 }
 
+vaadin-notification-card:is(
+    .aura-accent-color,
+    .aura-accent-red,
+    .aura-accent-orange,
+    .aura-accent-yellow,
+    .aura-accent-green,
+    .aura-accent-blue,
+    .aura-accent-purple,
+    .v-info,
+    .v-success,
+    .v-warning,
+    .v-error
+  )::part(overlay) {
+  --vaadin-notification-background: var(--aura-accent-surface);
+  --vaadin-icon-color: var(--aura-accent-text-color);
+  box-shadow:
+    inset 0 0 0 1px light-dark(transparent, var(--aura-accent-border-color)),
+    0 0 0 1px light-dark(var(--aura-accent-border-color), transparent),
+    var(--vaadin-notification-shadow, var(--aura-shadow-m));
+}
+
 ::view-transition-group(vaadin-notification) {
   /* Keep on top of MDL view-transition elements */
   z-index: 1;
diff --git a/packages/vaadin-lumo-styles/src/components/notification-card.css b/packages/vaadin-lumo-styles/src/components/notification-card.css
index 84bb5820efa..8edcc90837b 100644
--- a/packages/vaadin-lumo-styles/src/components/notification-card.css
+++ b/packages/vaadin-lumo-styles/src/components/notification-card.css
@@ -153,59 +153,95 @@
     --vaadin-focus-ring-color: var(--lumo-primary-contrast-color);
   }
 
-  :host([theme~='primary']) [part='overlay'] {
+  :host(:is([theme~='primary'], .v-info.v-primary)) [part='overlay'] {
     background: var(--lumo-primary-color);
     color: var(--lumo-primary-contrast-color);
     box-shadow: var(--lumo-box-shadow-l);
   }
 
-  :host([theme~='primary']) {
+  :host(:is([theme~='primary'], .v-info.v-primary)) {
     --vaadin-button-background: var(--lumo-shade-20pct);
     --vaadin-button-text-color: var(--lumo-primary-contrast-color);
     --vaadin-button-primary-background: var(--lumo-primary-contrast-color);
     --vaadin-button-primary-text-color: var(--lumo-primary-text-color);
   }
 
-  :host([theme~='contrast']) [part='overlay'] {
+  :host(.v-info) [part='overlay'] {
+    background: linear-gradient(var(--lumo-primary-color-10pct), var(--lumo-primary-color-10pct)) var(--lumo-base-color);
+    color: var(--lumo-primary-text-color);
+  }
+
+  :host(.v-info) {
+    --vaadin-button-background: var(--lumo-primary-color-10pct);
+    --vaadin-button-text-color: var(--lumo-primary-text-color);
+    --vaadin-button-primary-background: var(--lumo-primary-color);
+    --vaadin-button-primary-text-color: var(--lumo-primary-contrast-color);
+  }
+
+  :host(:is([theme~='contrast'], .v-primary)) [part='overlay'] {
     background: var(--lumo-contrast);
     color: var(--lumo-base-color);
     box-shadow: var(--lumo-box-shadow-l);
   }
 
-  :host([theme~='contrast']) {
+  :host(:is([theme~='contrast'], .v-primary)) {
     --vaadin-button-background: var(--lumo-contrast-20pct);
     --vaadin-button-text-color: var(--lumo-base-color);
     --vaadin-button-primary-background: var(--lumo-base-color);
     --vaadin-button-primary-text-color: var(--lumo-contrast);
   }
 
-  :host([theme~='success']) [part='overlay'] {
+  :host(:is([theme~='success'], .v-success.v-primary)) [part='overlay'] {
     background: var(--lumo-success-color);
     color: var(--lumo-success-contrast-color);
     box-shadow: var(--lumo-box-shadow-l);
   }
 
-  :host([theme~='success']) {
+  :host(:is([theme~='success'], .v-success.v-primary)) {
     --vaadin-button-background: var(--lumo-shade-20pct);
     --vaadin-button-text-color: var(--lumo-success-contrast-color);
     --vaadin-button-primary-background: var(--lumo-success-contrast-color);
     --vaadin-button-primary-text-color: var(--lumo-success-text-color);
   }
 
-  :host([theme~='error']) [part='overlay'] {
+  :host(.v-success) [part='overlay'] {
+    background: linear-gradient(var(--lumo-success-color-10pct), var(--lumo-success-color-10pct)) var(--lumo-base-color);
+    color: var(--lumo-success-text-color);
+  }
+
+  :host(.v-success) {
+    --vaadin-button-background: var(--lumo-success-color-10pct);
+    --vaadin-button-text-color: var(--lumo-success-text-color);
+    --vaadin-button-primary-background: var(--lumo-success-color);
+    --vaadin-button-primary-text-color: var(--lumo-success-contrast-color);
+  }
+
+  :host(:is([theme~='error'], .v-error.v-primary)) [part='overlay'] {
     background: var(--lumo-error-color);
     color: var(--lumo-error-contrast-color);
     box-shadow: var(--lumo-box-shadow-l);
   }
 
-  :host([theme~='error']) {
+  :host(:is([theme~='error'], .v-error.v-primary)) {
     --vaadin-button-background: var(--lumo-shade-20pct);
     --vaadin-button-text-color: var(--lumo-error-contrast-color);
     --vaadin-button-primary-background: var(--lumo-error-contrast-color);
     --vaadin-button-primary-text-color: var(--lumo-error-text-color);
   }
 
-  :host([theme~='warning']) [part='overlay'] {
+  :host(.v-error) [part='overlay'] {
+    background: linear-gradient(var(--lumo-error-color-10pct), var(--lumo-error-color-10pct)) var(--lumo-base-color);
+    color: var(--lumo-error-text-color);
+  }
+
+  :host(.v-error) {
+    --vaadin-button-background: var(--lumo-error-color-10pct);
+    --vaadin-button-text-color: var(--lumo-error-text-color);
+    --vaadin-button-primary-background: var(--lumo-error-color);
+    --vaadin-button-primary-text-color: var(--lumo-error-contrast-color);
+  }
+
+  :host(:is([theme~='warning'], .v-warning.v-primary)) [part='overlay'] {
     background: var(--lumo-warning-color);
     color: var(--lumo-warning-contrast-color);
     box-shadow:
@@ -213,13 +249,25 @@
       var(--lumo-box-shadow-l);
   }
 
-  :host([theme~='warning']) {
+  :host(:is([theme~='warning'], .v-warning.v-primary)) {
     --vaadin-button-background: var(--lumo-shade-20pct);
     --vaadin-button-text-color: var(--lumo-warning-contrast-color);
     --vaadin-button-primary-background: var(--lumo-shade-50pct);
     --vaadin-button-primary-text-color: var(--lumo-primary-contrast-color);
   }
 
+  :host(.v-warning) [part='overlay'] {
+    background: linear-gradient(var(--lumo-warning-color-10pct), var(--lumo-warning-color-10pct)) var(--lumo-base-color);
+    color: var(--lumo-warning-text-color);
+  }
+
+  :host(.v-warning) {
+    --vaadin-button-background: var(--lumo-warning-color-10pct);
+    --vaadin-button-text-color: var(--lumo-warning-text-color);
+    --vaadin-button-primary-background: var(--lumo-warning-color);
+    --vaadin-button-primary-text-color: var(--lumo-warning-contrast-color);
+  }
+
   @media (forced-colors: active) {
     [part='overlay'] {
       outline: 3px solid;