diff --git a/.ruby-gemset b/.ruby-gemset
deleted file mode 100644
index 4fc3312..0000000
--- a/.ruby-gemset
+++ /dev/null
@@ -1 +0,0 @@
-regexper
diff --git a/.ruby-version b/.ruby-version
deleted file mode 100644
index cd57a8b..0000000
--- a/.ruby-version
+++ /dev/null
@@ -1 +0,0 @@
-2.1.5
diff --git a/Gemfile b/Gemfile
deleted file mode 100644
index 4e0fa85..0000000
--- a/Gemfile
+++ /dev/null
@@ -1,3 +0,0 @@
-source 'https://rubygems.org'
-
-gem 'compass'
diff --git a/Gemfile.lock b/Gemfile.lock
deleted file mode 100644
index fcd9867..0000000
--- a/Gemfile.lock
+++ /dev/null
@@ -1,28 +0,0 @@
-GEM
-  remote: https://rubygems.org/
-  specs:
-    chunky_png (1.3.3)
-    compass (1.0.1)
-      chunky_png (~> 1.2)
-      compass-core (~> 1.0.1)
-      compass-import-once (~> 1.0.5)
-      rb-fsevent (>= 0.9.3)
-      rb-inotify (>= 0.9)
-      sass (>= 3.3.13, < 3.5)
-    compass-core (1.0.1)
-      multi_json (~> 1.0)
-      sass (>= 3.3.0, < 3.5)
-    compass-import-once (1.0.5)
-      sass (>= 3.2, < 3.5)
-    ffi (1.9.6)
-    multi_json (1.10.1)
-    rb-fsevent (0.9.4)
-    rb-inotify (0.9.5)
-      ffi (>= 0.5.0)
-    sass (3.4.8)
-
-PLATFORMS
-  ruby
-
-DEPENDENCIES
-  compass
diff --git a/README.md b/README.md
index ea67f75..8064f14 100644
--- a/README.md
+++ b/README.md
@@ -10,11 +10,10 @@ When sending pull requests, please keep them focused on a single issue. I would
 
 ### Working with the code
 
-Node and Ruby are required for working with this site. It is recommended to use rbenv or rvm to manage your Ruby installation, and configuration files are included to set the Ruby version and gemset.
+Node is required for working with this site.
 
-To start with, install the necessary dependencies for Node and Ruby:
+To start with, install the necessary dependencies:
 
-    $ bundle install
     $ npm install
 
 There are several gulp tasks available to build various parts of the site, but to get started you only need:
diff --git a/config.js b/config.js
index 4b46290..94660fd 100644
--- a/config.js
+++ b/config.js
@@ -17,13 +17,6 @@ module.exports = {
     js: ['./src/**/*.js', './src/**/*.peg'],
     spec: './spec/**/*_spec.js'
   },
-  compass: {
-    sass: './src/sass',
-    css: buildPath('css'),
-    javascript: buildPath('js'),
-    font: buildPath('font'),
-    sourcemap: true
-  },
   browserify: {
     debug: true,
     fullPaths: false,
diff --git a/gulpfile.js b/gulpfile.js
index fb91220..b29e5a6 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -80,11 +80,21 @@ gulp.task('markup', ['styles'], function() {
 });
 
 gulp.task('styles', function() {
-  var compass = require('gulp-compass');
+  var sourcemaps = require('gulp-sourcemaps'),
+      sass = require('gulp-sass'),
+      rename = require('gulp-rename');
 
   return gulp.src(config.globs.sass)
     .pipe(errorHandler())
-    .pipe(compass(config.compass));
+    .pipe(sourcemaps.init())
+    .pipe(sass({
+      includePaths: require('node-bourbon').includePaths
+    }))
+    .pipe(rename(function(path) {
+      path.dirname = '';
+    }))
+    .pipe(sourcemaps.write('.'))
+    .pipe(gulp.dest(config.buildPath('css')));
 });
 
 gulp.task('scripts', function() {
diff --git a/lib/data/svg_styles.js b/lib/data/svg_styles.js
index 94c45e6..1ccaebc 100644
--- a/lib/data/svg_styles.js
+++ b/lib/data/svg_styles.js
@@ -2,6 +2,6 @@ var fs = require('fs'),
     path = require('path'),
     config = require('../../config');
 
-module.exports = fs.readFileSync(path.join(config.compass.css, 'svg.css'), {
+module.exports = fs.readFileSync(config.buildPath('css/svg.css'), {
   encoding: 'utf-8'
-})
+});
diff --git a/package.json b/package.json
index 5a499ad..71ed2f6 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,6 @@
     "es6ify": "^1.5.1",
     "folder-toc": "^0.1.0",
     "gulp": "^3.8.10",
-    "gulp-compass": "^2.0.4",
     "gulp-connect": "^2.2.0",
     "gulp-docco": "0.0.4",
     "gulp-front-matter": "^1.3.0",
@@ -23,6 +22,8 @@
     "gulp-notify": "^2.0.1",
     "gulp-plumber": "^1.0.0",
     "gulp-rename": "^1.2.2",
+    "gulp-sass": "^2.1.0",
+    "gulp-sourcemaps": "^1.6.0",
     "gulp-tap": "^0.1.3",
     "handlebars-layouts": "^3.1.2",
     "jasmine-core": "^2.3.4",
@@ -32,6 +33,7 @@
     "karma-jasmine": "^0.3.1",
     "karma-notify-reporter": "^0.1.1",
     "lodash": "^3.10.1",
+    "node-bourbon": "^4.2.3",
     "snapsvg": "^0.4.0",
     "through": "^2.3.8"
   }
diff --git a/src/humans.txt b/src/humans.txt
index b490464..d7ad082 100644
--- a/src/humans.txt
+++ b/src/humans.txt
@@ -13,4 +13,4 @@
 
 # TECHNOLOGY COLOPHON
 
-    HTML5, CSS3, SVG, Compass, Open Iconic
+    HTML5, CSS3, SVG, Sass, Open Iconic
diff --git a/src/sass/_base.scss b/src/sass/_base.scss
index a152120..d02d60e 100644
--- a/src/sass/_base.scss
+++ b/src/sass/_base.scss
@@ -1,3 +1,5 @@
+@import 'bourbon';
+
 $green: #bada55;
 $dark-green: shade($green, 25%);
 $light-green: tint($green, 25%);
@@ -13,5 +15,36 @@ $white: #fff;
 $base-font-size: 16px;
 $base-line-height: 24px;
 
-$default-box-shadow-color: $black;
-$default-box-shadow-blur: 10px;
+@mixin box-shadow {
+  @include prefixer(box-shadow, 0 0 10px $black, webkit moz spec);
+}
+
+@mixin input-placeholder {
+  &:-moz-placeholder {
+    @content;
+  }
+
+  &::-moz-placeholder {
+    @content;
+  }
+
+  &:-ms-input-placeholder {
+    @content;
+  }
+
+  &::-webkit-input-placeholder {
+    @content;
+  }
+}
+
+@function rhythm($scale, $font-size: $base-font-size) {
+  @return ($scale * $base-line-height / $font-size) * 1em;
+}
+
+@mixin adjust-font-size-to($to-size, $lines: auto) {
+  font-size: ($to-size / $base-font-size) * 1em;
+  @if $lines == auto {
+    $lines: ceil($to-size / $base-font-size);
+  }
+  line-height: rhythm($lines, $to-size);
+}
diff --git a/src/sass/main.scss b/src/sass/main.scss
index c17b6f1..5b73929 100644
--- a/src/sass/main.scss
+++ b/src/sass/main.scss
@@ -1,21 +1,11 @@
 @import 'base';
 @import 'open-iconic';
-@import 'compass/reset';
-@import 'compass/typography/lists/inline-block-list';
-@import 'compass/typography/vertical_rhythm';
-@import 'compass/css3/box-shadow';
-@import 'compass/css3/border-radius';
-@import 'compass/css3/user-interface';
-@import 'compass/css3/animation';
-@import 'compass/css3/transform';
-@import 'compass/css3/images';
-@import 'compass/typography/links/unstyled-link';
-@import 'compass/utilities/general/clearfix';
-
-@include establish-baseline;
+@import 'reset';
 
 body {
   font-family: sans-serif;
+  font-size: $base-font-size;
+  line-height: $base-line-height;
   background: $gray;
   margin-bottom: rhythm(1);
 }
@@ -34,9 +24,13 @@ h1 {
 
 ul.inline-list {
   @include adjust-font-size-to(14px, 2/3);
-  @include inline-block-list;
+  @include clearfix;
 
   li {
+    list-style-type: none;
+    display: inline-block;
+    white-space: nowrap;
+
     &::after {
       content: '//';
       padding: 0 rhythm(1/4);
@@ -58,11 +52,9 @@ ul.inline-list {
 }
 
 #deprecation-notice {
-  @include background(linear-gradient(top, $green, $dark-green));
-  background-color: $green;
+  @include linear-gradient(top, $green, $dark-green);
   padding: rhythm(1);
   margin: rhythm(1);
-  @include border-radius(20px);
   @include box-shadow;
   @include clearfix;
 
@@ -76,8 +68,7 @@ ul.inline-list {
 }
 
 header {
-  @include background(linear-gradient(top, $green, $dark-green));
-  background-color: $green;
+  @include linear-gradient(top, $green, $dark-green);
   padding: rhythm(1);
   @include box-shadow;
   @include clearfix;
@@ -264,8 +255,7 @@ header {
       @include adjust-font-size-to($base-font-size);
       width: 100px;
       border: 0 none;
-      @include background(linear-gradient(top, $green, $dark-green));
-      background-color: $green;
+      @include linear-gradient(top, $green, $dark-green);
       float: left;
       cursor: pointer;
     }
@@ -304,17 +294,7 @@ header {
   margin: rhythm(1) auto;
 
   div {
-    background: $green;
-    @include background-image(linear-gradient(
-      -45deg,
-      $green 25%,
-      $light-green 25%,
-      $light-green 50%,
-      $green 50%,
-      $green 75%,
-      $light-green 75%,
-      $light-green 100%
-    ));
+    @include linear-gradient(-45deg, $green 25%, $light-green 25%, $light-green 50%, $green 50%, $green 75%, $light-green 75%, $light-green 100%);
     background-size: rhythm(2) rhythm(2);
     background-repeat: repeat-x;
     height: 100%;
diff --git a/src/sass/reset.scss b/src/sass/reset.scss
new file mode 100644
index 0000000..e29c0f5
--- /dev/null
+++ b/src/sass/reset.scss
@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}