diff --git a/web/packages/design/src/theme/themes/bblpTheme.ts b/web/packages/design/src/theme/themes/bblpTheme.ts
index 5d85f5e47e80b..73ae204675052 100644
--- a/web/packages/design/src/theme/themes/bblpTheme.ts
+++ b/web/packages/design/src/theme/themes/bblpTheme.ts
@@ -98,6 +98,22 @@ const colors: ThemeColors = {
         'rgba(0, 162, 35, 0.18)',
         'rgba(0, 162, 35, 0.25)',
       ],
+      // TODO rudream: update bblp interactive tonal colors.
+      danger: [
+        'rgba(255, 98, 87, 0.1)',
+        'rgba(255, 98, 87, 0.18)',
+        'rgba(255, 98, 87, 0.25)',
+      ],
+      alert: [
+        'rgba(255, 171, 0, 0.1)',
+        'rgba(255, 171, 0, 0.18)',
+        'rgba(255, 171, 0, 0.25)',
+      ],
+      informational: [
+        'rgba(0, 158, 255, 0.1)',
+        'rgba(0, 158, 255, 0.18)',
+        'rgba(0, 158, 255, 0.25)',
+      ],
     },
   },
 
@@ -171,6 +187,13 @@ const colors: ThemeColors = {
     active: '#D64D22',
   },
 
+  // TODO rudream: update bblp accent colors.
+  accent: {
+    main: 'rgba(0, 158, 255, 1)',
+    hover: 'rgba(51, 177, 255, 1)',
+    active: 'rgba(102, 197, 255, 1)',
+  },
+
   notice: {
     background: '#282828', // elevated
   },
diff --git a/web/packages/design/src/theme/themes/darkTheme.ts b/web/packages/design/src/theme/themes/darkTheme.ts
index 8affb9e62a97e..76a12400f14e1 100644
--- a/web/packages/design/src/theme/themes/darkTheme.ts
+++ b/web/packages/design/src/theme/themes/darkTheme.ts
@@ -98,6 +98,21 @@ const colors: ThemeColors = {
         'rgba(0, 191, 166, 0.18)',
         'rgba(0, 191, 166, 0.25)',
       ],
+      danger: [
+        'rgba(255, 98, 87, 0.1)',
+        'rgba(255, 98, 87, 0.18)',
+        'rgba(255, 98, 87, 0.25)',
+      ],
+      alert: [
+        'rgba(255, 171, 0, 0.1)',
+        'rgba(255, 171, 0, 0.18)',
+        'rgba(255, 171, 0, 0.25)',
+      ],
+      informational: [
+        'rgba(0, 158, 255, 0.1)',
+        'rgba(0, 158, 255, 0.18)',
+        'rgba(0, 158, 255, 0.25)',
+      ],
     },
   },
 
@@ -177,6 +192,12 @@ const colors: ThemeColors = {
     active: '#66D9CA',
   },
 
+  accent: {
+    main: 'rgba(0, 158, 255, 1)',
+    hover: 'rgba(51, 177, 255, 1)',
+    active: 'rgba(102, 197, 255, 1)',
+  },
+
   notice: {
     background: '#344179', // elevated
   },
diff --git a/web/packages/design/src/theme/themes/lightTheme.ts b/web/packages/design/src/theme/themes/lightTheme.ts
index f2c36d62ec0d6..2a57fd47c3821 100644
--- a/web/packages/design/src/theme/themes/lightTheme.ts
+++ b/web/packages/design/src/theme/themes/lightTheme.ts
@@ -93,6 +93,21 @@ const colors: ThemeColors = {
         'rgba(0, 125, 107, 0.18)',
         'rgba(0, 125, 107, 0.25)',
       ],
+      danger: [
+        'rgba(204, 55, 45, 0.1)',
+        'rgba(204, 55, 45, 0.18)',
+        'rgba(204, 55, 45, 0.25)',
+      ],
+      alert: [
+        'rgba(255, 171, 0, 0.1)',
+        'rgba(255, 171, 0, 0.18)',
+        'rgba(255, 171, 0, 0.25)',
+      ],
+      informational: [
+        'rgba(0, 115, 186, 0.1)',
+        'rgba(0, 115, 186, 0.18)',
+        'rgba(0, 115, 186, 0.25)',
+      ],
     },
   },
 
@@ -166,6 +181,12 @@ const colors: ThemeColors = {
     active: '#996700',
   },
 
+  accent: {
+    main: 'rgba(0, 115, 186, 1)',
+    hover: 'rgba(0, 92, 149, 1)',
+    active: 'rgba(0, 69, 112, 1)',
+  },
+
   notice: {
     background: blue[50],
   },
diff --git a/web/packages/design/src/theme/themes/types.ts b/web/packages/design/src/theme/themes/types.ts
index d821c37ad58d3..742134649ae12 100644
--- a/web/packages/design/src/theme/themes/types.ts
+++ b/web/packages/design/src/theme/themes/types.ts
@@ -56,6 +56,9 @@ export type ThemeColors = {
     tonal: {
       primary: string[];
       success: string[];
+      danger: string[];
+      alert: string[];
+      informational: string[];
     };
   };
 
@@ -138,6 +141,12 @@ export type ThemeColors = {
     active: string;
   };
 
+  accent: {
+    main: string;
+    hover: string;
+    active: string;
+  };
+
   notice: {
     background: string;
   };