diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 1c19f2a..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,113 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <h2>Essential Links</h2>
-    <ul>
-      <li>
-        <a
-          href="https://vuejs.org"
-          target="_blank"
-        >
-          Core Docs
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://forum.vuejs.org"
-          target="_blank"
-        >
-          Forum
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://chat.vuejs.org"
-          target="_blank"
-        >
-          Community Chat
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://twitter.com/vuejs"
-          target="_blank"
-        >
-          Twitter
-        </a>
-      </li>
-      <br>
-      <li>
-        <a
-          href="http://vuejs-templates.github.io/webpack/"
-          target="_blank"
-        >
-          Docs for This Template
-        </a>
-      </li>
-    </ul>
-    <h2>Ecosystem</h2>
-    <ul>
-      <li>
-        <a
-          href="http://router.vuejs.org/"
-          target="_blank"
-        >
-          vue-router
-        </a>
-      </li>
-      <li>
-        <a
-          href="http://vuex.vuejs.org/"
-          target="_blank"
-        >
-          vuex
-        </a>
-      </li>
-      <li>
-        <a
-          href="http://vue-loader.vuejs.org/"
-          target="_blank"
-        >
-          vue-loader
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/awesome-vue"
-          target="_blank"
-        >
-          awesome-vue
-        </a>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  data () {
-    return {
-      msg: 'Welcome to Your Vue.js App'
-    }
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h1, h2 {
-  font-weight: normal;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
diff --git a/src/components/card/ChartCard.vue b/src/components/card/ChartCard.vue
index 43cca3f..a47b8d7 100644
--- a/src/components/card/ChartCard.vue
+++ b/src/components/card/ChartCard.vue
@@ -37,7 +37,7 @@ export default {
     position: relative;
     overflow: hidden;
     width: 100%;
-    color: rgba(0,0,0,.45);
+    color: @text-color-second;
     font-size: 14px;
     line-height: 22px;
   }
@@ -59,7 +59,7 @@ export default {
     height: 38px;
   }
   .chart-card-footer{
-    border-top: 1px solid #e8e8e8;
+    border-top: 1px solid @border-color-base;
     padding-top: 9px;
     margin-top: 8px;
   }
diff --git a/src/components/chart/MiniProgress.vue b/src/components/chart/MiniProgress.vue
index ef9157a..c4d0388 100644
--- a/src/components/chart/MiniProgress.vue
+++ b/src/components/chart/MiniProgress.vue
@@ -25,7 +25,7 @@ export default {
     position: relative;
     width: 100%;
     .wrap {
-      background-color: #f5f5f5;
+      background-color: @bg-color;
       position: relative;
     }
     .progress {
diff --git a/src/components/chart/Trend.vue b/src/components/chart/Trend.vue
index 2274afd..43ebdf5 100644
--- a/src/components/chart/Trend.vue
+++ b/src/components/chart/Trend.vue
@@ -69,10 +69,10 @@ export default {
     .chart-trend-icon{
       font-size: 12px;
       &.up{
-        color: #f5222d;
+        color: @red-6;
       }
       &.down{
-        color: #52c41a;
+        color: @green-6;
       }
     }
   }
diff --git a/src/components/exception/ExceptionPage.vue b/src/components/exception/ExceptionPage.vue
index c3f87d3..656acaa 100644
--- a/src/components/exception/ExceptionPage.vue
+++ b/src/components/exception/ExceptionPage.vue
@@ -51,7 +51,7 @@ export default {
         margin-bottom: 24px;
       }
       .desc{
-        color: rgba(0,0,0,.45);
+        color: @text-color-second;
         font-size: 20px;
         line-height: 28px;
         margin-bottom: 16px;
diff --git a/src/components/form/FormRow.vue b/src/components/form/FormRow.vue
index 364c902..def3f63 100644
--- a/src/components/form/FormRow.vue
+++ b/src/components/form/FormRow.vue
@@ -19,10 +19,10 @@ export default {
 <style lang="less" scoped>
   .form-row{
     display: flex;
-    border-bottom: 1px dashed #e8e8e8;
+    border-bottom: 1px dashed @border-color-base;
     margin-bottom: 16px;
     .label {
-      color: rgba(0, 0, 0, 0.85);
+      color: @title-color;
       font-size: 14px;
       margin-right: 24px;
       flex: 0 0 auto;
diff --git a/src/components/menu/Contextmenu.vue b/src/components/menu/Contextmenu.vue
index c901f42..13df92b 100644
--- a/src/components/menu/Contextmenu.vue
+++ b/src/components/menu/Contextmenu.vue
@@ -66,6 +66,6 @@ export default {
     z-index: 1;
 
     border-radius: 4px;
-    box-shadow: -4px 4px 16px 1px #e6e6e6 !important;
+    box-shadow: -4px 4px 16px 1px @shadow-color !important;
   }
 </style>
diff --git a/src/components/setting/Setting.vue b/src/components/setting/Setting.vue
index 8cd02d9..c68095c 100644
--- a/src/components/setting/Setting.vue
+++ b/src/components/setting/Setting.vue
@@ -97,7 +97,7 @@ export default {
     return {
       animate: this.$store.state.setting.animate.name,
       direction: this.$store.state.setting.animate.direction,
-      colors: ['#f5222d', '#fa541c', '#fadb14', '#49aa19', '#13c2c2', '#1890ff', '#722ed1', '#eb2f96'],
+      colors: ['#f5222d', '#fa541c', '#fadb14', '#42b983', '#13c2c2', '#1890ff', '#722ed1', '#eb2f96'],
     }
   },
   computed: {
diff --git a/src/components/setting/SettingItem.vue b/src/components/setting/SettingItem.vue
index 6c20326..7734bcc 100644
--- a/src/components/setting/SettingItem.vue
+++ b/src/components/setting/SettingItem.vue
@@ -17,7 +17,7 @@ export default {
     margin-bottom: 24px;
     .title{
       font-size: 14px;
-      color: rgba(0,0,0,.85);
+      color: @title-color;
       line-height: 22px;
       margin-bottom: 12px;
     }
diff --git a/src/components/task/TaskGroup.vue b/src/components/task/TaskGroup.vue
index db4fafb..08d066c 100644
--- a/src/components/task/TaskGroup.vue
+++ b/src/components/task/TaskGroup.vue
@@ -62,7 +62,7 @@ export default {
           margin: 0 8px;
           font-size: 12px;
           padding: 2px 6px;
-          background-color: rgba(27,31,35,0.15);
+          background-color: @base-bg-color;
         }
       }
       .actions{
diff --git a/src/components/task/TaskItem.vue b/src/components/task/TaskItem.vue
index 2c929f9..58e303d 100644
--- a/src/components/task/TaskItem.vue
+++ b/src/components/task/TaskItem.vue
@@ -14,11 +14,11 @@ export default {
 <style lang="less" scoped>
   .task-item{
     margin-bottom: 16px;
-    box-shadow: 0 1px 1px rgba(27,31,35,0.1);
+    box-shadow: 0 1px 1px @shadow-color;
     border-radius: 6px;
     & :hover{
       cursor: move;
-      box-shadow: 0 1px 1px rgba(27,31,35,0.15);
+      box-shadow: 0 1px 2px @shadow-color;
       border-radius: 6px;
     }
   }
diff --git a/src/components/tool/AStepItem.vue b/src/components/tool/AStepItem.vue
index aa1ec3d..981a35c 100644
--- a/src/components/tool/AStepItem.vue
+++ b/src/components/tool/AStepItem.vue
@@ -52,7 +52,7 @@ export default {
   :global{
     .ant-steps-item-process{
       .linkable{
-        color: #40a9ff;
+        color: @primary-color;
       }
     }
   }
diff --git a/src/components/tool/AvatarList.vue b/src/components/tool/AvatarList.vue
index acf843f..f2c0715 100644
--- a/src/components/tool/AvatarList.vue
+++ b/src/components/tool/AvatarList.vue
@@ -1,9 +1,7 @@
 <template>
   <div class="avatar-list">
-    <ul>
-      <slot>
-      </slot>
-    </ul>
+    <slot>
+    </slot>
   </div>
 </template>
 
@@ -47,10 +45,9 @@ export default {
 }
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
   .avatar-list {
     display: inline-block;
-    ul {
       display: inline-block;
       margin-left: 8px;
       font-size: 0;
@@ -68,6 +65,5 @@ export default {
           }
         }
       }
-    }
   }
 </style>
diff --git a/src/components/tool/Drawer.vue b/src/components/tool/Drawer.vue
index c0ca5d1..024692a 100644
--- a/src/components/tool/Drawer.vue
+++ b/src/components/tool/Drawer.vue
@@ -95,7 +95,7 @@ export default {
       left: 0px;
       &.open{
         .content{
-          box-shadow: 2px 0 8px rgba(0,0,0,.15);
+          box-shadow: 2px 0 8px @shadow-color;
         }
       }
       &.close{
@@ -109,7 +109,7 @@ export default {
       }
       &.open{
         .content{
-          box-shadow: -2px 0 8px rgba(0,0,0,.15);
+          box-shadow: -2px 0 8px @shadow-color;
         }
       }
       &.close{
diff --git a/src/components/tool/FooterToolBar.vue b/src/components/tool/FooterToolBar.vue
index 3f56d68..9b2f317 100644
--- a/src/components/tool/FooterToolBar.vue
+++ b/src/components/tool/FooterToolBar.vue
@@ -21,7 +21,7 @@ export default {
     width: 100%;
     bottom: 0;
     right: 0;
-    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.03);
+    box-shadow: 0 -1px 2px @shadow-color;
     background: @base-bg-color;
     border-top: 1px solid @border-color-split;
     padding: 12px 24px;
diff --git a/src/layouts/AdminLayout.vue b/src/layouts/AdminLayout.vue
index 3e186cb..a5541d4 100644
--- a/src/layouts/AdminLayout.vue
+++ b/src/layouts/AdminLayout.vue
@@ -112,7 +112,7 @@ export default {
       font-size: 22px;
       width: 40px;
       height: 40px;
-      box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
+      box-shadow: -2px 0 8px @shadow-color;
     }
   }
 </style>
diff --git a/src/layouts/footer/PageFooter.vue b/src/layouts/footer/PageFooter.vue
index 2b155cf..c6d6d5d 100644
--- a/src/layouts/footer/PageFooter.vue
+++ b/src/layouts/footer/PageFooter.vue
@@ -24,7 +24,7 @@ export default {
     margin: 48px 0 24px;
     text-align: center;
     .copyright{
-      color: rgba(0,0,0,.45);
+      color: @text-color-second;
       font-size: 14px;
     }
     .links{
@@ -33,7 +33,7 @@ export default {
         margin-right: 40px;
       }
       a{
-        color: rgba(0,0,0,.45);
+        color: @text-color-second;
         -webkit-transition: all .3s;
         transition: all .3s;
       }
diff --git a/src/layouts/header/HeaderSearch.vue b/src/layouts/header/HeaderSearch.vue
index e0b74ea..bd408cc 100644
--- a/src/layouts/header/HeaderSearch.vue
+++ b/src/layouts/header/HeaderSearch.vue
@@ -41,7 +41,7 @@ export default {
     }
     .search-input{
       border: 0;
-      border-bottom: 1px rgba(3, 5, 6, 0.23) solid;
+      border-bottom: 1px solid @border-color-split;
       transition: width 0.3s ease-in-out;
       input{
         border: 0;
diff --git a/src/pages/list/search/ApplicationList.vue b/src/pages/list/search/ApplicationList.vue
index 3fbf290..081e517 100644
--- a/src/pages/list/search/ApplicationList.vue
+++ b/src/pages/list/search/ApplicationList.vue
@@ -81,7 +81,7 @@ export default {
         margin: 0;
       }
       p:first-child {
-        color: rgba(0,0,0,.45);
+        color: @text-color-second;
         font-size: 12px;
         line-height: 20px;
         margin-bottom: 4px;
diff --git a/src/pages/list/search/ArticleList.vue b/src/pages/list/search/ArticleList.vue
index cbe8f78..019d65e 100644
--- a/src/pages/list/search/ArticleList.vue
+++ b/src/pages/list/search/ArticleList.vue
@@ -51,7 +51,7 @@ export default {
       max-width: 720px;
     }
     .author {
-      color: rgba(0,0,0,.45);
+      color: @text-color-second;
       margin-top: 16px;
       line-height: 22px;
       & > :global(.ant-avatar) {
@@ -63,7 +63,7 @@ export default {
           top: 1px;
         }
       & > em {
-          color: rgba(0,0,0,.25);
+          color: @disabled-color;
           font-style: normal;
           margin-left: 16px;
         }
diff --git a/src/pages/list/search/ProjectList.vue b/src/pages/list/search/ProjectList.vue
index 1e34262..03e9f06 100644
--- a/src/pages/list/search/ProjectList.vue
+++ b/src/pages/list/search/ProjectList.vue
@@ -47,7 +47,7 @@ export default {
     line-height: 20px;
     height: 20px;
     & > span {
-      color: rgba(0,0,0,.45);
+      color: @text-color-second;
       flex: 1;
       font-size: 12px;
     }
diff --git a/src/pages/result/Error.vue b/src/pages/result/Error.vue
index 62e1f5f..1abfc69 100644
--- a/src/pages/result/Error.vue
+++ b/src/pages/result/Error.vue
@@ -1,5 +1,5 @@
 <template>
-    <a-card :bordered="false">
+    <a-card class="result-error" :bordered="false">
       <result style="margin-bottom: 16px; margin-top: 48px" :is-success="false" :title="title" :description="description">
         <template slot="action">
           <a-button type="primary" >返回修改</a-button>
@@ -9,12 +9,12 @@
             您提交的内容有如下错误：
           </div>
           <div style="margin-bottom: 16px">
-            <a-icon type="close-circle-o" style="color: #f5222d; margin-right: 8px"/>
+            <a-icon class="error-icon" type="close-circle-o"/>
             您的账户已被冻结
             <a style="margin-left: 16px">立即解冻 <a-icon type="right" /></a>
           </div>
           <div>
-            <a-icon type="close-circle-o" style="color: #f5222d; margin-right: 8px"/>
+            <a-icon class="error-icon" type="close-circle-o"/>
             您的账户还不具备申请资格
             <a style="margin-left: 16px">立即升级 <a-icon type="right" /></a>
           </div>
@@ -24,7 +24,7 @@
 </template>
 
 <script>
-import Result from '../../components/result/Result'
+import Result from '@/components/result/Result'
 export default {
   name: 'Error',
   components: {Result},
@@ -37,6 +37,11 @@ export default {
 }
 </script>
 
-<style scoped>
-
+<style scoped lang="less">
+.result-error{
+  .error-icon{
+    color: @red-6;
+    margin-right: 8px
+  }
+}
 </style>
diff --git a/src/pages/result/Success.vue b/src/pages/result/Success.vue
index 39e2b40..4075e0a 100644
--- a/src/pages/result/Success.vue
+++ b/src/pages/result/Success.vue
@@ -1,37 +1,37 @@
 <template>
-    <a-card :bordered="false">
-      <result :is-success="true" :description="description" :title="title">
-        <template slot="action">
-          <a-button type="primary">返回列表</a-button>
-          <a-button style="margin-left: 8px">查看项目</a-button>
-          <a-button style="margin-left: 8px" @click="print">打印</a-button>
-        </template>
-        <div>
-          <div style="font-size: 16px; color: rgba(0, 0, 0, 0.85); font-weight: 500; margin-bottom: 20px;">项目名称</div>
-          <detail-list size="small" style="max-width: 800px; margin-bottom: 8px">
-            <detail-list-item term="项目ID">20180724089</detail-list-item>
-            <detail-list-item term="负责人">曲丽丽</detail-list-item>
-            <detail-list-item term="生效时间">016-12-12 ~ 2017-12-12</detail-list-item>
-          </detail-list>
-          <a-steps :current="1" progressDot>
-            <a-step title="创建项目">
-              <a-step-item-group slot="description">
-                <a-step-item title="曲丽丽" icon="dingding-o"/>
-                <a-step-item title="2016-12-12 12:32"/>
-              </a-step-item-group>
-            </a-step>
-            <a-step title="部门初审">
-              <a-step-item-group slot="description">
-                <a-step-item title="周毛毛" icon="dingding-o" :iconStyle="{color: '#00A0E9'}"/>
-                <a-step-item title="催一下" :titleStyle="{color: '#00A0E9'}"/>
-              </a-step-item-group>
-            </a-step>
-            <a-step title="财务复核"></a-step>
-            <a-step title="完成" ></a-step>
-          </a-steps>
-        </div>
-      </result>
-    </a-card>
+  <a-card class="result-success" :bordered="false">
+    <result :is-success="true" :description="description" :title="title">
+      <template slot="action">
+        <a-button class="action" type="primary">返回列表</a-button>
+        <a-button class="action" >查看项目</a-button>
+        <a-button class="action" @click="print">打印</a-button>
+      </template>
+      <div>
+        <div class="project-name">项目名称</div>
+        <detail-list size="small" style="max-width: 800px; margin-bottom: 8px">
+          <detail-list-item term="项目ID">20180724089</detail-list-item>
+          <detail-list-item term="负责人">曲丽丽</detail-list-item>
+          <detail-list-item term="生效时间">016-12-12 ~ 2017-12-12</detail-list-item>
+        </detail-list>
+        <a-steps :current="1" progressDot>
+          <a-step title="创建项目">
+            <a-step-item-group slot="description">
+              <a-step-item title="曲丽丽" icon="dingding-o"/>
+              <a-step-item title="2016-12-12 12:32"/>
+            </a-step-item-group>
+          </a-step>
+          <a-step title="部门初审">
+            <a-step-item-group slot="description">
+              <a-step-item title="周毛毛" icon="dingding-o" :iconStyle="{color: '#00A0E9'}"/>
+              <a-step-item title="催一下" :titleStyle="{color: '#00A0E9'}"/>
+            </a-step-item-group>
+          </a-step>
+          <a-step title="财务复核"></a-step>
+          <a-step title="完成" ></a-step>
+        </a-steps>
+      </div>
+    </result>
+  </a-card>
 </template>
 
 <script>
@@ -61,6 +61,16 @@ export default {
 }
 </script>
 
-<style scoped>
-
+<style scoped lang="less">
+.result-success{
+  .action:not(:first-child){
+    margin-left: 8px;
+  }
+  .project-name{
+    font-size: 16px;
+    color: @title-color;
+    font-weight: 500;
+    margin-bottom: 20px;
+  }
+}
 </style>
diff --git a/src/theme/default/color.less b/src/theme/default/color.less
index 4aeb66c..d0679c1 100644
--- a/src/theme/default/color.less
+++ b/src/theme/default/color.less
@@ -25,6 +25,7 @@
 @hover-bg-color-dark: @primary-7;
 @hover-bg-color-night: rgba(255, 255, 255, 0.025);
 @header-bg-color-dark: @layout-header-background;
+@border-color: @border-color-base;
 
 @shadow-down: @shadow-1-down;
 @shadow-up: @shadow-1-up;