diff --git a/.gitignore b/.gitignore
index e55a95f..d8077a7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,3 +4,5 @@ yarn.lock
 node_modules/
 bower_components/
 .editorconfig
+main.scss
+index.html
diff --git a/README.md b/README.md
index 620c2b4..7d82267 100644
--- a/README.md
+++ b/README.md
@@ -30,11 +30,16 @@ If you're using a `bower`, `npm`, or `yarn` then install via:
 bower i --save-dev skeleton-sass
 bower i --save-dev skeleton-sass-official
 npm i --save-dev skeleton-sass-official
-yarn install skeleton-sass-official
+yarn install skeleton-sass-official --dev
 ~~~
 
 Optionally, if you are not using one of these package managers, then you can clone the repo and put in a special directory with the rest of your dependencies.
 
+~~~bash
+cd path/to/my_dir
+git clone https://github.com/atomicpages/skeleton-sass.git
+~~~
+
 From here, minimal stitching is required to get Skeleton Sass 3 integrated into your project! At a minimum, you need to create a single file: `skeleton.scss`
 
 From \*nix:
@@ -61,8 +66,8 @@ Inside of `skeleton.scss` we need to add our components:
 @import "path/to/bower_components/skeleton-sass/skeleton/themes/fresh/vars"; // theme variable overrides
 
 // import default theme styles
-@import "path/to/bower_components/skeleton-sass/skeleton/themes/fresh/base"; // theme base styles
-@import "path/to/bower_components/skeleton-sass/skeleton/themes/fresh/skeleton"; // theme grid styles
+@import "path/to/bower_components/skeleton-sass/skeleton/themes/fresh/include\_components"; // theme base styles
+@import "path/to/bower_components/skeleton-sass/skeleton/themes/fresh/grid"; // theme grid styles
 ~~~
 
 Compile `skeleton.scss` and you now have Skeleton Sass 3 integrated into your project!
@@ -79,12 +84,20 @@ my_project
             ├── _config.scss	 # Global overrides and applies to all themes
             ├── _loader.scss 	# Contains all of the imports
             └── my_theme
-                ├── _base.scss 	# Theme base styles, replaces shipped base styles
-                ├── _skeleton.scss	# Theme grid, replaces shipped grids
-                ├── _vars.scss 	# Theme-scoped variables and overrides
-                └── marrow
-                    ├── _private.scss # Private mixins, conventionally only available to _public.scss
-                    └── _public.scss # Public-facing mixins available to the theme
+                ├── _grid.scss # Theme grid, replaces shipped grids
+                ├── \_include_components.scss # Includes all of the components in the components folder
+                ├── _vars.scss # Theme-scoped variables and overrides
+                ├── components
+                │   ├── _base.scss # Default html and body styles
+                │   ├── _buttons.scss
+                │   ├── _forms.scss
+                │   ├── _links.scss
+                │   ├── _lists.scss
+                │   ├── _typography.scss
+                │   └── _utils.scss # Utility classes
+                └── mixins
+                    ├── _private.scss # Contains all "private" mixins
+                    └── _public.scss # Contains all public mixins
 ```
 
 Now that we have our sample project outlined, let's see how we can get everything working! Open `_config.scss` and add the following:
@@ -104,8 +117,8 @@ Now open `_loader.scss` and add the following:
 
 // import theme, overrides, and extras
 @import "themes/MyTheme/vars";
-@import "themes/MyTheme/base";
-@import "themes/MyTheme/skeleton";
+@import "themes/MyTheme/include_components";
+@import "themes/MyTheme/grid";
 ~~~
 
 Finally, open `skeleton.scss` and add the following as the first line of the file:
@@ -124,14 +137,14 @@ For example, let's assume we want to use font-awesome inside of our `skeleton.sc
 
 // import theme, overrides, and extras
 @import "themes/MyTheme/vars";
-@import "themes/MyTheme/base";
-@import "themes/MyTheme/skeleton";
+@import "themes/MyTheme/include_components";
+@import "themes/MyTheme/grid";
 
 // import extras
 @import "../../../bower_components/font-awesome/scss/font-awesome";
 ~~~
 
-**Note:** the position of the import changes which files have access to the loaded data. For example, if you need the data in `themes/MyTheme/skeleton` then you'd need to move the import above the line where you import `themes/MyTheme/skeleton`.
+**Note:** the position of the import changes which files have access to the loaded data. For example, if you need the data in `themes/MyTheme/grid` then you'd need to move the import above the line where you import `themes/MyTheme/grid`.
 
 For more information on why we made this change, [click here](#change).
 
@@ -158,31 +171,63 @@ Skeleton Sass is a Sass port of Skeleton CSS. Skeleton Sass 3 decouples itself f
 ### Features
 1. Modular
 2. Decoupled core code
-3. Extensible
-4. Themeable
+3. Decoupled theme files for rapid theme development
+4. Extensible
 
 ### File Overview
 ```
-Skeleton 	# Where all of the magic happens
+skeleton/ # Where all of the magic happens
 ├── core
-│   ├── _config.scss 	# Default global configuration variables
-│   ├── _dependencies.scss	 # Default global logic for Skeleton Sass
-│   ├── _functions.scss	 # Default global functions for Skeleton Sass
-│   └── _mixins.scss	 # Default global mixins for Skeleton Sass
-└── themes 	# Where all of the themes live
+│   ├── _config.scss # Default global configuration variables
+│   ├── _dependencies.scss # Default global logic for Skeleton Sass
+│   ├── _functions.scss # Default global functions for Skeleton Sass
+│   └── _mixins.scss # Default global mixins for Skeleton Sass
+└── themes # Where all of the themes live
     ├── fresh
-    │   ├── _base.scss contains # All of the base styles for Skeleton Sass with the exception of the reset styles
-    │   ├── _skeleton.scss
-    │   ├── _vars.scss 	# Project-scoped configuration options and variables
-    │   └── marrow 	# Stores all project-level functions and mixins
-    │       └── _mixins.scss	 # loads the default theme mixins and functions from sphenoid
-    └── sphenoid
-        ├── _base.scss 	# Base styles for Skeleton Sass (same look as Skeleton CSS created)
-        ├── _skeleton.scss	 # Styles to create the grid
-        ├── _vars.scss 	# Project-scoped configuration options
-        └── marrow 	#Project-scoped logic (e.g. functions and mixins) for your theme to work
-            ├── _private.scss 	# Private logic for the public mixins/functions to work correctly for the sphenoid project. Feel free to name this file whatever you want in your own theme.
-            └── _public.scss 	# Public mixins/functions for the sphenoid theme. Feel free to name this file whatever you want in your own theme.
+    │   ├── _grid.scss
+    │   ├── \_include_components.scss # partial to import all of the components
+    │   ├── _vars.scss # Project-scoped configuration options and variables
+    │   ├── components
+    │   │   ├── _base.scss
+    │   │   ├── _buttons.scss
+    │   │   ├── _forms.scss
+    │   │   ├── _links.scss
+    │   │   ├── _lists.scss
+    │   │   ├── _misc.scss
+    │   │   ├── _normalize.scss
+    │   │   ├── _tables.scss
+    │   │   ├── _typography.scss
+    │   │   └── _utils.scss
+    │   └── mixins # Stores all project-level functions and mixins
+    │       └── _mixins.scss
+    ├── original
+    │   ├── _grid.scss
+    │   ├── \_include_components.scss # partial to import all of the components
+    │   ├── _vars.scss # Project-scoped configuration options and variables
+    │   ├── components
+    │   │   ├── _base.scss
+    │   │   ├── _buttons.scss
+    │   │   ├── _forms.scss
+    │   │   ├── _links.scss
+    │   │   ├── _lists.scss
+    │   │   ├── _typography.scss
+    │   │   └── _utils.scss
+    │   └── mixins # Stores all project-level functions and mixins
+    │       ├── _private.scss
+    │       └── _public.scss
+    └── wing
+        ├── _grid.scss
+        ├── \_include_components.scss # partial to import all of the components
+        ├── _vars.scss # Project-scoped configuration options and variables
+        └── components
+            ├── _base.scss
+            ├── _buttons.scss
+            ├── _forms.scss
+            ├── _links.scss
+            ├── _lists.scss
+            ├── _misc.scss
+            ├── _typography.scss
+            └── _utils.scss
 ```
 
 Install Skeleton Sass with bower via command line:
@@ -196,14 +241,14 @@ You can also add Skeleton Sass as a dependency via NPM or Yarn!
 
 ~~~bash
 npm install --save-dev skeleton-sass-official
-yarn install skeleton-sass-official
+yarn install skeleton-sass-official --dev
 ~~~
 
 You can also install alpha, beta, release candidate, and previous versions by looking at the [releases](https://github.com/atomicpages/skeleton-sass/releases) page and install with the following syntax:
 
 ~~~bash
 bower install skeleton-sass#[tag]
-bower install skeleton-sass#3.0.2
+bower install skeleton-sass#3.1.0
 ~~~
 
 [Learn how to set up Skeleton Sass for the first time here](https://github.com/atomicpages/skeleton-sass/wiki/Setting-up-Skeleton-Sass-for-first-time-use).
@@ -254,6 +299,15 @@ Changelog
     * Added new demos
     * Better styling
     * Less clutter
+* Splitting base styles into several components to accelerate theme development and reduce file coupling.
+    * `_base.scss`
+    * `_buttons.scss`
+    * etc...
+* Adding `_include_components.scss` partial in every theme for easy loading
+* Standardizing naming conventions
+    * Renaming `sphenoid` theme to `original`
+    * Renaming `marrow` folders to `mixins`
+    * Renaming `_skeleton.scss` to `_grid.scss`
 
 ### 3.0.3
 * Addressing issue #24
diff --git a/bower.json b/bower.json
index 03bd5d3..22c2934 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
 {
 	"name": "skeleton-sass",
-	"version": "3.0.2",
+	"version": "3.1.0",
 	"author": "Dennis Thompson",
 	"homepage": "http://atomicpages.github.io/skeleton-sass/",
 	"repository": {
diff --git a/gulpfile.js b/gulpfile.js
new file mode 100644
index 0000000..26dbcfe
--- /dev/null
+++ b/gulpfile.js
@@ -0,0 +1,18 @@
+const gulp = require('gulp');
+const sass = require('gulp-sass');
+const del = require('del');
+const sourcemaps = require('gulp-sourcemaps');
+
+gulp.task('clean', function () {
+    return del('main.css*');
+});
+
+gulp.task('sass', ['clean'], function () {
+    return gulp.src('main.scss')
+        .pipe(sourcemaps.init())
+        .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
+        .pipe(sourcemaps.write('.'))
+        .pipe(gulp.dest('.'));
+});
+
+gulp.task('default', ['sass']);
diff --git a/license.txt b/license.txt
index c3c0ca5..9efe471 100644
--- a/license.txt
+++ b/license.txt
@@ -1,5 +1,5 @@
 The MIT License (MIT)
-Copyright (c) 2016 AtomicPages LLC
+Copyright (c) 2017 AtomicPages LLC
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 
diff --git a/package.json b/package.json
index b90b136..f852fa1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "skeleton-sass-official",
-	"version": "3.0.2",
+	"version": "3.1.0",
 	"description": "Skeleton Sass is a highly modular version of Skeleton CSS",
 	"main": "skeleton/core/_config.scss",
 	"scripts": {
@@ -11,12 +11,12 @@
 		"url": "git+https://github.com/atomicpages/skeleton-sass.git"
 	},
 	"keywords": [
+		"scss",
 		"sass",
 		"skeleton",
-		"front-end",
+		"frontend",
 		"css",
-		"boilerplate",
-		"scss"
+		"boilerplate"
 	],
 	"author": "Dennis Thompson",
 	"license": "MIT",
@@ -26,5 +26,13 @@
 	"homepage": "https://github.com/atomicpages/skeleton-sass#readme",
 	"dependencies": {
 		"normalize-scss": ">=5.0.4"
+	},
+	"devDependencies": {
+		"del": ">=2.2.2",
+		"gulp": "^3.9.1",
+		"gulp-cli": ">=1.2.2",
+		"gulp-sass": ">=3.1.0",
+		"gulp-sourcemaps": "^2.4.0",
+		"sassdoc": ">=2.1.20"
 	}
 }
diff --git a/skeleton/themes/fresh/_base.scss b/skeleton/themes/fresh/_base.scss
deleted file mode 100644
index 81cc8a3..0000000
--- a/skeleton/themes/fresh/_base.scss
+++ /dev/null
@@ -1,306 +0,0 @@
-// The foundation of Skeleton which includes all base styles
-// that come bundled by default.
-// See skeleton/core/_config.scss for default variable values.
-// See _vars.scss for theme-scoped default values.
-
-/* Normalize
- * ------------------------------------------------ */
- @include normalize();
-
-/* BASIC STYLES
- * ------------------------------------------------ */
-html { font-size: percentage(strip-units($base-font-size) / 16); }
-@if($use-global-border-box) {
-	*,
-	*:before,
-	*:after {
-		-webkit-box-sizing: border-box;
-		-moz-box-sizing: border-box;
-		box-sizing: border-box;
-	}
-}
-body {
-	background: $background-color;
-	font: {
-		family: $font-family;
-		weight: $font-weight;
-		style: normal;
-	}
-	@include font-size($font-size);
-	line-height: 1.6;
-	color: $font-color;
-}
-
-/* TYPOGRAPHY
- * ------------------------------------------------ */
-h1, h2, h3, h4, h5, h6 {
-	color: $heading-color;
-	font: {
-		family: $heading-family;
-		weight: $heading-weight;
-	}
-	margin-top: 0;
-	margin-bottom: relative(20px);
-}
-h1 {
-	font-size: relative(40px);
-	line-height: 1.2;
-	letter-spacing: relative(-1px);
-}
-h2 {
-	font-size: relative(36px);
-	line-height: 1.25;
-	letter-spacing: -0.1rem;
-}
-h3 {
-	font-size: relative(30px);
-	line-height: 1.3;
-	letter-spacing: -0.1rem;
-}
-h4 {
-	font-size: relative(24px);
-	line-height: 1.35;
-	letter-spacing: -0.08rem;
-}
-h5 {
-	font-size: relative(18px);
-	line-height: 1.5;
-	letter-spacing: -0.05rem;
-}
-h6 {
-	font-size: relative(15px);
-	line-height: 1.6;
-	letter-spacing: 0;
-}
-
-/* Larger than phablet */
-@media (min-width: 550px) {
-  h1 { font-size: relative(50px); }
-  h2 { font-size: relative(42px); }
-  h3 { font-size: relative(36px); }
-  h4 { font-size: relative(30px); }
-  h5 { font-size: relative(24px); }
-  h6 { font-size: relative(15px); }
-}
-
-p { margin-top: 0; }
-
-/* LINKS
- * ------------------------------------------------ */
-a, a:visited {
-	color: $link-color;
-	text-decoration: $link-decoration;
-}
-a:hover, a:focus, a:active { color: $link-hover; }
-
-/* LISTS
- * ------------------------------------------------ */
-ul { list-style: circle inside; }
-ol { list-style: decimal inside; }
-ol, ul {
-	padding-left: 0;
-	margin-top: 0;
-}
-ul ul,
-ul ol,
-ol ol,
-ol ul {
-	margin: relative(15px) 0 relative(15px) relative(30px);
-	font-size: 90%;
-}
-li { margin-bottom: relative(10px); }
-
-/* CODE
- * ------------------------------------------------ */
-code {
-	padding: relative(2px) relative(5px);
-	margin: 0 relative(2px);
-	font-size: 90%;
-	white-space: nowrap;
-	background: #F1F1F1;
-	border: 1px solid #E1E1E1;
-	border-radius: 4px;
-}
-pre > code {
-	display: block;
-	padding: relative(10px) relative(15px);
-	white-space: pre;
-}
-
-/* TABLES
- * ------------------------------------------------ */
-th,
-td {
-	padding: 12px 15px;
-	text-align: left;
-	border-bottom: 1px solid #E1E1E1;
-	&:first-child { padding-left: 0; }
-	&:last-child { padding-right: 0; }
-}
-
-/* UTILITIES
- * ------------------------------------------------ */
-.u-full-width {
-	width: 100%;
-	box-sizing: border-box;
-}
-.u-max-full-width {
-	max-width: 100%;
-	box-sizing: border-box;
-}
-.u-pull-right { float: right; }
-.u-pull-left { float: left; }
-
-/* IMAGES
- * ------------------------------------------------ */
-img.scale-with-grid {
-	max-width: 100%;
-	height: auto;
-}
-
-/* BUTTONS
- * ------------------------------------------------ */
-.button,
-button,
-input[type="submit"],
-input[type="reset"],
-input[type="button"] {
-	display: inline-block;
-	height: 38px;
-	padding: 0 relative(30px);
-	color: $button-color;
-	text-align: center;
-	font-size: relative(11px);
-	font-weight: $button-weight;
-	line-height: 38px;
-	letter-spacing: 0.1rem;
-	text-transform: if($button-font-uppercase, uppercase, none);
-	text-decoration: none;
-	white-space: nowrap;
-	background-color: transparent;
-	border-radius: 4px;
-	border: 1px solid $button-border-color;
-	cursor: pointer;
-	box-sizing: border-box;
-	&:hover,
-	&:focus {
-		color: #333;
-		border-color: #888;
-		outline: 0;
-	}
-	&.button-primary {
-		color: #FFF;
-		background-color: #33C3F0;
-		border-color: #33C3F0;
-		&:hover,
-		&:focus {
-			color: #FFF;
-			background-color: #1EAEDB;
-			border-color: #1EAEDB;
-		}
-	}
-}
-.button:visited { color: $button-color; }
-
-/* Fix for odd Mozilla border & padding issues */
-button,
-input {
-	&::-moz-focus-inner {
-		border: 0;
-		padding: 0;
-	}
-}
-
-/* FORMS
- * ------------------------------------------------ */
-input[type="email"],
-input[type="number"],
-input[type="search"],
-input[type="text"],
-input[type="tel"],
-input[type="url"],
-input[type="password"],
-textarea,
-select {
-	height: 38px;
-	padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
-	background-color: #fff;
-	border: 1px solid #D1D1D1;
-	border-radius: 4px;
-	box-shadow: none;
-	box-sizing: border-box;
-}
-/* Removes awkward default styles on some inputs for iOS */
-input[type="email"],
-input[type="number"],
-input[type="search"],
-input[type="text"],
-input[type="tel"],
-input[type="url"],
-input[type="password"],
-textarea {
-	-webkit-appearance: none;
-	-moz-appearance: none;
-	appearance: none;
-}
-textarea {
-	min-height: 65px;
-	padding-top: 6px;
-	padding-bottom: 6px;
-}
-input[type="email"]:focus,
-input[type="number"]:focus,
-input[type="search"]:focus,
-input[type="text"]:focus,
-input[type="tel"]:focus,
-input[type="url"]:focus,
-input[type="password"]:focus,
-textarea:focus,
-select:focus {
-	border: 1px solid #33C3F0;
-	outline: 0;
-}
-label,
-legend {
-	display: block;
-	margin-bottom: relative(5px);
-	font-weight: 600;
-}
-fieldset {
-	padding: 0;
-	border-width: 0;
-}
-input[type="checkbox"],
-input[type="radio"] { display: inline; }
-label > .label-body {
-	display: inline-block;
-	margin-left: relative(5px);
-	font-weight: normal;
-}
-
-/* SPACING
- * ------------------------------------------------ */
-button,
-.button { margin-bottom: relative(10px); }
-input,
-textarea,
-select,
-fieldset { margin-bottom: relative(15px); }
-pre,
-blockquote,
-dl,
-figure,
-table,
-p,
-ul,
-ol,
-form { margin-bottom: relative(25px); }
-
-/* MISC
- * ------------------------------------------------ */
-hr {
-  margin-top: relative(30px);
-  margin-bottom: relative(35px);
-  border-width: 0;
-  border-top: 1px solid #E1E1E1;
-}
diff --git a/skeleton/themes/fresh/_skeleton.scss b/skeleton/themes/fresh/_grid.scss
similarity index 100%
rename from skeleton/themes/fresh/_skeleton.scss
rename to skeleton/themes/fresh/_grid.scss
diff --git a/skeleton/themes/fresh/_include_components.scss b/skeleton/themes/fresh/_include_components.scss
new file mode 100644
index 0000000..9c09737
--- /dev/null
+++ b/skeleton/themes/fresh/_include_components.scss
@@ -0,0 +1,10 @@
+@import "components/normalize";
+@import "components/base";
+@import "components/typography";
+@import "components/buttons";
+@import "components/misc";
+@import "components/links";
+@import "components/lists";
+@import "components/forms";
+@import "components/tables";
+@import "components/utils";
diff --git a/skeleton/themes/fresh/_vars.scss b/skeleton/themes/fresh/_vars.scss
index b7cc7df..e2df975 100644
--- a/skeleton/themes/fresh/_vars.scss
+++ b/skeleton/themes/fresh/_vars.scss
@@ -3,7 +3,7 @@
 // stored in the marrow folder, but to also create project-level
 // variables.
 
-@import "marrow/mixins";
+@import "mixins/mixins";
 
 // Yep, taken right from bourbon - https://github.com/thoughtbot/bourbon/blob/master/dist/settings/_prefixer.scss
 $prefix-for-webkit:    true !default;
diff --git a/skeleton/themes/fresh/components/_base.scss b/skeleton/themes/fresh/components/_base.scss
new file mode 100644
index 0000000..206c1e5
--- /dev/null
+++ b/skeleton/themes/fresh/components/_base.scss
@@ -0,0 +1,46 @@
+// The foundation of Skeleton which includes all base styles
+// that come bundled by default.
+// See skeleton/core/_config.scss for default variable values.
+// See _vars.scss for theme-scoped default values.
+
+/* BASIC STYLES
+ * ------------------------------------------------ */
+html { font-size: percentage(strip-units($base-font-size) / 16); }
+@if($use-global-border-box) {
+	*,
+	*:before,
+	*:after {
+		-webkit-box-sizing: border-box;
+		-moz-box-sizing: border-box;
+		box-sizing: border-box;
+	}
+}
+body {
+	background: $background-color;
+	font: {
+		family: $font-family;
+		weight: $font-weight;
+		style: normal;
+	}
+	@include font-size($font-size);
+	line-height: 1.6;
+	color: $font-color;
+}
+
+/* SPACING
+ * ------------------------------------------------ */
+button,
+.button { margin-bottom: relative(10px); }
+input,
+textarea,
+select,
+fieldset { margin-bottom: relative(15px); }
+pre,
+blockquote,
+dl,
+figure,
+table,
+p,
+ul,
+ol,
+form { margin-bottom: relative(25px); }
diff --git a/skeleton/themes/fresh/components/_buttons.scss b/skeleton/themes/fresh/components/_buttons.scss
new file mode 100644
index 0000000..5672e35
--- /dev/null
+++ b/skeleton/themes/fresh/components/_buttons.scss
@@ -0,0 +1,52 @@
+/* BUTTONS
+ * ------------------------------------------------ */
+.button,
+button,
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+	display: inline-block;
+	height: 38px;
+	padding: 0 relative(30px);
+	color: $button-color;
+	text-align: center;
+	font-size: relative(11px);
+	font-weight: $button-weight;
+	line-height: 38px;
+	letter-spacing: 0.1rem;
+	text-transform: if($button-font-uppercase, uppercase, none);
+	text-decoration: none;
+	white-space: nowrap;
+	background-color: transparent;
+	border-radius: 4px;
+	border: 1px solid $button-border-color;
+	cursor: pointer;
+	box-sizing: border-box;
+	&:hover,
+	&:focus {
+		color: #333;
+		border-color: #888;
+		outline: 0;
+	}
+	&.button-primary {
+		color: #FFF;
+		background-color: #33C3F0;
+		border-color: #33C3F0;
+		&:hover,
+		&:focus {
+			color: #FFF;
+			background-color: #1EAEDB;
+			border-color: #1EAEDB;
+		}
+	}
+}
+.button:visited { color: $button-color; }
+
+/* Fix for odd Mozilla border & padding issues */
+button,
+input {
+	&::-moz-focus-inner {
+		border: 0;
+		padding: 0;
+	}
+}
diff --git a/skeleton/themes/fresh/components/_forms.scss b/skeleton/themes/fresh/components/_forms.scss
new file mode 100644
index 0000000..12a8224
--- /dev/null
+++ b/skeleton/themes/fresh/components/_forms.scss
@@ -0,0 +1,66 @@
+/* FORMS
+ * ------------------------------------------------ */
+input[type="email"],
+input[type="number"],
+input[type="search"],
+input[type="text"],
+input[type="tel"],
+input[type="url"],
+input[type="password"],
+textarea,
+select {
+	height: 38px;
+	padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
+	background-color: #fff;
+	border: 1px solid #D1D1D1;
+	border-radius: 4px;
+	box-shadow: none;
+	box-sizing: border-box;
+}
+/* Removes awkward default styles on some inputs for iOS */
+input[type="email"],
+input[type="number"],
+input[type="search"],
+input[type="text"],
+input[type="tel"],
+input[type="url"],
+input[type="password"],
+textarea {
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+}
+textarea {
+	min-height: 65px;
+	padding-top: 6px;
+	padding-bottom: 6px;
+}
+input[type="email"]:focus,
+input[type="number"]:focus,
+input[type="search"]:focus,
+input[type="text"]:focus,
+input[type="tel"]:focus,
+input[type="url"]:focus,
+input[type="password"]:focus,
+textarea:focus,
+select:focus {
+	border: 1px solid #33C3F0;
+	outline: 0;
+}
+label,
+legend {
+	display: block;
+	margin-bottom: relative(5px);
+	font-weight: 600;
+}
+fieldset {
+	padding: 0;
+	border-width: 0;
+}
+input[type="checkbox"],
+input[type="radio"] { display: inline; }
+label > .label-body {
+	display: inline-block;
+	margin-left: relative(5px);
+	font-weight: normal;
+}
diff --git a/skeleton/themes/fresh/components/_links.scss b/skeleton/themes/fresh/components/_links.scss
new file mode 100644
index 0000000..e1d07b0
--- /dev/null
+++ b/skeleton/themes/fresh/components/_links.scss
@@ -0,0 +1,7 @@
+/* LINKS
+ * ------------------------------------------------ */
+a, a:visited {
+	color: $link-color;
+	text-decoration: $link-decoration;
+}
+a:hover, a:focus, a:active { color: $link-hover; }
diff --git a/skeleton/themes/fresh/components/_lists.scss b/skeleton/themes/fresh/components/_lists.scss
new file mode 100644
index 0000000..9c13cb9
--- /dev/null
+++ b/skeleton/themes/fresh/components/_lists.scss
@@ -0,0 +1,16 @@
+/* LISTS
+ * ------------------------------------------------ */
+ul { list-style: circle inside; }
+ol { list-style: decimal inside; }
+ol, ul {
+	padding-left: 0;
+	margin-top: 0;
+}
+ul ul,
+ul ol,
+ol ol,
+ol ul {
+	margin: relative(15px) 0 relative(15px) relative(30px);
+	font-size: 90%;
+}
+li { margin-bottom: relative(10px); }
diff --git a/skeleton/themes/fresh/components/_misc.scss b/skeleton/themes/fresh/components/_misc.scss
new file mode 100644
index 0000000..f2abb14
--- /dev/null
+++ b/skeleton/themes/fresh/components/_misc.scss
@@ -0,0 +1,25 @@
+/* CODE
+ * ------------------------------------------------ */
+code {
+	padding: relative(2px) relative(5px);
+	margin: 0 relative(2px);
+	font-size: 90%;
+	white-space: nowrap;
+	background: #F1F1F1;
+	border: 1px solid #E1E1E1;
+	border-radius: 4px;
+}
+pre > code {
+	display: block;
+	padding: relative(10px) relative(15px);
+	white-space: pre;
+}
+
+/* MISC
+ * ------------------------------------------------ */
+hr {
+	margin-top: relative(30px);
+	margin-bottom: relative(35px);
+	border-width: 0;
+	border-top: 1px solid #E1E1E1;
+}
diff --git a/skeleton/themes/fresh/components/_normalize.scss b/skeleton/themes/fresh/components/_normalize.scss
new file mode 100644
index 0000000..f045275
--- /dev/null
+++ b/skeleton/themes/fresh/components/_normalize.scss
@@ -0,0 +1,3 @@
+/* Normalize
+ * ------------------------------------------------ */
+ @include normalize();
diff --git a/skeleton/themes/fresh/components/_tables.scss b/skeleton/themes/fresh/components/_tables.scss
new file mode 100644
index 0000000..8bd0aaa
--- /dev/null
+++ b/skeleton/themes/fresh/components/_tables.scss
@@ -0,0 +1,10 @@
+/* TABLES
+ * ------------------------------------------------ */
+th,
+td {
+	padding: 12px 15px;
+	text-align: left;
+	border-bottom: 1px solid #E1E1E1;
+	&:first-child { padding-left: 0; }
+	&:last-child { padding-right: 0; }
+}
diff --git a/skeleton/themes/fresh/components/_typography.scss b/skeleton/themes/fresh/components/_typography.scss
new file mode 100644
index 0000000..c9588e2
--- /dev/null
+++ b/skeleton/themes/fresh/components/_typography.scss
@@ -0,0 +1,53 @@
+/* TYPOGRAPHY
+ * ------------------------------------------------ */
+h1, h2, h3, h4, h5, h6 {
+	color: $heading-color;
+	font: {
+		family: $heading-family;
+		weight: $heading-weight;
+	}
+	margin-top: 0;
+	margin-bottom: relative(20px);
+}
+h1 {
+	font-size: relative(40px);
+	line-height: 1.2;
+	letter-spacing: relative(-1px);
+}
+h2 {
+	font-size: relative(36px);
+	line-height: 1.25;
+	letter-spacing: -0.1rem;
+}
+h3 {
+	font-size: relative(30px);
+	line-height: 1.3;
+	letter-spacing: -0.1rem;
+}
+h4 {
+	font-size: relative(24px);
+	line-height: 1.35;
+	letter-spacing: -0.08rem;
+}
+h5 {
+	font-size: relative(18px);
+	line-height: 1.5;
+	letter-spacing: -0.05rem;
+}
+h6 {
+	font-size: relative(15px);
+	line-height: 1.6;
+	letter-spacing: 0;
+}
+
+/* Larger than phablet */
+@media (min-width: 550px) {
+  h1 { font-size: relative(50px); }
+  h2 { font-size: relative(42px); }
+  h3 { font-size: relative(36px); }
+  h4 { font-size: relative(30px); }
+  h5 { font-size: relative(24px); }
+  h6 { font-size: relative(15px); }
+}
+
+p { margin-top: 0; }
diff --git a/skeleton/themes/fresh/components/_utils.scss b/skeleton/themes/fresh/components/_utils.scss
new file mode 100644
index 0000000..31a02f4
--- /dev/null
+++ b/skeleton/themes/fresh/components/_utils.scss
@@ -0,0 +1,19 @@
+/* UTILITIES
+ * ------------------------------------------------ */
+.u-full-width {
+	width: 100%;
+	box-sizing: border-box;
+}
+.u-max-full-width {
+	max-width: 100%;
+	box-sizing: border-box;
+}
+.u-pull-right { float: right; }
+.u-pull-left { float: left; }
+
+/* IMAGES
+ * ------------------------------------------------ */
+img.scale-with-grid {
+	max-width: 100%;
+	height: auto;
+}
diff --git a/skeleton/themes/fresh/marrow/_mixins.scss b/skeleton/themes/fresh/marrow/_mixins.scss
deleted file mode 100644
index dfcb548..0000000
--- a/skeleton/themes/fresh/marrow/_mixins.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import "../../sphenoid/marrow/private";
-@import "../../sphenoid/marrow/public";
diff --git a/skeleton/themes/fresh/mixins/_mixins.scss b/skeleton/themes/fresh/mixins/_mixins.scss
new file mode 100644
index 0000000..68bf6ed
--- /dev/null
+++ b/skeleton/themes/fresh/mixins/_mixins.scss
@@ -0,0 +1,2 @@
+@import "../../original/mixins/private";
+@import "../../original/mixins/public";
diff --git a/skeleton/themes/sphenoid/_skeleton.scss b/skeleton/themes/original/_grid.scss
similarity index 100%
rename from skeleton/themes/sphenoid/_skeleton.scss
rename to skeleton/themes/original/_grid.scss
diff --git a/skeleton/themes/original/_include_components.scss b/skeleton/themes/original/_include_components.scss
new file mode 100644
index 0000000..dca79e5
--- /dev/null
+++ b/skeleton/themes/original/_include_components.scss
@@ -0,0 +1,9 @@
+// Includes all of the components by default. You can mix-and-match any combination of components
+// you like by including them the partials in your own themes!
+@import "components/base";
+@import "components/typography";
+@import "components/links";
+@import "components/lists";
+@import "components/buttons";
+@import "components/forms";
+@import "components/utils";
diff --git a/skeleton/themes/sphenoid/_vars.scss b/skeleton/themes/original/_vars.scss
similarity index 81%
rename from skeleton/themes/sphenoid/_vars.scss
rename to skeleton/themes/original/_vars.scss
index a810ef7..644c571 100644
--- a/skeleton/themes/sphenoid/_vars.scss
+++ b/skeleton/themes/original/_vars.scss
@@ -1,10 +1,10 @@
 // This file exists for not only to connect everything at the
 // project level, but for you to import project-level dependencies
-// stored in the marrow folder, but to also create project-level
+// stored in the mixins folder, but to also create project-level
 // variables.
 
-@import "marrow/private";
-@import "marrow/public";
+@import "mixins/private";
+@import "mixins/public";
 
 // Yep, taken right from bourbon - https://github.com/thoughtbot/bourbon/blob/master/dist/settings/_prefixer.scss
 $prefix-for-webkit:    true !default;
diff --git a/skeleton/themes/original/components/_base.scss b/skeleton/themes/original/components/_base.scss
new file mode 100644
index 0000000..fade6d1
--- /dev/null
+++ b/skeleton/themes/original/components/_base.scss
@@ -0,0 +1,40 @@
+// The foundation of Skeleton which includes all base styles
+// that come bundled by default.
+// See skeleton/core/_config.scss for default variable values.
+// See _vars.scss for theme-scoped default values.
+
+/* RESET
+ * ------------------------------------------------ */
+@include global-reset;
+
+/* BASIC STYLES
+ * ------------------------------------------------ */
+html {
+	font-size: percentage(strip-units($base-font-size) / 16);
+	overflow-y: scroll;
+	-webkit-text-size-adjust: 100%;
+	-ms-text-size-adjust: 100%;
+	line-height: 1.2;
+}
+@if($use-global-border-box) {
+	*,
+	*:before,
+	*:after {
+		-webkit-box-sizing: border-box;
+		-moz-box-sizing: border-box;
+		box-sizing: border-box;
+	}
+}
+body {
+	background: $background-color;
+	font: {
+		family: $font-family;
+		weight: normal;
+		style: normal;
+	}
+	@include font-size(14px);
+	line-height: relative(26px);
+	color: $font-color;
+	-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
+	-webkit-text-size-adjust: 100%;
+}
diff --git a/skeleton/themes/original/components/_buttons.scss b/skeleton/themes/original/components/_buttons.scss
new file mode 100644
index 0000000..c80be4c
--- /dev/null
+++ b/skeleton/themes/original/components/_buttons.scss
@@ -0,0 +1,75 @@
+/* BUTTONS
+ * ------------------------------------------------ */
+.button,
+button,
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+	border: 1px solid #aaa;
+	border: {
+		top: 1px solid #ccc;
+		left: 1px solid #ccc;
+	};
+	@include border-radius(3px);
+	color: #444;
+	display: inline-block;
+	font: {
+		weight: bold;
+		family: $form-font;
+	};
+	@include font-size($font-size - 1);
+	text-decoration: none;
+	cursor: pointer;
+	line-height: normal;
+	padding: relative(8px) relative(10px);
+	background: #eeeeee -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0.2)), color-stop(100%, rgba(0, 0, 0, 0.2)));
+	background: #eeeeee -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
+	background: #eeeeee -moz-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
+	background: #eeeeee -o-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
+	background: #eeeeee linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
+	text-shadow: 0 1px rgba(255, 255, 255, 0.75);
+	&:hover {
+		color: #222;
+		border: 1px solid #888;
+		border: {
+			top: 1px solid #aaa;
+			left: 1px solid #aaa;
+		};
+		background: #dddddd -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0.3)), color-stop(100%, rgba(0, 0, 0, 0.3)));
+		background: #dddddd -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
+		background: #dddddd -moz-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
+		background: #dddddd -o-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
+		background: #dddddd linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
+	}
+	&:active {
+		border: 1px solid #666;
+		background: #cccccc -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0.35)), color-stop(100%, rgba(10, 10, 10, 0.4)));
+		background: #cccccc -webkit-linear-gradient(top, rgba(255, 255, 255, 0.35) 0%, rgba(10, 10, 10, 0.4) 100%);
+		background: #cccccc -moz-linear-gradient(top, rgba(255, 255, 255, 0.35) 0%, rgba(10, 10, 10, 0.4) 100%);
+		background: #cccccc -o-linear-gradient(top, rgba(255, 255, 255, 0.35) 0%, rgba(10, 10, 10, 0.4) 100%);
+		background: #cccccc linear-gradient(top, rgba(255, 255, 255, 0.35) 0%, rgba(10, 10, 10, 0.4) 100%);
+	}
+	&.full-width {
+		width: 100%;
+		padding-left: 0 !important;
+		padding-right: 0 !important;
+		text-align: center;
+	}
+	&.smaller {
+		@include font-size($font-size - 2);
+		padding: relative(4px) relative(5px);
+	}
+	&.larger {
+		@include font-size($font-size + 2);
+		padding: relative(10px) relative(18px);
+	}
+}
+
+/* Fix for odd Mozilla border & padding issues */
+button,
+input {
+	&::-moz-focus-inner {
+		border: 0;
+		padding: 0;
+	}
+}
diff --git a/skeleton/themes/original/components/_forms.scss b/skeleton/themes/original/components/_forms.scss
new file mode 100644
index 0000000..9adf6cb
--- /dev/null
+++ b/skeleton/themes/original/components/_forms.scss
@@ -0,0 +1,61 @@
+/* FORMS
+ * ------------------------------------------------ */
+form { margin-bottom: relative(20px); }
+fieldset { margin-bottom: relative(20px); }
+input[type="text"],
+input[type="password"],
+input[type="color"],
+input[type="email"],
+input[type="range"],
+input[type="search"],
+input[type="url"],
+input[type="tel"],
+input[type="date"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="month"],
+input[type="week"],
+input[type="time"],
+input[type="number"],
+textarea,
+select {
+	background: #fff;
+	border: 1px solid #ccc;
+	padding: relative(6px) relative(4px);
+	outline: none;
+	@include border-radius(2px);
+	font-family: $form-font;
+	@include font-size($font-size + 1);
+	color: #777;
+	margin: 0 0 relative(20px);
+	width: relative(210px);
+	max-width: 100%;
+	display: block;
+	&:hover,
+	&:focus {
+		border: 1px solid #aaa;
+		color: #444;
+		@include box-shadow(0 0 3px rgba(0,0,0,0.2));
+	}
+	&:active {
+		border: 1px solid darken(#aaa, 10%);
+		@include box-shadow(0 0 3px rgba(0,0,0,0.3));
+	}
+}
+select {
+	padding: 0;
+	width: relative(220px);
+}
+textarea { min-height: relative(60px); }
+label,
+legend {
+	span {
+		font-weight: normal;
+		@include font-size($font-size + 1);
+		color: #444;
+	}
+	display: block;
+	font-weight: bold;
+	@include font-size($font-size + 1);
+}
+input[type="checkbox"] { display: inline; }
diff --git a/skeleton/themes/original/components/_links.scss b/skeleton/themes/original/components/_links.scss
new file mode 100644
index 0000000..cf777aa
--- /dev/null
+++ b/skeleton/themes/original/components/_links.scss
@@ -0,0 +1,9 @@
+/* LINKS
+ * ------------------------------------------------ */
+a, a:visited {
+	color: $link-color;
+	text-decoration: $link-decoration;
+	outline: 0;
+}
+a:hover, a:focus, a:active { color: $link-hover; }
+p a, p a:visited { line-height: inherit; }
diff --git a/skeleton/themes/original/components/_lists.scss b/skeleton/themes/original/components/_lists.scss
new file mode 100644
index 0000000..b0a6b65
--- /dev/null
+++ b/skeleton/themes/original/components/_lists.scss
@@ -0,0 +1,29 @@
+/* LISTS
+ * ------------------------------------------------ */
+ul,
+ol { margin-bottom: relative(20px); }
+ul { list-style: none outside; }
+ol { list-style: decimal; }
+ol, ul.square,
+ul.circle, ul.disc { margin-left: relative(30px); }
+ul.square { list-style: square outside; }
+ul.circle { list-style: circle outside; }
+ul.disc { list-style: disc outside; }
+ul ul, ul ol,
+ol ol, ol ul {
+	margin: {
+		top: relative(4px);
+		right: 0;
+		bottom: relative(5px);
+		left: relative(30px);
+	}
+	font-size: 90%;
+}
+ul ul li, ul ol li,
+ol ol li, ol ul li { margin-bottom: relative(6px); }
+li {
+	line-height: relative(18px);
+	margin-bottom: relative(12px);
+}
+ul.large li { line-height: relative(21px); }
+li p { line-height: relative(21px); }
diff --git a/skeleton/themes/original/components/_typography.scss b/skeleton/themes/original/components/_typography.scss
new file mode 100644
index 0000000..14488ce
--- /dev/null
+++ b/skeleton/themes/original/components/_typography.scss
@@ -0,0 +1,84 @@
+/* TYPOGRAPHY
+ * ------------------------------------------------ */
+h1, h2, h3, h4, h5, h6 {
+	color: $heading-color;
+	font: {
+		family: $heading-family;
+		weight: normal;
+	}
+}
+h1, h2, h3,
+h4, h5, h6 {
+	a { font-weight: inherit; }
+}
+h1 {
+	@include font-size($font-size * 3.8333);
+	line-height: relative($font-size * 4.1666);
+	margin-bottom: relative($font-size * 1.1666);
+}
+h2 {
+	@include font-size($font-size * 2.9166);
+	line-height: relative($font-size * 3.333);
+	margin-bottom: relative($font-size * 0.833);
+}
+h3 {
+	@include font-size($font-size * 2.333);
+	line-height: relative($font-size * 2.833);
+	margin-bottom: relative($font-size * 0.666);
+}
+h4 {
+	@include font-size($font-size * 1.75);
+	line-height: relative($font-size * 2.5);
+	margin-bottom: relative($font-size * 0.333);
+}
+h5 {
+	@include font-size($font-size * 1.4166);
+	line-height: relative($font-size * 2);
+}
+h6 {
+	@include font-size($font-size * 1.1666);
+	line-height: relative($font-size * 1.75);
+}
+.subheader { color: #777; }
+p {
+	margin: 0 0 relative(20px) 0;
+	img { margin: 0; }
+	&.lead {
+		@include font-size($font-size * 1.75);
+		line-height: relative($font-size * 2.25);
+		color: #777;
+	}
+}
+em, i { font-style: italic; }
+strong, b { font-weight: bold; }
+u { text-decoration: underline; }
+small { font-size: 80%; }
+/*	Blockquotes  */
+blockquote, blockquote p {
+	@include font-size($font-size * 1.4166);
+	line-height: relative($font-size * 2);
+	color: #777;
+	font-style: italic;
+}
+blockquote {
+	margin: 0 0 relative(20px);
+	padding: relative(9px) relative(20px) 0 relative(19px);
+	border-left: 1px solid #ddd;
+}
+blockquote cite {
+	display: block;
+	@include font-size($font-size);
+	color: #555;
+	&:before { content: "\2014 \0020"; }
+	a, a:visited { color: #555; }
+}
+hr {
+	border: {
+		style: solid;
+		color: #ddd;
+		width: 1px 0 0;
+	};
+	clear: both;
+	margin: relative(10px) 0 relative(30px);
+	height: 0;
+}
diff --git a/skeleton/themes/original/components/_utils.scss b/skeleton/themes/original/components/_utils.scss
new file mode 100644
index 0000000..4a196a7
--- /dev/null
+++ b/skeleton/themes/original/components/_utils.scss
@@ -0,0 +1,13 @@
+/* IMAGES
+ * ------------------------------------------------ */
+img.scale-with-grid {
+	max-width: 100%;
+	height: auto;
+}
+
+/* MISC
+ * ------------------------------------------------ */
+.subtract-bottom { margin-bottom: relative(-20px) !important; }
+.remove-bottom { margin-bottom: 0 !important; }
+.half-bottom { margin-bottom: relative(10px) !important; }
+.add-bottom { margin-bottom: relative(20px) !important; }
diff --git a/skeleton/themes/sphenoid/marrow/_private.scss b/skeleton/themes/original/mixins/_private.scss
similarity index 100%
rename from skeleton/themes/sphenoid/marrow/_private.scss
rename to skeleton/themes/original/mixins/_private.scss
diff --git a/skeleton/themes/sphenoid/marrow/_public.scss b/skeleton/themes/original/mixins/_public.scss
similarity index 100%
rename from skeleton/themes/sphenoid/marrow/_public.scss
rename to skeleton/themes/original/mixins/_public.scss
diff --git a/skeleton/themes/sphenoid/_base.scss b/skeleton/themes/sphenoid/_base.scss
deleted file mode 100644
index 31ea50c..0000000
--- a/skeleton/themes/sphenoid/_base.scss
+++ /dev/null
@@ -1,317 +0,0 @@
-// The foundation of Skeleton which includes all base styles
-// that come bundled by default.
-// See skeleton/core/_config.scss for default variable values.
-// See _vars.scss for theme-scoped default values.
-
-/* RESET
- * ------------------------------------------------ */
-@include global-reset;
-
-/* BASIC STYLES
- * ------------------------------------------------ */
-html {
-	font-size: percentage(strip-units($base-font-size) / 16);
-	overflow-y: scroll;
-	-webkit-text-size-adjust: 100%;
-	-ms-text-size-adjust: 100%;
-	line-height: 1.2;
-}
-@if($use-global-border-box) {
-	*,
-	*:before,
-	*:after {
-		-webkit-box-sizing: border-box;
-		-moz-box-sizing: border-box;
-		box-sizing: border-box;
-	}
-}
-body {
-	background: $background-color;
-	font: {
-		family: $font-family;
-		weight: normal;
-		style: normal;
-	}
-	@include font-size(14px);
-	line-height: relative(26px);
-	color: $font-color;
-	-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
-	-webkit-text-size-adjust: 100%;
-}
-
-/* TYPOGRAPHY
- * ------------------------------------------------ */
-h1, h2, h3, h4, h5, h6 {
-	color: $heading-color;
-	font: {
-		family: $heading-family;
-		weight: normal;
-	}
-}
-h1, h2, h3,
-h4, h5, h6 {
-	a { font-weight: inherit; }
-}
-h1 {
-	@include font-size($font-size * 3.8333);
-	line-height: relative($font-size * 4.1666);
-	margin-bottom: relative($font-size * 1.1666);
-}
-h2 {
-	@include font-size($font-size * 2.9166);
-	line-height: relative($font-size * 3.333);
-	margin-bottom: relative($font-size * 0.833);
-}
-h3 {
-	@include font-size($font-size * 2.333);
-	line-height: relative($font-size * 2.833);
-	margin-bottom: relative($font-size * 0.666);
-}
-h4 {
-	@include font-size($font-size * 1.75);
-	line-height: relative($font-size * 2.5);
-	margin-bottom: relative($font-size * 0.333);
-}
-h5 {
-	@include font-size($font-size * 1.4166);
-	line-height: relative($font-size * 2);
-}
-h6 {
-	@include font-size($font-size * 1.1666);
-	line-height: relative($font-size * 1.75);
-}
-.subheader { color: #777; }
-p {
-	margin: 0 0 relative(20px) 0;
-	img { margin: 0; }
-	&.lead {
-		@include font-size($font-size * 1.75);
-		line-height: relative($font-size * 2.25);
-		color: #777;
-	}
-}
-em, i { font-style: italic; }
-strong, b { font-weight: bold; }
-u { text-decoration: underline; }
-small { font-size: 80%; }
-/*	Blockquotes  */
-blockquote, blockquote p {
-	@include font-size($font-size * 1.4166);
-	line-height: relative($font-size * 2);
-	color: #777;
-	font-style: italic;
-}
-blockquote {
-	margin: 0 0 relative(20px);
-	padding: relative(9px) relative(20px) 0 relative(19px);
-	border-left: 1px solid #ddd;
-}
-blockquote cite {
-	display: block;
-	@include font-size($font-size);
-	color: #555;
-	&:before { content: "\2014 \0020"; }
-	a, a:visited { color: #555; }
-}
-hr {
-	border: {
-		style: solid;
-		color: #ddd;
-		width: 1px 0 0;
-	};
-	clear: both;
-	margin: relative(10px) 0 relative(30px);
-	height: 0;
-}
-
-/* LINKS
- * ------------------------------------------------ */
-a, a:visited {
-	color: $link-color;
-	text-decoration: $link-decoration;
-	outline: 0;
-}
-a:hover, a:focus, a:active { color: $link-hover; }
-p a, p a:visited { line-height: inherit; }
-
-/* LISTS
- * ------------------------------------------------ */
-ul,
-ol { margin-bottom: relative(20px); }
-ul { list-style: none outside; }
-ol { list-style: decimal; }
-ol, ul.square,
-ul.circle, ul.disc { margin-left: relative(30px); }
-ul.square { list-style: square outside; }
-ul.circle { list-style: circle outside; }
-ul.disc { list-style: disc outside; }
-ul ul, ul ol,
-ol ol, ol ul {
-	margin: {
-		top: relative(4px);
-		right: 0;
-		bottom: relative(5px);
-		left: relative(30px);
-	}
-	font-size: 90%;
-}
-ul ul li, ul ol li,
-ol ol li, ol ul li { margin-bottom: relative(6px); }
-li {
-	line-height: relative(18px);
-	margin-bottom: relative(12px);
-}
-ul.large li { line-height: relative(21px); }
-li p { line-height: relative(21px); }
-
-/* IMAGES
- * ------------------------------------------------ */
-img.scale-with-grid {
-	max-width: 100%;
-	height: auto;
-}
-
-/* BUTTONS
- * ------------------------------------------------ */
-.button,
-button,
-input[type="submit"],
-input[type="reset"],
-input[type="button"] {
-	border: 1px solid #aaa;
-	border: {
-		top: 1px solid #ccc;
-		left: 1px solid #ccc;
-	};
-	@include border-radius(3px);
-	color: #444;
-	display: inline-block;
-	font: {
-		weight: bold;
-		family: $form-font;
-	};
-	@include font-size($font-size - 1);
-	text-decoration: none;
-	cursor: pointer;
-	line-height: normal;
-	padding: relative(8px) relative(10px);
-	background: #eeeeee -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0.2)), color-stop(100%, rgba(0, 0, 0, 0.2)));
-	background: #eeeeee -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
-	background: #eeeeee -moz-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
-	background: #eeeeee -o-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
-	background: #eeeeee linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
-	text-shadow: 0 1px rgba(255, 255, 255, 0.75);
-	&:hover {
-		color: #222;
-		border: 1px solid #888;
-		border: {
-			top: 1px solid #aaa;
-			left: 1px solid #aaa;
-		};
-		background: #dddddd -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0.3)), color-stop(100%, rgba(0, 0, 0, 0.3)));
-		background: #dddddd -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
-		background: #dddddd -moz-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
-		background: #dddddd -o-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
-		background: #dddddd linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
-	}
-	&:active {
-		border: 1px solid #666;
-		background: #cccccc -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0.35)), color-stop(100%, rgba(10, 10, 10, 0.4)));
-		background: #cccccc -webkit-linear-gradient(top, rgba(255, 255, 255, 0.35) 0%, rgba(10, 10, 10, 0.4) 100%);
-		background: #cccccc -moz-linear-gradient(top, rgba(255, 255, 255, 0.35) 0%, rgba(10, 10, 10, 0.4) 100%);
-		background: #cccccc -o-linear-gradient(top, rgba(255, 255, 255, 0.35) 0%, rgba(10, 10, 10, 0.4) 100%);
-		background: #cccccc linear-gradient(top, rgba(255, 255, 255, 0.35) 0%, rgba(10, 10, 10, 0.4) 100%);
-	}
-	&.full-width {
-		width: 100%;
-		padding-left: 0 !important;
-		padding-right: 0 !important;
-		text-align: center;
-	}
-	&.smaller {
-		@include font-size($font-size - 2);
-		padding: relative(4px) relative(5px);
-	}
-	&.larger {
-		@include font-size($font-size + 2);
-		padding: relative(10px) relative(18px);
-	}
-}
-
-/* Fix for odd Mozilla border & padding issues */
-button,
-input {
-	&::-moz-focus-inner {
-		border: 0;
-		padding: 0;
-	}
-}
-
-/* FORMS
- * ------------------------------------------------ */
-form { margin-bottom: relative(20px); }
-fieldset { margin-bottom: relative(20px); }
-input[type="text"],
-input[type="password"],
-input[type="color"],
-input[type="email"],
-input[type="range"],
-input[type="search"],
-input[type="url"],
-input[type="tel"],
-input[type="date"],
-input[type="datetime"],
-input[type="datetime-local"],
-input[type="month"],
-input[type="week"],
-input[type="time"],
-input[type="number"],
-textarea,
-select {
-	background: #fff;
-	border: 1px solid #ccc;
-	padding: relative(6px) relative(4px);
-	outline: none;
-	@include border-radius(2px);
-	font-family: $form-font;
-	@include font-size($font-size + 1);
-	color: #777;
-	margin: 0 0 relative(20px);
-	width: relative(210px);
-	max-width: 100%;
-	display: block;
-	&:hover,
-	&:focus {
-		border: 1px solid #aaa;
-		color: #444;
-		@include box-shadow(0 0 3px rgba(0,0,0,0.2));
-	}
-	&:active {
-		border: 1px solid darken(#aaa, 10%);
-		@include box-shadow(0 0 3px rgba(0,0,0,0.3));
-	}
-}
-select {
-	padding: 0;
-	width: relative(220px);
-}
-textarea { min-height: relative(60px); }
-label,
-legend {
-	span {
-		font-weight: normal;
-		@include font-size($font-size + 1);
-		color: #444;
-	}
-	display: block;
-	font-weight: bold;
-	@include font-size($font-size + 1);
-}
-input[type="checkbox"] { display: inline; }
-
-/* MISC
- * ------------------------------------------------ */
-.subtract-bottom { margin-bottom: relative(-20px) !important; }
-.remove-bottom { margin-bottom: 0 !important; }
-.half-bottom { margin-bottom: relative(10px) !important; }
-.add-bottom { margin-bottom: relative(20px) !important; }
diff --git a/skeleton/themes/wing/_base.scss b/skeleton/themes/wing/_base.scss
deleted file mode 100644
index be18fca..0000000
--- a/skeleton/themes/wing/_base.scss
+++ /dev/null
@@ -1,339 +0,0 @@
-// The foundation of Skeleton which includes all base styles
-// that come bundled by default.
-// See skeleton/core/_config.scss for default variable values.
-// See _vars.scss for theme-scoped default values.
-
-/* Normalize
- * ------------------------------------------------ */
- @include normalize();
-
-/* BASIC STYLES
- * ------------------------------------------------ */
-html {
-    font-size: percentage(strip-units($base-font-size) / 16);
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-}
-@if($use-global-border-box) {
-	*,
-	*:before,
-	*:after {
-		-webkit-box-sizing: border-box;
-		-moz-box-sizing: border-box;
-		box-sizing: border-box;
-	}
-}
-body {
-    letter-spacing: 0.01em;
-	background: $background-color;
-	font: {
-		family: $font-family;
-		weight: $font-weight;
-		style: normal;
-	}
-	@include font-size($font-size);
-	line-height: 1.6;
-	color: $font-color;
-}
-
-/* TYPOGRAPHY
- * ------------------------------------------------ */
-h1, h2, h3, h4, h5, h6 {
-	color: $heading-color;
-	font: {
-		family: $heading-family;
-		weight: $heading-weight;
-	}
-	margin-top: 0;
-	margin-bottom: relative(20px);
-}
-h1, h2, h3 { letter-spacing: -0.1rem; }
-h1 {
-	font-size: relative(40px);
-	line-height: 1.2;
-}
-h2 {
-	font-size: relative(36px);
-	line-height: 1.25;
-}
-h3 {
-	font-size: relative(30px);
-	line-height: 1.3;
-}
-h4 {
-	font-size: relative(24px);
-	line-height: 1.35;
-	letter-spacing: -0.08rem;
-}
-h5 {
-	font-size: relative(18px);
-	line-height: 1.5;
-	letter-spacing: -0.05rem;
-}
-h6 {
-	font-size: relative(15px);
-	line-height: 1.6;
-	letter-spacing: 0;
-}
-
-/* Larger than phablet */
-@media (min-width: 550px) {
-  h1 { font-size: relative(50px); }
-  h2 { font-size: relative(42px); }
-  h3 { font-size: relative(36px); }
-  h4 { font-size: relative(30px); }
-  h5 { font-size: relative(24px); }
-  h6 { font-size: relative(15px); }
-}
-
-p { margin-top: 0; }
-
-/* LINKS
- * ------------------------------------------------ */
-a, a:visited {
-	color: $link-color;
-	text-decoration: $link-decoration;
-}
-a:hover, a:focus, a:active { color: $link-hover; }
-
-/* LISTS
- * ------------------------------------------------ */
-ul { list-style: circle inside; }
-ol { list-style: decimal inside; }
-ol, ul {
-	padding-left: 0;
-	margin-top: 0;
-}
-ul ul,
-ul ol,
-ol ol,
-ol ul {
-	margin: relative(15px) 0 relative(15px) relative(30px);
-	font-size: 90%;
-}
-li { margin-bottom: relative(10px); }
-
-/* CODE
- * ------------------------------------------------ */
-code {
-	padding: relative(2px) relative(5px);
-	margin: 0 relative(2px);
-	font-size: 90%;
-	white-space: nowrap;
-	background: #F1F1F1;
-	border: 1px solid #E1E1E1;
-	border-radius: 4px;
-}
-pre > code {
-	display: block;
-	padding: relative(10px) relative(15px);
-	white-space: pre;
-}
-
-/* TABLES
- * ------------------------------------------------ */
-th,
-td {
-	padding: 12px 15px;
-	text-align: left;
-	border-bottom: 1px solid #E1E1E1;
-	&:first-child { padding-left: 0; }
-	&:last-child { padding-right: 0; }
-}
-
-/* UTILITIES
- * ------------------------------------------------ */
-.u-full-width {
-	width: 100%;
-	box-sizing: border-box;
-}
-.u-max-full-width {
-	max-width: 100%;
-	box-sizing: border-box;
-}
-.u-pull-right { float: right; }
-.u-pull-left { float: left; }
-
-/* IMAGES
- * ------------------------------------------------ */
-img.scale-with-grid {
-	max-width: 100%;
-	height: auto;
-}
-
-/* BUTTONS
- * ------------------------------------------------ */
-.button,
-button,
-input[type="submit"],
-input[type="reset"],
-input[type="button"] {
-    overflow: hidden;
-	display: inline-block;
-    margin: relative(10px);
-    padding: relative(12px) relative(12px);
-    -webkit-user-select: none;
-    user-select: none;
-    -webkit-transition: all 60ms ease-in-out;
-    transition: all 60ms ease-in-out;
-	color: $button-color;
-	text-align: center;
-    font-family: inherit;
-    line-height: 1.3;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-	font-weight: $button-weight;
-	text-transform: if($button-font-uppercase, uppercase, none);
-	text-decoration: none;
-	white-space: nowrap;
-	background-color: $button-bg-color;
-	border-radius: 4px;
-	border: 0 none;
-	cursor: pointer;
-	&:hover {
-		-webkit-transition: all 60ms ease;
-        transition: all 60ms ease;
-        opacity: 0.85;
-	}
-    &:disabled {
-         opacity: 0.8;
-        cursor: not-allowed;
-    }
-    &:focus { outline: 0 none; }
-	&:active {
-        -webkit-transition: all 60ms ease;
-        transition: all 60ms ease;
-        -webkit-transform: scale(0.97);
-        transform: scale(0.97);
-        opacity: 0.75;
-    }
-    &.outline {
-        border: 3px solid $button-outline-border-color;
-        color: $button-color;
-        background: transparent;
-        transition: all 0.5s ease;
-		&:hover, &:active {
-			color: #000;
-			background: #fff;
-		}
-    }
-	&.outline-inverted {
-		border: 3px solid #000;
-		color: #000;
-		background: transparent;
-		transition: all 0.5s ease;
-		&:hover, &:active {
-			color: #fff;
-			background: #000;
-		}
-	}
-	&.clear {
-		background: transparent;
-		color: gray;
-	}
-}
-
-/* Fix for odd Mozilla border & padding issues */
-button,
-input {
-	&::-moz-focus-inner {
-		border: 0;
-		padding: 0;
-	}
-}
-
-/* FORMS
- * ------------------------------------------------ */
-input[type="email"],
-input[type="number"],
-input[type="search"],
-input[type="text"],
-input[type="tel"],
-input[type="url"],
-input[type="password"],
-textarea,
-select {
-	height: 38px;
-	padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
-	background-color: #fff;
-	border: 1px solid #D1D1D1;
-	border-radius: 4px;
-	box-shadow: none;
-	box-sizing: border-box;
-}
-/* Removes awkward default styles on some inputs for iOS */
-input[type="email"],
-input[type="number"],
-input[type="search"],
-input[type="text"],
-input[type="tel"],
-input[type="url"],
-input[type="password"],
-textarea {
-	-webkit-appearance: none;
-	-moz-appearance: none;
-	appearance: none;
-}
-textarea {
-	min-height: 65px;
-	padding-top: 6px;
-	padding-bottom: 6px;
-}
-input[type="email"]:focus,
-input[type="number"]:focus,
-input[type="search"]:focus,
-input[type="text"]:focus,
-input[type="tel"]:focus,
-input[type="url"]:focus,
-input[type="password"]:focus,
-textarea:focus,
-select:focus {
-	border: 1px solid #33C3F0;
-	outline: 0;
-}
-label,
-legend {
-	display: block;
-	margin-bottom: relative(5px);
-	font-weight: 600;
-}
-fieldset {
-	padding: 0;
-	border-width: 0;
-}
-input[type="checkbox"],
-input[type="radio"] { display: inline; }
-label > .label-body {
-	display: inline-block;
-	margin-left: relative(5px);
-	font-weight: normal;
-}
-
-/* SPACING
- * ------------------------------------------------ */
-button,
-.button { margin-bottom: relative(10px); }
-input,
-textarea,
-select,
-fieldset { margin-bottom: relative(15px); }
-pre,
-blockquote,
-dl,
-figure,
-table,
-p,
-ul,
-ol,
-form { margin-bottom: relative(25px); }
-
-/* MISC
- * ------------------------------------------------ */
-hr {
-  margin-top: relative(30px);
-  margin-bottom: relative(35px);
-  border-width: 0;
-  border-top: 1px solid #E1E1E1;
-}
diff --git a/skeleton/themes/wing/_grid.scss b/skeleton/themes/wing/_grid.scss
new file mode 100644
index 0000000..c926823
--- /dev/null
+++ b/skeleton/themes/wing/_grid.scss
@@ -0,0 +1,64 @@
+/* BASE GRID
+ * ------------------------------------------------ */
+.container {
+	position: relative;
+	width: $base-width;
+	max-width: $grid-max-width;
+	margin: 0 auto;
+	padding: 0 relative(20px);
+	box-sizing: border-box;
+}
+.column,
+.columns {
+	width: 100%;
+	float: left;
+	box-sizing: border-box;
+}
+.row {
+    margin-top: 2.0833%;
+    padding: 0 1.04165%;
+    &:after {
+        display: table;
+        clear: both;
+        content: '';
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .row { margin-top: 0; }
+    .row [class*='column'] {
+        width: 100%;
+        margin-top: 2.0833%;
+        margin-left: 0;
+    }
+}
+
+/* CLEARING
+ * ------------------------------------------------ */
+.container:after {
+	content: "\0020";
+	display: block;
+	height: 0;
+	clear: both;
+	visibility: hidden;
+}
+.clearfix, .row {
+	zoom: 1;
+	&:before, &:after {
+		content: "\0020";
+		display: block;
+		overflow: hidden;
+		visibility: hidden;
+		width: 0;
+		height: 0;
+	}
+	&:after { clear: both; }
+}
+.clear {
+	clear: both;
+	display: block;
+	overflow: hidden;
+	visibility: hidden;
+	width: 0;
+	height: 0;
+}
diff --git a/skeleton/themes/wing/_include_components.scss b/skeleton/themes/wing/_include_components.scss
new file mode 100644
index 0000000..2672833
--- /dev/null
+++ b/skeleton/themes/wing/_include_components.scss
@@ -0,0 +1,11 @@
+@import url(https://fonts.googleapis.com/css?family=Quicksand);
+@import url(https://fonts.googleapis.com/css?family=Open+Sans);
+
+@import "components/base";
+@import "components/typography";
+@import "components/buttons";
+@import "components/links";
+@import "components/lists";
+@import "components/forms";
+@import "components/misc";
+@import "components/utils";
diff --git a/skeleton/themes/wing/_skeleton.scss b/skeleton/themes/wing/_skeleton.scss
deleted file mode 100644
index db802a1..0000000
--- a/skeleton/themes/wing/_skeleton.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "../fresh/skeleton";
diff --git a/skeleton/themes/wing/_vars.scss b/skeleton/themes/wing/_vars.scss
index aee88f7..1d3d6a0 100644
--- a/skeleton/themes/wing/_vars.scss
+++ b/skeleton/themes/wing/_vars.scss
@@ -1,7 +1,9 @@
-$font-size: 1.5rem;
-$font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
-$heading-weight: 300;
-$heading-family: "Quicksand", "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+// Yep, taken right from bourbon - https://github.com/thoughtbot/bourbon/blob/master/dist/settings/_prefixer.scss
+$prefix-for-webkit:    true !default;
+$prefix-for-mozilla:   true !default;
+$prefix-for-microsoft: true !default;
+$prefix-for-opera:     true !default;
+$prefix-for-spec:      true !default;
 
 // Buttons
 $button-color: #fff;
@@ -9,3 +11,34 @@ $button-font-uppercase: true;
 $button-bg-color: #333030;
 $button-weight: 500;
 $button-outline-border-color: $button-color;
+
+// Default overrides for new theme
+$is-fluid: true; // Change to true to enable the fluid grid
+
+$link-color: #2a92ea; // default link color
+$link-hover: $link-color; // default link color on :hover
+$link-decoration: underline; // default link decoration
+
+$base-width: 80%;
+
+$font-size: 15px;  // default font size. Change here will adjust sizes across the board.
+$font-weight: 400; // sets the font weight
+$font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; // default fonts
+$font-color: #222;  // default font color
+
+$heading-family: "Quicksand", $font-family; // default heading (h1-h6) font
+$heading-color: $font-color; // default heading (h1-h6) color
+$heading-weight: 300; // sets the weight of the heading text
+
+$form-font: $font-family; // default form font
+
+$button-color: #fff;
+$button-weight: 600;
+$button-font-uppercase: true;
+$button-border-color: #bbb;
+
+// GRID CHANGES
+$grid-max-width: 960px;
+$base-col-count: 12;
+$base-col-width: 60px;
+$use-new-grid: true;
diff --git a/skeleton/themes/wing/components/_base.scss b/skeleton/themes/wing/components/_base.scss
new file mode 100644
index 0000000..a0b8905
--- /dev/null
+++ b/skeleton/themes/wing/components/_base.scss
@@ -0,0 +1,25 @@
+// The foundation of Skeleton which includes all base styles
+// that come bundled by default.
+// See skeleton/core/_config.scss for default variable values.
+// See _vars.scss for theme-scoped default values.
+
+/* BASIC STYLES
+ * ------------------------------------------------ */
+html {
+    font-size: percentage(strip-units($base-font-size) / 16);
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+body {
+    letter-spacing: 0.01em;
+	background: $background-color;
+	font: {
+		family: $font-family;
+		weight: $font-weight;
+		style: normal;
+	}
+	@include font-size($font-size);
+	line-height: 1.6;
+	color: $font-color;
+}
diff --git a/skeleton/themes/wing/components/_buttons.scss b/skeleton/themes/wing/components/_buttons.scss
new file mode 100644
index 0000000..aa13f4b
--- /dev/null
+++ b/skeleton/themes/wing/components/_buttons.scss
@@ -0,0 +1,82 @@
+/* BUTTONS
+ * ------------------------------------------------ */
+.button,
+.btn,
+button,
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+    overflow: hidden;
+	display: inline-block;
+    margin: relative(10px);
+    padding: relative(12px) relative(12px);
+    -webkit-user-select: none;
+    user-select: none;
+    -webkit-transition: all 60ms ease-in-out;
+    transition: all 60ms ease-in-out;
+	color: $button-color;
+	text-align: center;
+    font-family: inherit;
+    line-height: 1.3;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+	font-weight: $button-weight;
+	text-transform: if($button-font-uppercase, uppercase, none);
+	text-decoration: none;
+	white-space: nowrap;
+	background-color: $button-bg-color;
+	border-radius: 4px;
+	border: 0 none;
+	cursor: pointer;
+	&:hover {
+		-webkit-transition: all 60ms ease;
+        transition: all 60ms ease;
+        opacity: 0.85;
+	}
+    &:disabled {
+		opacity: 0.8;
+        cursor: not-allowed;
+    }
+    &:focus { outline: 0 none; }
+	&:active {
+        -webkit-transition: all 60ms ease;
+        transition: all 60ms ease;
+        -webkit-transform: scale(0.97);
+        transform: scale(0.97);
+        opacity: 0.75;
+    }
+    &.btn-outline {
+        border: 3px solid $button-outline-border-color;
+        color: $button-color;
+        background: transparent;
+        transition: all 0.5s ease;
+		&:hover, &:active {
+			color: #000;
+			background: #fff;
+		}
+    }
+	&.btn-outline-inverted {
+		border: 3px solid #000;
+		color: #000;
+		background: transparent;
+		transition: all 0.5s ease;
+		&:hover, &:active {
+			color: #fff;
+			background: #000;
+		}
+	}
+	&.btn-clear {
+		background: transparent;
+		color: gray;
+	}
+}
+
+/* Fix for odd Mozilla border & padding issues */
+button,
+input {
+	&::-moz-focus-inner {
+		border: 0;
+		padding: 0;
+	}
+}
diff --git a/skeleton/themes/wing/components/_forms.scss b/skeleton/themes/wing/components/_forms.scss
new file mode 100644
index 0000000..f4d830e
--- /dev/null
+++ b/skeleton/themes/wing/components/_forms.scss
@@ -0,0 +1,74 @@
+/* FORMS
+ * ------------------------------------------------ */
+ input[type="email"],
+input[type="number"],
+input[type="search"],
+input[type="text"],
+input[type="tel"],
+input[type="url"],
+input[type="password"],
+select,
+textarea {
+	width: 100%;
+	-webkit-transition: 0.5s;
+    transition: 0.5s;
+    outline: none;
+    font-family: $form-font;
+	border-radius: 4px;
+	border: 1px solid #ccc;
+	margin: 8px 0;
+	&:focus {
+		border: 1px solid #99b3ff;
+		border-radius: 4px;
+	}
+}
+input[type="email"],
+input[type="number"],
+input[type="search"],
+input[type="text"],
+input[type="tel"],
+input[type="url"],
+input[type="password"],
+select {
+    padding: 12px 20px;
+    display: inline-block;
+    box-sizing: border-box;
+}
+textarea,
+textarea[type=text] {
+	font-family: $form-font;
+    height: 100px;
+    padding: 14px 20px;
+    box-sizing: border-box;
+    resize: none;
+}
+/* Removes awkward default styles on some inputs for iOS */
+input[type="email"],
+input[type="number"],
+input[type="search"],
+input[type="text"],
+input[type="tel"],
+input[type="url"],
+input[type="password"],
+textarea {
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+}
+label,
+legend {
+	display: block;
+	margin-bottom: relative(5px);
+	font-weight: 600;
+}
+fieldset {
+	padding: 0;
+	border-width: 0;
+}
+input[type="checkbox"],
+input[type="radio"] { display: inline; }
+label > .label-body {
+	display: inline-block;
+	margin-left: relative(5px);
+	font-weight: normal;
+}
diff --git a/skeleton/themes/wing/components/_links.scss b/skeleton/themes/wing/components/_links.scss
new file mode 100644
index 0000000..e1d07b0
--- /dev/null
+++ b/skeleton/themes/wing/components/_links.scss
@@ -0,0 +1,7 @@
+/* LINKS
+ * ------------------------------------------------ */
+a, a:visited {
+	color: $link-color;
+	text-decoration: $link-decoration;
+}
+a:hover, a:focus, a:active { color: $link-hover; }
diff --git a/skeleton/themes/wing/components/_lists.scss b/skeleton/themes/wing/components/_lists.scss
new file mode 100644
index 0000000..a91bfd9
--- /dev/null
+++ b/skeleton/themes/wing/components/_lists.scss
@@ -0,0 +1,4 @@
+/* LISTS
+ * ------------------------------------------------ */
+ul { list-style: circle inside; }
+ol { list-style: decimal inside; }
diff --git a/skeleton/themes/wing/components/_misc.scss b/skeleton/themes/wing/components/_misc.scss
new file mode 100644
index 0000000..6f10da1
--- /dev/null
+++ b/skeleton/themes/wing/components/_misc.scss
@@ -0,0 +1,29 @@
+/* MISC
+ * ------------------------------------------------ */
+hr {
+	margin-top: relative(30px);
+	margin-bottom: relative(35px);
+	border-width: 0;
+	border-top: 1px solid #E1E1E1;
+}
+
+/* CODE
+ * ------------------------------------------------ */
+code {
+	padding: relative(2px) relative(5px);
+	margin: 0 relative(2px);
+	font-size: 90%;
+	white-space: nowrap;
+	background: #F1F1F1;
+	border: 1px solid #E1E1E1;
+	border-radius: 4px;
+}
+pre > code {
+	display: block;
+	padding: relative(10px) relative(15px);
+	white-space: pre-wrap;       /* css-3 */
+	white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
+	white-space: -pre-wrap;      /* Opera 4-6 */
+	white-space: -o-pre-wrap;    /* Opera 7 */
+	word-wrap: break-word;       /* Internet Explorer 5.5+ */
+}
diff --git a/skeleton/themes/wing/components/_typography.scss b/skeleton/themes/wing/components/_typography.scss
new file mode 100644
index 0000000..287d078
--- /dev/null
+++ b/skeleton/themes/wing/components/_typography.scss
@@ -0,0 +1,51 @@
+/* TYPOGRAPHY
+ * ------------------------------------------------ */
+h1, h2, h3, h4, h5, h6 {
+	color: $heading-color;
+	font: {
+		family: $heading-family;
+		weight: $heading-weight;
+	}
+	margin-top: 0;
+	margin-bottom: relative(20px);
+}
+h1, h2, h3 { letter-spacing: -0.1rem; }
+h1 {
+	font-size: relative(40px);
+	line-height: 1.2;
+}
+h2 {
+	font-size: relative(36px);
+	line-height: 1.25;
+}
+h3 {
+	font-size: relative(30px);
+	line-height: 1.3;
+}
+h4 {
+	font-size: relative(24px);
+	line-height: 1.35;
+	letter-spacing: -0.08rem;
+}
+h5 {
+	font-size: relative(18px);
+	line-height: 1.5;
+	letter-spacing: -0.05rem;
+}
+h6 {
+	font-size: relative(15px);
+	line-height: 1.6;
+	letter-spacing: 0;
+}
+
+/* Larger than phablet */
+@media (min-width: 550px) {
+    h1 { font-size: relative(50px); }
+    h2 { font-size: relative(42px); }
+    h3 { font-size: relative(36px); }
+    h4 { font-size: relative(30px); }
+    h5 { font-size: relative(24px); }
+    h6 { font-size: relative(15px); }
+}
+
+p { margin-top: 0; }
diff --git a/skeleton/themes/wing/components/_utils.scss b/skeleton/themes/wing/components/_utils.scss
new file mode 100644
index 0000000..f3ed8fe
--- /dev/null
+++ b/skeleton/themes/wing/components/_utils.scss
@@ -0,0 +1,29 @@
+/* IMAGES
+ * ------------------------------------------------ */
+img.scale-with-grid {
+	max-width: 100%;
+	height: auto;
+}
+
+/* UTILS
+ * ------------------------------------------------ */
+.pull-right { float: right; }
+.pull-left { float: left; }
+.text-center { text-align: center; }
+.full-screen {
+	width: 100%;
+	min-height: 100vh;
+}
+.vertical-align {
+	display: flex;
+	align-items: center;
+}
+.horizontal-align {
+	display: flex;
+	justify-content: center;
+}
+.center {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}