diff --git a/docs/_data/links.json b/docs/_data/links.json
index 0a7c12bf..1efa1bbd 100644
--- a/docs/_data/links.json
+++ b/docs/_data/links.json
@@ -19,78 +19,107 @@
     "overview-start": {
       "name": "Getting started",
       "subtitle": "You only need <strong>1 CSS file</strong> to use Bulma",
+      "color": "danger",
+      "icon": "rocket",
       "path": "/documentation/overview/start"
     },
     "overview-customize": {
       "name": "Customize",
       "subtitle": "Create your <strong>own theme</strong> with a simple set of <strong>variables</strong>",
+      "color": "star",
+      "icon": "paint-brush",
       "path": "/documentation/overview/customize"
     },
     "overview-classes": {
       "name": "CSS Classes",
       "subtitle": "Bulma is simply a <strong>collection</strong> of CSS classes. Write the HTML code you want.",
+      "color": "link",
+      "icon_brand": "true",
+      "icon": "css3",
       "path": "/documentation/overview/classes"
     },
     "overview-modular": {
       "name": "Modularity",
       "subtitle": "Just import what you <strong>need</strong>",
+      "color": "success",
+      "icon": "cubes",
       "path": "/documentation/overview/modular"
     },
     "overview-responsiveness": {
       "name": "Responsiveness",
       "subtitle": "Bulma is a <strong>mobile-first</strong> framework",
+      "color": "primary",
+      "icon": "arrows-alt-h",
       "path": "/documentation/overview/responsiveness"
     },
     "overview-variables": {
       "name": "Variables",
-      "subtitle": "Easily <strong>customize</strong> Bulma to match your design",
+      "subtitle": "See how Bulma uses <strong>Sass variables</strong> to allows easy customization",
+      "color": "grey",
+      "icon": "cogs",
       "path": "/documentation/overview/variables"
     },
     "overview-colors": {
       "name": "Colors",
       "subtitle": "The <strong>colors</strong> that <strong>style</strong> most Bulma elements and components",
+      "color": "info",
+      "icon": "tint",
       "path": "/documentation/overview/colors"
     },
     "overview-functions": {
       "name": "Functions",
       "subtitle": "Utility functions to calculate colors and other values",
+      "color": "orange",
+      "icon": "code",
       "path": "/documentation/overview/functions"
     },
     "overview-mixins": {
       "name": "Mixins",
       "subtitle": "Utility mixins for custom elements and responsive helpers",
+      "color": "purple",
+      "icon": "plus",
       "path": "/documentation/overview/mixins"
     },
     "modifiers": {
       "name": "Modifiers",
       "subtitle": "An <strong>easy-to-read</strong> naming system designed for humans",
-      "color": "info",
+      "color": "grey",
       "icon": "cogs",
       "path": "/documentation/modifiers"
     },
     "modifiers-syntax": {
       "name": "Syntax",
       "subtitle": "Most Bulma elements have <strong>alternative</strong> styles. To apply them, you only need to append one of the <strong>modifier classes</strong>. They all start with <code>is-</code> or <code>has-</code>.",
+      "color": "orange",
+      "icon": "code",
       "path": "/documentation/modifiers/syntax"
     },
     "modifiers-helpers": {
       "name": "Helpers",
       "subtitle": "Apply <strong>helper classes</strong> to almost any element, in order to alter its style",
+      "color": "danger",
+      "icon": "medkit",
       "path": "/documentation/modifiers/helpers"
     },
     "modifiers-responsive-helpers": {
       "name": "Responsive helpers",
       "subtitle": "<strong>Show/hide content</strong> depending on the width of the viewport",
+      "color": "primary",
+      "icon": "arrows-alt-h",
       "path": "/documentation/modifiers/responsive-helpers"
     },
     "modifiers-color-helpers": {
       "name": "Color helpers",
       "subtitle": "Change the <strong>color</strong> of the text and/or background",
+      "color": "info",
+      "icon": "tint",
       "path": "/documentation/modifiers/color-helpers"
     },
     "modifiers-typography-helpers": {
       "name": "Typography helpers",
       "subtitle": "Change the <strong>size</strong> and <strong>color</strong> of the text for one or multiple viewport width",
+      "color": "grey-dark",
+      "icon": "font",
       "path": "/documentation/modifiers/typography-helpers"
     },
     "columns": {
@@ -103,33 +132,45 @@
     "columns-basics": {
       "name": "Basics",
       "subtitle": "A simple way to build <strong>responsive columns</strong>",
+      "color": "star",
+      "icon": "columns",
       "path": "/documentation/columns/basics"
     },
-    "columns-gap": {
-      "name": "Gap",
-      "subtitle": Customize the <strong>gap</strong> between the columns,
-      "path": "/documentation/columns/gap"
-    },
-    "columns-nesting": {
-      "name": "Nesting",
-      "subtitle": "A simple way to build <strong>responsive columns</strong>",
-      "path": "/documentation/columns/nesting"
-    },
-    "columns-options": {
-      "name": "Options",
-      "subtitle": "Design different <strong>types</strong> of column layouts",
-      "path": "/documentation/columns/options"
-    },
-    "columns-responsiveness": {
-      "name": "Responsiveness",
-      "subtitle": "Handle <strong>different</strong> column layouts for each <strong>breakpoint</strong>",
-      "path": "/documentation/columns/responsiveness"
-    },
     "columns-sizes": {
       "name": "Sizes",
       "subtitle": "Define the <strong>size</strong> of each column <strong>individually</strong>",
+      "color": "success",
+      "icon": "expand-arrows-alt",
       "path": "/documentation/columns/sizes"
     },
+    "columns-responsiveness": {
+      "name": "Responsiveness",
+      "subtitle": "Handle <strong>different</strong> column layouts for each <strong>breakpoint</strong>",
+      "color": "primary",
+      "icon": "arrows-alt-h",
+      "path": "/documentation/columns/responsiveness"
+    },
+    "columns-nesting": {
+      "name": "Nesting",
+      "subtitle": "A simple way to build <strong>responsive columns</strong>",
+      "color": "danger",
+      "icon": "sitemap",
+      "path": "/documentation/columns/nesting"
+    },
+    "columns-gap": {
+      "name": "Gap",
+      "subtitle": "Customize the <strong>gap</strong> between the columns",
+      "color": "info",
+      "icon": "pause",
+      "path": "/documentation/columns/gap"
+    },
+    "columns-options": {
+      "name": "Options",
+      "subtitle": "Design different <strong>types</strong> of column layouts",
+      "color": "grey",
+      "icon": "cogs",
+      "path": "/documentation/columns/options"
+    },
     "layout": {
       "name": "Layout",
       "subtitle": "Design the <strong>structure</strong> of your webpage with these CSS classes",
@@ -277,7 +318,7 @@
     "elements-image": {
       "name": "Image",
       "subtitle": "A container for <strong>responsive images</strong>",
-      "color": "bootstrap",
+      "color": "purple",
       "icon": "image",
       "path": "/documentation/elements/image"
     },
@@ -440,7 +481,7 @@
     "extensions"
   ],
   "categories": {
-    "overview": ["overview-start", "overview-classes", "overview-modular", "overview-responsiveness", "overview-variables", "overview-colors", "overview-functions", "overview-mixins"],
+    "overview": ["overview-start", "overview-customize", "overview-classes", "overview-modular", "overview-responsiveness", "overview-variables", "overview-colors", "overview-functions", "overview-mixins"],
     "modifiers": ["modifiers-syntax", "modifiers-helpers", "modifiers-responsive-helpers", "modifiers-color-helpers", "modifiers-typography-helpers"],
     "columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"],
     "layout": ["layout-container", "layout-level", "layout-media", "layout-hero", "layout-section", "layout-footer", "layout-tiles"],
diff --git a/docs/_sass/specific.sass b/docs/_sass/specific.sass
index f792ad60..8e69a1bd 100644
--- a/docs/_sass/specific.sass
+++ b/docs/_sass/specific.sass
@@ -184,6 +184,9 @@
 .has-text-orange
   color: $orange !important
 
+.has-text-purple
+  color: $purple !important
+
 .has-text-bootstrap
   color: $bootstrap !important
 
diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 6bbaac3d..6ab91376 100644
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -11229,6 +11229,10 @@ svg {
   color: #ff470f !important;
 }
 
+.has-text-purple {
+  color: #b86bff !important;
+}
+
 .has-text-bootstrap {
   color: #6f5499 !important;
 }