diff --git a/x-pack/plugins/code/public/components/file_tree/__snapshots__/file_tree.test.tsx.snap b/x-pack/plugins/code/public/components/file_tree/__snapshots__/file_tree.test.tsx.snap
index 6884be1d85678..ddf540ee4b816 100644
--- a/x-pack/plugins/code/public/components/file_tree/__snapshots__/file_tree.test.tsx.snap
+++ b/x-pack/plugins/code/public/components/file_tree/__snapshots__/file_tree.test.tsx.snap
@@ -119,7 +119,7 @@ exports[`render correctly 1`] = `
                 />
               </svg>
               <span
-                className="sc-bdVaJa ePJeWw"
+                className="sc-bdVaJa gwdwEa"
               >
                 <div
                   className="euiText euiText--small eui-displayInlineBlock euiText--constrainedWidth"
@@ -178,7 +178,7 @@ exports[`render correctly 1`] = `
                 />
               </svg>
               <span
-                className="sc-bdVaJa ePJeWw"
+                className="sc-bdVaJa gwdwEa"
               >
                 <div
                   className="euiText euiText--small eui-displayInlineBlock euiText--constrainedWidth"
@@ -236,7 +236,7 @@ exports[`render correctly 1`] = `
                 />
               </svg>
               <span
-                className="sc-bdVaJa ePJeWw"
+                className="sc-bdVaJa gwdwEa"
               >
                 <div
                   className="euiText euiText--small eui-displayInlineBlock euiText--constrainedWidth"
@@ -297,7 +297,7 @@ exports[`render correctly 1`] = `
                     />
                   </svg>
                   <span
-                    className="sc-bdVaJa ePJeWw"
+                    className="sc-bdVaJa gwdwEa"
                   >
                     <div
                       className="euiText euiText--small eui-displayInlineBlock euiText--constrainedWidth"
@@ -341,12 +341,16 @@ exports[`render correctly 1`] = `
                     />
                   </svg>
                   <span
-                    className="sc-bdVaJa ePJeWw"
+                    className="sc-bdVaJa gwdwEa"
                   >
                     <div
                       className="euiText euiText--small eui-displayInlineBlock euiText--constrainedWidth"
                     >
-                      pom.xml
+                      <div
+                        className="euiTextColor euiTextColor--default"
+                      >
+                        pom.xml
+                      </div>
                     </div>
                   </span>
                 </div>
@@ -399,7 +403,7 @@ exports[`render correctly 1`] = `
                     />
                   </svg>
                   <span
-                    className="sc-bdVaJa ePJeWw"
+                    className="sc-bdVaJa gwdwEa"
                   >
                     <div
                       className="euiText euiText--small eui-displayInlineBlock euiText--constrainedWidth"
@@ -463,7 +467,7 @@ exports[`render correctly 1`] = `
                         />
                       </svg>
                       <span
-                        className="sc-bdVaJa ePJeWw"
+                        className="sc-bdVaJa gwdwEa"
                       >
                         <div
                           className="euiText euiText--small eui-displayInlineBlock euiText--constrainedWidth"
@@ -522,7 +526,7 @@ exports[`render correctly 1`] = `
                         />
                       </svg>
                       <span
-                        className="sc-bdVaJa ePJeWw"
+                        className="sc-bdVaJa gwdwEa"
                       >
                         <div
                           className="euiText euiText--small eui-displayInlineBlock euiText--constrainedWidth"
@@ -585,7 +589,7 @@ exports[`render correctly 1`] = `
                 />
               </svg>
               <span
-                className="sc-bdVaJa ePJeWw"
+                className="sc-bdVaJa gwdwEa"
               >
                 <div
                   className="euiText euiText--small eui-displayInlineBlock euiText--constrainedWidth"
@@ -644,7 +648,7 @@ exports[`render correctly 1`] = `
                 />
               </svg>
               <span
-                className="sc-bdVaJa ePJeWw"
+                className="sc-bdVaJa gwdwEa"
               >
                 <div
                   className="euiText euiText--small eui-displayInlineBlock euiText--constrainedWidth"
@@ -703,7 +707,7 @@ exports[`render correctly 1`] = `
                 />
               </svg>
               <span
-                className="sc-bdVaJa ePJeWw"
+                className="sc-bdVaJa gwdwEa"
               >
                 <div
                   className="euiText euiText--small eui-displayInlineBlock euiText--constrainedWidth"
@@ -762,7 +766,7 @@ exports[`render correctly 1`] = `
                 />
               </svg>
               <span
-                className="sc-bdVaJa ePJeWw"
+                className="sc-bdVaJa gwdwEa"
               >
                 <div
                   className="euiText euiText--small eui-displayInlineBlock euiText--constrainedWidth"
@@ -821,7 +825,7 @@ exports[`render correctly 1`] = `
                 />
               </svg>
               <span
-                className="sc-bdVaJa ePJeWw"
+                className="sc-bdVaJa gwdwEa"
               >
                 <div
                   className="euiText euiText--small eui-displayInlineBlock euiText--constrainedWidth"
@@ -880,7 +884,7 @@ exports[`render correctly 1`] = `
                 />
               </svg>
               <span
-                className="sc-bdVaJa ePJeWw"
+                className="sc-bdVaJa gwdwEa"
               >
                 <div
                   className="euiText euiText--small eui-displayInlineBlock euiText--constrainedWidth"
@@ -924,12 +928,16 @@ exports[`render correctly 1`] = `
                 />
               </svg>
               <span
-                className="sc-bdVaJa ePJeWw"
+                className="sc-bdVaJa gwdwEa"
               >
                 <div
                   className="euiText euiText--small eui-displayInlineBlock euiText--constrainedWidth"
                 >
-                  .gitattributes
+                  <div
+                    className="euiTextColor euiTextColor--default"
+                  >
+                    .gitattributes
+                  </div>
                 </div>
               </span>
             </div>
@@ -968,12 +976,16 @@ exports[`render correctly 1`] = `
                 />
               </svg>
               <span
-                className="sc-bdVaJa ePJeWw"
+                className="sc-bdVaJa gwdwEa"
               >
                 <div
                   className="euiText euiText--small eui-displayInlineBlock euiText--constrainedWidth"
                 >
-                  .gitignore
+                  <div
+                    className="euiTextColor euiTextColor--default"
+                  >
+                    .gitignore
+                  </div>
                 </div>
               </span>
             </div>
@@ -1012,12 +1024,16 @@ exports[`render correctly 1`] = `
                 />
               </svg>
               <span
-                className="sc-bdVaJa ePJeWw"
+                className="sc-bdVaJa gwdwEa"
               >
                 <div
                   className="euiText euiText--small eui-displayInlineBlock euiText--constrainedWidth"
                 >
-                  .travis.yml
+                  <div
+                    className="euiTextColor euiTextColor--default"
+                  >
+                    .travis.yml
+                  </div>
                 </div>
               </span>
             </div>
@@ -1056,12 +1072,16 @@ exports[`render correctly 1`] = `
                 />
               </svg>
               <span
-                className="sc-bdVaJa ePJeWw"
+                className="sc-bdVaJa gwdwEa"
               >
                 <div
                   className="euiText euiText--small eui-displayInlineBlock euiText--constrainedWidth"
                 >
-                  CONTRIBUTING.md
+                  <div
+                    className="euiTextColor euiTextColor--default"
+                  >
+                    CONTRIBUTING.md
+                  </div>
                 </div>
               </span>
             </div>
@@ -1100,12 +1120,16 @@ exports[`render correctly 1`] = `
                 />
               </svg>
               <span
-                className="sc-bdVaJa ePJeWw"
+                className="sc-bdVaJa gwdwEa"
               >
                 <div
                   className="euiText euiText--small eui-displayInlineBlock euiText--constrainedWidth"
                 >
-                  CONTRIBUTORS
+                  <div
+                    className="euiTextColor euiTextColor--default"
+                  >
+                    CONTRIBUTORS
+                  </div>
                 </div>
               </span>
             </div>
@@ -1144,12 +1168,16 @@ exports[`render correctly 1`] = `
                 />
               </svg>
               <span
-                className="sc-bdVaJa ePJeWw"
+                className="sc-bdVaJa gwdwEa"
               >
                 <div
                   className="euiText euiText--small eui-displayInlineBlock euiText--constrainedWidth"
                 >
-                  COPYING
+                  <div
+                    className="euiTextColor euiTextColor--default"
+                  >
+                    COPYING
+                  </div>
                 </div>
               </span>
             </div>
@@ -1188,12 +1216,16 @@ exports[`render correctly 1`] = `
                 />
               </svg>
               <span
-                className="sc-bdVaJa ePJeWw"
+                className="sc-bdVaJa gwdwEa"
               >
                 <div
                   className="euiText euiText--small eui-displayInlineBlock euiText--constrainedWidth"
                 >
-                  README.md
+                  <div
+                    className="euiTextColor euiTextColor--default"
+                  >
+                    README.md
+                  </div>
                 </div>
               </span>
             </div>
@@ -1232,12 +1264,16 @@ exports[`render correctly 1`] = `
                 />
               </svg>
               <span
-                className="sc-bdVaJa ePJeWw"
+                className="sc-bdVaJa gwdwEa"
               >
                 <div
                   className="euiText euiText--small eui-displayInlineBlock euiText--constrainedWidth"
                 >
-                  cycle_whitelist.txt
+                  <div
+                    className="euiTextColor euiTextColor--default"
+                  >
+                    cycle_whitelist.txt
+                  </div>
                 </div>
               </span>
             </div>
@@ -1276,12 +1312,16 @@ exports[`render correctly 1`] = `
                 />
               </svg>
               <span
-                className="sc-bdVaJa ePJeWw"
+                className="sc-bdVaJa gwdwEa"
               >
                 <div
                   className="euiText euiText--small eui-displayInlineBlock euiText--constrainedWidth"
                 >
-                  javadoc-stylesheet.css
+                  <div
+                    className="euiTextColor euiTextColor--default"
+                  >
+                    javadoc-stylesheet.css
+                  </div>
                 </div>
               </span>
             </div>
@@ -1320,12 +1360,16 @@ exports[`render correctly 1`] = `
                 />
               </svg>
               <span
-                className="sc-bdVaJa ePJeWw"
+                className="sc-bdVaJa gwdwEa"
               >
                 <div
                   className="euiText euiText--small eui-displayInlineBlock euiText--constrainedWidth"
                 >
-                  pom.xml
+                  <div
+                    className="euiTextColor euiTextColor--default"
+                  >
+                    pom.xml
+                  </div>
                 </div>
               </span>
             </div>
diff --git a/x-pack/plugins/code/public/components/file_tree/file_tree.tsx b/x-pack/plugins/code/public/components/file_tree/file_tree.tsx
index 4386269007700..7f05c7334b830 100644
--- a/x-pack/plugins/code/public/components/file_tree/file_tree.tsx
+++ b/x-pack/plugins/code/public/components/file_tree/file_tree.tsx
@@ -18,7 +18,6 @@ import { EuiSideNavItem, MainRouteParams, PathTypes } from '../../common/types';
 import { RootState } from '../../reducers';
 
 const DirectoryNode = styled.span`
-  color: ${theme.euiColorFullShade};
   margin-left: ${theme.euiSizeS};
   vertical-align: middle;
 `;
@@ -145,7 +144,7 @@ export class CodeFileTree extends React.Component<Props> {
             >
               <EuiIcon type="submodule" />
               <DirectoryNode>
-                <EuiText size="s" grow={false} className="eui-displayInlineBlock">
+                <EuiText size="s" grow={false} color="default" className="eui-displayInlineBlock">
                   {node.name}
                 </EuiText>
               </DirectoryNode>
@@ -165,7 +164,7 @@ export class CodeFileTree extends React.Component<Props> {
             >
               <EuiIcon type="symlink" />
               <DirectoryNode>
-                <EuiText size="s" grow={false} className="eui-displayInlineBlock">
+                <EuiText size="s" grow={false} color="default" className="eui-displayInlineBlock">
                   {node.name}
                 </EuiText>
               </DirectoryNode>
@@ -185,7 +184,7 @@ export class CodeFileTree extends React.Component<Props> {
             >
               <EuiIcon type="document" />
               <DirectoryNode>
-                <EuiText size="s" grow={false} className="eui-displayInlineBlock">
+                <EuiText size="s" grow={false} color="default" className="eui-displayInlineBlock">
                   {node.name}
                 </EuiText>
               </DirectoryNode>
diff --git a/x-pack/plugins/code/public/components/main/main.scss b/x-pack/plugins/code/public/components/main/main.scss
index 8bb3290a11e71..c58fea6e1e51f 100644
--- a/x-pack/plugins/code/public/components/main/main.scss
+++ b/x-pack/plugins/code/public/components/main/main.scss
@@ -26,6 +26,7 @@
 }
 
 .code-navigation__sidebar {
+  background-color: $euiColorLightestShade;
   width: 16rem;
   border-right: $euiBorderThin;
   display: flex;
@@ -259,3 +260,8 @@
     border-top: none;
   }
 }
+
+
+.codeIcon__language {
+  fill: $euiColorDarkestShade;
+}
diff --git a/x-pack/plugins/code/public/components/shared/icons.tsx b/x-pack/plugins/code/public/components/shared/icons.tsx
index 9e4e51eef97ac..1cbbc368a3b8d 100644
--- a/x-pack/plugins/code/public/components/shared/icons.tsx
+++ b/x-pack/plugins/code/public/components/shared/icons.tsx
@@ -11,7 +11,7 @@ export const TypeScriptIcon = () => (
     <g fill="none" fillRule="evenodd">
       <rect width="32" height="32" />
       <path
-        fill="#343741"
+        className="codeIcon__language"
         fillRule="nonzero"
         d="M0,0 L26,0 L26,26 L0,26 L0,0 Z M15.47,21.4644444 C16.1922222,22.88 17.6511111,23.9633333 19.9333333,23.9633333 C22.2444444,23.9633333 23.9777778,22.7644444 23.9777778,20.5544444 C23.9777778,18.5177778 22.8077778,17.6077778 20.7277778,16.7122222 L20.1211111,16.4522222 C19.0666667,16.0044444 18.6188889,15.7011111 18.6188889,14.9788889 C18.6188889,14.3866667 19.0666667,13.9244444 19.7888889,13.9244444 C20.4822222,13.9244444 20.9444444,14.2277778 21.3633333,14.9788889 L23.2555556,13.7222222 C22.4611111,12.3355556 21.3344444,11.8011111 19.7888889,11.8011111 C17.6077778,11.8011111 16.2066667,13.1877778 16.2066667,15.0222222 C16.2066667,17.0155556 17.3766667,17.9544444 19.1388889,18.7055556 L19.7455556,18.9655556 C20.8722222,19.4566667 21.5366667,19.76 21.5366667,20.5977778 C21.5366667,21.2911111 20.8866667,21.7966667 19.8755556,21.7966667 C18.6766667,21.7966667 17.9833333,21.1755556 17.4633333,20.3088889 L15.47,21.4644444 Z M14.4444444,11.9166667 L7.22222222,11.9166667 L7.22222222,14.0833333 L9.38888889,14.0833333 L9.38888889,24.5555556 L11.9166667,24.5555556 L11.9166667,14.0833333 L14.4444444,14.0833333 L14.4444444,11.9166667 Z"
         transform="translate(3 3)"
@@ -25,7 +25,7 @@ export const JavaIcon = () => (
     <g fill="none" fillRule="evenodd">
       <rect width="32" height="32" />
       <path
-        fill="#343741"
+        className="codeIcon__language"
         fillRule="nonzero"
         d="M6.65133715,21.6542239 C6.65133715,21.6542239 5.58131391,22.276089 7.41206217,22.4873705 C9.63052249,22.7400382 10.7653474,22.7040978 13.2103357,22.2412384 C13.2103357,22.2412384 13.8528947,22.6441999 14.7513857,22.993794 C9.27003527,25.3429432 2.34619439,22.8576593 6.65133715,21.6542239 Z M5.98100805,18.5884578 C5.98100805,18.5884578 4.78083873,19.4771497 6.61376494,19.6666484 C8.98360848,19.9106042 10.8557408,19.9312956 14.0946721,19.3072526 C14.0946721,19.3072526 14.5422842,19.7613986 15.2469215,20.0097103 C8.61985433,21.9471879 1.23805487,20.1621821 5.98100805,18.5884578 Z M11.6279005,13.3886342 C12.9780624,14.9441037 11.272859,16.3427706 11.272859,16.3427706 C11.272859,16.3427706 14.7023792,14.5730104 13.1275651,12.3556391 C11.6562155,10.2885616 10.5290152,9.26155543 16.6355009,5.71986139 C16.6355009,5.71986139 7.04947126,8.1140008 11.6279005,13.3886342 Z M18.8768322,23.9211483 C18.8768322,23.9211483 19.6685944,24.5740554 18.0044758,25.0782993 C14.8406918,26.0366907 4.83638239,26.3263869 2.05704474,25.116416 C1.05835647,24.6818733 2.93157744,24.0785217 3.52077129,23.9521871 C4.1350139,23.8193202 4.48678723,23.8432794 4.48678723,23.8432794 C3.37592402,23.0602291 -2.69462129,25.3799734 1.403595,26.0443144 C12.5797564,27.8565471 21.7759674,25.2291355 18.8768322,23.9211483 Z M7.16538513,15.4132383 C7.16538513,15.4132383 2.07555902,16.6215754 5.36240912,17.0604756 C6.7499004,17.2467081 9.51616908,17.2042339 12.0940268,16.9885964 C14.2003117,16.8110757 16.31531,16.4331632 16.31531,16.4331632 C16.31531,16.4331632 15.572556,16.7511761 15.0356379,17.1181955 C9.86794281,18.4773705 -0.114585395,17.844614 2.75950241,16.454946 C5.19033408,15.2798257 7.16538513,15.4132383 7.16538513,15.4132383 Z M16.2946169,20.515044 C21.5483503,17.7858026 19.1186085,15.1622028 17.4239969,15.5150664 C17.0079677,15.6011047 16.8228233,15.6762517 16.8228233,15.6762517 C16.8228233,15.6762517 16.977473,15.4344754 17.2715251,15.3299236 C20.6248112,14.1504474 23.2048469,18.807363 16.1889787,20.6522667 C16.1889787,20.6522667 16.2706611,20.5792994 16.2946169,20.515044 Z M13.1259313,0 C13.1259313,0 16.0354154,2.9100278 10.3667418,7.38506722 C5.8209126,10.9746821 9.32993567,13.022158 10.3645638,15.3604166 C7.71155918,12.9666144 5.76427996,10.8592405 7.07008922,8.89780294 C8.98796272,6.018269 14.2999635,4.62315446 13.1259313,0 Z M7.68160939,27.9120908 C12.7240596,28.234458 20.466892,27.7334819 20.6498568,25.3473024 C20.6498568,25.3473024 20.2969949,26.2523282 16.4830275,26.9700348 C12.1789745,27.7803104 6.87078643,27.6855619 3.72333956,27.166069 C3.72333914,27.166069 4.36753154,27.6997194 7.68160939,27.9120908 Z"
         transform="translate(6 2)"
diff --git a/x-pack/plugins/code/public/components/shortcuts/shortcuts_provider.tsx b/x-pack/plugins/code/public/components/shortcuts/shortcuts_provider.tsx
index b5865ef3c113d..5a6c30fb63eda 100644
--- a/x-pack/plugins/code/public/components/shortcuts/shortcuts_provider.tsx
+++ b/x-pack/plugins/code/public/components/shortcuts/shortcuts_provider.tsx
@@ -15,34 +15,10 @@ import {
 } from '@elastic/eui';
 import React from 'react';
 import { connect } from 'react-redux';
-import styled from 'styled-components';
 import { toggleHelp } from '../../actions';
 import { RootState } from '../../reducers';
 import { HotKey, Modifier, OS } from './shortcut';
 
-const Key = styled.span`
-  background: #ffffff;
-  border: 1px solid #d3dae6;
-  box-sizing: border-box;
-  box-shadow: 0px 2px 0px #eeeeee;
-  border-radius: 4px;
-  min-width: 24px;
-  display: inline-block;
-  text-align: center;
-  margin: 4px;
-  line-height: 24px;
-  text-transform: uppercase;
-`;
-
-const HelpText = styled.span`
-  font-style: normal;
-  font-weight: normal;
-  line-height: 21px;
-  font-size: 14px;
-  margin-left: 12px;
-  color: #000000;
-`;
-
 interface Props {
   showHelp: boolean;
   shortcuts: HotKey[];
@@ -195,8 +171,8 @@ class ShortcutsComponent extends React.Component<Props> {
       return (
         <div key={'shortcuts_' + idx}>
           {this.renderModifier(s)}
-          <Key>{s.key}</Key>
-          <HelpText>{s.help}</HelpText>
+          <span className="codeShortcuts__key">{s.key}</span>
+          <span className="codeShortcuts__help-text">{s.help}</span>
         </div>
       );
     });
@@ -205,7 +181,7 @@ class ShortcutsComponent extends React.Component<Props> {
   private renderModifier(hotKey: HotKey) {
     if (hotKey.modifier) {
       const modifiers = hotKey.modifier.get(this.os) || [];
-      return modifiers.map(m => <Key>{this.showModifier(m)}</Key>);
+      return modifiers.map(m => <div className="codeShortcuts__key">{this.showModifier(m)}</div>);
     } else {
       return null;
     }
diff --git a/x-pack/plugins/code/public/index.scss b/x-pack/plugins/code/public/index.scss
index 75f7470991ab4..c93e05784ede5 100644
--- a/x-pack/plugins/code/public/index.scss
+++ b/x-pack/plugins/code/public/index.scss
@@ -13,4 +13,5 @@
 
 @import "./components/admin_page/sidebar.scss";
 @import "./style/markdown.scss";
+@import "./style/shortcuts.scss";
 @import "./components/symbol_tree/symbol_tree.scss";
diff --git a/x-pack/plugins/code/public/style/markdown.scss b/x-pack/plugins/code/public/style/markdown.scss
index 0e9d834738c9d..01ceb042f0348 100644
--- a/x-pack/plugins/code/public/style/markdown.scss
+++ b/x-pack/plugins/code/public/style/markdown.scss
@@ -4,4 +4,8 @@
     color: $euiColorPrimary;
     text-decoration: underline;
   }
-}
\ No newline at end of file
+}
+
+.markdown-body .highlight pre, .markdown-body pre {
+  background-color: $euiColorLightestShade;;
+}
diff --git a/x-pack/plugins/code/public/style/shortcuts.scss b/x-pack/plugins/code/public/style/shortcuts.scss
new file mode 100644
index 0000000000000..64c427d05a760
--- /dev/null
+++ b/x-pack/plugins/code/public/style/shortcuts.scss
@@ -0,0 +1,23 @@
+.codeShortcuts__key {
+  background: $euiColorEmptyShade;
+  border: $euiBorderThin;
+  box-sizing: border-box;
+  box-shadow: 0px 2px 0px $euiColorLightestShade;
+  border-radius: $euiSizeXS;
+  width: $euiSizeL;
+  min-width: $euiSizeL;
+  height: $euiSizeL;
+  display: inline-block;
+  text-align: center;
+  margin: $euiSizeXS;
+  line-height: $euiSizeL;
+  text-transform: uppercase;
+  font-size: $euiFontSizeS;
+}
+
+.codeShortcuts__help-text {
+  line-height: $euiSizeL;
+  font-size: $euiFontSizeS;
+  margin-left: $euiSizeL / 2;
+  color: $euiColorDarkestShade;
+}