diff --git a/app/lib/shared/markdown.dart b/app/lib/shared/markdown.dart
index c16867f4e0..bcc21a599c 100644
--- a/app/lib/shared/markdown.dart
+++ b/app/lib/shared/markdown.dart
@@ -29,6 +29,7 @@ const _whitelistedClassNames = <String>[
   'changelog-content',
   'hash-header',
   'hash-link',
+  'markdown-alert',
   'report-summary-icon',
 ];
 
@@ -115,6 +116,7 @@ String _renderSafeHtml(
         !disableHashIds, // TODO: Use a denylist for ids used by pub site
     allowClassName: (String cn) {
       if (cn.startsWith('language-')) return true;
+      if (cn.startsWith('markdown-alert-')) return true;
       return _whitelistedClassNames.contains(cn);
     },
     addLinkRel: (String url) {
diff --git a/app/test/shared/markdown_test.dart b/app/test/shared/markdown_test.dart
index 7031d21845..38f0f23b56 100644
--- a/app/test/shared/markdown_test.dart
+++ b/app/test/shared/markdown_test.dart
@@ -403,4 +403,17 @@ void main() {
       );
     });
   });
+
+  group('alert blocks', () {
+    test('note', () {
+      final output = markdownToHtml('> [!NOTE]\n> Extra information.');
+      expect(output.split('\n').toList(), [
+        '<div class="markdown-alert markdown-alert-note">',
+        '<p class="markdown-alert-title">Note</p>',
+        '<p>Extra information.</p>',
+        '</div>',
+        '',
+      ]);
+    });
+  });
 }
diff --git a/pkg/web_css/lib/src/_alerts.scss b/pkg/web_css/lib/src/_alerts.scss
new file mode 100644
index 0000000000..78b1a0f3a0
--- /dev/null
+++ b/pkg/web_css/lib/src/_alerts.scss
@@ -0,0 +1,79 @@
+/* Copyright (c) 2024, the Dart project authors.  Please see the AUTHORS file
+   for details. All rights reserved. Use of this source code is governed by a
+   BSD-style license that can be found in the LICENSE file. */
+
+.markdown-alert {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  padding: 1.25rem;
+
+  >:last-child {
+    margin-bottom: 0;
+  }
+
+  &.markdown-alert-note {
+    background-color: var(--pub-markdown-alert-info);
+
+    // NOTE: This is a copy of the dartdoc alert style, for using Material Symbols font.
+    // TODO: remove or fix this rule
+    // .markdown-alert-title:before {
+    //   content: 'info';
+    // }
+  }
+
+  &.markdown-alert-tip {
+    background-color: var(--pub-markdown-alert-tip);
+
+    // NOTE: This is a copy of the dartdoc alert style, for using Material Symbols font.
+    // TODO: remove or fix this rule
+    // .markdown-alert-title:before {
+    //   content: 'lightbulb';
+    // }
+  }
+
+  &.markdown-alert-important {
+    background-color: var(--pub-markdown-alert-important);
+
+    // NOTE: This is a copy of the dartdoc alert style, for using Material Symbols font.
+    // TODO: remove or fix this rule
+    // .markdown-alert-title:before {
+    //   content: 'feedback';
+    // }
+  }
+
+  &.markdown-alert-warning {
+    background-color: var(--pub-markdown-alert-warning);
+
+    // NOTE: This is a copy of the dartdoc alert style, for using Material Symbols font.
+    // TODO: remove or fix this rule
+    // .markdown-alert-title:before {
+    //   content: 'warning';
+    // }
+  }
+
+  &.markdown-alert-caution {
+    background-color: var(--pub-markdown-alert-error);
+
+    // NOTE: This is a copy of the dartdoc alert style, for using Material Symbols font.
+    // TODO: remove or fix this rule
+    // .markdown-alert-title:before {
+    //   content: 'report';
+    // }
+  }
+}
+
+.markdown-alert-title {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin-bottom: 0.5rem;
+
+  font-weight: bold;
+  -webkit-font-smoothing: antialiased;
+
+  // NOTE: This is a copy of the dartdoc alert style, for using Material Symbols font.
+  // TODO: remove or fix this rule
+  // &:before {
+  //   font: 24px / 1 'Material Symbols Outlined';
+  // }
+}
diff --git a/pkg/web_css/lib/src/_variables.scss b/pkg/web_css/lib/src/_variables.scss
index 3ad73495c6..c3d279e05d 100644
--- a/pkg/web_css/lib/src/_variables.scss
+++ b/pkg/web_css/lib/src/_variables.scss
@@ -31,6 +31,13 @@
   --pub-inset-bgColor:         var(--pub-color-smokeWhite);
   --pub-selected-bgColor:      var(--pub-color-bubblesBlue);
 
+  // TODO: adjust colors (copied from dartdoc style) to blend in better with the pub.dev design
+  --pub-markdown-alert-info: #e7f8ff;
+  --pub-markdown-alert-tip: #ecfaf7;
+  --pub-markdown-alert-important: #e2dbff;
+  --pub-markdown-alert-warning: #fcf8e3;
+  --pub-markdown-alert-error: #fde9ee;
+
   --pub-default-headline-font_family: "Google Sans Display", "Google Sans", "Roboto", sans-serif;
   --pub-default-text-font_family: "Google Sans Text", "Google Sans", "Roboto", sans-serif;
   --pub-code-text-color: var(--pub-neutral-textColor);
@@ -116,6 +123,13 @@
   --pub-inset-bgColor:         var(--pub-color-anchorBlack);
   --pub-selected-bgColor:      var(--pub-color-nipponUltraBlue);
 
+  // TODO: adjust colors (copied from dartdoc style) to blend in better with the pub.dev design
+  --pub-markdown-alert-info: #043875;
+  --pub-markdown-alert-tip: #065517;
+  --pub-markdown-alert-important: #4a00b4;
+  --pub-markdown-alert-warning: #7b6909;
+  --pub-markdown-alert-error: #7a0c17;
+
   --pub-code-text-color: var(--pub-neutral-textColor);
   --pub-link-text-color: #40c4ff;
   --pub-badge-default-color: var(--pub-link-text-color);
diff --git a/pkg/web_css/lib/style.scss b/pkg/web_css/lib/style.scss
index 07a29c44d1..d0ea552b62 100644
--- a/pkg/web_css/lib/style.scss
+++ b/pkg/web_css/lib/style.scss
@@ -1,7 +1,6 @@
 // Include third-party CSS into a single output file
 // to reduce the number of HTTP requests.
 @use '../../../third_party/css/github-markdown.css';
-@use '../../../third_party/css/dartdoc-github-alert.css';
 
 .light-theme {
   @import "../../../third_party/highlight/github";
@@ -14,6 +13,7 @@
 // Local styles and rules.
 @import 'src/_variables';
 @import 'src/_base';
+@import 'src/_alerts';
 @import 'src/_site_header';
 @import 'src/_activity_log';
 @import 'src/_detail_page';
diff --git a/pkg/web_css/test/dartdoc_github_alert_test.dart b/pkg/web_css/test/dartdoc_github_alert_test.dart
deleted file mode 100644
index 1f0dd68473..0000000000
--- a/pkg/web_css/test/dartdoc_github_alert_test.dart
+++ /dev/null
@@ -1,17 +0,0 @@
-// Copyright (c) 2024, the Dart project authors.  Please see the AUTHORS file
-// for details. All rights reserved. Use of this source code is governed by a
-// BSD-style license that can be found in the LICENSE file.
-
-import 'dart:io';
-
-import 'package:test/test.dart';
-
-void main() {
-  test('The style from dartdoc are copied over.', () {
-    final included = File('../../third_party/css/dartdoc-github-alert.css')
-        .readAsStringSync();
-    final dartdocStyles = File('../../third_party/dartdoc/resources/styles.css')
-        .readAsStringSync();
-    expect(dartdocStyles, contains(included));
-  });
-}
diff --git a/pkg/web_css/test/expression_test.dart b/pkg/web_css/test/expression_test.dart
index 0d50631d8e..3cfe8d8454 100644
--- a/pkg/web_css/test/expression_test.dart
+++ b/pkg/web_css/test/expression_test.dart
@@ -54,10 +54,18 @@ void main() {
         'cookie-notice-container',
         'cookie-notice-button',
       ]);
+      // markdown alert classes
+      expressions.removeAll([
+        'markdown-alert-note',
+        'markdown-alert-tip',
+        'markdown-alert-important',
+        'markdown-alert-warning',
+        'markdown-alert-caution',
+        'markdown-alert-title',
+      ]);
 
       // remove third-party css expressions
       final thirdPartyCss = [
-        '../../third_party/css/dartdoc-github-alert.css',
         '../../third_party/css/github-markdown.css',
         '../../third_party/highlight/github.css',
         '../../third_party/highlight/github-dark.css',
diff --git a/third_party/css/dartdoc-github-alert.css b/third_party/css/dartdoc-github-alert.css
deleted file mode 100644
index efbde51637..0000000000
--- a/third_party/css/dartdoc-github-alert.css
+++ /dev/null
@@ -1,41 +0,0 @@
-/* note, tip, important, warning, caution */
-
-.markdown-alert.markdown-alert-note {
-  background-color: var(--alert-info);
-}
-
-.markdown-alert-note .markdown-alert-title:before {
-  content: 'info';
-}
-
-.markdown-alert.markdown-alert-tip {
-  background-color: var(--alert-tip);
-}
-
-.markdown-alert-tip .markdown-alert-title:before {
-  content: 'lightbulb';
-}
-
-.markdown-alert.markdown-alert-important {
-  background-color: var(--alert-important);
-}
-
-.markdown-alert-important .markdown-alert-title:before {
-  content: 'feedback';
-}
-
-.markdown-alert.markdown-alert-warning {
-  background-color: var(--alert-warning);
-}
-
-.markdown-alert-warning .markdown-alert-title:before {
-  content: 'warning';
-}
-
-.markdown-alert.markdown-alert-caution {
-  background-color: var(--alert-error);
-}
-
-.markdown-alert-caution .markdown-alert-title:before {
-  content: 'report';
-}