diff --git a/docs/_includes/features.html b/docs/_includes/features.html
index 92c601b6..fd7c0bc2 100644
--- a/docs/_includes/features.html
+++ b/docs/_includes/features.html
@@ -41,7 +41,7 @@
 </div>
 <div class="field">
   <p class="control">
-    <a class="button is-primary">Button</a>
+    <a class="button is-link">Button</a>
   </p>
 </div>
 {% endcapture %}
diff --git a/docs/_layouts/documentation.html b/docs/_layouts/documentation.html
index 93b4b87e..7ab85966 100644
--- a/docs/_layouts/documentation.html
+++ b/docs/_layouts/documentation.html
@@ -7,7 +7,7 @@ route: documentation
   {% include navbar.html id="Documentation" %}
 </div>
 
-<section class="hero is-primary">
+<section class="hero is-link">
   <div class="hero-body">
     <div class="container">
       <div class="columns is-vcentered">
diff --git a/docs/_sass/route.sass b/docs/_sass/route.sass
index e5a003dc..9d0e2253 100644
--- a/docs/_sass/route.sass
+++ b/docs/_sass/route.sass
@@ -1,14 +1,11 @@
 html.route-index
   .title.is-2
     position: relative
-
   .title.is-2 a
-    color: #242424
+    color: $text-strong
     position: relative
-
   .title.is-2 a:hover
-    color: #00d1b2
-
+    color: $blue
   .title.is-2 .icon.is-medium
     left: -80px
     opacity: 0.1
@@ -16,23 +13,17 @@ html.route-index
     top: 10px
     .fa
       font-size: 56px
-
   .hero .title.is-2 a
-    color: white
-
+    color: $white
   .hero .title.is-2 a:hover
-    color: white
-
+    color: $white
   .hero.is-primary a.column,
   .hero.is-primary a.column:hover
-    color: white
-
+    color: $white
   .hero.is-primary a.column:hover .title strong
     border-bottom: 1px solid
-
   @media screen and (max-width: 979px)
     .title.is-2 a
       padding-left: 0
-
     .title.is-2 .icon.is-medium
       display: none
diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 535dd588..a5733130 100644
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -1329,7 +1329,7 @@ a.box:active {
 }
 
 .button:focus, .button.is-focused {
-  border-color: #00d1b2;
+  border-color: #3273dc;
   color: #363636;
 }
 
@@ -7473,7 +7473,7 @@ a.navbar-item:hover, a.navbar-item.is-active,
 .pagination-previous:focus,
 .pagination-next:focus,
 .pagination-link:focus {
-  border-color: #00d1b2;
+  border-color: #3273dc;
 }
 
 .pagination-previous:active,
@@ -12246,12 +12246,12 @@ html.route-index .title.is-2 {
 }
 
 html.route-index .title.is-2 a {
-  color: #242424;
+  color: #363636;
   position: relative;
 }
 
 html.route-index .title.is-2 a:hover {
-  color: #00d1b2;
+  color: #3273dc;
 }
 
 html.route-index .title.is-2 .icon.is-medium {
diff --git a/docs/index.html b/docs/index.html
index 08562ee9..aeae204d 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -304,7 +304,7 @@ route: index
           </p>
         </div>
         <p class="level-item">
-          <a class="button is-primary">
+          <a class="button is-link">
             New
           </a>
         </p>
diff --git a/sass/utilities/derived-variables.sass b/sass/utilities/derived-variables.sass
index b881a2ad..92a71075 100644
--- a/sass/utilities/derived-variables.sass
+++ b/sass/utilities/derived-variables.sass
@@ -59,7 +59,7 @@ $link-hover: $grey-darker !default
 $link-hover-border: $grey-light !default
 
 $link-focus: $grey-darker !default
-$link-focus-border: $primary !default
+$link-focus-border: $blue !default
 
 $link-active: $grey-darker !default
 $link-active-border: $grey-dark !default