diff --git a/docs/.vitepress/vitepress/components/globals/main-color.vue b/docs/.vitepress/vitepress/components/globals/main-color.vue
index 36cd0b3f3a..eabd86c105 100644
--- a/docs/.vitepress/vitepress/components/globals/main-color.vue
+++ b/docs/.vitepress/vitepress/components/globals/main-color.vue
@@ -14,12 +14,12 @@ const { copyColor } = useCopyColor()
     <el-col :span="10" :xs="{ span: 12 }">
       <div class="demo-color-box" :style="{ background: primary }">
         Brand Color
-        <div class="value">{{ primary.toUpperCase() }}</div>
+        <div class="value" text="xs">{{ primary.toUpperCase() }}</div>
         <div class="bg-color-sub" :style="{ background: primary }">
           <div
             v-for="level in colorLevel"
             :key="level"
-            class="bg-blue-sub-item hover:(cursor-pointer shadow)"
+            class="bg-blue-sub-item cursor-pointer hover:shadow"
             :style="{
               width: `${100 / 6}%`,
               background: 'var(--el-color-primary-' + level + ')',
diff --git a/docs/.vitepress/vitepress/components/globals/secondary-colors.vue b/docs/.vitepress/vitepress/components/globals/secondary-colors.vue
index 05d45d72f9..256631f019 100644
--- a/docs/.vitepress/vitepress/components/globals/secondary-colors.vue
+++ b/docs/.vitepress/vitepress/components/globals/secondary-colors.vue
@@ -19,12 +19,14 @@ const { copyColor } = useCopyColor()
     >
       <div class="demo-color-box" :style="{ background: getColorValue(type) }">
         {{ type.charAt(0).toUpperCase() + type.slice(1) }}
-        <div class="value">{{ getColorValue(type).toUpperCase() }}</div>
+        <div class="value" text="xs">
+          {{ getColorValue(type).toUpperCase() }}
+        </div>
         <div class="bg-color-sub">
           <div
             v-for="(level, key) in colorLevel"
             :key="key"
-            class="bg-secondary-sub-item transition hover:(cursor-pointer shadow)"
+            class="bg-secondary-sub-item transition cursor-pointer hover:shadow"
             :style="{
               width: `${100 / 6}%`,
               background: `var(--el-color-${type}-` + level + ')',
diff --git a/docs/en-US/component/color.md b/docs/en-US/component/color.md
index 266f8bcf91..26cf7d4054 100644
--- a/docs/en-US/component/color.md
+++ b/docs/en-US/component/color.md
@@ -13,7 +13,7 @@ Element Plus uses a specific set of palettes to specify colors to provide a cons
   border-radius: 4px;
   padding: 20px;
   margin: 8px 0;
-  height: 100px;
+  height: 112px;
   box-sizing: border-box;
   color: var(--el-color-white);
   font-size: 14px;