diff --git a/_src/_assets/styl/_kremalicious/code.styl b/_src/_assets/styl/_kremalicious/code.styl
deleted file mode 100644
index a0fe0d61..00000000
--- a/_src/_assets/styl/_kremalicious/code.styl
+++ /dev/null
@@ -1,77 +0,0 @@
-//
-// kremalicious3
-// --------------
-// Code
-//
-
-code,
-kbd,
-pre,
-samp
-    font-family: $font-family-monospace
-    font-size: $font-size-small
-    hyphens: none
-
-code,
-kbd
-    padding: 2px 4px
-
-code,
-samp
-    color: darken($code-color, 40%)
-    background-color: alpha($code-bg, 5%)
-    border-radius: $border-radius-base
-
-kbd
-    color: $kbd-color
-    background-color: $kbd-bg
-    border-radius: $border-radius-small
-    border: 1px solid $kbd-bg
-    box-shadow: inset 0 1px 0 rgba(#fff, .4)
-
-pre
-    display: block
-    padding: 0
-    margin-bottom: $spacer
-    line-height: $line-height
-    color: $code-color
-    background-color: $code-bg
-    margin-left: -($spacer)
-    margin-right: -($spacer)
-
-    // make 'em scrollable
-    overflow: scroll
-    -webkit-overflow-scrolling: touch
-    max-height: 300px
-
-    @media $screen-sm
-        max-height: 500px
-
-    @media $screen-md
-        border-radius: $border-radius-base
-
-    // Account for some code outputs that place code tags in pre tags
-    code
-        white-space: pre
-        overflow: auto
-        display: block
-        padding: $spacer
-        font-size: inherit
-        color: inherit
-        background-color: transparent
-        border-radius: 0
-
-        overflow-wrap: normal
-        word-wrap: normal
-        word-break: normal
-
-code.language-shell
-    padding-left: 1.5em
-    display: block
-
-    &:before
-        @extend .text-dimmed
-        content: "$"
-        display: inline-block
-        margin-left: -.5em
-        margin-right: .8em
diff --git a/gatsby-config.js b/gatsby-config.js
index 5434e2d8..ae6740a4 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -41,9 +41,10 @@ module.exports = {
               linkImagesToOriginal: false,
               sizeByPixelDensity: true,
               showCaptions: true,
-              backgroundColor: '#e7eef4'
+              backgroundColor: '#dfe8ef'
             }
           },
+          'gatsby-remark-prismjs',
           'gatsby-remark-smartypants',
           'gatsby-remark-autolink-headers'
         ]
diff --git a/package.json b/package.json
index 3cdc184c..1e580da1 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "gatsby-plugin-sitemap": "^2.0.0-beta.2",
     "gatsby-remark-autolink-headers": "^2.0.0-beta.3",
     "gatsby-remark-images": "^2.0.1-beta.7",
+    "gatsby-remark-prismjs": "^3.0.0-beta.3",
     "gatsby-remark-smartypants": "^2.0.0-beta.2",
     "gatsby-source-filesystem": "^2.0.1-beta.5",
     "gatsby-transformer-remark": "^2.1.1-beta.3",
@@ -43,6 +44,7 @@
     "node-sass": "^4.9.2",
     "normalize-css": "^2.3.1",
     "normalize-opentype.css": "^0.2.4",
+    "prismjs": "^1.15.0",
     "qrious": "^4.0.2",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
diff --git a/src/components/Layout.module.scss b/src/components/Layout.module.scss
index 07108ecd..9e207d99 100644
--- a/src/components/Layout.module.scss
+++ b/src/components/Layout.module.scss
@@ -1,6 +1,8 @@
 @import 'variables';
 
 .screen {
-    flex: 1;
+    max-width: 38rem;
+    margin-left: auto;
+    margin-right: auto;
     padding: $spacer;
 }
diff --git a/src/styles/_code.scss b/src/styles/_code.scss
new file mode 100644
index 00000000..51731ed1
--- /dev/null
+++ b/src/styles/_code.scss
@@ -0,0 +1,85 @@
+@import 'variables';
+
+code,
+kbd,
+pre,
+samp {
+    font-family: $font-family-monospace;
+    font-size: $font-size-small;
+}
+
+code,
+kbd {
+    padding: 2px 4px;
+}
+
+code,
+samp {
+    color: darken($code-color, 40%);
+    background-color: rgba($code-bg, .05);
+    border-radius: $border-radius;
+}
+
+kbd {
+    color: $kbd-color;
+    background-color: $kbd-bg;
+    border-radius: $border-radius;
+    border: 1px solid $kbd-bg;
+    box-shadow: inset 0 1px 0 rgba(#fff, .4);
+}
+
+pre {
+    display: block;
+    padding: $spacer / 2;
+    margin-bottom: $spacer;
+    line-height: $line-height;
+    color: $code-color;
+    background-color: $code-bg;
+    margin-left: -($spacer);
+    margin-right: -($spacer);
+
+    // make 'em scrollable
+    overflow: scroll;
+    -webkit-overflow-scrolling: touch;
+    max-height: 300px;
+
+    @media (min-width: $screen-sm) {
+        max-height: 500px;
+    }
+
+    @media (min-width: $screen-md) {
+        border-radius: $border-radius;
+    }
+
+    code {
+        white-space: pre;
+        overflow: auto;
+        display: block;
+        color: inherit;
+        background-color: transparent;
+        border-radius: 0;
+        overflow-wrap: normal;
+        word-wrap: normal;
+        word-break: normal;
+    }
+}
+
+pre > code.language-bash {
+    padding-left: 1.5em;
+    display: block;
+
+    &::before {
+        content: '$';
+        opacity: .5;
+        display: inline-block;
+        margin-left: -.5em;
+        margin-right: .8em;
+    }
+}
+
+:not(pre) > code[class*='language-'] {
+    background: rgba($code-bg, .1);
+    color: $text-color;
+}
+
+@import 'syntax';
diff --git a/src/styles/_syntax.scss b/src/styles/_syntax.scss
new file mode 100644
index 00000000..2148915f
--- /dev/null
+++ b/src/styles/_syntax.scss
@@ -0,0 +1,158 @@
+/*
+Name: Duotone Space
+Author: Simurai, adapted from DuoTone themes for Atom (http://simurai.com/projects/2016/01/01/duotone-themes)
+
+Conversion: Bram de Haan (http://atelierbram.github.io/Base2Tone-prism/output/prism/prism-base2tone-space-dark.css)
+Generated with Base16 Builder (https://github.com/base16-builder/base16-builder)
+*/
+
+code[class*='language-'],
+pre[class*='language-'] {
+    direction: ltr;
+    text-align: left;
+    tab-size: 4;
+    hyphens: none;
+    background: #24242e;
+    color: #767693;
+}
+
+pre[class*='language-']::-moz-selection,
+pre[class*='language-'] ::-moz-selection,
+code[class*='language-']::-moz-selection,
+code[class*='language-'] ::-moz-selection {
+    text-shadow: none;
+    background: #5151e6;
+}
+
+pre[class*='language-']::selection,
+pre[class*='language-'] ::selection,
+code[class*='language-']::selection,
+code[class*='language-'] ::selection {
+    text-shadow: none;
+    background: #5151e6;
+}
+
+/* Inline code */
+// :not(pre) > code[class*='language-'] {
+// }
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+    color: #5b5b76;
+}
+
+.token.punctuation {
+    color: #5b5b76;
+}
+
+.token.namespace {
+    opacity: .7;
+}
+
+.token.tag,
+.token.operator,
+.token.number {
+    color: #dd672c;
+}
+
+.token.property,
+.token.function {
+    color: #767693;
+}
+
+.token.tag-id,
+.token.selector,
+.token.atrule-id {
+    color: #ebebff;
+}
+
+code.language-javascript,
+.token.attr-name {
+    color: #aaaaca;
+}
+
+code.language-css,
+code.language-scss,
+.token.boolean,
+.token.string,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.language-scss .token.string,
+.style .token.string,
+.token.attr-value,
+.token.keyword,
+.token.control,
+.token.directive,
+.token.unit,
+.token.statement,
+.token.regex,
+.token.atrule {
+    color: #fe8c52;
+}
+
+.token.placeholder,
+.token.variable {
+    color: #fe8c52;
+}
+
+.token.deleted {
+    text-decoration: line-through;
+}
+
+.token.inserted {
+    border-bottom: 1px dotted #ebebff;
+    text-decoration: none;
+}
+
+.token.italic {
+    font-style: italic;
+}
+
+.token.important,
+.token.bold {
+    font-weight: bold;
+}
+
+.token.important {
+    color: #aaaaca;
+}
+
+.token.entity {
+    cursor: help;
+}
+
+pre > code.highlight {
+    outline: .4em solid #7676f4;
+    outline-offset: .4em;
+}
+
+/* overrides color-values for the Line Numbers plugin
+ * http://prismjs.com/plugins/line-numbers/
+ */
+.line-numbers .line-numbers-rows {
+    border-right-color: #262631;
+}
+
+.line-numbers-rows > span::before {
+    color: #393949;
+}
+
+/* overrides color-values for the Line Highlight plugin
+* http://prismjs.com/plugins/line-highlight/
+*/
+.line-highlight {
+    background: rgba(221, 103, 44, .2);
+    background: -webkit-linear-gradient(
+        left,
+        rgba(221, 103, 44, .2) 70%,
+        rgba(221, 103, 44, 0)
+    );
+    background: linear-gradient(
+        to right,
+        rgba(221, 103, 44, .2) 70%,
+        rgba(221, 103, 44, 0)
+    );
+}
diff --git a/src/styles/variables.scss b/src/styles/_variables.scss
similarity index 78%
rename from src/styles/variables.scss
rename to src/styles/_variables.scss
index dca558fa..b7c79d9c 100644
--- a/src/styles/variables.scss
+++ b/src/styles/_variables.scss
@@ -5,8 +5,8 @@ $easing: cubic-bezier(.75, 0, .08, 1);
 /////////////////////////////////////
 
 $brand-main: #015565;
-$brand-cyan: #43a699;
 $brand-main-light: #88bec8;
+$brand-cyan: #43a699;
 $brand-light: #e7eef4;
 
 $brand-grey: #6b7f88;
@@ -16,9 +16,11 @@ $brand-grey-dimmed: lighten($brand-grey, 50%);
 // Backgrounds
 /////////////////////////////////////
 
-$body-background-color: $brand-light;
+$body-background-color: #dfe8ef;
 $body-background-color--dark: darken($brand-grey, 30%);
 
+$page-background-color: $brand-light;
+
 // Text Colors
 /////////////////////////////////////
 
@@ -28,7 +30,7 @@ $text-color-light: $brand-grey-light;
 $text-color--dark: $brand-grey-light;
 $text-color-light--dark: $brand-grey;
 
-// Typography
+// Base Typography
 /////////////////////////////////////
 
 $font-size-root: 18px;
@@ -55,6 +57,9 @@ $font-color-base: $text-color;
 
 $font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace;
 
+// Headings
+/////////////////////////////////////
+
 $font-family-headings: 'brandon-grotesque', 'Avenir Next', 'Helvetica Neue',
     Helvetica, Arial, sans-serif;
 $font-weight-headings: 500;
@@ -63,7 +68,25 @@ $line-height-headings: 1.1;
 $color-headings: $brand-main;
 $color-headings--dark: $brand-main-light;
 
+// Code
+/////////////////////////////////////
+
+$code-bg: #343642;
+$code-color: $brand-light;
+$kbd-bg: $code-bg;
+$kbd-color: $code-color;
+
 // Components spacing
 /////////////////////////////////////
 
 $spacer: ($font-size-base * $line-height);
+
+$border-radius: 3px;
+
+// Responsive breakpoints
+/////////////////////////////////////
+
+$screen-xs: 30em;
+$screen-sm: 40.625em;
+$screen-md: 60em;
+$screen-lg: 87.5em;
diff --git a/src/styles/base.scss b/src/styles/base.scss
index b703a17a..d0599f5c 100644
--- a/src/styles/base.scss
+++ b/src/styles/base.scss
@@ -10,11 +10,11 @@ html,
 body {
     margin: 0;
     padding: 0;
+    background: $body-background-color;
 }
 
 html {
     font-size: $font-size-root;
-    background: $body-background-color;
 }
 
 body {
@@ -24,13 +24,18 @@ body {
     line-height: $line-height;
     color: $font-color-base;
     text-rendering: optimizeLegibility;
+    letter-spacing: -.01em;
     font-feature-settings: 'liga', 'kern';
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     min-height: 100vh;
-    background: $body-background-color;
     transition: background .6s $easing;
 
+    // handling long text, like URLs
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    word-break: break-word;
+
     &.dark {
         background-color: $body-background-color--dark;
         color: $text-color--dark;
@@ -43,27 +48,73 @@ ol {
     margin: 0 0 $spacer;
 }
 
+// Reset fonts for relevant elements
+/////////////////////////////////////
+
+input,
+button,
+select,
+textarea {
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+}
+
 // Headings
 /////////////////////////////////////
 
+h1,
+h2 {
+    margin-top: $spacer * 2;
+    margin-bottom: $spacer * 2;
+}
+
+h3,
+h4,
+h5,
+h6 {
+    margin-top: $spacer;
+    margin-bottom: $spacer;
+}
+
 h1 {
-    font-size: $font-size-h1;
+    font-size: $font-size-h2;
+
+    @media (min-width: $screen-xs) {
+        font-size: $font-size-h1;
+    }
 }
 
 h2 {
-    font-size: $font-size-h2;
+    font-size: $font-size-h3;
+
+    @media (min-width: $screen-xs) {
+        font-size: $font-size-h2;
+    }
 }
 
 h3 {
-    font-size: $font-size-h3;
+    font-size: $font-size-h4;
+
+    @media (min-width: $screen-xs) {
+        font-size: $font-size-h3;
+    }
 }
 
 h4 {
-    font-size: $font-size-h4;
+    font-size: $font-size-h5;
+
+    @media (min-width: $screen-xs) {
+        font-size: $font-size-h4;
+    }
 }
 
 h5 {
-    font-size: $font-size-h5;
+    font-size: $font-size-h6;
+
+    @media (min-width: $screen-xs) {
+        font-size: $font-size-h5;
+    }
 }
 
 h6 {
@@ -96,11 +147,24 @@ a {
     text-decoration: none;
     transition: .2s ease-out;
 
+    h1 &,
+    h2 &,
+    h3 & {
+        color: $color-headings;
+    }
+
     &:hover,
     &:focus {
+        outline: 0;
         color: lighten($brand-cyan, 10%);
         transform: translate3d(0, -.1rem, 0);
     }
+
+    &:active {
+        transition: none;
+        color: darken($brand-cyan, 30%);
+        box-shadow: inset 0 -1px 0 darken($brand-cyan, 30%);
+    }
 }
 
 // Media
@@ -114,8 +178,175 @@ svg {
     margin: 0;
 }
 
+// Lists
+/////////////////////////////////////
+
+ul {
+    li {
+        &::before {
+            content: ' \2015'; // horizontal bar: ― ―
+        }
+    }
+}
+
+ol {
+    counter-reset: ol-counter;
+
+    li {
+        &::before {
+            content: counter(ol-counter) '.';
+            counter-increment: ol-counter;
+        }
+    }
+
+    ul li::before {
+        display: none;
+    }
+}
+
+ul,
+ol {
+    margin-top: 0;
+    margin-bottom: $spacer;
+    padding-left: ($spacer * 1.5);
+    list-style: none;
+
+    li {
+        position: relative;
+
+        // stylelint-disable no-descending-specificity
+        &::before {
+            position: absolute;
+            left: -($spacer * 1.5);
+            top: -1px;
+            color: $text-color-light;
+            user-select: none;
+        }
+        // stylelint-enable no-descending-specificity
+    }
+
+    ul,
+    ol {
+        margin-bottom: 0;
+    }
+}
+
+// Inline typography
+/////////////////////////////////////
+
+b,
+strong,
+.bold {
+    font-weight: 700;
+    font-style: normal;
+}
+
+em,
+.italic {
+    font-style: italic;
+}
+
+abbr[title],
+dfn {
+    text-transform: none;
+    font-style: normal;
+    font-size: inherit;
+    border-bottom: 1px dashed $brand-grey-dimmed;
+    cursor: help;
+    font-feature-settings: inherit;
+}
+
+mark {
+    background: #fffaab;
+    color: $text-color;
+}
+
+hr {
+    border: 0;
+    border-bottom: 1px dashed #afc3cb;
+    padding-bottom: $spacer;
+    margin-bottom: $spacer * 2;
+
+    &::before {
+        bottom: -2px;
+        width: 100%;
+        border-bottom: 1px dashed #fff;
+    }
+}
+
+// Quotes
+/////////////////////////////////////
+
+q {
+    font-style: italic;
+}
+
+cite {
+    font-style: normal;
+    text-transform: uppercase;
+}
+
+blockquote,
+blockquote > p {
+    font-style: italic;
+}
+
+blockquote {
+    margin: 0 0 $spacer;
+    position: relative;
+    padding-left: 20px;
+
+    @media (min-width: $screen-xs) {
+        padding-left: 40px;
+    }
+
+    @media (min-width: $screen-lg) {
+        padding-left: 60px;
+    }
+
+    // quotation marks
+    &::before {
+        content: '“';
+        font-size: 300%;
+        color: lighten($text-color, 40%);
+        position: absolute;
+        left: -10px;
+        top: -20px;
+
+        @media (min-width: $screen-xs) {
+            left: 0;
+        }
+
+        @media (min-width: $screen-lg) {
+            top: -30px;
+        }
+    }
+
+    p:last-child {
+        margin-bottom: 0;
+    }
+}
+
+// Selection
+/////////////////////////////////////
+
+::-moz-selection {
+    background: #2e4f5c;
+    color: #fff;
+}
+
+::selection {
+    background: #2e4f5c;
+    color: #fff;
+}
+
 #___gatsby {
     display: flex;
     min-height: 100vh;
     flex-direction: column;
 }
+
+// More basic elements
+/////////////////////////////////////
+
+@import 'code';