diff --git a/.gitignore b/.gitignore
index d1c5d8ff..7eabef48 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,6 +3,7 @@
 *.egg-info
 *.swp
 tags
+node_modules
 foundation/docs/current
 __pycache__/
 *.pyc
diff --git a/foundation/public/build.json b/foundation/public/build.json
index 929db60a..95ce4428 100644
--- a/foundation/public/build.json
+++ b/foundation/public/build.json
@@ -1,4 +1,7 @@
 {
+    "css/frappe-css.css": [
+        "node_modules/frappe-css/dist/frappe-css.css"
+    ],
     "foundation/css/erpnext-org-theme.css": [
         "public/less/erpnext-org-theme.less"
     ]
diff --git a/foundation/public/css/erpnext-org-theme.css b/foundation/public/css/erpnext-org-theme.css
index 6204816b..f049c1d3 100644
--- a/foundation/public/css/erpnext-org-theme.css
+++ b/foundation/public/css/erpnext-org-theme.css
@@ -1,186 +1,5 @@
-/*utilities*/
+@import "/assets/css/frappe-css.css";
 @import "reset.css";
-.align-items-center {
-  align-items: center;
-}
-.hide,
-.hidden {
-  display: none;
-  visibility: hidden;
-}
-.top-zero {
-  margin-top: 0;
-}
-.bottom-zero {
-  margin-bottom: 0;
-}
-.top-spacer {
-  margin-top: 2.5rem;
-}
-.bottom-spacer {
-  margin-bottom: 2.5rem;
-}
-.top-spacer-4 {
-  margin-top: 4rem;
-}
-.bottom-spacer-4 {
-  margin-bottom: 4rem;
-}
-.gray-bg {
-  background-color: #fafbfc;
-}
-.dark-bg {
-  background-color: #2E3338;
-}
-.text-left {
-  text-align: left;
-}
-.text-right {
-  text-align: right;
-}
-.text-center {
-  text-align: center;
-}
-.text-muted {
-  color: #8D99A6;
-}
-.text-light {
-  color: #6c7680;
-}
-.text-white {
-  color: #fff;
-}
-.text-normal {
-  font-size: 1rem;
-}
-.text-medium {
-  font-size: 1.5rem;
-}
-.text-small {
-  font-size: 0.5rem;
-}
-.centered {
-  margin-left: auto;
-  margin-right: auto;
-}
-.bold {
-  font-weight: bold;
-}
-.list-unstyled {
-  padding: 0;
-}
-.list-unstyled li {
-  list-style: none;
-}
-.list-circle {
-  list-style: circle;
-}
-.bullet::before {
-  content: "\2022";
-  display: inline-block;
-  width: 1em;
-  font-size: 1.25rem;
-}
-.half-width {
-  max-width: 50%;
-}
-.border {
-  border: 1px solid #d1d8dd;
-}
-.border-top {
-  border-top: 1px solid #d1d8dd;
-}
-.border-top-light {
-  border-top: 1px solid #EBEFF2;
-}
-.saturate {
-  filter: grayscale(100%);
-}
-.saturate:hover {
-  filter: grayscale(0%);
-}
-/* colors */
-.green-bullet::before {
-  color: #98d85b;
-}
-/* components */
-.grid-of-four,
-.grid-of-three {
-  grid-gap: 2.5rem;
-  display: grid;
-}
-.grid-of-four {
-  grid-template-columns: repeat(1, 1fr);
-}
-@media screen and (min-width: 500px) {
-  .grid-of-four {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-@media screen and (min-width: 767px) {
-  .grid-of-four {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
-@media screen and (min-width: 991px) {
-  .grid-of-four {
-    grid-template-columns: repeat(4, 1fr);
-  }
-}
-.grid-of-three {
-  grid-template-columns: repeat(1, 1fr);
-}
-@media screen and (min-width: 500px) {
-  .grid-of-three {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-@media screen and (min-width: 767px) {
-  .grid-of-three {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
-.columns {
-  display: flex;
-  justify-content: space-between;
-  flex-direction: column;
-}
-@media screen and (min-width: 767px) {
-  .columns {
-    flex-direction: inherit;
-  }
-}
-.column {
-  margin-bottom: 1rem;
-}
-@media screen and (min-width: 767px) {
-  .column {
-    margin: 0;
-  }
-}
-.three-column {
-  max-width: 100%;
-}
-@media screen and (min-width: 767px) {
-  .three-column {
-    max-width: 33%;
-  }
-}
-.copyright {
-  font-size: 1rem;
-}
-@media screen and (min-width: 767px) {
-  .copyright {
-    font-size: 0.75rem;
-  }
-}
-.flex-wrap {
-  flex-wrap: wrap;
-  justify-content: flex-start;
-}
-.grid-center {
-  justify-items: center;
-}
 .indicator,
 .indicator-right {
   background: none;
diff --git a/foundation/public/less/erpnext-org-theme.less b/foundation/public/less/erpnext-org-theme.less
index 2cec82df..729a78cb 100644
--- a/foundation/public/less/erpnext-org-theme.less
+++ b/foundation/public/less/erpnext-org-theme.less
@@ -1,9 +1,8 @@
 @import "variables.less";
-@import "base.less";
+@import (css) "/assets/css/frappe-css.css";
 @import (css) "reset.css";
 @import "indicator.less";
 
-
 [ data-path = "" ] .get-started {
 	display: none;
 }
diff --git a/package.json b/package.json
new file mode 100644
index 00000000..307299f7
--- /dev/null
+++ b/package.json
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "frappe-css": "frappe/css"
+  }
+}
diff --git a/yarn.lock b/yarn.lock
new file mode 100644
index 00000000..6c962840
--- /dev/null
+++ b/yarn.lock
@@ -0,0 +1,7 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+frappe-css@frappe/css:
+  version "1.0.0"
+  resolved "https://codeload.github.com/frappe/css/tar.gz/0bb4ffcc1b9d3f43342bfaa2f3033cf84a9ab6c1"