diff --git a/_config.yml b/_config.yml
index d1e3106fb..160074666 100644
--- a/_config.yml
+++ b/_config.yml
@@ -68,9 +68,9 @@ author:
 
 docs-menu:
   - title: Getting started
-    pages: [index, styleguide]
+    pages: [index]
   - title: Components
-    pages: [alerts, avatars, buttons, cards, charts, form-components, tags, typography]
+    pages: [alerts, avatars, buttons, colors, cards, charts, form-components, tags, typography]
 
 colors:
   blue: 
@@ -143,14 +143,14 @@ theme-colors:
 #    name: Dark
 
 color_variants:
-  - name: 'Default'
-    suffix: ''
-  - name: 'Dark'
-    suffix: -dark
-  - name: 'Darker'
-    suffix: -darker
   - name: 'Darkest'
     suffix: -darkest
+  - name: 'Darker'
+    suffix: -darker
+  - name: 'Dark'
+    suffix: -dark
+  - name: 'Default'
+    suffix: ''
   - name: 'Light'
     suffix: -light
   - name: 'Lighter'
diff --git a/src/_docs/styleguide.md b/src/_docs/colors.md
similarity index 89%
rename from src/_docs/styleguide.md
rename to src/_docs/colors.md
index 8471341cb..548244b21 100644
--- a/src/_docs/styleguide.md
+++ b/src/_docs/colors.md
@@ -1,7 +1,7 @@
 ---
-title: Styleguide
-icon: fe fe-image
-description: Welcome to Tabler style guide. If you're new here, have a look through some of the topics on the side.
+title: Colors
+icon: fe fe-feather
+description: Convey meaning through color with a handful of color utility classes.
 ---
 
 ### Contextual colors