Style content buttons

app/styles/_buttons.scss

@@ -1,3 +1,44 @@
+button {
+  font-family: Open Sans, sans-serif;
+  font-size: 1rem;
+  color: #fff;
+  background-color: $dark-blue;
+  border: 1px solid $dark-blue;
+
+  &:hover, &:active {
+    background-color: lighten($dark-blue, 5%);
+  }
+
+  &.delete {
+    background-color: transparent;
+    border-color: $dark-red;
+    color: $dark-red;
+    svg { path { fill: $dark-red; }
+    }
+
+    &:hover {
+      background-color: $dark-red;
+      color: #fff;
+      svg { path { fill: #fff; } }
+    }
+  }
+
+  &.primary {
+    // main button
+  }
+
+  &.secondary {
+    background-color: transparent;
+    color: $dark-blue;
+
+    &:hover {
+      background-color: $dark-blue;
+      color: #fff;
+      svg { path { fill: #fff; } }
+    }
+  }
+}
+
 header {
 
   button, a.button {
@@ -9,14 +50,11 @@ header {
     background-color: #fff;
     color: $dark-grey-2;
     text-align: center;
-    font-size: 0.8rem;
     text-transform: uppercase;
 
     svg {
       height: 1rem;
-      path {
+      path { fill: $dark-grey-2; }
-        fill: $dark-grey-2;
-      }
     }
 
     &:hover {
@@ -30,28 +68,6 @@ header {
       }
     }
 
-    &.delete {
-      border-color: $dark-red;
-      color: $dark-red;
-
-      svg {
-        path {
-          fill: $dark-red;
-        }
-      }
-
-      &:hover {
-        background-color: $dark-red;
-        color: #fff;
-
-        svg {
-          path {
-            fill: #fff;
-          }
-        }
-      }
-    }
-
     &:disabled:not(.active),
     &:disabled:not(.active):hover {
       border-color: $dark-grey-3;
@@ -70,11 +86,7 @@ header {
       background-color: lighten($dark-grey-2, 10%);
       color: lighten($dark-grey-2, 10%);
 
-      svg {
+      svg { path { fill: #fff; } }
-        path {
-          fill: #fff;
-        }
-      }
     }
   }
 
@@ -115,7 +127,9 @@ header {
 
 main section.content {
   button {
-    padding: 0.3rem 0.5rem;
+    font-size: 0.86rem;
+    padding: 0.4rem 1rem;
+    border-radius: 3px;
   }
 
   button + button {

app/styles/_colors.scss

@@ -4,6 +4,7 @@ $dark-grey-3: #aaa;
 $light-grey-1: #b5c3d1;
 $light-grey-2: #ececec;
 $dark-red: #8b0000;
+$dark-blue: #0067c7;
 
 body {
   background-color: #fff;

app/styles/app.scss

@@ -3,6 +3,11 @@
 @import "colors";
 @import "layout";
 
+html {
+  font-family: Open Sans, sans-serif;
+  font-size: 15px;
+}
+
 body {
   background-color: white;
   font-size: 15px;