diff --git a/src/styles/_variables.css b/src/styles/_variables.css
index 0479fc55e..6c637daa2 100644
--- a/src/styles/_variables.css
+++ b/src/styles/_variables.css
@@ -1,26 +1,27 @@
 :root {
   --blue: #1677ff;
-  --purple: #722ED1;
-  --cyan: #13C2C2;
-  --green: #52C41A;
-  --magenta: #EB2F96;
+  --purple: #722ed1;
+  --cyan: #13c2c2;
+  --green: #52c41a;
+  --magenta: #eb2f96;
   --pink: #eb2f96;
-  --red: #F5222D;
-  --orange: #FA8C16;
-  --yellow: #FADB14;
-  --volcano: #FA541C;
-  --geekblue: #2F54EB;
-  --gold: #FAAD14;
-  --lime: #A0D911;
+  --red: #f5222d;
+  --orange: #fa8c16;
+  --yellow: #fadb14;
+  --volcano: #fa541c;
+  --geekblue: #2f54eb;
+  --gold: #faad14;
+  --lime: #a0d911;
   --color-primary: #3600d1;
   --color-success: #52c41a;
   --color-warning: #faad14;
-  --color-error: #ff4d4f;
+  --color-error: #f5222d;
   --color-info: #1677ff;
   --color-link: #1677ff;
-  --color-text-base: #000;
+  --color-text-base: #0f0e0e;
   --color-bg-base: #fff;
-  --font-family: 'GT America', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-family: 'GT America', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+    'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   --font-family-code: 'Roboto Mono', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
   --font-size: 14px;
   --line-width: 1px;
@@ -48,16 +49,23 @@
   --color-link-hover: #ab8eff;
   --control-outline: rgba(54, 0, 209, 0.1);
   --color-warning-outline: #fffbe6;
-  --color-error-outline: #fff2f0;
+  --color-error-outline: #fff1f0;
   --control-item-bg-hover: #f8f6fb;
   --control-item-bg-active: #ebe8f8;
   --control-item-bg-active-hover: #c3aeff;
-  --color-fill: rgba(15, 14, 14, 0.15);
-  --color-fill-secondary: rgba(32, 0, 122, 0.06);
-  --color-fill-tertiary: rgba(15, 14, 14, 0.04);
-  --color-fill-quaternary: rgba(32, 0, 122, 0.03);
+  --color-text: #0f0e0e;
+  --color-text-secondary: #212020;
+  --color-text-tertiary: #2c2d2b;
+  --color-text-quaternary: #505249;
+  --color-fill: #dcdcd8;
+  --color-fill-secondary: #ebe8f8;
+  --color-fill-tertiary: #faf9f8;
+  --color-fill-quaternary: #f8f6fb;
+  --color-bg-layout: #ffffff;
+  --color-bg-spotlight: #2c2d2b;
   --color-border: #c3aeff;
   --color-border-secondary: #eceae9;
+  --color-split: #eceae9;
   --color-primary-bg: #f8f6fb;
   --color-primary-bg-hover: #ebe8f8;
   --color-primary-border: #c3aeff;
@@ -75,6 +83,16 @@
   --color-warning-text-hover: #ad6800;
   --color-warning-text: #874d00;
   --color-warning-text-active: #613400;
+  --color-error-bg: #fff1f0;
+  --color-error-bg-hover: #ffccc7;
+  --color-error-border: #ffa39e;
+  --color-error-border-hover: #ff7875;
+  --color-error-hover: #ff4d4f;
+  --color-error-active: #cf1322;
+  --color-error-text-hover: #a8071a;
+  --color-error-text: #820014;
+  --color-error-text-active: #5c0011;
+  --color-bg-mask: rgba(0, 0, 0, 0.45);
   --border-radius-lg: 16px;
   --mp-brand-primary-1: #f8f6fb;
   --mp-brand-primary-2: #ebe8f8;
@@ -86,7 +104,7 @@
   --mp-brand-primary-8: #3600d1;
   --mp-brand-primary-9: #2c00aa;
   --mp-brand-primary-10: #20007a;
-  --mp-brand-secondary-1: #ffffff;
+  --mp-brand-secondary-1: #fff;
   --mp-brand-secondary-2: #faf9f8;
   --mp-brand-secondary-3: #eceae9;
   --mp-brand-secondary-4: #dcdcd8;
@@ -262,30 +280,14 @@
   --lime8: #5b8c00;
   --lime9: #3f6600;
   --lime10: #254000;
-  --color-text: rgba(0, 0, 0, 0.88);
-  --color-text-secondary: rgba(0, 0, 0, 0.65);
-  --color-text-tertiary: rgba(0, 0, 0, 0.45);
-  --color-text-quaternary: rgba(0, 0, 0, 0.25);
-  --color-bg-layout: #f5f5f5;
   --color-bg-container: #ffffff;
   --color-bg-elevated: #ffffff;
-  --color-bg-spotlight: rgba(0, 0, 0, 0.85);
   --color-bg-blur: transparent;
   --color-success-bg: #f6ffed;
   --color-success-bg-hover: #d9f7be;
   --color-success-border: #b7eb8f;
   --color-success-border-hover: #95de64;
   --color-success-active: #389e0d;
-  --color-error-bg: #fff2f0;
-  --color-error-bg-hover: #fff1f0;
-  --color-error-bg-active: #ffccc7;
-  --color-error-border: #ffccc7;
-  --color-error-border-hover: #ffa39e;
-  --color-error-hover: #ff7875;
-  --color-error-active: #d9363e;
-  --color-error-text-hover: #ff7875;
-  --color-error-text: #ff4d4f;
-  --color-error-text-active: #d9363e;
   --color-warning-bg: #fffbe6;
   --color-warning-bg-hover: #fff1b8;
   --color-warning-border: #ffe58f;
@@ -301,7 +303,6 @@
   --color-info-text: #1677ff;
   --color-info-text-active: #0958d9;
   --color-link-active: #0958d9;
-  --color-bg-mask: rgba(0, 0, 0, 0.45);
   --color-white: #fff;
   --font-size-sm: 12px;
   --font-size-lg: 16px;
@@ -327,7 +328,7 @@
   --size-lg: 24px;
   --size-md: 20px;
   --size-ms: 16px;
-  --size: 16px;
+  --size: 16rem;
   --size-sm: 12px;
   --size-xs: 8px;
   --size-xxs: 4px;
@@ -341,29 +342,28 @@
   --border-radius-xs: 2px;
   --border-radius-sm: 6px;
   --border-radius-outer: 6px;
-  --color-fill-content: rgba(32, 0, 122, 0.06);
-  --color-fill-content-hover: rgba(15, 14, 14, 0.15);
-  --color-fill-alter: rgba(32, 0, 122, 0.03);
-  --color-bg-container-disabled: rgba(15, 14, 14, 0.04);
+  --color-fill-content: #ebe8f8;
+  --color-fill-content-hover: #dcdcd8;
+  --color-fill-alter: #f8f6fb;
+  --color-bg-container-disabled: #faf9f8;
   --color-border-bg: #ffffff;
-  --color-split: rgba(44, 22, 11, 0.09);
-  --color-text-placeholder: rgba(0, 0, 0, 0.25);
-  --color-text-disabled: rgba(0, 0, 0, 0.25);
-  --color-text-heading: rgba(0, 0, 0, 0.88);
-  --color-text-label: rgba(0, 0, 0, 0.65);
-  --color-text-description: rgba(0, 0, 0, 0.45);
+  --color-text-placeholder: #505249;
+  --color-text-disabled: #505249;
+  --color-text-heading: #0f0e0e;
+  --color-text-label: #212020;
+  --color-text-description: #2c2d2b;
   --color-text-light-solid: #fff;
-  --color-highlight: #ff4d4f;
-  --color-bg-text-hover: rgba(32, 0, 122, 0.06);
-  --color-bg-text-active: rgba(15, 14, 14, 0.15);
-  --color-icon: rgba(0, 0, 0, 0.45);
-  --color-icon-hover: rgba(0, 0, 0, 0.88);
+  --color-highlight: #f5222d;
+  --color-bg-text-hover: #ebe8f8;
+  --color-bg-text-active: #dcdcd8;
+  --color-icon: #2c2d2b;
+  --color-icon-hover: #0f0e0e;
   --font-size-icon: 12px;
   --line-width-focus: 4px;
   --control-outline-width: 2px;
   --control-interactive-size: 16px;
-  --control-item-bg-active-disabled: rgba(15, 14, 14, 0.15);
-  --control-tmp-outline: rgba(32, 0, 122, 0.03);
+  --control-item-bg-active-disabled: #dcdcd8;
+  --control-tmp-outline: #f8f6fb;
   --font-weight-strong: 600;
   --opacity-loading: 0.65;
   --link-decoration: none;
@@ -392,9 +392,11 @@
   --margin-lg: 24px;
   --margin-xl: 32px;
   --margin-xxl: 48px;
-  --box-shadow:  0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05) ;
-  --box-shadow-secondary:  0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05) ;
-  --box-shadow-tertiary:  0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02) ;
+  --box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  --box-shadow-secondary: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12),
+    0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  --box-shadow-tertiary: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02),
+    0 2px 4px 0 rgba(0, 0, 0, 0.02);
   --screen-xs: 480px;
   --screen-xs-min: 480px;
   --screen-xs-max: 575px;
@@ -413,11 +415,16 @@
   --screen-xxl: 1600px;
   --screen-xxl-min: 1600px;
   --box-shadow-popover-arrow: 2px 2px 5px rgba(0, 0, 0, 0.05);
-  --box-shadow-card:  0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09) ;
-  --box-shadow-drawer-right:  -6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05) ;
-  --box-shadow-drawer-left:  6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05) ;
-  --box-shadow-drawer-up:  0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05) ;
-  --box-shadow-drawer-down:  0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05) ;
+  --box-shadow-card: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12),
+    0 5px 12px 4px rgba(0, 0, 0, 0.09);
+  --box-shadow-drawer-right: -6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12),
+    -9px 0 28px 8px rgba(0, 0, 0, 0.05);
+  --box-shadow-drawer-left: 6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12),
+    9px 0 28px 8px rgba(0, 0, 0, 0.05);
+  --box-shadow-drawer-up: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12),
+    0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  --box-shadow-drawer-down: 0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12),
+    0 -9px 28px 8px rgba(0, 0, 0, 0.05);
   --box-shadow-tabs-overflow-left: inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);
   --box-shadow-tabs-overflow-right: inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);
   --box-shadow-tabs-overflow-top: inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);
diff --git a/src/styles/style.ts b/src/styles/style.ts
index 870a0d169..6d8fc365e 100644
--- a/src/styles/style.ts
+++ b/src/styles/style.ts
@@ -14,10 +14,10 @@ export const Lime = '#A0D911'
 export const ColorPrimary = '#3600d1'
 export const ColorSuccess = '#52c41a'
 export const ColorWarning = '#faad14'
-export const ColorError = '#ff4d4f'
+export const ColorError = '#f5222d'
 export const ColorInfo = '#1677ff'
 export const ColorLink = '#1677ff'
-export const ColorTextBase = '#000'
+export const ColorTextBase = '#0f0e0e'
 export const ColorBgBase = '#fff'
 export const FontFamily =
   "'GT America', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'"
@@ -48,16 +48,23 @@ export const Motion = true
 export const ColorLinkHover = '#ab8eff'
 export const ControlOutline = 'rgba(54, 0, 209, 0.1)'
 export const ColorWarningOutline = '#fffbe6'
-export const ColorErrorOutline = '#fff2f0'
+export const ColorErrorOutline = '#fff1f0'
 export const ControlItemBgHover = '#f8f6fb'
 export const ControlItemBgActive = '#ebe8f8'
 export const ControlItemBgActiveHover = '#c3aeff'
-export const ColorFill = 'rgba(15, 14, 14, 0.15)'
-export const ColorFillSecondary = 'rgba(32, 0, 122, 0.06)'
-export const ColorFillTertiary = 'rgba(15, 14, 14, 0.04)'
-export const ColorFillQuaternary = 'rgba(32, 0, 122, 0.03)'
+export const ColorText = '#0f0e0e'
+export const ColorTextSecondary = '#212020'
+export const ColorTextTertiary = '#2c2d2b'
+export const ColorTextQuaternary = '#505249'
+export const ColorFill = '#dcdcd8'
+export const ColorFillSecondary = '#ebe8f8'
+export const ColorFillTertiary = '#faf9f8'
+export const ColorFillQuaternary = '#f8f6fb'
+export const ColorBgLayout = '#ffffff'
+export const ColorBgSpotlight = '#2c2d2b'
 export const ColorBorder = '#c3aeff'
 export const ColorBorderSecondary = '#eceae9'
+export const ColorSplit = '#eceae9'
 export const ColorPrimaryBg = '#f8f6fb'
 export const ColorPrimaryBgHover = '#ebe8f8'
 export const ColorPrimaryBorder = '#c3aeff'
@@ -75,6 +82,16 @@ export const ColorWarningHover = '#ffc53d'
 export const ColorWarningTextHover = '#ad6800'
 export const ColorWarningText = '#874d00'
 export const ColorWarningTextActive = '#613400'
+export const ColorErrorBg = '#fff1f0'
+export const ColorErrorBgHover = '#ffccc7'
+export const ColorErrorBorder = '#ffa39e'
+export const ColorErrorBorderHover = '#ff7875'
+export const ColorErrorHover = '#ff4d4f'
+export const ColorErrorActive = '#cf1322'
+export const ColorErrorTextHover = '#a8071a'
+export const ColorErrorText = '#820014'
+export const ColorErrorTextActive = '#5c0011'
+export const ColorBgMask = 'rgba(0, 0, 0, 0.45)'
 export const BorderRadiusLg = '16px'
 export const MpBrandPrimary1 = '#f8f6fb'
 export const MpBrandPrimary2 = '#ebe8f8'
@@ -262,30 +279,14 @@ export const Lime7 = '#7cb305'
 export const Lime8 = '#5b8c00'
 export const Lime9 = '#3f6600'
 export const Lime10 = '#254000'
-export const ColorText = 'rgba(0, 0, 0, 0.88)'
-export const ColorTextSecondary = 'rgba(0, 0, 0, 0.65)'
-export const ColorTextTertiary = 'rgba(0, 0, 0, 0.45)'
-export const ColorTextQuaternary = 'rgba(0, 0, 0, 0.25)'
-export const ColorBgLayout = '#f5f5f5'
 export const ColorBgContainer = '#ffffff'
 export const ColorBgElevated = '#ffffff'
-export const ColorBgSpotlight = 'rgba(0, 0, 0, 0.85)'
 export const ColorBgBlur = 'transparent'
 export const ColorSuccessBg = '#f6ffed'
 export const ColorSuccessBgHover = '#d9f7be'
 export const ColorSuccessBorder = '#b7eb8f'
 export const ColorSuccessBorderHover = '#95de64'
 export const ColorSuccessActive = '#389e0d'
-export const ColorErrorBg = '#fff2f0'
-export const ColorErrorBgHover = '#fff1f0'
-export const ColorErrorBgActive = '#ffccc7'
-export const ColorErrorBorder = '#ffccc7'
-export const ColorErrorBorderHover = '#ffa39e'
-export const ColorErrorHover = '#ff7875'
-export const ColorErrorActive = '#d9363e'
-export const ColorErrorTextHover = '#ff7875'
-export const ColorErrorText = '#ff4d4f'
-export const ColorErrorTextActive = '#d9363e'
 export const ColorWarningBg = '#fffbe6'
 export const ColorWarningBgHover = '#fff1b8'
 export const ColorWarningBorder = '#ffe58f'
@@ -301,7 +302,6 @@ export const ColorInfoTextHover = '#4096ff'
 export const ColorInfoText = '#1677ff'
 export const ColorInfoTextActive = '#0958d9'
 export const ColorLinkActive = '#0958d9'
-export const ColorBgMask = 'rgba(0, 0, 0, 0.45)'
 export const ColorWhite = '#fff'
 export const FontSizeSm = '12px'
 export const FontSizeLg = '16px'
@@ -327,7 +327,7 @@ export const SizeXl = '32px'
 export const SizeLg = '24px'
 export const SizeMd = '20px'
 export const SizeMs = '16px'
-export const Size = '16px'
+export const Size = '16rem'
 export const SizeSm = '12px'
 export const SizeXs = '8px'
 export const SizeXxs = '4px'
@@ -341,29 +341,28 @@ export const LineWidthBold = '2px'
 export const BorderRadiusXs = '2px'
 export const BorderRadiusSm = '6px'
 export const BorderRadiusOuter = '6px'
-export const ColorFillContent = 'rgba(32, 0, 122, 0.06)'
-export const ColorFillContentHover = 'rgba(15, 14, 14, 0.15)'
-export const ColorFillAlter = 'rgba(32, 0, 122, 0.03)'
-export const ColorBgContainerDisabled = 'rgba(15, 14, 14, 0.04)'
+export const ColorFillContent = '#ebe8f8'
+export const ColorFillContentHover = '#dcdcd8'
+export const ColorFillAlter = '#f8f6fb'
+export const ColorBgContainerDisabled = '#faf9f8'
 export const ColorBorderBg = '#ffffff'
-export const ColorSplit = 'rgba(44, 22, 11, 0.09)'
-export const ColorTextPlaceholder = 'rgba(0, 0, 0, 0.25)'
-export const ColorTextDisabled = 'rgba(0, 0, 0, 0.25)'
-export const ColorTextHeading = 'rgba(0, 0, 0, 0.88)'
-export const ColorTextLabel = 'rgba(0, 0, 0, 0.65)'
-export const ColorTextDescription = 'rgba(0, 0, 0, 0.45)'
+export const ColorTextPlaceholder = '#505249'
+export const ColorTextDisabled = '#505249'
+export const ColorTextHeading = '#0f0e0e'
+export const ColorTextLabel = '#212020'
+export const ColorTextDescription = '#2c2d2b'
 export const ColorTextLightSolid = '#fff'
-export const ColorHighlight = '#ff4d4f'
-export const ColorBgTextHover = 'rgba(32, 0, 122, 0.06)'
-export const ColorBgTextActive = 'rgba(15, 14, 14, 0.15)'
-export const ColorIcon = 'rgba(0, 0, 0, 0.45)'
-export const ColorIconHover = 'rgba(0, 0, 0, 0.88)'
+export const ColorHighlight = '#f5222d'
+export const ColorBgTextHover = '#ebe8f8'
+export const ColorBgTextActive = '#dcdcd8'
+export const ColorIcon = '#2c2d2b'
+export const ColorIconHover = '#0f0e0e'
 export const FontSizeIcon = '12px'
 export const LineWidthFocus = '4px'
 export const ControlOutlineWidth = '2px'
 export const ControlInteractiveSize = '16px'
-export const ControlItemBgActiveDisabled = 'rgba(15, 14, 14, 0.15)'
-export const ControlTmpOutline = 'rgba(32, 0, 122, 0.03)'
+export const ControlItemBgActiveDisabled = '#dcdcd8'
+export const ControlTmpOutline = '#f8f6fb'
 export const FontWeightStrong = 600
 export const OpacityLoading = 0.65
 export const LinkDecoration = 'none'