diff --git a/gulpfile.js b/gulpfile.js
index 183b0f9..3b2d380 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -1,5 +1,6 @@
 var fs = require('fs');
 var del = require('del');
+var es = require('event-stream');
 var gulp = require('gulp');
 var inject = require('gulp-inject');
 var sitemap = require('gulp-sitemap');
@@ -7,129 +8,160 @@ var robots = require('gulp-robots');
 var favicon = require('gulp-real-favicon');
 var inlinesource = require('gulp-inline-source');
 var htmlmin = require('gulp-htmlmin');
+var htmlreplace = require('gulp-html-replace');
 var imagemin = require('gulp-imagemin');
+var gfonts = require('gulp-gfonts');
+var minifyCSS = require('gulp-minify-css');
+var cssShorthand = require('gulp-shorthand');
+var uncss = require('gulp-uncss');
+var concat = require('gulp-concat');
 
 // Common pathes
 var path = {
-  index: './src/index.html',
-  css: './src/css/**/*.css',
-  js: './src/js/**/*.js',
-  images: './src/images/**/*.*',
-  assets: './src/assets/**/rm-logo-border.png',
-  partials: './src/partials/*.html',
-  og: './src/partials/og-image.jpg',
-  gh: ['CNAME', '.nojekyll'],
-  favicon: {
-    description: './src/favicon/faviconDescription.json',
-    data: './src/favicon/faviconData.json',
-  },
-  dest: './www',
-  url: 'https://repometric.com',
+    index: './src/index.html',
+    css: './src/css/**/*.css',
+    fonts: './src/fonts',
+    js: './src/js/**/*.js',
+    images: './src/images/**/*.*',
+    assets: './src/assets/**/rm-logo-border.png',
+    partials: './src/partials/*.html',
+    og: './src/partials/og-image.jpg',
+    gh: ['CNAME', '.nojekyll'],
+    favicon: {
+        description: './src/favicon/faviconDescription.json',
+        data: './src/favicon/faviconData.json',
+    },
+    dest: './www',
+    url: 'https://repometric.com',
 };
 
 // Clean output
 gulp.task('clean', function () {
-  return del([
-    path.dest + '/**/*',
-  ]);
+    return del([
+        path.dest + '/**/*',
+    ]);
+});
+
+// Fonts
+gulp.task('fonts', function () {
+  return es.merge(
+      gulp.src(path.fonts + '/fonts.json')
+      .pipe(gfonts())
+      .pipe(gulp.dest(path.dest)),
+      gulp.src(['./node_modules/font-awesome/fonts/fontawesome-webfont.*'])
+      .pipe(gulp.dest(path.dest + '/fonts/')));
 });
 
 // Copy static files
 gulp.task('static', function () {
-  return gulp
-    .src([path.images, path.assets], {base: 'src'})
-    .pipe(gulp.dest(path.dest));
+    return gulp.src([path.images, path.assets], {base: 'src'})
+        .pipe(gulp.dest(path.dest));
+});
+
+// Minify css
+gulp.task('css', function(){
+    return gulp.src(['./node_modules/bootstrap/dist/css/bootstrap.min.css',
+              './node_modules/font-awesome/css/font-awesome.min.css', path.css])
+              .pipe(uncss({html: [path.index]}))
+              .pipe(concat('styles.min.css'))
+              .pipe(cssShorthand())
+              .pipe(minifyCSS())
+              .pipe(gulp.dest(path.dest + '/css'))
 });
 
 // Copy GitHub files
 gulp.task('gh', function () {
-  return gulp
-    .src(path.gh)
-    .pipe(gulp.dest(path.dest));
+    return gulp.src(path.gh)
+        .pipe(gulp.dest(path.dest));
 });
 
 // Inject partials
 gulp.task('inject', ['favicons'], function() {
-  var faviconData = fs.readFileSync(path.favicon.data);
-  var code = JSON.parse(faviconData).favicon.html_code;
-  return gulp
-    .src(path.index)
-    .pipe(inlinesource({
-      compress: false,
-    }))
-    .pipe(favicon.injectFaviconMarkups(code))
-    .pipe(inject(gulp.src([path.partials]), {
-      starttag: '<!-- inject:{{path}} -->',
-      relative: true,
-      transform: function (filePath, file) {
-        return file.contents.toString('utf8');
-      },
-    }))
-    .pipe(htmlmin({
-      collapseWhitespace: true,
-      removeComments: true,
-      removeCommentsFromCDATA: true,
-      minifyCSS: true,
-      minifyJS: true,
-    }))
-    .pipe(gulp.dest(path.dest));
+    var faviconData = fs.readFileSync(path.favicon.data);
+    var code = JSON.parse(faviconData).favicon.html_code;
+    return gulp
+        .src(path.index)
+        .pipe(htmlreplace({
+            'css': 'css/styles.min.css'
+        }))
+        .pipe(inlinesource({
+            compress: false,
+        }))
+        .pipe(favicon.injectFaviconMarkups(code))
+        .pipe(inject(gulp.src([path.partials]), {
+            starttag: '<!-- inject:{{path}} -->',
+            relative: true,
+            transform: function (filePath, file) {
+                return file.contents.toString('utf8');
+            },
+        }))
+        .pipe(htmlmin({
+            collapseWhitespace: true,
+            removeComments: true,
+            removeCommentsFromCDATA: true,
+            minifyCSS: false, // skips @media & some other queries if set 'true'
+            minifyJS: true,
+        }))
+        .pipe(gulp.dest(path.dest));
 });
 
 // Generate favicons
 gulp.task('favicons', function(done) {
-  var faviconDescription = JSON.parse(fs.readFileSync(path.favicon.description));
-  faviconDescription.markupFile =  path.favicon.data;
-  faviconDescription.dest = path.dest;  
-	return favicon.generateFavicon(faviconDescription, function() {
-		done();
-	});
+    var faviconDescription = JSON.parse(fs.readFileSync(path.favicon.description));
+    faviconDescription.markupFile =  path.favicon.data;
+    faviconDescription.dest = path.dest;
+    return favicon.generateFavicon(faviconDescription, function() {
+        done();
+    });
 });
 
 // Generate sitemap file
 gulp.task('sitemap', function() {
-  return gulp
-    .src(path.index)
-    .pipe(sitemap({
-      siteUrl: path.url,
-    }))
-    .pipe(gulp.dest(path.dest));;
+    return gulp
+        .src(path.index)
+        .pipe(sitemap({
+            siteUrl: path.url,
+        }))
+        .pipe(gulp.dest(path.dest));
 });
 
 // Generate robots file
 gulp.task('robots', function() {
-  return gulp
-    .src(path.index)
-    .pipe(robots({
-      useragent: '*',
-      allow: [],
-      disallow: [],
-    }))
-    .pipe(gulp.dest(path.dest));;
+    return gulp
+        .src(path.index)
+        .pipe(robots({
+            useragent: '*',
+            allow: [],
+            disallow: [],
+        }))
+        .pipe(gulp.dest(path.dest));
 });
 
 // Copy Open Graph image
 gulp.task('og', function() {
-  return gulp
-    .src(path.og)
-    .pipe(gulp.dest(path.dest));
+    return gulp
+        .src(path.og)
+        .pipe(gulp.dest(path.dest));
 });
 
 // Optimize images
 gulp.task('images', ['favicons', 'inject'], function() {
-  return gulp
-    .src(path.dest + '/**/*')
-    .pipe(imagemin())
-    .pipe(gulp.dest(path.dest));
+    return gulp
+        .src(path.dest + '/**/*')
+        .pipe(imagemin())
+        .pipe(gulp.dest(path.dest));
 });
 
 // The default task (called when you run `gulp` from cli)
 gulp.task('default',  [
-  'static',
-  'favicons',
-  'sitemap',
-  'robots',
-  'og',
-  'gh',
-  'inject',
-  'images',
+    'static',
+    'css',
+    'fonts',
+    'favicons',
+    'sitemap',
+    'robots',
+    'og',
+    'gh',
+    'inject',
+    'images',
 ]);
diff --git a/package.json b/package.json
index ba4dbd4..e89e135 100644
--- a/package.json
+++ b/package.json
@@ -18,16 +18,25 @@
   },
   "homepage": "https://repometric.com",
   "devDependencies": {
+    "bootstrap": "^3.3.7",
     "clean-css": "^4.1.9",
     "del": "^3.0.0",
+    "event-stream": "^3.3.4",
+    "font-awesome": "^4.7.0",
     "gulp": "^3.9.1",
+    "gulp-concat": "^2.6.1",
+    "gulp-gfonts": "0.0.2",
     "gulp-htmlmin": "^3.0.0",
+    "gulp-html-replace": "^1.6.2",
     "gulp-imagemin": "^4.0.0",
     "gulp-inject": "^4.3.0",
     "gulp-inline-source": "^3.1.0",
+    "gulp-minify-css": "^1.2.4",
     "gulp-real-favicon": "^0.2.2",
     "gulp-robots": "^2.0.4",
+    "gulp-shorthand": "^1.1.0",
     "gulp-sitemap": "^4.2.0",
+    "gulp-uncss": "^1.0.6",
     "uglify-js": "^3.2.1"
   },
   "scripts": {
diff --git a/src/css/styles.css b/src/css/styles.css
index 2dd4a6d..6510dc6 100644
--- a/src/css/styles.css
+++ b/src/css/styles.css
@@ -1,5 +1,16 @@
 /* CSS Huck */
 
+:root {
+  --color-black: #231f20;
+  --color-white: white;
+  --color-grey: #594f51;
+  --color-dark-grey: #404040;
+  --color-light-grey: #efefef;
+  --color-green: #22aa60;
+  --color-pink: #db2352;
+  --main-font: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
+}
+
 @keyframes spinner {
     to {
         transform: rotate(360deg);
@@ -50,8 +61,8 @@ html {
 
 body {
     font-size: 100%;
-    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
-    background-color: #efefef;
+    font-family: var(--main-font);
+    background-color: var(--color-light-grey);
 }
 
 p {
@@ -93,17 +104,11 @@ a img,
     border: 0;
 }
 
-input {
-    border: none;
-    outline: none;
-}
-
-img {
+input, img {
     border: none;
     outline: none;
 }
 
-
 /* remember to define focus styles! */
 
  :focus {
@@ -128,7 +133,6 @@ img {
     -ms-interpolation-mode: bicubic;
 }
 
-
 /* End CSS Huck */
 
 
@@ -164,17 +168,10 @@ img {
     transform: scaleX(0);
 }
 
-#subscribe {
-    padding-top: 5px;
-    visibility: hidden;
-    background: none;
-    color: black;
-}
-
 input[type=email] {
     float: left;
     margin-right: 10px;
-    color: white;
+    color: var(--color-white);
     width: 115px;
     -webkit-transition: all .35s;
     -o-transition: all .35s;
@@ -197,59 +194,15 @@ input[type=email]:focus + #subscribe {
     visibility: visible;
 }
 
-input[type=email]:active + #subscribe.loading #loading,
-input[type=email]:focus + #subscribe.loading #loading{
-    display: inline-block;
-    visibility: visible;
-}
-
-input[type=email]:active + #subscribe.loading #enter,
-input[type=email]:focus + #subscribe.loading #enter{
-    display: none;
-    visibility: hidden;
-}
-
 .form {
     border-radius: 18.75em;
     height: 32px;
 }
 
-#form.subscribe-error input[type=email] {
-    background-color: #DB2352;
-}
-
-#form.subscribed input[type=email] {
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    -o-user-select: none;
-    user-select: none;
-    pointer-events: none;
-    cursor: default;
-    width: 115px;
-    background-color: #22AA60;
-}
-
-#form.subscribed input[type=email]:hover {
-    background-color: #22AA60;
-    box-shadow: 0 0 0 #000;
-    line-height: 20px;
-    font-size: 14px;
-}
-
-#form.subscribed #subscribe {
-    visibility: hidden;
-}
-
-#form.subscribe-error #message {
-    color: #DB2352;
-    display: block;
-}
-
-#form.subscribe-success #message {
-    max-width: 770px;
-    color: #22AA60;
-    display: block;
+#response {
+    -webkit-transition: all .35s;
+    -o-transition: all .35s;
+    transition: all .35s;
 }
 
 #message {
@@ -259,7 +212,7 @@ input[type=email]:focus + #subscribe.loading #enter{
     top: 47px;
     width: 250px;
     padding: 5px 10px;
-    background-color: #fff;
+    background-color: var(--color-white);
     border-radius: 5px;
     z-index: 5;
     box-shadow: 2px 2px 4px rgba(0, 0, 0, .05);
@@ -279,6 +232,13 @@ input[type=email]:focus + #subscribe.loading #enter{
     transition: .5s;
 }
 
+#subscribe {
+    padding-top: 5px;
+    visibility: hidden;
+    background: none;
+    color: black;
+}
+
 #loading {
     display: none;
     text-align: center;
@@ -309,47 +269,48 @@ input[type=email]:focus + #subscribe.loading #enter{
     opacity: 0.7 !important;
 }
 
-
 /* Placeholder behaviour */
 
 input[type=email]::-webkit-input-placeholder {
-    color: white !important;
+    color: var(--color-white) !important;
     transition: color 0.7s ease;
 }
 
 input[type=email]:-ms-input-placeholder {
-    color: white !important;
+    color: var(--color-white) !important;
     transition: color 0.7s ease;
 }
 
 input[type=email]::-moz-placeholder {
-    color: white !important;
+    color: var(--color-white) !important;
     transition: color 0.7s ease;
     opacity: 1;
 }
 
 input[type=email]:-moz-placeholder {
-    color: white !important;
+    color: var(--color-white) !important;
     opacity: 1;
     transition: color 0.7s ease;
 }
 
 input[type=email]:focus::-webkit-input-placeholder {
-    color: rgba(255, 255, 255, .4) !important;
+    color: var(--color-white) !important;
+    opacity: .4;
 }
 
 input[type=email]:focus:-ms-input-placeholder {
-    color: rgba(255, 255, 255, .4) !important;
+    color: var(--color-white) !important;
+    opacity: .4;
 }
 
 input[type=email]:focus::-moz-placeholder {
-    color: rgba(255, 255, 255, .4) !important;
-    opacity: 1;
+    color: var(--color-white) !important;
+    opacity: .4;
 }
 
 input[type=email]:focus:-moz-placeholder {
-    color: rgba(255, 255, 255, .4) !important;
-    opacity: 1;
+    color: var(--color-white) !important;
+    opacity: .4;
 }
 
 
@@ -379,7 +340,7 @@ label,
 input,
 p,
 a {
-    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
+    font-family: var(--main-font);
 }
 
 label {
@@ -393,13 +354,13 @@ p {
 }
 
  ::-moz-selection {
-    color: white;
+    color: var(--color-white);
     text-shadow: none;
     background: #222;
 }
 
  ::selection {
-    color: white;
+    color: var(--color-white);
     text-shadow: none;
     background: #222;
 }
@@ -410,7 +371,7 @@ ul {
 
 hr {
     border-width: 0.3em;
-    border-color: #231f20;
+    border-color: var(--color-black);
     margin-left: auto;
     margin-right: auto;
     max-width: 50px;
@@ -418,14 +379,14 @@ hr {
 
 hr.underline {
     border-width: 0.3em;
-    border-color: #231f20;
+    border-color: var(--color-black);
     text-align: left;
     margin-left: 0 !important;
     margin: 1.9em;
 }
 
 a {
-    color: #231f20;
+    color: var(--color-black);
     font-size: 0.875em;
     -webkit-transition: all 0.35s;
     transition: all 0.35s;
@@ -433,11 +394,12 @@ a {
 
 a:hover,
 a:focus {
-    color: #594f51;
+    color: var(--color-grey);
 }
 
 .btn {
-    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
+    /*font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;*/
+    font-family: var(--main-font);
     border: none;
     border-radius: 18.75em;
     font-weight: 700;
@@ -447,8 +409,8 @@ a:focus {
 }
 
 .btn-primary {
-    color: white;
-    background-color: #231f20;
+    color: var(--color-white);
+    background-color: var(--color-black);
     -webkit-transition: all 0.35s;
     transition: all 0.35s;
     border-color: inherit;
@@ -464,8 +426,8 @@ a:focus {
 .btn-primary.active,
 .btn-primary:active:focus,
 .btn-primary.active.focus {
-    color: white;
-    background-color: rgb(64, 64, 64);
+    color: var(--color-white);
+    background-color: var(--color-dark-grey);
     border-color: inherit;
     outline-color: inherit;
     border: 0 !important;
@@ -494,11 +456,10 @@ section>.row {
 
 @keyframes chColor {
     100% {
-        color: white
+        color: var(--color-white);
     }
 }
 
-
 /* Media queries */
 
 @media (min-width: 1200px) {
@@ -517,7 +478,7 @@ section>.row {
 
 @media (min-width: 768px) {
     body {
-        background: url('images/background.jpg') no-repeat;
+        background: url('../images/background.jpg') no-repeat;
         background-size: cover;
         background-attachment: fixed;
     }
diff --git a/src/fonts/fonts.json b/src/fonts/fonts.json
new file mode 100644
index 0000000..90183d8
--- /dev/null
+++ b/src/fonts/fonts.json
@@ -0,0 +1 @@
+{ "Open Sans": "300italic,400italic,600italic,700italic,800italic,300,400,600,700,800"}
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index ea84ef7..0b9d000 100755
--- a/src/index.html
+++ b/src/index.html
@@ -25,15 +25,54 @@
 <!-- endinject -->
 <!-- /Open Graph -->
 
+    <style>
+        #form.subscribe-error input[type=email] {
+            background-color: var(--color-pink);
+        }
+
+        #form.subscribe-success input[type=email] {
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            -ms-user-select: none;
+            -o-user-select: none;
+            user-select: none;
+            pointer-events: none;
+            cursor: default;
+            width: 115px;
+            background-color: var(--color-green);
+        }
+
+        #form.subscribe-success input[type=email]:hover {
+            background-color: var(--color-green);
+            box-shadow: 0 0 0 #000;
+            line-height: 20px;
+            font-size: 14px;
+        }
+
+        #form.subscribe-error #message {
+            color: var(--color-pink);
+        }
+
+        #form.subscribe-success #message {
+            max-width: 770px;
+            color: var(--color-green);
+        }
+
+        #form.subscribe-success #subscribe {
+            visibility: hidden;
+        }
+    </style>
+
+    <!-- build:css -->
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
-    <link rel="stylesheet" href="css/styles.css" inline>
+    <link rel="stylesheet" href="css/styles.css">
+    <!-- endbuild -->
 
 </head>
 
-
 <body class="spinner">
  
 <!-- Google Analytics -->