diff --git a/_sass/_highlights.scss b/_sass/_highlights.scss
index 1cfd11a036d7..1c2b5e358748 100644
--- a/_sass/_highlights.scss
+++ b/_sass/_highlights.scss
@@ -1,12 +1,12 @@
 pre, code {
   font-family: $code-font;
-  font-size: 85%;
+  font-size: 95%;
 }
 
 code.highlighter-rouge {
   color: $oc-indigo-9;
   background-color: $oc-gray-1;
-  padding: .25em .5em;
+  padding: .1em .2em;
   border-radius: 3px;
 }
 
@@ -14,7 +14,7 @@ pre.highlight {
   padding: .45em .45em .45em .625em;
   border: 1px solid $oc-gray-3;
   border-radius: 3px;
-  margin: 1.25em 0;
+  margin: 1em 0;
   overflow: scroll;
 }
 
diff --git a/_sass/_reset.scss b/_sass/_reset.scss
index 120eebf95c9d..b1f91777fa74 100644
--- a/_sass/_reset.scss
+++ b/_sass/_reset.scss
@@ -31,7 +31,7 @@ footer, header, hgroup, menu, nav, section {
 body {
 	line-height: 1;
 }
-ol, ul {
+ol, ul, dl {
 	list-style: none;
 }
 blockquote, q {
diff --git a/_sass/_variables.scss b/_sass/_variables.scss
index ce83fe77b8bd..64da7ecf4a36 100644
--- a/_sass/_variables.scss
+++ b/_sass/_variables.scss
@@ -19,8 +19,56 @@ $helvetica: Helvetica, Arial, sans-serif;
 $helveticaNeue: "Helvetica Neue", Helvetica, Arial, sans-serif;
 $georgia: Georgia, serif;
 
+// Fonts
+$base-font: 'Spoqa Han Sans', 'Source Sans Pro', 'Apple SD Gothic Neo', 'Nanum Barun Gothic', 'Nanum Gothic', 'Verdana', 'Arial', 'Dotum', sans-serif;
 $code-font: 'Menlo', 'Courier New', 'Monaco', 'Spoqa Han Sans', monospace;
 
+// Font sizes
+$base-font-size: 18px;
+$small-font-size: 14px;
+
+// Colors
+$base-color: $oc-gray-8;
+$base-lighten-color: $oc-gray-6;
+
+$text-color: $base-color;
+$link-color: $oc-blue-8;
+$divider-color: $oc-gray-1;
+
+$table-border-color: $oc-gray-2;
+$table-background-color: $oc-gray-1;
+
+$blockquote-color: $base-lighten-color;
+$blockquote-border-color: $oc-gray-3;
+
+$footnote-link-border-color: $oc-gray-1;
+$footnote-link-background-over-color: $oc-gray-1;
+
+$selection-color: $oc-black;
+$selection-background-color: $oc-gray-1;
+
+
+// List
+$li-bottom-space: 0.4em;
+$li-bullets-width: 1.7em;
+$li-line-height: 1.55;
+
+$ul-bullets-font: inherit;
+$ul-bullets-font-size: 1.4em;
+$ul-bullets-font-line-height: 1.2;
+$ul-bullets-right-space: .5em;
+
+$ol-bullets-font: inherit;
+$ol-bullets-font-size: 1em;
+$ol-bullets-font-line-height: inherit;
+$ol-bullets-right-space: .5em;
+
+$li-child-size-ratio: 0.95;
+
+$dt-width: 180px;
+$dt-dd-space: 20px;
+$dd-position: $dt-width+$dt-dd-space;
+
 // Mobile breakpoints
 @mixin mobile {
   @media screen and (max-width: 640px) {
diff --git a/style.scss b/style.scss
index 9a4b99b6acba..03eb0b53b85f 100644
--- a/style.scss
+++ b/style.scss
@@ -15,13 +15,13 @@
 /**************/
 
 html {
-  font-size: 100%;
+  font-size: $base-font-size;
 }
 
 body {
-	background: $white;
-  font: 18px/1.4 $helvetica;
-  color: $darkGray;
+  font-family: $base-font;
+  color: $base-color;
+  line-height: 1.6;
 }
 
 .container {
@@ -32,10 +32,6 @@ body {
 }
 
 h1, h2, h3, h4, h5, h6 {
-  font-family: $helveticaNeue;
-  color: $darkerGray;
-  font-weight: bold;
-
   line-height: 1.7;
   margin: 1em 0 15px;
   padding: 0;
@@ -45,6 +41,10 @@ h1, h2, h3, h4, h5, h6 {
   }
 }
 
+h1, h2, h3, h5 {
+  font-weight: bold;
+}
+
 h1 {
   font-size: 30px;
   a {
@@ -61,54 +61,205 @@ h3 {
 }
 
 h4 {
-  font-size: 18px;
-  color: $gray;
+  font-size: 20px;
+  color: $base-lighten-color;
+}
+
+h6 {
+  color: $base-lighten-color;
 }
 
 p {
+  color: $text-color;
   margin: 15px 0;
 }
 
 a {
-  color: $blue;
+  color: $link-color;
   text-decoration: none;
 	cursor: pointer;
   &:hover, &:active {
-    color: $blue;
+    color: $link-color;
   }
 }
 
-ul, ol {
-  margin: 15px 0;
-  padding-left: 30px;
+em, i {
+  font-style: italic;
+}
+
+strong, b {
+  font-weight: bold;
+}
+
+sub {
+  vertical-align: sub;
+  font-size: smaller;
+}
+
+sup {
+  vertical-align: super;
+  font-size: smaller;
+}
+
+hr {
+  border: 0;
+  border-top: 1px solid $divider-color;
+  margin: 1.5em auto;
+}
+
+// Yeun's list style
+// https://gist.github.com/yeun/d824fc7b04b756508f4b0143535cec30
+
+ol, ul {
+  > li {
+    &:before {
+      position: absolute;
+      width: $li-bullets-width;
+      margin-left: -$li-bullets-width;
+      display: inline-block;
+      box-sizing: border-box;
+      text-align: right;
+    }
+  }
 }
 
 ul {
-  list-style-type: disc;
+  > li:before {
+    content: "\2022";
+    padding-right: $ul-bullets-right-space;
+    font-family: $ul-bullets-font;
+    font-size: $ul-bullets-font-size;
+    line-height: $ul-bullets-font-line-height;
+  }
 }
 
 ol {
-  list-style-type: decimal;
+  counter-reset: section;
+
+  > li:before {
+    counter-increment: section;
+    content: counter(section) ".";
+    padding-right: $ol-bullets-right-space;
+    font-family: $ol-bullets-font;
+    font-size: $ol-bullets-font-size;
+    line-height: $ol-bullets-font-line-height;
+  }
 }
 
-ol ul, ul ol, ul ul, ol ol {
-  margin: 0;
-}
+ol, ul {
+  > li {
+    margin: 0 auto $li-bottom-space $li-bullets-width;
+    line-height: $li-line-height;
 
-ul ul, ol ul {
-  list-style-type: circle;
+    > ol,
+    > ul {
+      margin-top: $li-bottom-space;
+    }
+  }
 }
 
-em, i {
-  font-style: italic;
+li {
+  > ol,
+  > ul {
+    > li {
+      font-size: ($li-child-size-ratio * 1em);
+      margin: 0 auto ($li-bottom-space * $li-child-size-ratio) ($li-bullets-width * $li-child-size-ratio);
+    }
+  }
 }
 
-strong, b {
+// Definition list
+dt {
+  float: left;
+  width: $dt-width;
+  overflow: auto;
+  clear: left;
+  text-align: right;
+  white-space: nowrap;
   font-weight: bold;
+  margin-bottom: $li-bottom-space;
+
+  @include mobile {
+    width: 120px;
+  }
 }
 
+dd {
+  margin-left: $dd-position;
+  margin-bottom: $li-bottom-space;
+
+  @include mobile {
+    margin-left: 140px;
+  }
+}
+
+// Table
+table {
+  margin-bottom: 1rem;
+  width: 100%;
+  border: 1px solid $table-border-color;
+  border-collapse: collapse;
+}
+
+td, th {
+  padding: .25rem .5rem;
+  border: 1px solid $table-border-color;
+}
+
+tbody tr:nth-child(odd) td,
+tbody tr:nth-child(odd) th {
+  background-color: $table-background-color;
+}
+
+// Blockquote
+blockquote {
+  font-weight: 300;
+  padding: 0 0 0 1.4rem;
+  margin: 0 2rem 1rem 0;
+  border-left: .2em solid $blockquote-border-color;
+
+  p {
+    color: $blockquote-color;
+  }
+
+  p:last-child {
+    margin-bottom: 0;
+  }
+}
+
+// Footnote
+a.footnote {
+  &,
+  .post p &,
+  .post ol &,
+  .post ul & {
+    margin: 0 3px;
+    padding: 0 2px;
+    font-size: $small-font-size;
+    text-align: center;
+    border: 1px solid $footnote-link-border-color;
+    border-radius: 2px;
+    -webkit-text-stroke: 0.25px;
+    -webkit-transition: 0.2s ease-out all;
+    text-decoration: none;
+
+    &:hover {
+      background: $footnote-link-background-over-color;
+    }
+  }
+}
+
+.footnotes {
+  border-top: 1px solid $divider-color;
+  font-size: $small-font-size;
+}
+
+// Image
 img {
+  display: block;
   max-width: 100%;
+  margin: 0 0 1em;
+  border-radius: 5px;
 }
 
 // Fixes images in popup boxes from Google Translate
@@ -118,17 +269,17 @@ img {
 
 .date {
   font-style: italic;
-  color: $gray;
+  color: $oc-gray-6;
 }
 
 // Specify the color of the selection
 ::-moz-selection {
-  color: $black;
-  background: $lightGray;
+  color: $selection-color;
+  background: $selection-background-color;
 }
 ::selection {
-  color: $black;
-  background: $lightGray;
+  color: $selection-color;
+  background: $selection-background-color;
 }
 
 // Nicolas Gallagher's micro clearfix hack
@@ -143,6 +294,20 @@ img {
     clear: both;
 }
 
+// Alignment
+.center {
+  text-align: center;
+
+  &-image {
+    margin: 0 auto;
+    display: block;
+  }
+}
+
+.right {
+  text-align: right
+}
+
 /*********************/
 /* LAYOUT / SECTIONS */
 /*********************/
@@ -253,14 +418,6 @@ nav {
 }
 
 .post {
-  blockquote {
-    margin: 1.8em .8em;
-    border-left: 2px solid $gray;
-    padding: 0.1em 1em;
-    color: $gray;
-    font-size: 22px;
-    font-style: italic;
-  }
 
   .comments {
     margin-top: 10px;