diff --git a/README.md b/README.md
index 1d6c174..731d68a 100644
--- a/README.md
+++ b/README.md
@@ -15,9 +15,11 @@ If you want to know more about this project, join our slack channel and ask ques
 
 ### Requirements
 - Node.js (https://nodejs.org/)
-- npm (https://npmjs.org)
+- npm (https://npmjs.org) 
 - yarn (https://yarnpkg.com/)
 
+> <strong>Note</strong>: You only need one package manager, so either yarn or npm.
+
 ### Installation
 > <strong>Disclaimer</strong>:
 > This installation guide expects you to have a Magento 2 instance running. If you need help to get Magento 2 up and running, we'd like to refer you to the install guide: https://devdocs.magento.com/guides/v2.2/install-gde/prereq/zip_install.html
@@ -62,6 +64,162 @@ If you want to know more about this project, join our slack channel and ask ques
 4. Note: Don't forget to include the new `.scss` created before as a `@import` in the `style.scss`.
 5. Run a `gulp` command to compile the styling changes. More info about the `gulp` commands can be found in the next chapter. 
 
+##### Variables
+These are the default variables that can be overwritten by creating a custom `SASS` file. You can simply target the variable again and overrule the default value.
+For example: `$font-default-font-size: 18px;`
+
+
+###### Colors
+| Variable                                   | Description 
+|--------------------------------------------|------------------------
+| `$color-boilerplate-primary`               | Primary theme color, accepted formats: HEX, RGB, RGBA. 
+| `$color-boilerplate-secondary`             | Secondary theme color
+| `$color-primary-gradient-color`            | Primary gradient
+| `$color-secondary-gradient-color`          | Secondary gradient
+
+###### Headings
+| Variable                                   | Description
+|--------------------------------------------|-------------------------
+| `$font-family-heading`                     | Default heading font-family, eg. 'Open Sans'.                                    
+| `$font-family-heading-color`               | Default heading color, accepted formats: Variable, HEX, RGB en RGBA.
+| `$font-family-heading-font-weight`         | Default heading font-weight, accepted formats: Variable, PX, rem.
+| `$font-family-heading-line-height`         | Default heading line-height.
+| `$font-family-heading-h1-font-size`        | H1 font-size.
+| `$font-family-heading-h1-font-weight`      | H1 font-weight.
+| `$font-family-heading-h1-line-height`      | H1 line-height.
+| `$font-family-heading-h1-margin`           | H1 margin.
+| `$font-family-heading-h1-color`            | H1 color.
+| `$font-family-heading-h2-font-size`        | H2 font-size.
+| `$font-family-heading-h2-font-weight`      | H2 font-weight.
+| `$font-family-heading-h2-line-height`      | H2 line-height.
+| `$font-family-heading-h2-margin`           | H2 margin.
+| `$font-family-heading-h2-color`            | H2 color.
+| `$font-family-heading-h3-font-size`        | H3 font-size.
+| `$font-family-heading-h3-font-weight`      | H3 font-weight.
+| `$font-family-heading-h3-margin`           | H3 margin.
+| `$font-family-heading-h3-color`            | H3 color.
+| `$font-family-heading-h4-font-size`        | H4 font-size.
+| `$font-family-heading-h4-font-weight`      | H4 font-weight.
+| `$font-family-heading-h4-margin`           | H4 margin.
+| `$font-family-heading-h4-color`            | H4 color.
+| `$font-family-heading-h5-font-size`        | H5 font-size.
+| `$font-family-heading-h5-font-weight`      | H5 font-weight.
+| `$font-family-heading-h5-margin`           | H5 margin.
+| `$font-family-heading-h5-color`            | H5 color.
+| `$font-family-heading-h6-font-size`        | H6 font-size.
+
+###### Links
+| Variable                                   | Description
+|--------------------------------------------|-------------------------
+| `$font-default-link-color`                 | Default link color.
+| `$font-default-link-text-decoration`       | Default link text-decoration.
+| `$font-default-link-font-weight`           | Default link font-weight.
+| `$font-default-link-hover-color`           | Default color in hover-state.
+| `$font-default-link-hover-font-weight`     | Default font-weight in hover-state.
+| `$font-default-link-hover-text-decoration` | Default text-decoration in hover-state.
+
+###### Titles
+| Variable                                   | Description
+|--------------------------------------------|-------------------------
+| `$font-filter-title-font-size`             | Filter title font-size.
+| `$font-filter-title-font-weight`           | Filter title font-weight.
+| `$font-filter-title-line-height`           | Filter title line-height.
+| `$font-filter-title-margin`                | Filter title margin.
+| `$font-filter-title-color`                 | Filter title color.
+| `$font-filter-subtitle-font-size`          | Filter subtitle font-size.
+| `$font-filter-subtitle-font-weight`        | Filter subtitle font-weight.
+| `$font-filter-subtitle-line-height`        | Filter subtitle line-height.
+| `$font-filter-subtitle-margin`             | Filter subtitle margin.
+| `$font-filter-subtitle-color`              | Filter subtitle color.
+| `$font-filter-options-title-font-size`     | Filter options title font-size.
+| `$font-filter-options-title-font-weight`   | Filter options title font-weight.
+| `$font-filter-options-title-line-height`   | Filter options title line-height.
+| `$font-filter-options-title-margin`        | Filter options title margin.
+| `$font-filter-options-title-color`         | Filter options title color.
+
+###### Buttons
+| Variable                                   | Description
+|--------------------------------------------|-------------------------
+| `$button-default-background-color`         | Default button background color.
+| `$button-default-border`                   | Default button border.
+| `$button-default-border-radius`            | Default button border-radius.
+| `$button-default-color`                    | Default button text-color.
+| `$button-default-font-size`                | Default button font-size.
+| `$button-default-font-weight`              | Default button font-weight.
+| `$button-default-transition`               | Default button transition effect (animation).
+| `$button-default-padding`                  | Default button padding.
+| `$button-default-text-transform`           | Default button text-transform.
+| `$button-default-hover-background-color`   | Default button hover-state background color.
+| `$button-default-hover-border`             | Default button hover-state border.
+| `$button-default-hover-color`              | Default button hover-state text-color.
+| `$button-primary-background-color`         | Primary button background color.
+| `$button-primary-border`                   | Primary button border.
+| `$button-primary-border-radius`            | Primary button border-radius.
+| `$button-primary-color`                    | Primary button text-color.
+| `$button-primary-font-size`                | Primary button font-size.
+| `$button-primary-font-weight`              | Primary button font-weight.
+| `$button-primary-transition`               | Primary button transition effect (animation).
+| `$button-primary-padding`                  | Primary button padding.
+| `$button-primary-text-transform`           | Primary button text-transform.
+| `$button-primary-hover-background-color`   | Primary button hover-state background color.
+| `$button-primary-hover-border`             | Primary button hover-state border.
+| `$button-primary-hover-color`              | Primary button hover-state text-color.
+| `$button-secondary-background-color`       | Secondary button background color.
+| `$button-secondary-border`                 | Secondary button border.
+| `$button-secondary-border-radius`          | Secondary button border-radius.
+| `$button-secondary-color`                  | Secondary button text-color.
+| `$button-secondary-font-size`              | Secondary button font-size.
+| `$button-secondary-font-weight`            | Secondary button font-weight.
+| `$button-secondary-transition`             | Secondary button transition effect (animation).
+| `$button-secondary-padding`                | Secondary button padding.
+| `$button-secondary-text-transform`         | Secondary button text-transform.
+| `$button-secondary-hover-background-color` | Secondary button hover-state background color.
+| `$button-secondary-hover-border`           | Secondary button hover-state border.
+| `$button-secondary-hover-color`            | Secondary button hover-state text-color.
+
+###### Inputs
+| Variable                                   | Description
+|--------------------------------------------|-------------------------
+| `$input-default-background-color`          | Default input background color.
+| `$input-default-border-color`              | Default input border-color.
+| `$input-default-border`                    | Default input border.
+| `$input-default-border-radius`             | Default input border-radius.
+| `$input-default-height`                    | Default input height.
+| `$input-default-width`                     | Default input width.
+| `$input-default-margin`                    | Default input margin.
+| `$input-default-padding`                   | Default input padding.
+| `$input-default-vertical-align`            | Default input vertical-align.
+| `$input-default-font-size`                 | Default input font-size.
+| `$input-default-color`                     | Default input text-color.
+| `$input-default-font-family`               | Default input font-family.
+| `$input-default-font-weight`               | Default input font-weight.
+| `$input-default-font-style`                | Default input font-style.
+| `$input-default-line-height`               | Default input line-height.
+| `$input-default-placeholder-color`         | Default input placeholder text-color.
+| `$input-default-placeholder-font-style`    | Default input placeholder font-style.
+| `$input-default-disabled-background-color` | Default input disabled-state background color.
+| `$input-default-disabled-border`           | Default input disabled-state border.
+| `$input-default-disabled-opactity`         | Default input disabled-state opacity.
+| `$input-default-disabled-color`            | Default input disabled-state text-color.
+| `$input-default-disabled-font-style`       | Default input disabled-state font-style.
+| `$input-default-focus-background-color`    | Default input focus-state background-color.
+| `$input-default-focus-border`              | Default input focus-state border.
+| `$input-default-focus-color`               | Default input focus-state text-color.
+| `$input-default-focus-font-style`          | Default input focus-state font-style.
+| `$input-type-text-background-color`        | Text input background color.
+| `$input-type-text-border-color`            | Text input border color.
+| `$input-type-text-border`                  | Text input border.
+| `$input-type-text-border-radius`           | Text input border radius.
+| `$input-type-text-height`                  | Text input height.
+| `$input-type-text-width`                   | Text input width.
+| `$input-type-text-margin`                  | Text input margin.
+| `$input-type-text-padding`                 | Text input padding.
+| `$input-type-text-vertical-align`          | Text input vertical align.
+| `$input-type-text-font-size`               | Text input font-size.
+| `$input-type-text-color`                   | Text input text-color.
+| `$input-type-text-font-family`             | Text input font-family.
+| `$input-type-text-font-weight`             | Text input font-weight.
+
 ### Gulp
 ##### Available Gulp commands
 - `gulp watch` : Watches all `.scss` files and compiles them when `gulp` detects a change. It also starts a browsersync session this way you can see your changes on the fly.
diff --git a/src/scss/boilerplate/_fonts.scss b/src/scss/boilerplate/_fonts.scss
index 400d726..0769d36 100644
--- a/src/scss/boilerplate/_fonts.scss
+++ b/src/scss/boilerplate/_fonts.scss
@@ -13,6 +13,7 @@ html, body {
     font-weight: $font-family-heading-h1-font-weight;
     line-height: $font-family-heading-h1-line-height;
     margin: $font-family-heading-h1-margin;
+    color: $font-family-heading-h1-color;
   }
 
   h2 {
@@ -20,6 +21,7 @@ html, body {
     font-weight: $font-family-heading-h2-font-weight;
     line-height: $font-family-heading-h2-line-height;
     margin: $font-family-heading-h2-margin;
+    color: $font-family-heading-h2-color;
   }
 
   h3 {
@@ -27,6 +29,7 @@ html, body {
     font-weight: $font-family-heading-h3-font-weight;
     line-height: $font-family-heading-h3-line-height;
     margin: $font-family-heading-h3-margin;
+    color: $font-family-heading-h3-color;
   }
 
   h4 {
@@ -34,6 +37,7 @@ html, body {
     font-weight: $font-family-heading-h4-font-weight;
     line-height: $font-family-heading-h4-line-height;
     margin: $font-family-heading-h4-margin;
+    color: $font-family-heading-h4-color;
   }
 
   h5 {
@@ -41,10 +45,15 @@ html, body {
     font-weight: $font-family-heading-h5-font-weight;
     line-height: $font-family-heading-h5-line-height;
     margin: $font-family-heading-h5-margin;
+    color: $font-family-heading-h5-color;
   }
 
   h6 {
-    font-size: 14px;
+    font-size: $font-family-heading-h6-font-size;
+    font-weight: $font-family-heading-h6-font-weight;
+    line-height: $font-family-heading-h6-line-height;
+    margin: $font-family-heading-h6-margin;
+    color: $font-family-heading-h6-color;
   }
 
   p {
@@ -66,4 +75,37 @@ html, body {
       text-decoration: $font-default-link-hover-text-decoration;
     }
   }
+
+  .filter-title {
+    font-size: $font-filter-title-font-size;
+    font-weight: $font-filter-title-font-weight;
+    margin: $font-filter-title-margin;
+    color: $font-filter-title-color;
+    line-height: $font-filter-title-line-height;
+
+    strong {
+      font-size: $font-filter-title-font-size;
+      font-weight: $font-filter-title-font-weight;
+      margin: $font-filter-title-margin;
+      color: $font-filter-title-color;
+      line-height: $font-filter-title-line-height;
+    }
+  }
+
+  .filter-subtitle {
+    font-size: $font-filter-subtitle-font-size;
+    font-weight: $font-filter-subtitle-font-weight;
+    margin: $font-filter-subtitle-margin;
+    color: $font-filter-subtitle-color;
+    line-height: $font-filter-subtitle-line-height;
+  }
+
+  .filter-options {
+    .filter-options-title {
+      font-size: $font-filter-options-title-font-size;
+      font-weight: $font-filter-options-title-font-weight;
+      margin: $font-filter-options-title-margin;
+      color: $font-filter-options-title-color;
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/scss/boilerplate/_inputs.scss b/src/scss/boilerplate/_inputs.scss
index 44db104..3f39577 100644
--- a/src/scss/boilerplate/_inputs.scss
+++ b/src/scss/boilerplate/_inputs.scss
@@ -37,6 +37,84 @@ input[type="text"], input[type="radio"], input[type="checkbox"], input[type="ema
 
 }
 
+input[type="text"] {
+  background-color: $input-type-text-background-color;
+  border-color: $input-type-text-border-color;
+  border: $input-type-text-border;
+  border-radius: $input-type-text-border-radius;
+  height: $input-type-text-height;
+  width: $input-type-text-width;
+  margin: $input-type-text-margin;
+  padding: $input-type-text-padding;
+  vertical-align: $input-type-text-vertical-align;
+  font-size: $input-type-text-font-size;
+  color: $input-type-text-color;
+  font-family: $input-type-text-font-family;
+  font-weight: $input-type-text-font-weight;
+  font-style: $input-type-text-font-style;
+  line-height: $input-type-text-line-height;
+
+  &:focus {
+    background-color: $input-type-text-focus-background-color;
+    border: $input-type-text-focus-border;
+    color: $input-type-text-focus-color;
+    font-style: $input-type-text-focus-font-style;
+  }
+
+  &:disabled {
+    background-color: $input-type-text-disabled-background-color;
+    border: $input-type-text-disabled-border;
+    opacity: $input-type-text-disabled-opacity;
+    color: $input-type-text-disabled-color;
+    font-style: $input-type-text-disabled-font-style;
+  }
+
+  &::placeholder {
+    opacity: 1;
+    color: $input-type-text-placeholder-color !important;
+    font-style: $input-type-text-placeholder-font-style;
+  }
+}
+
+select {
+  background-color: $input-select-background-color;
+  border-color: $input-select-border-color;
+  border: $input-select-border;
+  border-radius: $input-select-border-radius;
+  height: $input-select-height;
+  width: $input-select-width;
+  margin: $input-select-margin;
+  padding: $input-select-padding;
+  vertical-align: $input-select-vertical-align;
+  font-size: $input-select-font-size;
+  color: $input-select-color;
+  font-family: $input-select-font-family;
+  font-weight: $input-select-font-weight;
+  font-style: $input-select-font-style;
+  line-height: $input-select-line-height;
+
+  &:focus {
+    background-color: $input-select-focus-background-color;
+    border: $input-select-focus-border;
+    color: $input-select-focus-color;
+    font-style: $input-select-focus-font-style;
+  }
+
+  &:disabled {
+    background-color: $input-select-disabled-background-color;
+    border: $input-select-disabled-border;
+    opacity: $input-select-disabled-opacity;
+    color: $input-select-disabled-color;
+    font-style: $input-select-disabled-font-style;
+  }
+
+  &::placeholder {
+    opacity: 1;
+    color: $input-select-placeholder-color !important;
+    font-style: $input-select-placeholder-font-style;
+  }
+}
+
 textarea {
   height: $input-textarea-default-height;
   resize: $input-textarea-default-resize;
diff --git a/src/scss/boilerplate/_variables.scss b/src/scss/boilerplate/_variables.scss
index 0384f1d..8c84f8f 100644
--- a/src/scss/boilerplate/_variables.scss
+++ b/src/scss/boilerplate/_variables.scss
@@ -46,37 +46,47 @@ $font-family-heading-h1-font-size: 40px !default;
 $font-family-heading-h1-font-weight: $font-family-heading-font-weight !default;
 $font-family-heading-h1-line-height: $font-family-heading-line-height !default;
 $font-family-heading-h1-margin: 0rem 0 40px 0 !default;
+$font-family-heading-h1-color: $font-default-heading-color !default;
 
 /* H2 */
 $font-family-heading-h2-font-size: 2.6rem !default;
 $font-family-heading-h2-font-weight: $font-family-heading-font-weight !default;
 $font-family-heading-h2-line-height: $font-family-heading-line-height !default;
 $font-family-heading-h2-margin: 2.5rem 0 2rem 0 !default;
+$font-family-heading-h2-color: $font-default-heading-color !default;
 
 /* H3 */
 $font-family-heading-h3-font-size: 1.8rem !default;
 $font-family-heading-h3-font-weight: $font-family-heading-font-weight !default;
 $font-family-heading-h3-line-height: $font-family-heading-line-height !default;
 $font-family-heading-h3-margin: 1.5rem 0 1rem 0 !default;
+$font-family-heading-h3-color: $font-default-heading-color !default;
+
 
 /* H4 */
 $font-family-heading-h4-font-size: 1.4rem !default;
 $font-family-heading-h4-font-weight: 700 !default;
 $font-family-heading-h4-line-height: $font-family-heading-line-height !default;
 $font-family-heading-h4-margin: 2rem 0 2rem 0 !default;
+$font-family-heading-h4-color: $font-default-heading-color !default;
+
 
 /* H5 */
 $font-family-heading-h5-font-size: 1.2rem !default;
 $font-family-heading-h5-font-weight: 700 !default;
 $font-family-heading-h5-line-height: $font-family-heading-line-height !default;
 $font-family-heading-h5-margin: 2rem 0 2rem 0 !default;
+$font-family-heading-h5-color: $font-default-heading-color !default;
+
 
 /* H6 */
 $font-family-heading-h6-font-size: 1rem !default;
 $font-family-heading-h6-font-weight: 700 !default;
 $font-family-heading-h6-line-height: $font-family-heading-line-height !default;
 $font-family-heading-h6-margin: 2rem 0 2rem 0 !default;
+$font-family-heading-h6-color: $font-default-heading-color !default;
 
+/* Link */
 $font-default-link-color: $color-boilerplate-blue !default;
 $font-default-link-text-decoration: none !default;
 $font-default-link-font-weight: $font-default-font-weight !default;
@@ -85,7 +95,23 @@ $font-default-link-hover-font-weight: $font-default-link-font-weight !default;
 $font-default-link-hover-text-decoration: underline !default;
 
 /* Standard title classes */
-
+$font-filter-title-font-size: 18px !default;
+$font-filter-title-font-weight: 700 !default;
+$font-filter-title-line-height: 1.421617 !default;
+$font-filter-title-margin: 0 0 20px 0 !default;
+$font-filter-title-color: $font-default-color !default;
+
+$font-filter-subtitle-font-size: $font-default-font-size !default;
+$font-filter-subtitle-font-weight: 700 !default;
+$font-filter-subtitle-line-height: 1.421617 !default;
+$font-filter-subtitle-margin: 0 0 10px 0 !default;
+$font-filter-subtitle-color: $font-default-color !default;
+
+$font-filter-options-title-font-size: $font-default-font-size !default;
+$font-filter-options-title-font-weight: 700 !default;
+$font-filter-options-title-line-height: 1.421617 !default;
+$font-filter-options-title-margin: 0 0 10px 0 !default;
+$font-filter-options-title-color: $font-default-color !default;
 
 /*
  * Buttons
@@ -108,6 +134,7 @@ $button-default-hover-color: white !default;
 /* Button primary */
 $button-primary-background-color: $button-default-background-color !default;
 $button-primary-border: $button-default-border !default;
+$button-primary-border-radius: $button-default-border-radius;
 $button-primary-color: $button-default-color !default;
 $button-primary-font-weight: 600 !default;
 $button-primary-font-size: $button-default-font-size !default;
@@ -215,6 +242,67 @@ $input-default-focus-border: $input-default-border !default;
 $input-default-focus-color: $input-default-color !default;
 $input-default-focus-font-style: $input-default-font-style !default;
 
+/* Input[type="text"] */
+$input-type-text-background-color: $input-default-background-color !default;
+$input-type-text-border-color: $input-default-border-color !default;
+$input-type-text-border: $input-default-border !default;
+$input-type-text-border-radius: $input-default-border-radius !default;
+$input-type-text-height: $input-default-height !default;
+$input-type-text-width: $input-default-width !default;
+$input-type-text-margin: $input-default-margin !default;
+$input-type-text-padding: $input-default-padding !default;
+$input-type-text-vertical-align: $input-default-vertical-align !default;
+$input-type-text-font-size: $input-default-font-style !default;
+$input-type-text-color: $input-default-color !default;
+$input-type-text-font-family: $input-default-font-family !default;
+$input-type-text-font-weight: $input-default-font-weight !default;
+$input-type-text-font-style: $input-default-font-style !default;
+$input-type-text-line-height: $input-default-line-height !default;
+
+/* Input[type="text"] Disabled state */
+$input-type-text-disabled-background-color: $input-default-disabled-background-color !default;
+$input-type-text-disabled-border: $input-default-disabled-border !default;
+$input-type-text-disabled-opacity: $input-default-disabled-opacity !default;
+$input-type-text-disabled-color: $input-default-disabled-color !default;
+$input-type-text-disabled-font-style: $input-default-disabled-font-style !default;
+
+/* Input[type="text"] Focus state */
+$input-type-text-focus-background-color: $input-default-focus-background-color !default;
+$input-type-text-focus-border: $input-default-focus-border !default;
+$input-type-text-focus-color: $input-default-focus-color !default;
+$input-type-text-focus-font-style: $input-default-focus-font-style !default;
+
+/* Select */
+$input-select-background-color: $input-default-background-color !default;
+$input-select-border-color: $input-default-border-color !default;
+$input-select-border: $input-default-border !default;
+$input-select-border-radius: $input-default-border-radius !default;
+$input-select-height: $input-default-height !default;
+$input-select-width: $input-default-width !default;
+$input-select-margin: $input-default-margin !default;
+$input-select-padding: $input-default-padding !default;
+$input-select-vertical-align: $input-default-vertical-align !default;
+$input-select-font-size: $input-default-font-size !default;
+$input-select-color: $input-default-color !default;
+$input-select-font-family: $input-default-font-family !default;
+$input-select-font-weight: $input-default-font-weight !default;
+$input-select-font-style: $input-default-font-style !default;
+$input-select-line-height: $input-default-line-height !default;
+
+/* Select Disabled state */
+$input-select-disabled-background-color: $input-default-disabled-background-color !default;
+$input-select-disabled-border: $input-default-disabled-border !default;
+$input-select-disabled-opacity: $input-default-disabled-opacity !default;
+$input-select-disabled-color: $input-default-disabled-color !default;
+$input-select-disabled-font-style: $input-default-disabled-font-style !default;
+
+/* Select Focus state */
+$input-select-focus-background-color: $input-default-focus-background-color !default;
+$input-select-focus-border: $input-default-focus-border !default;
+$input-select-focus-color: $input-default-focus-color !default;
+$input-select-focus-font-style: $input-default-focus-font-style !default;
+
+
 /* Textarea */
 $input-textarea-default-height: auto !default;
 $input-textarea-default-resize: vertical !default;
@@ -349,3 +437,6 @@ $detail-tab-content-font-size: $font-default-font-size !default;
 
 
 
+
+
+