Improve colors docs and update experimentals page order

1 files changed, 22 insertions, 12 deletions

diff --git a/docs/index.html b/docs/index.html
index d18570f..5f2cb09 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -205,13 +205,13 @@
               <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 class="color-subtitle">Primary</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 class="color-subtitle">Secondary</div>
                 </div>
               </div>
             </div>
@@ -219,33 +219,43 @@
               <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 class="color-subtitle">Dark</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 class="color-subtitle">Gray dark</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 class="color-subtitle">Gray</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 class="color-subtitle">Gray light</div>
+                </div>
+              </div>
+              <div class="column col-3 col-md-6">
+                <div class="docs-color" style="background:#f0f1f4;color:#727e96;">
+                  <div class="color-title">#f0f1f4</div>
+                  <div class="color-subtitle">Border</div>
+                </div>
+              </div>
+              <div class="column col-3 col-md-6">
+                <div class="docs-color" style="background:#f8f9fa;color:#727e96;">
+                  <div class="color-title">#f8f9fa</div>
+                  <div class="color-subtitle">Background</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 class="color-subtitle">Light</div>
                 </div>
               </div>
             </div>
@@ -253,19 +263,19 @@
               <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 class="color-subtitle">Success</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 class="color-subtitle">Warning</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 class="color-subtitle">Danger</div>
                 </div>
               </div>
             </div>