diff --git a/community/public/build.json b/community/public/build.json
index 2a3529de..cdb08652 100644
--- a/community/public/build.json
+++ b/community/public/build.json
@@ -3,6 +3,8 @@
     "public/css/lms.css"
   ],
   "css/community.css": [
-    "public/css/style.css"
+    "public/css/vars.css",
+    "public/css/style.css",
+    "public/css/style.less"
   ]
 }
diff --git a/community/public/css/style.css b/community/public/css/style.css
index 850f7038..f6ccce78 100644
--- a/community/public/css/style.css
+++ b/community/public/css/style.css
@@ -290,70 +290,3 @@ img.profile-photo {
   margin-left: 5%;
   display: inline-block;
 }
-
-.sketch-teaser {
-  background: white;
-  border-radius: 10px;
-  border: 1px solid #ddd;
-  width: 220px;
-}
-
-.sketch-teaser svg {
-  width: 200px;
-  height: 200px;
-}
-
-.sketch-image {
-  padding: 10px;
-}
-
-.sketch-footer {
-  padding: 10px;
-  background: #eee;
-  border-radius: 0px 0px 10px 10px;
-}
-
-.course-teaser {
-  background: white;
-  border-radius: 10px;
-  border: 1px solid #ddd;
-  color: #444;
-}
-
-.course-teaser h3, .course-teaser h4 {
-  color: black;
-  font-weight: bold;;
-}
-
-.course-teaser .course-body, .course-teaser .course-footer {
-  padding: 20px;
-}
-
-.course-body {
-  min-height: 8em;
-}
-
-.course-footer {
-  border-top: 1px solid #ddd;
-}
-
-.course-teaser a, .course-teaser a:hover {
-  color: inherit;
-  text-decoration: none;
-}
-
-section {
-  padding: 60px 0px;
-}
-
-section h2 {
-  margin-bottom: 40px;
-}
-
-section.lightgray {
-  background: #f8f8f8;
-}
-
-#hero .jumbotron {
-  background: inherit;
-}
diff --git a/community/public/css/style.less b/community/public/css/style.less
new file mode 100644
index 00000000..a138e984
--- /dev/null
+++ b/community/public/css/style.less
@@ -0,0 +1,68 @@
+@primary-color: #08B74F;
+
+.teaser {
+  background: white;
+  border-radius: 10px;
+  border: 1px solid #ddd;
+}
+
+.sketch-teaser {
+  .teaser();
+  width: 220px;
+
+  svg {
+    width: 200px;
+    height: 200px;
+  }
+  .sketch-image {
+    padding: 10px;
+  }
+  .sketch-footer {
+    padding: 10px;
+    background: #eee;
+    border-radius: 0px 0px 10px 10px;
+  }
+}
+
+.course-teaser {
+  .teaser();
+  color: #444;
+
+  h3, h4 {
+    color: black;
+    font-weight: bold;
+  }
+
+  .course-body, .course-footer {
+    padding: 20px;
+  }
+
+  .course-body {
+    min-height: 8em;
+  }
+
+  .course-footer {
+    border-top: 1px solid #ddd;
+  }
+
+  a, a:hover {
+    color: inherit;
+    text-decoration: none;
+  }
+}
+
+section {
+  padding: 60px 0px;
+}
+
+section h2 {
+  margin-bottom: 40px;
+}
+
+section.lightgray {
+  background: #f8f8f8;
+}
+
+#hero .jumbotron {
+  background: inherit;
+}
diff --git a/community/public/css/vars.css b/community/public/css/vars.css
new file mode 100644
index 00000000..ff7bba58
--- /dev/null
+++ b/community/public/css/vars.css
@@ -0,0 +1,4 @@
+/* Define all your css variables here. */
+:root {
+  --primary-color: #08B74F;
+}