diff --git a/packages/design-system/src/foundation/colors/types.ts b/packages/design-system/src/foundation/colors/types.ts
index 8d41fd19..4cd99eeb 100644
--- a/packages/design-system/src/foundation/colors/types.ts
+++ b/packages/design-system/src/foundation/colors/types.ts
@@ -1,82 +1,80 @@
-type CSSPropertyColor = React.CSSProperties["color"];
-
 export interface ColorToken {
   core: {
-    bg_01: CSSPropertyColor;
-    bg_02: CSSPropertyColor;
-    bg_03: CSSPropertyColor;
-    layer_01: CSSPropertyColor;
-    text_primary: CSSPropertyColor;
-    text_normal: CSSPropertyColor;
-    text_medium: CSSPropertyColor;
-    text_light: CSSPropertyColor;
-    text_error: CSSPropertyColor;
-    text_success: CSSPropertyColor;
-    text_warning: CSSPropertyColor;
-    text_info: CSSPropertyColor;
-    link_primary: CSSPropertyColor;
-    link_hover: CSSPropertyColor;
-    link_visited: CSSPropertyColor;
-    icon_error_02: CSSPropertyColor;
-    icon_success_02: CSSPropertyColor;
-    icon_warning_02: CSSPropertyColor;
-    icon_info_02: CSSPropertyColor;
-    hover: CSSPropertyColor;
-    focused: CSSPropertyColor;
-    selected: CSSPropertyColor;
-    shadow_01: CSSPropertyColor;
-    shadow_02: CSSPropertyColor;
-    shadow_03: CSSPropertyColor;
-    shadow_04: CSSPropertyColor;
+    bg_01: string;
+    bg_02: string;
+    bg_03: string;
+    layer_01: string;
+    text_primary: string;
+    text_normal: string;
+    text_medium: string;
+    text_light: string;
+    text_error: string;
+    text_success: string;
+    text_warning: string;
+    text_info: string;
+    link_primary: string;
+    link_hover: string;
+    link_visited: string;
+    icon_error_02: string;
+    icon_success_02: string;
+    icon_warning_02: string;
+    icon_info_02: string;
+    hover: string;
+    focused: string;
+    selected: string;
+    shadow_01: string;
+    shadow_02: string;
+    shadow_03: string;
+    shadow_04: string;
   };
   component: {
-    btn_primary_bg: CSSPropertyColor;
-    btn_secondary_bg: CSSPropertyColor;
-    btn_error_bg: CSSPropertyColor;
-    btn_primary_border: CSSPropertyColor;
-    btn_secondary_border: CSSPropertyColor;
-    btn_primary_text_1: CSSPropertyColor;
-    btn_primary_text_2: CSSPropertyColor;
-    btn_secondary_text: CSSPropertyColor;
-    btn_error_text: CSSPropertyColor;
-    btn_selected_primary_bg: CSSPropertyColor;
-    btn_selected_primary_text: CSSPropertyColor;
-    btn_selected_secondary_bg: CSSPropertyColor;
-    btn_selected_secondary_text: CSSPropertyColor;
-    selectcontrol_on: CSSPropertyColor;
-    selectcontrol_off: CSSPropertyColor;
-    selectcontrol_handler: CSSPropertyColor;
-    selectcontrol_handler_shadow: CSSPropertyColor;
-    textfield_bg: CSSPropertyColor;
-    textfield_border_error: CSSPropertyColor;
-    dropdown_divider_border: CSSPropertyColor;
-    datatable_border_01: CSSPropertyColor;
-    datatable_border_02: CSSPropertyColor;
-    datatable_zebra: CSSPropertyColor;
-    scrollbars_bg: CSSPropertyColor;
-    scrollbars_hover: CSSPropertyColor;
-    scrollbars_pressed: CSSPropertyColor;
-    modal_overlay: CSSPropertyColor;
-    tooltip_bg: CSSPropertyColor;
-    tooltip_text_normal: CSSPropertyColor;
-    tooltip_text_medium: CSSPropertyColor;
-    alert_error_bg: CSSPropertyColor;
-    alert_error_border: CSSPropertyColor;
-    alert_success_bg: CSSPropertyColor;
-    alert_success_border: CSSPropertyColor;
-    alert_info_bg: CSSPropertyColor;
-    alert_info_border: CSSPropertyColor;
-    alert_warning_bg: CSSPropertyColor;
-    alert_warning_border: CSSPropertyColor;
-    chip_primary_bg: CSSPropertyColor;
-    chip_primary_text: CSSPropertyColor;
-    chip_secondary_bg: CSSPropertyColor;
-    chip_secondary_text: CSSPropertyColor;
-    chip_error_bg: CSSPropertyColor;
-    chip_error_text: CSSPropertyColor;
-    chip_warning_bg: CSSPropertyColor;
-    chip_warning_text: CSSPropertyColor;
-    chip_success_bg: CSSPropertyColor;
-    chip_success_text: CSSPropertyColor;
+    btn_primary_bg: string;
+    btn_secondary_bg: string;
+    btn_error_bg: string;
+    btn_primary_border: string;
+    btn_secondary_border: string;
+    btn_primary_text_1: string;
+    btn_primary_text_2: string;
+    btn_secondary_text: string;
+    btn_error_text: string;
+    btn_selected_primary_bg: string;
+    btn_selected_primary_text: string;
+    btn_selected_secondary_bg: string;
+    btn_selected_secondary_text: string;
+    selectcontrol_on: string;
+    selectcontrol_off: string;
+    selectcontrol_handler: string;
+    selectcontrol_handler_shadow: string;
+    textfield_bg: string;
+    textfield_border_error: string;
+    dropdown_divider_border: string;
+    datatable_border_01: string;
+    datatable_border_02: string;
+    datatable_zebra: string;
+    scrollbars_bg: string;
+    scrollbars_hover: string;
+    scrollbars_pressed: string;
+    modal_overlay: string;
+    tooltip_bg: string;
+    tooltip_text_normal: string;
+    tooltip_text_medium: string;
+    alert_error_bg: string;
+    alert_error_border: string;
+    alert_success_bg: string;
+    alert_success_border: string;
+    alert_info_bg: string;
+    alert_info_border: string;
+    alert_warning_bg: string;
+    alert_warning_border: string;
+    chip_primary_bg: string;
+    chip_primary_text: string;
+    chip_secondary_bg: string;
+    chip_secondary_text: string;
+    chip_error_bg: string;
+    chip_error_text: string;
+    chip_warning_bg: string;
+    chip_warning_text: string;
+    chip_success_bg: string;
+    chip_success_text: string;
   };
 }