diff --git a/ui/components/ui/box/box.stories.js b/ui/components/ui/box/box.stories.js
index 340a04242..25006c743 100644
--- a/ui/components/ui/box/box.stories.js
+++ b/ui/components/ui/box/box.stories.js
@@ -315,11 +315,10 @@ export const Color = (args) => {
         padding={3}
         color={COLORS.SUCCESS_INVERSE}
         backgroundColor={COLORS.SUCCESS_DEFAULT}
-        {...args}
       >
         COLORS.SUCCESS_INVERSE
       </Box>
-      <Box {...args} padding={3} color={COLORS.WARNING_DEFAULT} {...args}>
+      <Box {...args} padding={3} color={COLORS.WARNING_DEFAULT}>
         COLORS.WARNING_DEFAULT
       </Box>
       <Box
@@ -327,11 +326,10 @@ export const Color = (args) => {
         padding={3}
         color={COLORS.WARNING_INVERSE}
         backgroundColor={COLORS.WARNING_DEFAULT}
-        {...args}
       >
         COLORS.WARNING_INVERSE
       </Box>
-      <Box {...args} padding={3} color={COLORS.INFO_DEFAULT} {...args}>
+      <Box {...args} padding={3} color={COLORS.INFO_DEFAULT}>
         COLORS.INFO_DEFAULT
       </Box>
       <Box
@@ -339,13 +337,28 @@ export const Color = (args) => {
         padding={3}
         color={COLORS.INFO_INVERSE}
         backgroundColor={COLORS.INFO_DEFAULT}
-        {...args}
       >
         COLORS.INFO_INVERSE
       </Box>
-      <Box {...args} padding={3} color={COLORS.INHERIT} {...args}>
+      <Box {...args} padding={3} color={COLORS.INHERIT}>
         COLORS.INHERIT
       </Box>
+      <Box
+        {...args}
+        padding={3}
+        backgroundColor={COLORS.SEPOLIA}
+        color={COLORS.SEPOLIA_INVERSE}
+      >
+        COLORS.SEPOLIA_INVERSE
+      </Box>
+      <Box
+        {...args}
+        padding={3}
+        backgroundColor={COLORS.GOERLI}
+        color={COLORS.GOERLI_INVERSE}
+      >
+        COLORS.GOERLI_INVERSE
+      </Box>
     </>
   );
 };
@@ -406,6 +419,12 @@ export const BackgroundColor = () => {
           COLORS.WARNING_MUTED
         </Typography>
       </Box>
+      <Box padding={3} backgroundColor={COLORS.SEPOLIA}>
+        <Typography color={COLORS.SEPOLIA_INVERSE}>COLORS.SEPOLIA</Typography>
+      </Box>
+      <Box padding={3} backgroundColor={COLORS.GOERLI}>
+        <Typography color={COLORS.GOERLI_INVERSE}>COLORS.GOERLI</Typography>
+      </Box>
     </>
   );
 };
diff --git a/ui/css/design-system/colors.scss b/ui/css/design-system/colors.scss
index c206c4d91..55c3a6811 100644
--- a/ui/css/design-system/colors.scss
+++ b/ui/css/design-system/colors.scss
@@ -39,6 +39,8 @@ $color-map: (
   'mainnet': --mainnet,
   'goerli': --color-network-goerli-default,
   'sepolia': --color-network-sepolia-default,
+  'goerli-inverse':--color-network-goerli-inverse,
+  'sepolia-inverse': --color-network-sepolia-inverse,
   'localhost': --color-network-localhost-default,
   'transparent': --transparent,
   'flask-purple': --color-flask-default,
diff --git a/ui/helpers/constants/design-system.js b/ui/helpers/constants/design-system.js
index 16cabd522..13055cee1 100644
--- a/ui/helpers/constants/design-system.js
+++ b/ui/helpers/constants/design-system.js
@@ -51,6 +51,8 @@ export const COLORS = {
   LOCALHOST: 'localhost',
   TRANSPARENT: 'transparent',
   INHERIT: 'inherit',
+  GOERLI_INVERSE: 'goerli-inverse',
+  SEPOLIA_INVERSE: 'sepolia-inverse',
 };
 export const BACKGROUND_COLORS = pick(COLORS, [
   'BACKGROUND_DEFAULT',
@@ -119,6 +121,10 @@ export const TEXT_COLORS = pick(COLORS, [
   'INFO_DEFAULT',
   'INFO_INVERSE',
   'INHERIT',
+  'GOERLI',
+  'SEPOLIA',
+  'GOERLI_INVERSE',
+  'SEPOLIA_INVERSE',
 ]);
 
 export const ICON_COLORS = pick(COLORS, [
@@ -137,6 +143,10 @@ export const ICON_COLORS = pick(COLORS, [
   'INFO_DEFAULT',
   'INFO_INVERSE',
   'INHERIT',
+  'GOERLI',
+  'SEPOLIA',
+  'GOERLI_INVERSE',
+  'SEPOLIA_INVERSE',
 ]);
 
 export const TYPOGRAPHY = {