diff --git a/styles/default/style.css b/styles/default/style.css
index 89bab558..40afd678 100644
--- a/styles/default/style.css
+++ b/styles/default/style.css
@@ -13,7 +13,7 @@
     h4,
     h5,
     h6 {
-        @apply font-heading font-bold text-headline;
+        @apply font-headlines font-bold text-headlines;
     }
 }
 
@@ -143,12 +143,12 @@
 
     /* Buttons */
     .sb-component-button {
-        @apply border-2 font-medium inline-flex items-center justify-center no-underline px-5 py-2.5 text-center tracking-wider transition duration-200 ease-in;
+        @apply border-2 font-medium inline-flex items-center justify-center no-underline px-5 py-2.5 text-center tracking-wider transition duration-200 ease-in hover:opacity-80;
     }
 
     /* Links */
     .sb-component-link {
-        @apply inline-flex items-center justify-center no-underline hover:underline;
+        @apply inline-flex items-center justify-center no-underline transition duration-200 ease-in hover:opacity-80;
     }
 
     /* Cards */
@@ -171,7 +171,7 @@
     .sb-input,
     .sb-select,
     .sb-textarea {
-        @apply bg-transparent border font-light p-2 text-lg w-full focus:outline-none md:text-xl;
+        @apply bg-transparent border font-light p-2 text-base w-full focus:outline-none;
     }
     .sb-checkbox {
         @apply align-middle appearance-none bg-origin-border border border-current cursor-pointer flex-shrink-0 inline-block h-5 select-none w-5 checked:bg-center checked:bg-no-repeat checked:bg-current;
@@ -196,18 +196,18 @@
         h4,
         h5,
         h6 {
-            @apply text-headline;
+            @apply text-headlines;
         }
         .sb-input,
         .sb-select,
         .sb-textarea {
-            @apply border-neutral placeholder-neutral;
+            @apply border-neutral placeholder-body placeholder-opacity-50;
         }
         .sb-component-button-primary {
-            @apply bg-primary border-primary text-neutral hover:bg-opacity-70 hover:border-opacity-70;
+            @apply bg-primary border-primary text-body;
         }
         .sb-component-button-secondary {
-            @apply border-neutral text-neutral hover:border-opacity-70 hover:text-neutral;
+            @apply border-neutral text-body;
         }
         .sb-divider {
             @apply before:bg-neutral;
@@ -229,13 +229,13 @@
         .sb-input,
         .sb-select,
         .sb-textarea {
-            @apply border-primary placeholder-primary;
+            @apply border-primary placeholder-primary placeholder-opacity-50;
         }
         .sb-component-button-primary {
-            @apply bg-primary border-primary text-neutral hover:bg-opacity-70 hover:border-opacity-70;
+            @apply bg-primary border-primary text-body;
         }
         .sb-component-button-secondary {
-            @apply border-neutral text-neutral hover:border-opacity-70 hover:text-neutral;
+            @apply border-neutral text-body;
         }
         .sb-divider {
             @apply before:bg-primary;
@@ -263,10 +263,10 @@
             background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
         }
         .sb-component-button-primary {
-            @apply bg-primary border-primary text-neutral hover:bg-opacity-70 hover:border-opacity-70;
+            @apply bg-primary border-primary text-body;
         }
         .sb-component-button-secondary {
-            @apply border-white text-white hover:border-opacity-70 hover:text-white;
+            @apply border-white text-white;
         }
         .sb-divider {
             @apply before:bg-white;
@@ -294,10 +294,10 @@
             background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
         }
         .sb-component-button-primary {
-            @apply bg-primary border-primary text-neutral hover:bg-opacity-70 hover:border-opacity-70;
+            @apply bg-primary border-primary text-body;
         }
         .sb-component-button-secondary {
-            @apply border-white text-white hover:bg-opacity-70 hover:border-opacity-70;
+            @apply border-white text-white;
         }
         .sb-divider {
             @apply before:bg-primary;
@@ -314,18 +314,18 @@
         h4,
         h5,
         h6 {
-            @apply text-headline;
+            @apply text-headlines;
         }
         .sb-input,
         .sb-select,
         .sb-textarea {
-            @apply border-neutral placeholder-neutral;
+            @apply border-neutral placeholder-body placeholder-opacity-70;
         }
         .sb-component-button-primary {
-            @apply bg-neutral border-neutral text-white hover:bg-opacity-70 hover:border-opacity-70;
+            @apply bg-neutral border-neutral text-white;
         }
         .sb-component-button-secondary {
-            @apply border-neutral text-neutral hover:border-opacity-60 hover:text-neutral;
+            @apply border-neutral text-neutral;
         }
         .sb-divider {
             @apply before:bg-neutral;
@@ -342,18 +342,18 @@
         h4,
         h5,
         h6 {
-            @apply text-headline;
+            @apply text-headlines;
         }
         .sb-input,
         .sb-select,
         .sb-textarea {
-            @apply border-neutral placeholder-neutral;
+            @apply border-neutral placeholder-body placeholder-opacity-50;
         }
         .sb-component-button-primary {
-            @apply bg-primary border-primary text-neutral hover:bg-opacity-70 hover:border-opacity-70;
+            @apply bg-primary border-primary text-body;
         }
         .sb-component-button-secondary {
-            @apply border-neutral text-neutral hover:border-opacity-70 hover:text-neutral;
+            @apply border-neutral text-body;
         }
         .sb-divider {
             @apply before:bg-neutral;
@@ -375,13 +375,13 @@
         .sb-input,
         .sb-select,
         .sb-textarea {
-            @apply border-primary placeholder-primary;
+            @apply border-primary placeholder-primary placeholder-opacity-50;
         }
         .sb-component-button-primary {
-            @apply bg-primary border-primary text-neutral hover:bg-opacity-70 hover:border-opacity-70;
+            @apply bg-primary border-primary text-body;
         }
         .sb-component-button-secondary {
-            @apply border-neutral text-neutral hover:border-opacity-70 hover:text-neutral;
+            @apply border-neutral text-body;
         }
         .sb-divider {
             @apply before:bg-primary;
@@ -398,18 +398,18 @@
         h4,
         h5,
         h6 {
-            @apply text-headline;
+            @apply text-headlines;
         }
         .sb-input,
         .sb-select,
         .sb-textarea {
-            @apply border-neutral placeholder-neutral;
+            @apply border-neutral placeholder-body placeholder-opacity-50;
         }
         .sb-component-button-primary {
-            @apply bg-neutral border-neutral text-white hover:bg-opacity-70 hover:border-opacity-70;
+            @apply bg-neutral border-neutral text-white;
         }
         .sb-component-button-secondary {
-            @apply border-neutral text-neutral hover:border-opacity-70 hover:text-neutral;
+            @apply border-neutral text-body;
         }
         .sb-divider {
             @apply before:bg-neutral;
@@ -426,18 +426,18 @@
         h4,
         h5,
         h6 {
-            @apply text-headline;
+            @apply text-headlines;
         }
         .sb-input,
         .sb-select,
         .sb-textarea {
-            @apply border-neutral placeholder-neutral;
+            @apply border-neutral placeholder-body placeholder-opacity-50;
         }
         .sb-component-button-primary {
-            @apply bg-neutral border-neutral text-white hover:bg-opacity-70 hover:border-opacity-70;
+            @apply bg-neutral border-neutral text-white;
         }
         .sb-component-button-secondary {
-            @apply border-neutral text-neutral hover:border-opacity-70 hover:text-neutral;
+            @apply border-neutral text-body;
         }
         .sb-divider {
             @apply before:bg-neutral;
diff --git a/styles/default/tailwind.default.config.js b/styles/default/tailwind.default.config.js
index 5e67c32c..3bbbbb16 100644
--- a/styles/default/tailwind.default.config.js
+++ b/styles/default/tailwind.default.config.js
@@ -13,7 +13,7 @@ module.exports = {
         extend: {
             colors: {
                 body: '#414c58',
-                headline: '#303941',
+                headlines: '#303941',
                 primary: '#28aaff',
                 secondary: '#dfe3e7',
                 neutral: '#282f36',
@@ -24,8 +24,8 @@ module.exports = {
                 warning: '#df1c2e'
             },
             fontFamily: {
-                heading: ['Myriad Pro', 'Myriad', 'Helvetica Neue', 'Helvetica', 'sans-serif'],
-                body: ['Myriad Pro', 'Myriad', 'Helvetica Neue', 'Helvetica', 'sans-serif'],
+                body: defaultTheme.fontFamily.sans,
+                headlines: defaultTheme.fontFamily.sans
             },
             spacing: {
                 '1/1': '100%',
diff --git a/styles/retro/style.css b/styles/retro/style.css
index 89bab558..9a12f0bd 100644
--- a/styles/retro/style.css
+++ b/styles/retro/style.css
@@ -13,7 +13,7 @@
     h4,
     h5,
     h6 {
-        @apply font-heading font-bold text-headline;
+        @apply font-headlines font-bold text-headlines;
     }
 }
 
@@ -143,12 +143,12 @@
 
     /* Buttons */
     .sb-component-button {
-        @apply border-2 font-medium inline-flex items-center justify-center no-underline px-5 py-2.5 text-center tracking-wider transition duration-200 ease-in;
+        @apply border-2 font-medium inline-flex items-center justify-center no-underline px-5 py-2.5 text-center tracking-wider transition duration-200 ease-in hover:opacity-80;
     }
 
     /* Links */
     .sb-component-link {
-        @apply inline-flex items-center justify-center no-underline hover:underline;
+        @apply inline-flex items-center justify-center no-underline transition duration-200 ease-in hover:opacity-80;
     }
 
     /* Cards */
@@ -171,7 +171,7 @@
     .sb-input,
     .sb-select,
     .sb-textarea {
-        @apply bg-transparent border font-light p-2 text-lg w-full focus:outline-none md:text-xl;
+        @apply bg-transparent border font-light p-2 w-full focus:outline-none;
     }
     .sb-checkbox {
         @apply align-middle appearance-none bg-origin-border border border-current cursor-pointer flex-shrink-0 inline-block h-5 select-none w-5 checked:bg-center checked:bg-no-repeat checked:bg-current;
@@ -196,18 +196,18 @@
         h4,
         h5,
         h6 {
-            @apply text-headline;
+            @apply text-headlines;
         }
         .sb-input,
         .sb-select,
         .sb-textarea {
-            @apply border-neutral placeholder-neutral;
+            @apply border-neutral placeholder-body placeholder-opacity-50;
         }
         .sb-component-button-primary {
-            @apply bg-primary border-primary text-neutral hover:bg-opacity-70 hover:border-opacity-70;
+            @apply bg-primary border-primary text-body;
         }
         .sb-component-button-secondary {
-            @apply border-neutral text-neutral hover:border-opacity-70 hover:text-neutral;
+            @apply border-neutral text-body;
         }
         .sb-divider {
             @apply before:bg-neutral;
@@ -229,13 +229,13 @@
         .sb-input,
         .sb-select,
         .sb-textarea {
-            @apply border-primary placeholder-primary;
+            @apply border-primary placeholder-primary placeholder-opacity-50;
         }
         .sb-component-button-primary {
-            @apply bg-primary border-primary text-neutral hover:bg-opacity-70 hover:border-opacity-70;
+            @apply bg-primary border-primary text-body;
         }
         .sb-component-button-secondary {
-            @apply border-neutral text-neutral hover:border-opacity-70 hover:text-neutral;
+            @apply border-neutral text-body;
         }
         .sb-divider {
             @apply before:bg-primary;
@@ -263,10 +263,10 @@
             background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
         }
         .sb-component-button-primary {
-            @apply bg-primary border-primary text-neutral hover:bg-opacity-70 hover:border-opacity-70;
+            @apply bg-primary border-primary text-body;
         }
         .sb-component-button-secondary {
-            @apply border-white text-white hover:border-opacity-70 hover:text-white;
+            @apply border-white text-white;
         }
         .sb-divider {
             @apply before:bg-white;
@@ -294,10 +294,10 @@
             background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
         }
         .sb-component-button-primary {
-            @apply bg-primary border-primary text-neutral hover:bg-opacity-70 hover:border-opacity-70;
+            @apply bg-primary border-primary text-body;
         }
         .sb-component-button-secondary {
-            @apply border-white text-white hover:bg-opacity-70 hover:border-opacity-70;
+            @apply border-white text-white;
         }
         .sb-divider {
             @apply before:bg-primary;
@@ -314,18 +314,18 @@
         h4,
         h5,
         h6 {
-            @apply text-headline;
+            @apply text-headlines;
         }
         .sb-input,
         .sb-select,
         .sb-textarea {
-            @apply border-neutral placeholder-neutral;
+            @apply border-neutral placeholder-body placeholder-opacity-70;
         }
         .sb-component-button-primary {
-            @apply bg-neutral border-neutral text-white hover:bg-opacity-70 hover:border-opacity-70;
+            @apply bg-neutral border-neutral text-white;
         }
         .sb-component-button-secondary {
-            @apply border-neutral text-neutral hover:border-opacity-60 hover:text-neutral;
+            @apply border-neutral text-neutral;
         }
         .sb-divider {
             @apply before:bg-neutral;
@@ -342,18 +342,18 @@
         h4,
         h5,
         h6 {
-            @apply text-headline;
+            @apply text-headlines;
         }
         .sb-input,
         .sb-select,
         .sb-textarea {
-            @apply border-neutral placeholder-neutral;
+            @apply border-neutral placeholder-body placeholder-opacity-50;
         }
         .sb-component-button-primary {
-            @apply bg-primary border-primary text-neutral hover:bg-opacity-70 hover:border-opacity-70;
+            @apply bg-primary border-primary text-body;
         }
         .sb-component-button-secondary {
-            @apply border-neutral text-neutral hover:border-opacity-70 hover:text-neutral;
+            @apply border-neutral text-body;
         }
         .sb-divider {
             @apply before:bg-neutral;
@@ -375,13 +375,13 @@
         .sb-input,
         .sb-select,
         .sb-textarea {
-            @apply border-primary placeholder-primary;
+            @apply border-primary placeholder-primary placeholder-opacity-50;
         }
         .sb-component-button-primary {
-            @apply bg-primary border-primary text-neutral hover:bg-opacity-70 hover:border-opacity-70;
+            @apply bg-primary border-primary text-body;
         }
         .sb-component-button-secondary {
-            @apply border-neutral text-neutral hover:border-opacity-70 hover:text-neutral;
+            @apply border-neutral text-body;
         }
         .sb-divider {
             @apply before:bg-primary;
@@ -398,18 +398,18 @@
         h4,
         h5,
         h6 {
-            @apply text-headline;
+            @apply text-headlines;
         }
         .sb-input,
         .sb-select,
         .sb-textarea {
-            @apply border-neutral placeholder-neutral;
+            @apply border-neutral placeholder-body placeholder-opacity-50;
         }
         .sb-component-button-primary {
-            @apply bg-neutral border-neutral text-white hover:bg-opacity-70 hover:border-opacity-70;
+            @apply bg-neutral border-neutral text-white;
         }
         .sb-component-button-secondary {
-            @apply border-neutral text-neutral hover:border-opacity-70 hover:text-neutral;
+            @apply border-neutral text-body;
         }
         .sb-divider {
             @apply before:bg-neutral;
@@ -426,18 +426,18 @@
         h4,
         h5,
         h6 {
-            @apply text-headline;
+            @apply text-headlines;
         }
         .sb-input,
         .sb-select,
         .sb-textarea {
-            @apply border-neutral placeholder-neutral;
+            @apply border-neutral placeholder-body placeholder-opacity-50;
         }
         .sb-component-button-primary {
-            @apply bg-neutral border-neutral text-white hover:bg-opacity-70 hover:border-opacity-70;
+            @apply bg-neutral border-neutral text-white;
         }
         .sb-component-button-secondary {
-            @apply border-neutral text-neutral hover:border-opacity-70 hover:text-neutral;
+            @apply border-neutral text-body;
         }
         .sb-divider {
             @apply before:bg-neutral;
diff --git a/styles/retro/tailwind.retro.config.js b/styles/retro/tailwind.retro.config.js
index 46651132..8ad67d5c 100644
--- a/styles/retro/tailwind.retro.config.js
+++ b/styles/retro/tailwind.retro.config.js
@@ -12,7 +12,7 @@ module.exports = {
         extend: {
             colors: {
                 body: '#414c58',
-                headline: '#303941',
+                headlines: '#303941',
                 primary: '#9bc1bc',
                 secondary: '#f4f1bb',
                 neutral: '#332e40',
@@ -23,8 +23,8 @@ module.exports = {
                 warning: '#df1c2e'
             },
             fontFamily: {
-                heading: ['Myriad Pro', 'Myriad', 'Helvetica Neue', 'Helvetica', 'sans-serif'],
-                body: ['Constantia', 'Lucida Bright', 'Lucidabright', 'Lucida', 'Liberation Serif', 'Georgia', 'serif'],
+                body: defaultTheme.fontFamily.serif,
+                headlines: defaultTheme.fontFamily.sans
             },
             spacing: {
                 '1/1': '100%',