diff --git a/src/components/alert/alert.styles.ts b/src/components/alert/alert.styles.ts
index 884230c..e37d414 100644
--- a/src/components/alert/alert.styles.ts
+++ b/src/components/alert/alert.styles.ts
@@ -3,85 +3,38 @@ import { css } from 'lit';
 export default css`
   :host {
     display: contents;
-
-    /* For better DX, we'll reset the margin here so the base part can inherit it */
     margin: 0;
   }
 
   .alert {
     position: relative;
+    width: 100%;
     display: flex;
     align-items: stretch;
-    background-color: var(--sl-panel-background-color);
-    border: solid var(--sl-panel-border-width) var(--sl-panel-border-color);
-    border-top-width: calc(var(--sl-panel-border-width) * 3);
+    background-color: var(--sl-color-neutral-0);
+    border: solid var(--sl-panel-border-width) var(--sl-color-neutral-200);
     border-radius: var(--sl-border-radius-medium);
     font-family: var(--sl-font-sans);
-    font-size: var(--sl-font-size-small);
-    font-weight: var(--sl-font-weight-normal);
+    font-size: var(--sl-font-size-sm);
     line-height: 1.6;
-    color: var(--sl-color-neutral-700);
+    color: var(--sl-color-neutral-900);
     margin: inherit;
-  }
-
-  .alert:not(.alert--has-icon) .alert__icon,
-  .alert:not(.alert--closable) .alert__close-button {
-    display: none;
+    padding: var(--sl-spacing-medium) var(--sl-spacing-large);
   }
 
   .alert__icon {
     flex: 0 0 auto;
     display: flex;
     align-items: center;
-    font-size: var(--sl-font-size-large);
-    padding-inline-start: var(--sl-spacing-large);
-  }
-
-  .alert--primary {
-    border-top-color: var(--sl-color-primary-600);
-  }
-
-  .alert--primary .alert__icon {
-    color: var(--sl-color-primary-600);
-  }
-
-  .alert--success {
-    border-top-color: var(--sl-color-success-600);
-  }
-
-  .alert--success .alert__icon {
-    color: var(--sl-color-success-600);
-  }
-
-  .alert--neutral {
-    border-top-color: var(--sl-color-neutral-600);
-  }
-
-  .alert--neutral .alert__icon {
-    color: var(--sl-color-neutral-600);
-  }
-
-  .alert--warning {
-    border-top-color: var(--sl-color-warning-600);
-  }
-
-  .alert--warning .alert__icon {
-    color: var(--sl-color-warning-600);
-  }
-
-  .alert--danger {
-    border-top-color: var(--sl-color-danger-600);
-  }
-
-  .alert--danger .alert__icon {
-    color: var(--sl-color-danger-600);
+    font-size: var(--sl-font-size-lg);
+    padding-inline-end: var(--sl-spacing-medium);
   }
 
   .alert__message {
     flex: 1 1 auto;
     display: block;
-    padding: var(--sl-spacing-large);
     overflow: hidden;
+    padding-inline-start: var(--sl-spacing-small);
   }
 
   .alert__close-button {
@@ -89,6 +42,58 @@ export default css`
     display: flex;
     align-items: center;
     font-size: var(--sl-font-size-medium);
-    padding-inline-end: var(--sl-spacing-medium);
+    padding-inline-start: var(--sl-spacing-medium);
+  }
+
+  /* Variants */
+  .alert--default {
+    background-color: var(--sl-color-neutral-0);
+    border-color: var(--sl-color-neutral-200);
+    color: var(--sl-color-neutral-900);
+  }
+
+  .alert--danger {
+    border-color: var(--sl-color-danger-300);
+    color: var(--sl-color-danger-600);
+  }
+
+  .alert--danger .alert__icon {
+    color: var(--sl-color-danger-600);
+  }
+
+  /* Title styles */
+  ::slotted([slot='title']) {
+    margin-bottom: var(--sl-spacing-3x-small);
+    font-size: var(--sl-font-size-sm);
+    font-weight: var(--sl-font-weight-semibold);
+    line-height: 1;
+    letter-spacing: var(--sl-letter-spacing-tight);
+  }
+
+  /* Description styles */
+  ::slotted(:not([slot='title'])) {
+    font-size: var(--sl-font-size-sm);
+    line-height: 1.6;
+  }
+
+  /* Icon positioning */
+  .alert--has-icon {
+    padding-inline-start: var(--sl-spacing-large);
+  }
+
+  .alert--has-icon .alert__icon {
+    position: absolute;
+    left: var(--sl-spacing-large);
+    top: var(--sl-spacing-large);
+  }
+
+  .alert--has-icon .alert__message {
+    padding-inline-start: var(--sl-spacing-2x-large);
+  }
+
+  /* Remove icon and close button when not needed */
+  .alert:not(.alert--has-icon) .alert__icon,
+  .alert:not(.alert--closable) .alert__close-button {
+    display: none;
   }
 `;