From e15d12ffdf083a4635a23ecc8b892c5e9a957cdf Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Fri, 3 Mar 2017 13:48:22 +0800
Subject: [PATCH] docs: update introduce.md

---
 docs/spec/colors.md           |  4 ++++
 site/theme/static/colors.less | 25 +++++++++++++++++++------
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/docs/spec/colors.md b/docs/spec/colors.md
index bfddea4f27..d59a01095e 100644
--- a/docs/spec/colors.md
+++ b/docs/spec/colors.md
@@ -114,6 +114,10 @@ const ExtendPalettes = React.createClass({
       {
         name: 'cyan',
         description: '清新、冷静、结构化',
+      },
+      {
+        name: 'grey',
+        description: '平稳、中性',
       }
     ];
     return (
diff --git a/site/theme/static/colors.less b/site/theme/static/colors.less
index 18bc001350..e0de978929 100644
--- a/site/theme/static/colors.less
+++ b/site/theme/static/colors.less
@@ -35,18 +35,19 @@
 }
 
 .color-title {
-  margin: 0 0 16px;
+  margin: 0 0 24px;
   font-weight: 500;
   color: #5c6b77;
-  font-size: 22px;
+  font-size: 26px;
   text-transform: capitalize;
+  text-align: center;
 }
 
 .color-description {
-  font-size: 16px;
-  margin-left: 12px;
-  font-weight: normal;
-  color: #888;
+  font-size: 12px;
+  font-weight: lighter;
+  color: #777;
+  display: block;
 }
 
 .main-color:hover {
@@ -99,6 +100,17 @@
   .make-palatte(@color, (@index + 1));    // next iteration
 }
 
+@grey-1: #fbfbfb;
+@grey-2: #f7f7f7;
+@grey-3: #f5f5f5;
+@grey-4: #e9e9e9;
+@grey-5: #d9d9d9;
+@grey-6: #bfbfbf;
+@grey-7: #919191;
+@grey-8: #5a5a5a;
+@grey-9: #404040;
+@grey-10: #222;
+
 .main-color {
   .make-palatte(blue);
   .make-palatte(purple);
@@ -108,4 +120,5 @@
   .make-palatte(red);
   .make-palatte(orange);
   .make-palatte(yellow);
+  .make-palatte(grey);
 }