diff --git a/bin/www b/bin/www
index 9a999cc..bd98b65 100755
--- a/bin/www
+++ b/bin/www
@@ -4,7 +4,7 @@
  * Module dependencies.
  */
 
-var app = require('../server/index');
+var app = require('../server/app');
 var debug = require('debug')('src:server');
 var http = require('http');
 
diff --git a/front_end/public/stylesheets/styleguide.css b/front_end/public/stylesheets/styleguide.css
new file mode 100644
index 0000000..cf7ce26
--- /dev/null
+++ b/front_end/public/stylesheets/styleguide.css
@@ -0,0 +1,149 @@
+.heading, .header {
+  font-family: "Didact Gothic", sans-serif;
+  text-transform: uppercase;
+  color: #466446;
+}
+
+html {
+  text-align: center;
+  padding: 20px;
+}
+
+.color, .title, .body-text, .button, .link {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border-top: 1px #BABABA solid;
+  padding-top: 10px;
+  margin-top: -15px;
+  align-items: center;
+}
+
+.title--xlarge, .title--large, .title--medium, .title--small, .title--xsmall {
+  font-family: "Didact Gothic", sans-serif;
+  text-transform: uppercase;
+}
+
+.color {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+  border-top: 1px #BABABA solid;
+  padding-top: 10px;
+  margin-top: -15px;
+}
+.color__circle {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  text-align: center;
+}
+.gunmetal {
+  background-color: #3d4351;
+}
+
+.darkgreen {
+  background-color: #72a230;
+}
+
+.grey {
+  background-color: #272b34;
+}
+
+.green {
+  background-color: #8dc63f;
+}
+
+.lightgrey {
+  background-color: #6b6f78;
+}
+
+p.circle-text {
+  color: white;
+  font: 12px "Didact Gothic", sans-serif;
+  text-transform: uppercase;
+  padding: 2px;
+}
+
+.code-example {
+  background-color: #E8DEDE;
+  width: 100%;
+  border: 1px solid #BABABA;
+  color: #CB6F34;
+  font: 20px monospace;
+  padding: 5px 0px 5px 5px;
+  border-radius: 5px;
+}
+
+.code-example:hover {
+  background-color: #A08585;
+  color: white;
+}
+
+.body-text--normal {
+  color: #6B6F78;
+  font-family: "Prociono", serif;
+  letter-spacing: 1px;
+}
+
+.body-text--italic {
+  color: #6B6F78;
+  font-family: "Prociono", serif;
+  font-style: italic;
+  letter-spacing: 1px;
+}
+
+.button--success {
+  background-color: #8DC63F;
+  color: white;
+  width: 175px;
+  height: 32px;
+  border-radius: 5px;
+  text-decoration: none;
+  font-family: "Didact Gothic", sans-serif;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  text-align: center;
+  padding-top: 12px;
+}
+
+.button--success:hover {
+  background-color: #72A230;
+}
+
+.button--normal {
+  background-color: #3D4351;
+  color: white;
+  width: 175px;
+  height: 32px;
+  border-radius: 5px;
+  text-decoration: none;
+  font-family: "Didact Gothic", sans-serif;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  text-align: center;
+  padding-top: 12px;
+}
+
+.button--normal:hover {
+  background-color: #272B34;
+}
+
+.link--normal {
+  color: #6B6F78;
+  text-decoration: none;
+  font-family: "Didact Gothic", sans-serif;
+  text-transform: uppercase;
+}
+
+.link--normal:hover {
+  color: white;
+}
+
+.link--disabled {
+  color: #898C93;
+  text-decoration: none;
+  font-family: "Didact Gothic", sans-serif;
+  text-transform: uppercase;
+}
diff --git a/package.json b/package.json
index 40fe0d1..3fe0e9a 100644
--- a/package.json
+++ b/package.json
@@ -28,10 +28,10 @@
     "pug": "^2.0.0-beta6",
     "react": "^15.3.2",
     "react-dom": "^15.3.2",
-    "react-router": "^2.6.1"
+    "react-router": "^2.6.1",
+    "sass": "^0.5.0"
   },
   "devDependencies": {
-    "mocha": "^3.1.2",
     "babel-cli": "^6.11.4",
     "babel-core": "^6.13.2",
     "babel-preset-es2015": "^6.13.2",
diff --git a/routes/index.js b/routes/index.js
index 8bc2198..598ce09 100644
--- a/routes/index.js
+++ b/routes/index.js
@@ -6,4 +6,8 @@ router.get('/', (request, response, next) => {
   response.render('index', { title: 'Lizardboard' });
 });
 
+router.get('/styleguide', ( request, response, next ) => {
+  response.render('styleguide/styleguide', { title: 'Style Guide'});
+});
+
 module.exports = router;
diff --git a/server/index.js b/server/app.js
similarity index 100%
rename from server/index.js
rename to server/app.js
diff --git a/views/layout.pug b/views/layout.pug
index a586957..373bd42 100644
--- a/views/layout.pug
+++ b/views/layout.pug
@@ -7,4 +7,3 @@ html
   body
     block content
   script(src="/javascripts/index.js")
-
diff --git a/views/styleguide/body-text.pug b/views/styleguide/body-text.pug
new file mode 100644
index 0000000..4c98b8b
--- /dev/null
+++ b/views/styleguide/body-text.pug
@@ -0,0 +1,7 @@
+body-text
+  h2.heading Body Text
+  .body-text
+    p.body-text--normal Content text: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    .code-example p.body-text--normal
+    p.body-text--italic Quotation text: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    .code-example p.body-text--italic
diff --git a/views/styleguide/button.pug b/views/styleguide/button.pug
new file mode 100644
index 0000000..4307621
--- /dev/null
+++ b/views/styleguide/button.pug
@@ -0,0 +1,10 @@
+buttons
+  h2.heading Buttons
+  .button
+    a.button--success(href='#') Success button
+    br
+    .code-example a.button--success
+    br
+    a.button--normal(href='#') Normal Button
+    br
+    .code-example a.button--normal
diff --git a/views/styleguide/color.pug b/views/styleguide/color.pug
new file mode 100644
index 0000000..261b159
--- /dev/null
+++ b/views/styleguide/color.pug
@@ -0,0 +1,18 @@
+colors
+  h2.heading Colors
+  .color
+    .color__circle.gunmetal
+      p.circle-text Gunmetal
+      p.circle-text #3d4351
+    .color__circle.darkgreen
+      p.circle-text Dark Green
+      p.circle-text #72a230
+    .color__circle.grey
+      p.circle-text Dark Grey
+      p.circle-text #272b34
+    .color__circle.green
+      p.circle-text Green
+      p.circle-text #8dc63f
+    .color__circle.lightgrey
+      p.circle-text Grey
+      p.circle-text #6b6f78
diff --git a/views/styleguide/link.pug b/views/styleguide/link.pug
new file mode 100644
index 0000000..d8cb039
--- /dev/null
+++ b/views/styleguide/link.pug
@@ -0,0 +1,8 @@
+links
+  h2.heading Links
+  .link
+    a.link--normal(href='#') Normal Link
+    .code-example a.link--normal
+    br
+    a.link--disabled(href='#') Disabled Link
+    .code-example a.link--disabled
diff --git a/views/styleguide/styleguide.pug b/views/styleguide/styleguide.pug
new file mode 100644
index 0000000..85c6ce5
--- /dev/null
+++ b/views/styleguide/styleguide.pug
@@ -0,0 +1,13 @@
+html
+  head
+    title= title
+    link(href='https://fonts.googleapis.com/css?family=Didact+Gothic|Prociono' rel='stylesheet' type='text/css')
+    link(rel='stylesheet', href='/stylesheets/styleguide.css')
+  block content
+    h1.header=title
+
+    include color
+    include title
+    include body-text
+    include button
+    include link
diff --git a/views/styleguide/title.pug b/views/styleguide/title.pug
new file mode 100644
index 0000000..ca25fe5
--- /dev/null
+++ b/views/styleguide/title.pug
@@ -0,0 +1,13 @@
+titles
+  h2.heading Titles
+  .title
+    h1.title--xlarge Xtra Large Heading
+    .code-example h1.title--xlarge
+    h2.title--large Large Heading
+    .code-example h2.title--large
+    h3.title--medium Medium Heading
+    .code-example h3.title--medium
+    h4.title--small Small Heading
+    .code-example h4.title--small
+    h5.title--xsmall XSmall Heading
+    .code-example h5.title--xsmall
diff --git a/yarn.lock b/yarn.lock
index 53dcb99..ae75e7b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2384,6 +2384,10 @@ rimraf@~2.5.1, rimraf@~2.5.4, rimraf@2:
   dependencies:
     glob "^7.0.5"
 
+sass:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-0.5.0.tgz#9dee1183a0f400361f2c5d3453bf2e54705e03f9"
+
 semver-diff@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/semver-diff/-/semver-diff-2.1.0.tgz#4bbb8437c8d37e4b0cf1a68fd726ec6d645d6d36"