diff --git a/_includes/header.html b/_includes/header.html
index c952371..a77e424 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -4,14 +4,14 @@
 
     <div class="flex flex-column flex-row-ns items-stretch justify-center w-100">
       <a
-        class="btn mb3 mb0-ns mr3-ns white bg-black-90 br3 dim"
+        class="btn mb3 mb0-ns mr3-ns white bg-accent br3 dim"
         href="feather-{{ site.data.package.version }}.zip"
         download
         onclick="ga('send', 'event', 'download', 'click', 'all');">
         Download
       </a>
       <a
-        class="btn btn-outline black-90 br3 dim"
+        class="btn btn-outline accent br3 dim"
         href="https://twitter.com/intent/tweet?text=Feather%20-%20Simply%20beautiful%20open%20source%20icons%20by%20%40colebemis%20colebemis.github.io/feather"
         target="_blank"
         onclick="ga('send', 'event', 'share', 'click', 'twitter');">
diff --git a/_includes/request.html b/_includes/request.html
index b3f4dce..0af6299 100644
--- a/_includes/request.html
+++ b/_includes/request.html
@@ -1,4 +1,4 @@
 <div class="flex flex-column items-center pv5">
   <h2 class="mt0 mb4 f4 lh-copy normal tc black-90">Don't see the icon you need?</h2>
-  <a class="btn btn-outline black-90 br3 dim" href="https://github.com/colebemis/feather/issues/new" target="_blank">Request an icon</a>
+  <a class="btn btn-outline accent br3 dim" href="https://github.com/colebemis/feather/issues/new" target="_blank">Request an icon</a>
 </div>
\ No newline at end of file
diff --git a/style.css b/style.css
index d52e73c..bcf9b5c 100644
--- a/style.css
+++ b/style.css
@@ -1,3 +1,15 @@
+:root {
+  --accent: #4353FF;
+}
+
+.accent {
+  color: var(--accent);
+}
+
+.bg-accent {
+  background-color: var(--accent);
+}
+
 .rubik {
   font-family: "Rubik", sans-serif;
 }