diff --git a/docs/src/design/dark.ts b/docs/src/design/dark.ts
index 5d813a8d..00101374 100644
--- a/docs/src/design/dark.ts
+++ b/docs/src/design/dark.ts
@@ -22,6 +22,42 @@ const colors = {
     700: '#b3b3c0',
     800: '#d8d8df',
     900: '#f8f8f9'
+  },
+  amber: {
+    50: '#2c2102',
+    100: '#584303',
+    200: '#826204',
+    300: '#a88005',
+    400: '#d8a406',
+    500: '#ffc107',
+    600: '#ffc826',
+    700: '#ffcf46',
+    800: '#ffd666',
+    900: '#ffdc81'
+  },
+  green: {
+    50: '#0e1f0e',
+    100: '#1c3f1d',
+    200: '#275a29',
+    300: '#337536',
+    400: '#409444',
+    500: '#4caf50',
+    600: '#63bc66',
+    700: '#75c679',
+    800: '#8ad28e',
+    900: '#9edea1'
+  },
+  red: {
+    50: '#2c0c0a',
+    100: '#591813',
+    200: '#84231c',
+    300: '#ad2e25',
+    400: '#d7392e',
+    500: '#fe4336',
+    600: '#ff594d',
+    700: '#ff6f64',
+    800: '#ff8077',
+    900: '#ff9890'
   }
 };
 
diff --git a/docs/src/design/joyTheme.ts b/docs/src/design/joyTheme.ts
index d9bce395..8c14c306 100644
--- a/docs/src/design/joyTheme.ts
+++ b/docs/src/design/joyTheme.ts
@@ -50,13 +50,19 @@ const joyTheme = extendTheme({
           channel: '255 255 255'
         },
         primary: darkColorVariables('primary', light.primary),
-        neutral: neutralColorVariables('neutral', light.neutral)
+        neutral: neutralColorVariables('neutral', light.neutral),
+        success: darkColorVariables('success', light.green),
+        danger: darkColorVariables('danger', light.red),
+        warning: darkColorVariables('warning', light.amber)
       }
     },
     dark: {
       palette: {
         primary: darkColorVariables('primary', dark.primary),
         neutral: neutralColorVariables('neutral', dark.neutral),
+        success: darkColorVariables('success', dark.green),
+        danger: darkColorVariables('danger', dark.red),
+        warning: darkColorVariables('warning', dark.amber),
         background: {
           body: '#000',
           surface: 'var(--joy-palette-neutral-50)',
diff --git a/docs/src/design/light.ts b/docs/src/design/light.ts
index eea53be5..31390434 100644
--- a/docs/src/design/light.ts
+++ b/docs/src/design/light.ts
@@ -22,6 +22,42 @@ const colors = {
     700: '#434356',
     800: '#25252d',
     900: '#131318'
+  },
+  amber: {
+    50: '#fffbf2',
+    100: '#ffecc2',
+    200: '#ffdf91',
+    300: '#ffd561',
+    400: '#ffcb31',
+    500: '#ffc107',
+    600: '#ffb700',
+    700: '#ffa200',
+    800: '#ff8300',
+    900: '#ff5a00'
+  },
+  red: {
+    50: '#fff3f2',
+    100: '#ffc8c3',
+    200: '#ffa199',
+    300: '#ff7e74',
+    400: '#ff5e53',
+    500: '#fe4336',
+    600: '#e63528',
+    700: '#cc281b',
+    800: '#b31d11',
+    900: '#991308'
+  },
+  green: {
+    50: '#f5fdf5',
+    100: '#cef2d0',
+    200: '#aae4ad',
+    300: '#89d58c',
+    400: '#69c36d',
+    500: '#4caf50',
+    600: '#40a244',
+    700: '#359439',
+    800: '#2b852e',
+    900: '#227525'
   }
 };