diff --git a/docs/scripts/read-derived-variables.js b/docs/scripts/read-derived-variables.js
new file mode 100644
index 00000000..75c77d9f
--- /dev/null
+++ b/docs/scripts/read-derived-variables.js
@@ -0,0 +1,23 @@
+module.exports = plugin;
+
+var utils = require('./utils');
+
+function plugin() {
+  return (files, metalsmith, done) => {
+    setImmediate(done);
+
+    Object.keys(files).forEach(file_path => {
+      const {file_name, lines} = utils.getLines(files, file_path);
+
+      lines.forEach(line => {
+        const variable = utils.parseLine(line);
+
+        if (variable != false) {
+          console.log('variable', variable);
+        }
+      });
+
+      metalsmith.variables = variables;
+    });
+  };
+}
diff --git a/docs/scripts/read-initial-variables.js b/docs/scripts/read-initial-variables.js
new file mode 100644
index 00000000..e562dcdc
--- /dev/null
+++ b/docs/scripts/read-initial-variables.js
@@ -0,0 +1,32 @@
+module.exports = plugin;
+
+const utils = require('./utils');
+
+function plugin() {
+  let variables = {
+    by_name: {},
+  };
+
+  return (files, metalsmith, done) => {
+    setImmediate(done);
+
+    Object.keys(files).forEach(file_path => {
+      const {file_name, lines} = utils.getLines(files, file_path);
+
+      variables[file_name] = [];
+
+      lines.forEach(line => {
+        const variable = utils.parseLine(line);
+
+        if (variable != false) {
+          variables.by_name[variable.name] = variable;
+          variables[file_name].push(variable.name);
+        }
+      });
+
+      metalsmith.variables = variables;
+
+      utils.writeFile('./output/initial-variables.json', variables);
+    });
+  };
+}
diff --git a/docs/scripts/read-sass-variables.js b/docs/scripts/read-sass-variables.js
deleted file mode 100644
index 4a1b684c..00000000
--- a/docs/scripts/read-sass-variables.js
+++ /dev/null
@@ -1,25 +0,0 @@
-module.exports = plugin;
-
-function plugin() {
-  return (files, metalsmith, done) => {
-    setImmediate(done);
-
-    Object.keys(files).forEach(file_path => {
-      const file = files[file_path];
-      const lines = file.contents.toString().split(/(?:\r\n|\r|\n)/g);
-
-      lines.forEach(line => {
-        if (line.startsWith('$') && line.endsWith('!default')) {
-          const colon_index = line.indexOf(':');
-          const variable_name = line.substring(0, colon_index).trim();
-
-          const default_index = line.indexOf('!default');
-          const variable_value = line.substring(colon_index + 1, default_index).trim();
-
-          console.log('variable_name', variable_name);
-          console.log('variable_value', variable_value);
-        }
-      });
-    });
-  };
-}
diff --git a/docs/scripts/utils.js b/docs/scripts/utils.js
new file mode 100644
index 00000000..813b1167
--- /dev/null
+++ b/docs/scripts/utils.js
@@ -0,0 +1,69 @@
+const fs = require('fs');
+
+function getVariableType(value) {
+  if (value.startsWith('hsl')) {
+    return 'color';
+  } else if (value.startsWith('$')) {
+    return 'variable';
+  } else if (value.startsWith('BlinkMacSystemFont') || value == 'monospace') {
+    return 'font-family';
+  } else if (value == 'true' || value == 'false') {
+    return 'boolean';
+  } else if (value.includes('+')) {
+    return 'computed';
+  } else if (value.endsWith('px') || value.endsWith('rem')) {
+    return 'size';
+  }
+
+  return 'string';
+}
+
+function parseLine(line) {
+  if (line.startsWith('$') && line.endsWith('!default')) {
+    const colon_index = line.indexOf(':');
+    const variable_name = line.substring(0, colon_index).trim();
+
+    const default_index = line.indexOf('!default');
+    const variable_value = line.substring(colon_index + 1, default_index).trim();
+
+    return variable = {
+      name: variable_name,
+      value: variable_value,
+      type: getVariableType(variable_value),
+    };
+  }
+
+  return false;
+}
+
+function getLines(files, file_path) {
+  const file = files[file_path];
+  const slash_index = file_path.lastIndexOf('/');
+  const dot_index = file_path.lastIndexOf('.');
+  const file_name = file_path.substring(slash_index + 1, dot_index);
+
+  return {
+    file_name,
+    lines: file.contents.toString().split(/(?:\r\n|\r|\n)/g),
+  }
+}
+
+function writeFile(file_path, data) {
+  const json_data = JSON.stringify(data, null, '  ');
+
+  fs.writeFile(file_path, json_data, err => {
+    if (err) {
+      return console.log(err);
+    }
+
+    console.log('The file was saved!');
+  });
+}
+
+let plugin = {};
+plugin.getVariableType = getVariableType;
+plugin.getLines = getLines;
+plugin.parseLine = parseLine;
+plugin.writeFile = writeFile;
+
+module.exports = plugin;
diff --git a/docs/scripts/variables.js b/docs/scripts/variables.js
index 01910f67..bbdd46d8 100644
--- a/docs/scripts/variables.js
+++ b/docs/scripts/variables.js
@@ -2,17 +2,22 @@ var Metalsmith = require('metalsmith');
 var filter = require('metalsmith-filter');
 var writemetadata = require('metalsmith-writemetadata');
 
-var regex = '**/*-variables.sass';
+// var regex = '**/*-variables.sass';
 // var regex = '**/*.sass';
-var plugin = require('./read-sass-variables');
+var regex_initial = '**/initial-variables.sass';
+var regex_derived = '**/derived-variables.sass';
+var initial_plugin = require('./read-initial-variables');
+var derived_plugin = require('./read-derived-variables');
 
 Metalsmith(__dirname)
-  .source('../../sass')
-  .destination('./output')
-  .clean(true)
-  .use(filter(regex))
-  .use(plugin())
-  .use(writemetadata())
+  .source('../../sass/utilities')
+  // .destination('./output')
+  // .clean(true)
+  .use(filter(regex_initial))
+  .use(initial_plugin())
+  // .use(filter(regex_derived))
+  // .use(derived_plugin())
+  // .use(writemetadata())
   .build(function(err) {
     if (err) throw err;
   });