diff --git a/packages/system/index.ts b/packages/system/index.ts
index ea8caedd0..c3ea75960 100755
--- a/packages/system/index.ts
+++ b/packages/system/index.ts
@@ -73,12 +73,16 @@ declare global {
       hardest: C
     }
 
-    type ColorCustom<C = Color> = {
+    interface CustomPaletteRegistry {}
+
+    interface ColorCustom<C = Color> {
       /** @deprecated this field */
-      palette: Record<string, C>
+      palette: CustomPaletteRegistry & {
+        [key: string]: C
+      }
     }
 
-    type ColorPalette<C = Color> = {
+    interface ColorPalette<C = Color> {
       gray: ColorShades<C>
       yellow: ColorShades<C> & ColorAccentsShades<C>
       orange: ColorShades<C> & ColorAccentsShades<C>
@@ -97,28 +101,37 @@ declare global {
     }
 
     type ColorNames = LiteralUnion<
-      LiteralUnion<
-        | keyof ColorMain
-        | `gray${keyof ColorPalette['gray']}`
-        | `yellow${keyof ColorPalette['yellow']}`
-        | `orange${keyof ColorPalette['orange']}`
-        | `red${keyof ColorPalette['red']}`
-        | `rose${keyof ColorPalette['rose']}`
-        | `pink${keyof ColorPalette['pink']}`
-        | `green${keyof ColorPalette['green']}`
-        | `lightGreen${keyof ColorPalette['lightGreen']}`
-        | `lime${keyof ColorPalette['lime']}`
-        | `teal${keyof ColorPalette['teal']}`
-        | `cyan${keyof ColorPalette['cyan']}`
-        | `lightBlue${keyof ColorPalette['lightBlue']}`
-        | `blue${keyof ColorPalette['blue']}`
-        | `indigo${keyof ColorPalette['indigo']}`
-        | `purple${keyof ColorPalette['purple']}`,
-        keyof ColorCustom['palette']
-      >,
+      | keyof {
+          [K in keyof ColorPalette as `${K}${keyof ColorPalette[K] & (string | number)}`]: string
+        }
+      | keyof ColorMain
+      | keyof CustomPaletteRegistry,
       string
     >
 
+    // type ColorNames = LiteralUnion<
+    //   LiteralUnion<
+    //     | keyof ColorMain
+    //     | `gray${keyof ColorPalette['gray']}`
+    //     | `yellow${keyof ColorPalette['yellow']}`
+    //     | `orange${keyof ColorPalette['orange']}`
+    //     | `red${keyof ColorPalette['red']}`
+    //     | `rose${keyof ColorPalette['rose']}`
+    //     | `pink${keyof ColorPalette['pink']}`
+    //     | `green${keyof ColorPalette['green']}`
+    //     | `lightGreen${keyof ColorPalette['lightGreen']}`
+    //     | `lime${keyof ColorPalette['lime']}`
+    //     | `teal${keyof ColorPalette['teal']}`
+    //     | `cyan${keyof ColorPalette['cyan']}`
+    //     | `lightBlue${keyof ColorPalette['lightBlue']}`
+    //     | `blue${keyof ColorPalette['blue']}`
+    //     | `indigo${keyof ColorPalette['indigo']}`
+    //     | `purple${keyof ColorPalette['purple']}`,
+    //     keyof ColorCustom['palette']
+    //   >,
+    //   string
+    // >
+
     type Colors<C = Color, Definition = false> = ColorMain<C> &
       ColorPalette<C> &
       (Definition extends true ? Partial<ColorCustom<C>> : ColorCustom<C>)
@@ -253,8 +266,8 @@ declare global {
       [P in keyof T]?: T[P] extends Array<infer U>
         ? Array<DeepPartial<U>>
         : T[P] extends ReadonlyArray<infer U>
-        ? ReadonlyArray<DeepPartial<U>>
-        : DeepPartial<T[P]>
+          ? ReadonlyArray<DeepPartial<U>>
+          : DeepPartial<T[P]>
     }
 
     type LiteralUnion<LiteralType, BaseType extends Primitive> =
diff --git a/packages/testbed/src/index.tsx b/packages/testbed/src/index.tsx
index 14503769c..c54080be2 100755
--- a/packages/testbed/src/index.tsx
+++ b/packages/testbed/src/index.tsx
@@ -1,20 +1,29 @@
-import { light } from './theme'
-import { DatePicker, Modal, modal, Viewport } from '@stage-ui/core'
+import { Flexbox, Text, Viewport } from '@stage-ui/core'
 import ReactDOM from 'react-dom'
-import { useState } from 'react'
+import { light } from './theme'
 
-const App: React.FC = () => {
-  const handleOpen = () => {
-    modal({
-      preventEscapeClose: true,
-      render: () => {
-        return <>123</>
-      },
-      overlayClose: false,
-    })
+declare global {
+  namespace Stage {
+    interface ColorPalette {
+      newRed: ColorShades
+    }
+
+    interface CustomPaletteRegistry {
+      newYellowColor: Color
+    }
   }
+}
+
+const App: React.FC = () => {
+  return (
+    <Flexbox column backgroundColor="gray300">
+      <Text color="newRed100">newRed100</Text>
+
+      <Text color="newYellowColor">newYellowColor</Text>
 
-  return null
+      <Text color="green500">limeA100</Text>
+    </Flexbox>
+  )
 }
 
 ReactDOM.render(
diff --git a/packages/testbed/src/theme.ts b/packages/testbed/src/theme.ts
index 54d4a02ed..8c643a272 100644
--- a/packages/testbed/src/theme.ts
+++ b/packages/testbed/src/theme.ts
@@ -5,6 +5,14 @@ export const light = themes.light.replace({
     radius: {
       xs: '0.25rem',
     },
+    color: {
+      newRed: {
+        '100': '#FF0000',
+      },
+      palette: {
+        newYellowColor: 'yellow',
+      },
+    },
   },
   overrides: (main) => ({
     TextField: {