diff --git a/src/pages/demo/element/basic-color/components/color-info.vue b/src/pages/demo/element/basic-color/components/color-info.vue
new file mode 100644
index 00000000..d22c7e27
--- /dev/null
+++ b/src/pages/demo/element/basic-color/components/color-info.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <p>颜色</p>
+  </div>
+</template>
diff --git a/src/pages/demo/element/basic-color/index.vue b/src/pages/demo/element/basic-color/index.vue
index c7f2b77b..105ce536 100644
--- a/src/pages/demo/element/basic-color/index.vue
+++ b/src/pages/demo/element/basic-color/index.vue
@@ -5,7 +5,7 @@
       <el-row :gutter="20">
         <el-col :span="6">
           <div class="color color-primary">
-            <!-- <h1>$color-primary</h1> -->
+            <d2-demo-color-info/>
           </div>
         </el-col>
       </el-row>
@@ -29,33 +29,58 @@
     </el-card>
     <el-card shadow="never">
       <template slot="header">中性色</template>
+      <el-row :gutter="20" class="d2-mb">
+        <el-col :span="6">
+          <div class="color color-text-main"></div>
+        </el-col>
+        <el-col :span="6">
+          <div class="color color-text-normal"></div>
+        </el-col>
+        <el-col :span="6">
+          <div class="color color-text-sub"></div>
+        </el-col>
+        <el-col :span="6">
+          <div class="color color-text-placehoder"></div>
+        </el-col>
+      </el-row>
       <el-row :gutter="20">
         <el-col :span="6">
-          <div class="color color-info"></div>
+          <div class="color color-border-1"></div>
         </el-col>
         <el-col :span="6">
-          <div class="color color-success"></div>
+          <div class="color color-border-2"></div>
         </el-col>
         <el-col :span="6">
-          <div class="color color-warning"></div>
+          <div class="color color-border-3"></div>
         </el-col>
         <el-col :span="6">
-          <div class="color color-danger"></div>
+          <div class="color color-border-4"></div>
         </el-col>
       </el-row>
     </el-card>
   </d2-container>
 </template>
 
+<script>
+export default {
+  components: {
+    'd2-demo-color-info': () => import('./components/color-info.vue')
+  }
+}
+</script>
+
+
 <style lang="scss" scoped>
 @import '~@/assets/style/unit/_color.scss';
 .color {
   border-radius: 4px;
   height: 100px;
 }
+
 .color-primary {
   background-color: $color-primary;
 }
+
 .color-info {
   background-color: $color-info;
 }
@@ -68,5 +93,31 @@
 .color-danger {
   background-color: $color-danger;
 }
+
+.color-text-main {
+  background-color: $color-text-main;
+}
+.color-text-normal {
+  background-color: $color-text-normal;
+}
+.color-text-sub {
+  background-color: $color-text-sub;
+}
+.color-text-placehoder {
+  background-color: $color-text-placehoder;
+}
+
+.color-border-1 {
+  background-color: $color-border-1;
+}
+.color-border-2 {
+  background-color: $color-border-2;
+}
+.color-border-3 {
+  background-color: $color-border-3;
+}
+.color-border-4 {
+  background-color: $color-border-4;
+}
 </style>