diff --git a/.gitignore b/.gitignore
index 4ef7af5..4f4e96f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
 .DS_Store
 _site/
+.sass-cache
 .c9
 .bundle
diff --git a/_config.yml b/_config.yml
index 73be776..6872ac9 100644
--- a/_config.yml
+++ b/_config.yml
@@ -10,6 +10,10 @@ description: A Code for America Brigade in San Mateo County
 owner:
   twitter: opensmc
 
+sass:
+    sass_dir: _sass
+    style: :compressed
+
 prose:
   media: 'images/uploads'
   rooturl: '_posts'
diff --git a/_layouts/style.css b/_layouts/style.css
deleted file mode 100644
index 38ccae5..0000000
--- a/_layouts/style.css
+++ /dev/null
@@ -1 +0,0 @@
-{% include css/opensmc.css %}
\ No newline at end of file
diff --git a/_sass/_0variables.scss b/_sass/_0variables.scss
new file mode 100644
index 0000000..f7b29c2
--- /dev/null
+++ b/_sass/_0variables.scss
@@ -0,0 +1,20 @@
+
+/* COLORS */
+
+// Colors based on San Mateo County style guide:
+// https://opensanmateodocumentation.files.wordpress.com/2014/12/smc_style-guide-graphics-and-identity.pdf
+
+// Primary Colors
+$bay-blue: #056cb6;
+$ocean-turquoise: #39839b;
+$urban-gray: #7e8083;
+
+// Secondary Colors
+$dark-blue: #0076c0; //PMS 2935
+$purple: #7e83bf; //PMS 272
+$green: #8cd63f; //PMS 376
+$warm-gray: #bbb0a6; //PMS Warm Gray 6
+$orange: #faa634; //PMS 1375
+$red: #b5121b; //PMS 1807
+$dark-gray: #455560; //PMS 142
+$white: #fff;
diff --git a/_includes/css/opensmc.css b/_sass/_1styles.scss
similarity index 98%
rename from _includes/css/opensmc.css
rename to _sass/_1styles.scss
index 375e8b8..6befb8d 100644
--- a/_includes/css/opensmc.css
+++ b/_sass/_1styles.scss
@@ -60,7 +60,7 @@ table h3 {
 }
 
 .featured-nav-link {
-  background: #00887a;
+  background: $ocean-turquoise;
 }
 
 .navbar-default .navbar-nav>li.featured-nav-link>a {
@@ -90,7 +90,7 @@ table h3 {
 /* Carousel base class */
 .carousel {
   height: 425px;
-  background-image: url({{site.baseurl}}/images/bay-discovery-site-1280.jpg);
+  background-image: url('/images/bay-discovery-site-1280.jpg');
   background-size: cover;
   background-position: center bottom;
   margin-bottom: 60px;
@@ -307,7 +307,7 @@ table h3 {
 @media screen and (min-width: 768px) {
   /* Remove the padding we set earlier */
   .header,
-  .marketing,
+  .marketing {
     padding-left: 0;
     padding-right: 0;
   }
@@ -472,7 +472,7 @@ transition: background 0.2s,border 0.2s;
 }
 
 .btn-hack {
-  background-color: #00887a;
+  background-color: $ocean-turquoise;
   color: #fff;
 }
 
@@ -792,7 +792,7 @@ left: -999em;
 
 .banner_ndoch {
   height: 400px;
-  background-image: url({{site.baseurl}}/images/bay-discovery-site-1280.jpg);
+  background-image: url('/images/bay-discovery-site-1280.jpg');
   background-size: cover;
   background-position: center bottom;
   margin-bottom: 20px;
diff --git a/style.css b/style.css
deleted file mode 100644
index f37aa59..0000000
--- a/style.css
+++ /dev/null
@@ -1,4 +0,0 @@
----
-layout: style
----
-
diff --git a/style.scss b/style.scss
new file mode 100644
index 0000000..6e8ad87
--- /dev/null
+++ b/style.scss
@@ -0,0 +1,8 @@
+---
+# Jekyll uses this file to generate style.css
+# To change styles, edit the scss files in _sass, not in this file
+# More info here: https://jekyllrb.com/docs/assets/
+---
+
+@import "0variables";
+@import "1styles";