diff --git a/awx/static/api/api.css b/awx/static/api/api.css
index 0a297f5b89..509d604f2f 100644
--- a/awx/static/api/api.css
+++ b/awx/static/api/api.css
@@ -11,25 +11,39 @@ body {
 body {
   font-family: 'Open Sans', sans-serif;
   font-weight: 400;
-  color: #171717;
-  background-color: #f6f6f6;
+  color: #161B1F;
+  background-color: #F6F6F6;
   padding-top: 50px;
   min-height: 100%;
   position: relative;
 }
+body a {
+  color: #1678C4;
+}
+body a:hover {
+  color: #4498DA;
+}
+body code {
+  color: #FF5850;
+  background-color: #FFF5F5;
+}
+body pre code {
+  color: inherit;
+  background-color: transparent;
+}
 
 body .navbar {
   background-color: #FFFFFF;
   border-color: #E8E8E8;
 }
 body .navbar .navbar-brand {
-  color: #707070;
+  color: #848992;
   padding: 0;
   font-size: 14px;
 }
 body .navbar .navbar-brand:focus,
 body .navbar .navbar-brand:hover {
-  color: #707070;
+  color: #848992;
 }
 body .navbar .navbar-brand img {
   display: inline-block;
@@ -45,7 +59,7 @@ body .navbar .navbar-brand > span {
 body .navbar .navbar-title {
   float: left;
   height: 50px;
-  color: #707070;
+  color: #848992;
   padding: 0;
   font-size: 14px;
   display: none;
@@ -60,11 +74,19 @@ body.show-title .navbar .navbar-title {
 }
 body .navbar .navbar-nav > li > a {
   color: #848992;
+  display: flex;
+  justify-content: center;
 }
 body .navbar .navbar-nav > li > a:focus,
 body .navbar .navbar-nav > li > a:hover {
   color: #848992;
 }
+body .navbar .navbar-nav > li > a > span.glyphicon {
+  font-size: 20px;
+  padding-right: 5px;
+  padding-left: 5px;
+  color: #B7B7B7;
+}
 
 body .page-header {
   margin-top: 20px;
@@ -77,6 +99,17 @@ body .page-header .toggle-description span.glyphicon {
   font-size: 14px;
   vertical-align: top;
   padding: 2px;
+  color: #A9A9A9;
+}
+body .page-header .toggle-description:hover span.glyphicon {
+  color: #171717;
+}
+body .description .hide-description span.glyphicon {
+  color: #E1E1E1;
+  font-size: 20px;
+}
+body .description .hide-description:hover span.glyphicon {
+  color: #B7B7B7;
 }
 body ul.breadcrumb,
 body .description,
@@ -103,6 +136,18 @@ body .resource-description,
 body .response-info {
   margin-bottom: 0;
 }
+body pre,
+body .prettyprint .pln,
+body .request-info .prettyprint .lit {
+  color: #161B1F;
+}
+body .prettyprint .lit {
+  color: #1678C4;
+}
+body .prettyprint .str {
+  color: #FF5850;
+}
+
 body .well.tab-content {
   padding: 20px;
 }
@@ -118,6 +163,110 @@ body .form-group {
 body .form-actions button {
   margin-left: 5px;
 }
+body .form-horizontal .control-label {
+  text-transform: uppercase;
+  font-weight: normal;
+  color: #848992;
+}
+body textarea.form-control {
+  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+  font-size: 12px;
+  padding: 6px;
+}
+body .form-control,
+body .description pre {
+  border-color: #E1E1E1;
+  background-color: #F6F6F6;
+  color: #161B1F;
+}
+
+body .tooltip.bottom .tooltip-arrow {
+  border-bottom-color: #848992;
+}
+body .tooltip.top .tooltip-arrow {
+  border-top-color: #848992;
+}
+body .tooltip.left .tooltip-arrow {
+  border-left-color: #848992;
+}
+body .tooltip.right .tooltip-arrow {
+  border-right-color: #848992;
+}
+body .tooltip.in {
+  opacity: 1;
+}
+body .tooltip-inner {
+  background-color: #848992;
+}
+
+body .btn {
+  transition: background-color 0.2s;
+}
+.btn-primary {
+  background-color: #FFFFFF;
+  color: #848992;
+  border: 1px solid #E8E8E8;
+}
+.btn-primary:hover,
+.btn-primary.focus,
+.btn-primary:focus,
+.btn-primary.active,
+.btn-primary:active,
+.btn-primary.active.focus,
+.btn-primary.active:focus,
+.btn-primary.active:hover,
+.btn-primary:active.focus,
+.btn-primary:active:focus,
+.btn-primary:active:hover,
+.open>.dropdown-toggle.btn-primary.focus,
+.open>.dropdown-toggle.btn-primary:focus,
+.open>.dropdown-toggle.btn-primary:hover,
+.open>.dropdown-toggle.btn-primary {
+  background-color: #FAFAFA;
+  color: #848992;
+  border: 1px solid #E8E8E8;
+}
+
+body .tab-content .btn-primary {
+  background-color: #3CB878;
+  color: #FFFFFF;
+  border: 1px solid #3CB878;
+}
+body .tab-content .btn-primary:hover,
+body .tab-content .btn-primary.focus,
+body .tab-content .btn-primary:focus,
+body .tab-content .btn-primary.active,
+body .tab-content .btn-primary:active,
+body .tab-content .btn-primary.active.focus,
+body .tab-content .btn-primary.active:focus,
+body .tab-content .btn-primary.active:hover,
+body .tab-content .btn-primary:active.focus,
+body .tab-content .btn-primary:active:focus,
+body .tab-content .btn-primary:active:hover {
+  background-color: #60D66F;
+  color: #FFFFFF;
+  border: 1px solid #60D66F;
+}
+
+.btn-danger {
+  background-color: #FF5850;
+  border-color: #FF5850;
+}
+.btn-danger:hover,
+.btn-danger:hover,
+.btn-danger.focus,
+.btn-danger:focus,
+.btn-danger.active,
+.btn-danger:active,
+.btn-danger.active.focus,
+.btn-danger.active:focus,
+.btn-danger.active:hover,
+.btn-danger:active.focus,
+.btn-danger:active:focus,
+.btn-danger:active:hover {
+  background-color: #FF1105;
+  border-color: #FF1105;
+}
 
 body .wrapper {
   min-height: 100%;
@@ -170,20 +319,28 @@ body #footer .footer-copyright a {
     display: none;
 }
   body .navbar .navbar-toggle {
-    background-color: #337ab7;
-    border-color: #2e6da4;
+    background-color: #FFFFFF;
+    border-color: #E8E8E8;
   }
   body .navbar .navbar-toggle:active,
   body .navbar .navbar-toggle:hover {
-    background-color: #286090;
-    border-color: #204d74;
+    background-color: #FAFAFA;
+    border-color: #E8E8E8;
   }
   body .navbar .navbar-toggle .icon-bar {
-    background-color: #fff;
+    background-color: #B7B7B7;
   }
   body .navbar .tooltip {
     visibility: hidden;
   }
+  body .navbar .navbar-nav > li > a {
+    display: block;
+    padding-top: 8px;
+    padding-bottom: 12px;
+  }
+  body .navbar .navbar-nav > li > a > span.glyphicon {
+    top: 4px;
+  }
   body .page-header h1 {
     font-size: 24px;
   }
diff --git a/awx/static/api/api.js b/awx/static/api/api.js
index bce915a247..177770fb8f 100644
--- a/awx/static/api/api.js
+++ b/awx/static/api/api.js
@@ -6,6 +6,10 @@
 
 $(function() {
 
+  // Add syntax highlighting to examples in description.
+  $('.description pre').addClass('prettyprint');
+  prettyPrint();
+
   // Make links from relative URLs to resources.
   $('span.str').each(function() {
     var s = $(this).html();
diff --git a/awx/templates/rest_framework/api.html b/awx/templates/rest_framework/api.html
index bdd3123dac..7ae3c811f8 100644
--- a/awx/templates/rest_framework/api.html
+++ b/awx/templates/rest_framework/api.html
@@ -17,7 +17,7 @@
   <div class="navbar navbar-fixed-top">
     <div class="container">
       <div class="navbar-header">
-        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
+        <button type="button btn btn-primary" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
           <span class="sr-only">Toggle navigation</span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
@@ -61,7 +61,7 @@
   </div>
 </div>
 <div class="hidden">
-  <a class="hide-description pull-right js-tooltip" href="#" title="Hide Description"><span class="glyphicon glyphicon-remove"></span></a>
+  <a class="hide-description pull-right js-tooltip" href="#" title="Hide Description"><span class="glyphicon glyphicon-remove-sign"></span></a>
   <a class="toggle-description js-tooltip" href="#" title="Show/Hide Description"><span class="glyphicon glyphicon-question-sign"></span></a>
 </div>
 {{ block.super }}