diff --git a/stories/color.mdx b/stories/color.mdx
index 6312cb41b0..2355fedcbe 100644
--- a/stories/color.mdx
+++ b/stories/color.mdx
@@ -1,132 +1,43 @@
 import { Meta, ColorPalette, ColorItem } from '@storybook/blocks';
-
+import { CopyButton } from '../src/lib/components/buttonv2/CopyButton.component.tsx';
 import { coreUIAvailableThemes } from '../src/lib/style/theme';
 
 <Meta title="Style/Colors" />
 
 # Colors
 
-<ColorPalette>
-  <ColorItem title="dark.statusHealthy" colors={[coreUIAvailableThemes.darkRebrand.statusHealthy]} />
-
-{' '}
-
-<ColorItem
-  title="dark.statusWarning"
-  colors={[coreUIAvailableThemes.darkRebrand.statusWarning]}
-/>
-
-{' '}
-
-<ColorItem
-  title="dark.statusCritical"
-  colors={[coreUIAvailableThemes.darkRebrand.statusCritical]}
-/>
-
-{' '}
-
-<ColorItem
-  title="dark.selectedActive"
-  colors={[coreUIAvailableThemes.darkRebrand.selectedActive]}
-/>
-
-{' '}
-
-<ColorItem
-  title="dark.highlight"
-  colors={[coreUIAvailableThemes.darkRebrand.highlight]}
-/>
-
-{' '}
-
-<ColorItem
-  title="dark.border"
-  colors={[coreUIAvailableThemes.darkRebrand.border]}
-/>
-
-{' '}
-
-<ColorItem
-  title="dark.buttonPrimary"
-  colors={[coreUIAvailableThemes.darkRebrand.buttonPrimary]}
-/>
-
-{' '}
-
-<ColorItem
-  title="dark.buttonSecondary"
-  colors={[coreUIAvailableThemes.darkRebrand.buttonSecondary]}
-/>
+## Artesca Dark
 
-{' '}
-
-<ColorItem
-  title="dark.buttonDelete"
-  colors={[coreUIAvailableThemes.darkRebrand.buttonDelete]}
-/>
-
-{' '}
-
-<ColorItem
-  title="dark.infoPrimary"
-  colors={[coreUIAvailableThemes.darkRebrand.infoPrimary]}
-/>
-
-{' '}
-
-<ColorItem
-  title="dark.infoSecondary"
-  colors={[coreUIAvailableThemes.darkRebrand.infoSecondary]}
-/>
-
-{' '}
-
-<ColorItem
-  title="dark.backgroundLevel1"
-  colors={[coreUIAvailableThemes.darkRebrand.backgroundLevel1]}
-/>
-
-{' '}
-
-<ColorItem
-  title="dark.backgroundLevel2"
-  colors={[coreUIAvailableThemes.darkRebrand.backgroundLevel2]}
-/>
-
-{' '}
+<ColorPalette>
+  {
+    Object.entries(coreUIAvailableThemes.darkRebrand).map(([key, value]) => {
+    if (!/RGB/.test(key)) return <ColorItem title={key} colors={[value]}/>;
+    })
 
-<ColorItem
-  title="dark.backgroundLevel3"
-  colors={[coreUIAvailableThemes.darkRebrand.backgroundLevel3]}
-/>
+}
 
-{' '}
+</ColorPalette>
 
-<ColorItem
-  title="dark.backgroundLevel4"
-  colors={[coreUIAvailableThemes.darkRebrand.backgroundLevel4]}
-/>
+## Artesca Light
 
-{' '}
+<ColorPalette>
+  {
+    Object.entries(coreUIAvailableThemes.artescaLight).map(([key, value]) => {
+    if (!/RGB/.test(key)) return <ColorItem title={key} colors={[value]}/>;
+    })
 
-<ColorItem
-  title="dark.textPrimary"
-  colors={[coreUIAvailableThemes.darkRebrand.textPrimary]}
-/>
+}
 
-{' '}
+</ColorPalette>
 
-<ColorItem
-  title="dark.textSecondary"
-  colors={[coreUIAvailableThemes.darkRebrand.textSecondary]}
-/>
+## Ring Dark
 
-{' '}
+<ColorPalette>
+  {
+    Object.entries(coreUIAvailableThemes.ring9dark).map(([key, value]) => {
+    if (!/RGB/.test(key)) return <ColorItem title={key} colors={[value]}/>;
+    })
 
-<ColorItem
-  title="dark.textReverse"
-  colors={[coreUIAvailableThemes.darkRebrand.textReverse]}
-/>
+}
 
-  <ColorItem title="dark.textLink" colors={[coreUIAvailableThemes.darkRebrand.textLink]} />
 </ColorPalette>