Add Colors docs and update colors

1 files changed, 30 insertions, 0 deletions

diff --git a/docs/index.html b/docs/index.html
index 492b504..f373bdf 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -170,6 +170,36 @@
             </ol>
             <p>You can watch file changes and rebuild CSS files by using <code>gulp watch</code>.</p>
           </section>
+
+<!-- file structure -->
+<pre class="code"><code>spectre/
+├── dist/
+│   ├── spectre-exp.css
+│   ├── spectre-exp.min.css
+│   ├── spectre.css
+│   └── spectre.min.css
+│
+├── docs/
+|   ├── css/
+│   │   ├── docs.less
+│   │   └── ...
+│   ├── ../
+│   ├── index.html
+│   └── ...
+│
+├── src/
+│   ├── mixins.less
+│   ├── variables.less
+│   └── ...
+│
+├── spectre-exp.less
+└── spectre.less
+</code></pre>
+
+          <header id="colors" class="text-center"><h4>Colors</h4></header>
+          <section class="notes">
+            <p>Spectre.css has its consistent design language colors (primary color <span class="docs-dot bg-primary"></span> <span style="color:#5764c6;">#5764c6</span>), you can modify <code>variables.less</code> to create your new or match existing design. </p>
+          </section>
         </section>
 
         <section id="browsers" class="container">