Improve color variables and class namings

1 files changed, 72 insertions, 3 deletions

diff --git a/docs/index.html b/docs/index.html
index 2f2b552..d18570f 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -197,9 +197,78 @@
 └── spectre.less
 </code></pre>
 
-          <header id="colors" class="text-center"><h4>Colors</h4></header>
+          <header id="variables" class="text-center"><h4>Variables</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>
+            <p>Spectre.css is designed with consistent design language. You can modify <code>variables.less</code> to create your new or match existing design.
+            <h5>Colors</h5>
+            <div class="columns">
+              <div class="column col-3 col-md-6">
+                <div class="docs-color" style="background:#5764c6;color:#fff;">
+                  <div class="color-title">#5764c6</div>
+                  <div class="color-subtitle">Primary color</div>
+                </div>
+              </div>
+              <div class="column col-3 col-md-6">
+                <div class="docs-color" style="background:#eff1fa;color:#5764c6;">
+                  <div class="color-title">#eff1fa</div>
+                  <div class="color-subtitle">Secondary color</div>
+                </div>
+              </div>
+            </div>
+            <div class="columns">
+              <div class="column col-3 col-md-6">
+                <div class="docs-color" style="background:#454d5d;color:#fff;">
+                  <div class="color-title">#454d5d</div>
+                  <div class="color-subtitle">Dark color</div>
+                </div>
+              </div>
+              <div class="column col-3 col-md-6">
+                <div class="docs-color" style="background:#727e96;color:#fff;">
+                  <div class="color-title">#727e96</div>
+                  <div class="color-subtitle">Gray dark color</div>
+                </div>
+              </div>
+              <div class="column col-3 col-md-6">
+                <div class="docs-color" style="background:#acb3c2;color:#fff;">
+                  <div class="color-title">#acb3c2</div>
+                  <div class="color-subtitle">Gray color</div>
+                </div>
+              </div>
+              <div class="column col-3 col-md-6">
+                <div class="docs-color" style="background:#e7e9ed;color:#727e96;">
+                  <div class="color-title">#e7e9ed</div>
+                  <div class="color-subtitle">Gray light color</div>
+                </div>
+              </div>
+            </div>
+            <div class="columns">
+              <div class="column col-3 col-md-6">
+                <div class="docs-color" style="background:#fff;color:#727e96;">
+                  <div class="color-title">#fff</div>
+                  <div class="color-subtitle">Light color</div>
+                </div>
+              </div>
+            </div>
+            <div class="columns">
+              <div class="column col-3 col-md-6">
+                <div class="docs-color" style="background:#32b643;color:#fff;">
+                  <div class="color-title">#32b643</div>
+                  <div class="color-subtitle">Success color</div>
+                </div>
+              </div>
+              <div class="column col-3 col-md-6">
+                <div class="docs-color" style="background:#ffb700;color:#fff;">
+                  <div class="color-title">#ffb700</div>
+                  <div class="color-subtitle">Warning color</div>
+                </div>
+              </div>
+              <div class="column col-3 col-md-6">
+                <div class="docs-color" style="background:#e85600;color:#fff;">
+                  <div class="color-title">#e85600</div>
+                  <div class="color-subtitle">Danger color</div>
+                </div>
+              </div>
+            </div>
           </section>
         </section>
 
@@ -268,7 +337,7 @@
           <ul class="pagination">
             <li class="page-item page-next">
               <a href="elements.html">
-                <p class="page-item-meta">Next</p>
+                <p class="page-item-subtitle">Next</p>
                 <h4 class="page-item-title">Elements</h4>
               </a>
             </li>