diff --git a/lib/server/generate.js b/lib/server/generate.js
index b804b77262..3bdf6155a3 100644
--- a/lib/server/generate.js
+++ b/lib/server/generate.js
@@ -13,6 +13,7 @@ function execute() {
   const readMetadata = require('./readMetadata.js');
   const renderToStaticMarkup = require('react-dom/server').renderToStaticMarkup;
   const path = require('path');
+  const color = require('color');
   const toSlug = require('../core/toSlug.js');
   const React = require('react');
   const mkdirp = require('mkdirp');
@@ -355,6 +356,8 @@ function execute() {
         const color = siteConfig.colors[key];
         cssContent = cssContent.replace(new RegExp('\\$' + key, 'g'), color);
       });
+      const codeColor = color(siteConfig.colors.primaryColor).alpha(0.07).string();
+      cssContent = cssContent.replace(new RegExp('\\$codeColor', 'g'), codeColor);
 
       mkdirp.sync(targetFile.replace(new RegExp('/[^/]*$'), ''));
       fs.writeFileSync(targetFile, cssContent);
diff --git a/lib/server/server.js b/lib/server/server.js
index c0619812fd..a9cba46bbe 100644
--- a/lib/server/server.js
+++ b/lib/server/server.js
@@ -17,6 +17,7 @@ function execute(port) {
   const fs = require('fs-extra');
   const os = require('os');
   const path = require('path');
+  const color = require('color');
   const toSlug = require('../core/toSlug.js');
   const mkdirp = require('mkdirp');
   const glob = require('glob');
@@ -479,6 +480,9 @@ function execute(port) {
       const color = siteConfig.colors[key];
       cssContent = cssContent.replace(new RegExp('\\$' + key, 'g'), color);
     });
+    const codeColor = color(siteConfig.colors.primaryColor).alpha(0.07).string();
+    cssContent = cssContent.replace(new RegExp('\\$codeColor', 'g'), codeColor);
+    
 
     res.send(cssContent);
   });
diff --git a/lib/static/css/main.css b/lib/static/css/main.css
index 36f28fa64a..51abc1dffc 100644
--- a/lib/static/css/main.css
+++ b/lib/static/css/main.css
@@ -719,19 +719,17 @@ input::placeholder {
   color: #e5e5e5;
 }
 
-code,
-a code,
-.mainContainer .wrapper a code,
-.mainContainer .wrapper a:focus code {
-  color: $primaryColor;
-  font-family: "SFMono-Regular",source-code-pro,Menlo,Monaco,Consolas,"Roboto Mono","Droid Sans Mono","Liberation Mono",Consolas,"Courier New",Courier,monospace;
-}
-
-a code {
-  text-decoration: underline;
-}
-a:hover code {
-  text-decoration: none;
+code {
+  padding: 2px 0;
+  background-color: $codeColor;
+  /* box-shadow acts as padding around inline code snippets
+   * while not adding any extra spacing between words. */
+  box-shadow: 2px 0 $codeColor, -2px 0 $codeColor;
+  color: inherit;
+  border-radius: .3em;
+  font-family: "SFMono-Regular",source-code-pro,Menlo,Monaco,Consolas,"Roboto Mono","Droid Sans Mono","Liberation Mono",Consolas,"Courier New",Courier,monospace;  
+  /* avoids scale issues on mobile */
+  word-break: break-word;
 }
 
 pre code {
diff --git a/package.json b/package.json
index 44516ee535..cba65f2267 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "babylon": "^6.17.4",
     "chalk": "^2.1.0",
     "classnames": "^2.2.5",
+    "color": "^2.0.1",
     "commander": "^2.11.0",
     "crowdin-cli": "^0.3.0",
     "escape-string-regexp": "^1.0.5",
diff --git a/yarn.lock b/yarn.lock
index 5368e31310..494823aa28 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -698,10 +698,30 @@ color-convert@^1.9.0:
   dependencies:
     color-name "^1.1.1"
 
-color-name@^1.1.1:
+color-convert@^1.9.1:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.1.tgz#c1261107aeb2f294ebffec9ed9ecad529a6097ed"
+  dependencies:
+    color-name "^1.1.1"
+
+color-name@^1.0.0, color-name@^1.1.1:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
 
+color-string@^1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.5.2.tgz#26e45814bc3c9a7cbd6751648a41434514a773a9"
+  dependencies:
+    color-name "^1.0.0"
+    simple-swizzle "^0.2.2"
+
+color@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/color/-/color-2.0.1.tgz#e4ed78a3c4603d0891eba5430b04b86314f4c839"
+  dependencies:
+    color-convert "^1.9.1"
+    color-string "^1.5.2"
+
 combined-stream@^1.0.5, combined-stream@~1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.5.tgz#938370a57b4a51dea2c77c15d5c5fdf895164009"
@@ -1077,6 +1097,10 @@ ipaddr.js@1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.5.2.tgz#d4b505bde9946987ccf0fc58d9010ff9607e3fa0"
 
+is-arrayish@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.1.tgz#c2dfc386abaa0c3e33c48db3fe87059e69065efd"
+
 is-finite@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-finite/-/is-finite-1.0.2.tgz#cc6677695602be550ef11e8b4aa6305342b6d0aa"
@@ -1492,6 +1516,12 @@ shelljs@^0.7.8:
     interpret "^1.0.0"
     rechoir "^0.6.2"
 
+simple-swizzle@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
+  dependencies:
+    is-arrayish "^0.3.1"
+
 sitemap@^1.13.0:
   version "1.13.0"
   resolved "https://registry.yarnpkg.com/sitemap/-/sitemap-1.13.0.tgz#569cbe2180202926a62a266cd3de09c9ceb43f83"