General updates

assets/sass/base/_base.scss

@@ -32,4 +32,14 @@ a {
         color: $base-colour;
         text-decoration: underline;
     }
+}
+
+
+/**
+ * Rulers
+ */
+
+hr {
+    background-color: $base-colour;
+    height: 1px;
 }

assets/sass/base/_typography.scss

@@ -5,4 +5,8 @@ h4,
 h5, 
 h6 {
   font-weight: bold;
+}
+
+small {
+    font-size: .75em;
 }

assets/sass/components/_buttons.scss

@@ -1,24 +1,41 @@
 .btn {
-  background-color: $base-colour;
-  color: $base-background-colour;
-  display: inline-block;
-  height: ($base-spacing-unit * 1.5);
-  line-height: ($base-spacing-unit * 1.5);
-  padding: 0 $base-spacing-unit;
-  text-align: center;
-  width: auto;
-  &::-moz-focus-inner {
-    border: 0;
-    padding: 0;
-  }
+    background-color: $brand-colour;
+    color: $base-background-colour;
+    border: 1px solid transparent;
+    display: inline-block;
+    padding: ($base-spacing-unit / 4) $base-spacing-unit;
+    text-align: center;
+    width: auto;
+    transition: all .5s;
+    &::-moz-focus-inner {
+        border: 0;
+        padding: 0;
+    }
+    &:hover {
+        text-decoration: none;
+        background-color: $base-background-colour;
+        color: $brand-colour;
+        border: 1px solid $brand-colour;    
+    }
+}
+
+.btn--inverse {
+    background-color: $base-background-colour;
+    color: $brand-colour;
+    border: 1px solid $brand-colour;
+    &:hover {
+        background-color: $brand-colour;
+        color: $base-background-colour;
+        border: 1px solid transparent;
+    }
 }
 
 .btn--block {
-  display: block;
-  width: 100%;
+    display: block;
+    width: 100%;
 }
 
 .btn--link {
-  background-color: transparent;
-  color: $base-colour;
+    background-color: transparent;
+    color: $brand-colour;
 }

assets/sass/utils/_helpers.scss

@@ -56,21 +56,21 @@
  * Elements visibility
  */
 
-.visible-mobile {
+.visible-on-mobile {
     display: none !important;
     @include resp-max($breakpoint-sm) {
         display: block !important;
     }
 }
 
-.visible-tablet {
+.visible-on-tablet {
     display: none !important;
     @include resp-max($breakpoint-md) {
         display: block !important;
     }
 }
 
-.visible-desktop {  
+.visible-on-desktop {  
     @include resp-max($breakpoint-md) {
         display: none !important;
     }