diff --git a/src-docs/src/actions/theme_actions.js b/src-docs/src/actions/theme_actions.js
index 60b8fec4b790..3cc334cc2e3f 100644
--- a/src-docs/src/actions/theme_actions.js
+++ b/src-docs/src/actions/theme_actions.js
@@ -1,5 +1,8 @@
 import ActionTypes from './action_types';
 
-export const toggleTheme = () => ({
+export const toggleTheme = theme => ({
   type: ActionTypes.TOGGLE_THEME,
+  data: {
+    theme,
+  },
 });
diff --git a/src-docs/src/components/guide_page/guide_page_chrome.js b/src-docs/src/components/guide_page/guide_page_chrome.js
index a7248fb3f71a..741448d6572e 100644
--- a/src-docs/src/components/guide_page/guide_page_chrome.js
+++ b/src-docs/src/components/guide_page/guide_page_chrome.js
@@ -7,7 +7,6 @@ import {
 } from 'react-router';
 
 import {
-  EuiButtonEmpty,
   EuiFieldSearch,
   EuiFlexGroup,
   EuiFlexItem,
@@ -16,6 +15,10 @@ import {
   EuiSpacer,
 } from '../../../../src/components';
 
+import {
+  GuideThemeSelector,
+} from '../guide_theme_selector';
+
 export class GuidePageChrome extends Component {
   constructor(props) {
     super(props);
@@ -66,16 +69,10 @@ export class GuidePageChrome extends Component {
         </EuiFlexItem>
 
         <EuiFlexItem grow={false}>
-          <EuiButtonEmpty
-            size="xs"
-            onClick={this.props.onToggleTheme}
-            className="euiLink"
-            iconSide="right"
-            color="text"
-            iconType="invert"
-          >
-              Flip theme
-          </EuiButtonEmpty>
+          <GuideThemeSelector
+            onToggleTheme={this.props.onToggleTheme}
+            selectedTheme={this.props.selectedTheme}
+          />
         </EuiFlexItem>
       </EuiFlexGroup>
     );
@@ -203,6 +200,9 @@ export class GuidePageChrome extends Component {
 
 GuidePageChrome.propTypes = {
   currentRouteName: PropTypes.string.isRequired,
+  onToggleTheme: PropTypes.func.isRequired,
+  selectedTheme: PropTypes.string.isRequired,
+  guidelines: PropTypes.array.isRequired,
   components: PropTypes.array.isRequired,
   sandboxes: PropTypes.array.isRequired,
 };
diff --git a/src-docs/src/components/guide_sandbox/guide_sandbox_chrome.js b/src-docs/src/components/guide_sandbox/guide_sandbox_chrome.js
index cf70bd9b88fb..496b5485d974 100644
--- a/src-docs/src/components/guide_sandbox/guide_sandbox_chrome.js
+++ b/src-docs/src/components/guide_sandbox/guide_sandbox_chrome.js
@@ -5,20 +5,25 @@ import {
   Link,
 } from 'react-router';
 
-import {
-  GuideSandboxChromeToggle,
-} from './guide_sandbox_chrome_toggle';
-
 import {
   EuiIcon,
   EuiFlexGroup,
   EuiFlexItem,
 } from '../../../../src/components';
 
+import {
+  GuideThemeSelector,
+} from '../guide_theme_selector';
+
+import {
+  GuideSandboxChromeToggle,
+} from './guide_sandbox_chrome_toggle';
+
 export const GuideSandboxChrome = ({
   isVisible,
   onToggleTheme,
   onToggleSandboxChrome,
+  selectedTheme,
 }) => {
   const toggle = <GuideSandboxChromeToggle onClick={onToggleSandboxChrome} />;
 
@@ -36,12 +41,10 @@ export const GuideSandboxChrome = ({
         </EuiFlexItem>
 
         <EuiFlexItem grow={false}>
-          <button
-            onClick={onToggleTheme}
-            className="guideSandboxChrome__link"
-          >
-            Theme
-          </button>
+          <GuideThemeSelector
+            onToggleTheme={onToggleTheme}
+            selectedTheme={selectedTheme}
+          />
         </EuiFlexItem>
       </EuiFlexGroup>
 
@@ -54,5 +57,6 @@ GuideSandboxChrome.propTypes = {
   routes: PropTypes.array.isRequired,
   onToggleTheme: PropTypes.func.isRequired,
   onToggleSandboxChrome: PropTypes.func.isRequired,
+  selectedTheme: PropTypes.string.isRequired,
   isVisible: PropTypes.bool,
 };
diff --git a/src-docs/src/components/guide_section/guide_section.js b/src-docs/src/components/guide_section/guide_section.js
index 21d4928781aa..f2d9c9fefd18 100644
--- a/src-docs/src/components/guide_section/guide_section.js
+++ b/src-docs/src/components/guide_section/guide_section.js
@@ -75,6 +75,7 @@ export class GuideSection extends Component {
           routes={Routes.getAppRoutes()}
           onToggleTheme={this.props.toggleTheme}
           onToggleSandboxChrome={this.onToggleSandboxChrome}
+          selectedTheme={this.props.theme}
           isVisible={this.state.sandbox.isChromeVisible}
         />
       );
@@ -156,4 +157,5 @@ GuideSection.propTypes = {
   children: PropTypes.any,
   isSandbox: PropTypes.bool,
   toggleTheme: PropTypes.func.isRequired,
+  theme: PropTypes.string.isRequired,
 };
diff --git a/src-docs/src/components/guide_section/guide_section_container.js b/src-docs/src/components/guide_section/guide_section_container.js
index 730c8f5f50ed..91d3f9c724a0 100644
--- a/src-docs/src/components/guide_section/guide_section_container.js
+++ b/src-docs/src/components/guide_section/guide_section_container.js
@@ -4,6 +4,7 @@ import { GuideSection } from './guide_section';
 
 import {
   getIsSandbox,
+  getTheme,
 } from '../../store';
 
 import {
@@ -13,6 +14,7 @@ import {
 function mapStateToProps(state) {
   return {
     isSandbox: getIsSandbox(state),
+    theme: getTheme(state),
   };
 }
 
diff --git a/src-docs/src/components/guide_theme_selector/guide_theme_selector.js b/src-docs/src/components/guide_theme_selector/guide_theme_selector.js
new file mode 100644
index 000000000000..ed097911056e
--- /dev/null
+++ b/src-docs/src/components/guide_theme_selector/guide_theme_selector.js
@@ -0,0 +1,93 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  EuiButtonEmpty,
+  EuiContextMenuItem,
+  EuiContextMenuPanel,
+  EuiPopover,
+} from '../../../../src/components';
+
+export class GuideThemeSelector extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isThemePopoverOpen: false,
+    };
+  }
+
+  onThemeButtonClick = () => {
+    this.setState({
+      isThemePopoverOpen: !this.state.isThemePopoverOpen,
+    });
+  };
+
+  closeThemePopover = () => {
+    this.setState({
+      isThemePopoverOpen: false,
+    });
+  };
+
+  render() {
+    const themeButton = (
+      <EuiButtonEmpty
+        size="s"
+        color="text"
+        iconType="arrowDown"
+        iconSide="right"
+        onClick={this.onThemeButtonClick}
+      >
+        Theme
+      </EuiButtonEmpty>
+    );
+
+    const themeOptions = [{
+      name: 'Light',
+      value: 'light',
+    }, {
+      name: 'Dark',
+      value: 'dark',
+    }, {
+      name: 'K6',
+      value: 'k6',
+    }, {
+      name: 'K6 dark',
+      value: 'k6_dark',
+    }].map(option => {
+      const { name, value } = option;
+
+      return (
+        <EuiContextMenuItem
+          key={value}
+          icon={value === this.props.selectedTheme ? 'check' : 'empty'}
+          onClick={() => { this.closeThemePopover(); this.props.onToggleTheme(value); }}
+        >
+          {`${name}`}
+        </EuiContextMenuItem>
+      );
+    });
+
+    return (
+      <EuiPopover
+        id="pageChromeThemePopover"
+        button={themeButton}
+        isOpen={this.state.isThemePopoverOpen}
+        closePopover={this.closeThemePopover}
+        panelPaddingSize="none"
+        withTitle
+        anchorPosition="downRight"
+      >
+        <EuiContextMenuPanel
+          style={{ width: '120px' }}
+          items={themeOptions}
+        />
+      </EuiPopover>
+    );
+  }
+}
+
+GuideThemeSelector.propTypes = {
+  onToggleTheme: PropTypes.func.isRequired,
+  selectedTheme: PropTypes.string.isRequired,
+};
diff --git a/src-docs/src/components/guide_theme_selector/index.js b/src-docs/src/components/guide_theme_selector/index.js
new file mode 100644
index 000000000000..f295f9e31b79
--- /dev/null
+++ b/src-docs/src/components/guide_theme_selector/index.js
@@ -0,0 +1 @@
+export { GuideThemeSelector } from './guide_theme_selector';
diff --git a/src-docs/src/index.js b/src-docs/src/index.js
index 9d344cc2fe83..b113be93e1b1 100644
--- a/src-docs/src/index.js
+++ b/src-docs/src/index.js
@@ -20,6 +20,8 @@ import {
 
 import themeLight from './theme_light.scss';
 import themeDark from './theme_dark.scss';
+import themeK6 from './theme_k6.scss';
+import themeK6Dark from './theme_k6_dark.scss';
 
 registerTheme('light', [
   themeLight
@@ -29,6 +31,14 @@ registerTheme('dark', [
   themeDark
 ]);
 
+registerTheme('k6', [
+  themeK6
+]);
+
+registerTheme('k6_dark', [
+  themeK6Dark
+]);
+
 // Set up app
 
 const store = configureStore();
diff --git a/src-docs/src/store/reducers/theme_reducer.js b/src-docs/src/store/reducers/theme_reducer.js
index 13301c95c73c..b19ad3d4a2e0 100644
--- a/src-docs/src/store/reducers/theme_reducer.js
+++ b/src-docs/src/store/reducers/theme_reducer.js
@@ -8,7 +8,7 @@ export default function sectionsReducer(state = defaultState, action) {
   switch (action.type) {
     case ActionTypes.TOGGLE_THEME: {
       return {
-        theme: (state.theme === 'light') ? 'dark' : 'light',
+        theme: action.data.theme,
       };
     }
 
diff --git a/src-docs/src/theme_k6.scss b/src-docs/src/theme_k6.scss
new file mode 100644
index 000000000000..9e6213288164
--- /dev/null
+++ b/src-docs/src/theme_k6.scss
@@ -0,0 +1,2 @@
+@import "../../src/theme_k6";
+@import "./components/guide_components";
diff --git a/src-docs/src/theme_k6_dark.scss b/src-docs/src/theme_k6_dark.scss
new file mode 100644
index 000000000000..c42c1f6f630c
--- /dev/null
+++ b/src-docs/src/theme_k6_dark.scss
@@ -0,0 +1,2 @@
+@import "../../src/theme_k6_dark";
+@import "./components/guide_components";
diff --git a/src-docs/src/views/app_view.js b/src-docs/src/views/app_view.js
index 7948bd51db35..eb4eb55ba051 100644
--- a/src-docs/src/views/app_view.js
+++ b/src-docs/src/views/app_view.js
@@ -57,10 +57,18 @@ export class AppView extends Component {
   }
 
   renderContent() {
-    if (this.props.isSandbox) {
+    const {
+      children,
+      currentRoute,
+      isSandbox,
+      toggleTheme,
+      theme,
+    } = this.props;
+
+    if (isSandbox) {
       return (
         <div className="guideSandbox">
-          {this.props.children}
+          {children}
         </div>
       );
     } else {
@@ -69,9 +77,9 @@ export class AppView extends Component {
           <EuiPageBody>
             <EuiPageSideBar>
               <GuidePageChrome
-                currentRouteName={this.props.currentRoute.name}
-                onToggleTheme={this.props.toggleTheme}
-                routes={this.props.routes}
+                currentRouteName={currentRoute.name}
+                onToggleTheme={toggleTheme}
+                selectedTheme={theme}
                 guidelines={Routes.guidelines}
                 components={Routes.components}
                 sandboxes={Routes.sandboxes}
@@ -80,7 +88,7 @@ export class AppView extends Component {
 
             <EuiPageContent>
               <EuiPageContentBody>
-                {this.props.children}
+                {children}
               </EuiPageContentBody>
             </EuiPageContent>
           </EuiPageBody>
@@ -101,14 +109,11 @@ export class AppView extends Component {
 AppView.propTypes = {
   children: PropTypes.any,
   currentRoute: PropTypes.object.isRequired,
-  sections: PropTypes.array,
   isSandbox: PropTypes.bool,
-  toggleTheme: PropTypes.func.isRequired,
   theme: PropTypes.string.isRequired,
-  sections: PropTypes.array.isRequired,
+  toggleTheme: PropTypes.func.isRequired,
 };
 
 AppView.defaultProps = {
   currentRoute: {},
-  sections: [],
 };
diff --git a/src/global_styling/k6/_index.scss b/src/global_styling/k6/_index.scss
new file mode 100644
index 000000000000..c0e897f9ad81
--- /dev/null
+++ b/src/global_styling/k6/_index.scss
@@ -0,0 +1,5 @@
+@import 'size';
+@import 'typography';
+// @import 'borders';
+// @import 'shadows';
+// @import 'z_index';
diff --git a/src/global_styling/k6/_size.scss b/src/global_styling/k6/_size.scss
new file mode 100644
index 000000000000..af769bf620f8
--- /dev/null
+++ b/src/global_styling/k6/_size.scss
@@ -0,0 +1,7 @@
+$euiSizeXS:   4px;
+$euiSizeS:    8px;
+$euiSizeM:    11px;
+$euiSize:     14px;
+$euiSizeL:    18px;
+$euiSizeXL:   22px;
+$euiSizeXXL:  26px;
diff --git a/src/global_styling/k6/_typography.scss b/src/global_styling/k6/_typography.scss
new file mode 100644
index 000000000000..50c72558ed61
--- /dev/null
+++ b/src/global_styling/k6/_typography.scss
@@ -0,0 +1,10 @@
+$euiFontSizeXS:     12px;
+$euiFontSizeS:      14px;
+$euiFontSizeM:      14px;
+$euiFontSize:       14px;
+$euiFontSizeL:      18px;
+$euiFontSizeXL:     22px;
+$euiFontSizeXXL:    28px;
+
+// Make titles bold.
+$euiFontWeightLight: 500;
diff --git a/src/global_styling/mixins/_index.scss b/src/global_styling/mixins/_index.scss
index 0d92a58e5d68..169cfa6d37e3 100644
--- a/src/global_styling/mixins/_index.scss
+++ b/src/global_styling/mixins/_index.scss
@@ -2,4 +2,5 @@
 @import 'responsive';
 @import 'shadow';
 @import 'size';
+@import 'typography';
 @import 'helpers';
diff --git a/src/global_styling/mixins/_typography.scss b/src/global_styling/mixins/_typography.scss
new file mode 100644
index 000000000000..352783e35d97
--- /dev/null
+++ b/src/global_styling/mixins/_typography.scss
@@ -0,0 +1,58 @@
+
+// Our base fonts
+
+@mixin euiFont {
+  font-family: $euiFontFamily;
+  font-weight: $euiFontWeightRegular;
+}
+
+@mixin euiCodeFont {
+  font-family: $euiCodeFontFamily;
+}
+
+@mixin euiTitle {
+  color: $euiTitleColor;
+  font-weight: $euiFontWeightLight;
+}
+
+@mixin euiText {
+  color: $euiTextColor;
+  font-weight: $euiFontWeightRegular;
+}
+
+// Font sizing extends, using rem mixin
+
+@mixin euiFontSize {
+  @include fontSize($euiFontSize);
+  line-height: $euiLineHeight;
+}
+
+@mixin euiFontSizeXS {
+  @include fontSize($euiFontSizeXS);
+  line-height: $euiLineHeight;
+}
+
+@mixin euiFontSizeS {
+  @include fontSize($euiFontSizeS);
+  line-height: $euiLineHeight;
+}
+
+@mixin euiFontSizeM {
+  @include fontSize($euiFontSizeM);
+  line-height: $euiLineHeight;
+}
+
+@mixin euiFontSizeL {
+  @include fontSize($euiFontSizeL);
+  line-height: $euiLineHeight;
+}
+
+@mixin euiFontSizeXL {
+  @include fontSize($euiFontSizeXL);
+  line-height: $euiLineHeight;
+}
+
+@mixin euiFontSizeXXL {
+  @include fontSize($euiFontSizeXXL);
+  line-height: $euiLineHeight;
+}
diff --git a/src/global_styling/theme_k6_dark_variables.scss b/src/global_styling/theme_k6_dark_variables.scss
new file mode 100644
index 000000000000..4fbaccba1e9e
--- /dev/null
+++ b/src/global_styling/theme_k6_dark_variables.scss
@@ -0,0 +1,20 @@
+// Dark theme overides
+
+$euiColorEmptyShade: #222;
+$euiColorLightestShade: #272727;
+$euiColorLightShade: #333;
+$euiColorMediumShade: #444;
+$euiColorDarkShade: #D9D9D9;
+$euiColorDarkestShade: #F5F5F5;
+$euiColorFullShade: #FFF;
+$euiColorPrimary: #4da1c0;
+$euiColorDanger: #bf4d4d;
+$euiTextColor: #DDD;
+
+$euiFocusBackgroundColor: #191919;
+
+// K6 custom values
+@import 'k6/index';
+
+// Configuration
+@import 'variables/index';
diff --git a/src/global_styling/theme_k6_variables.scss b/src/global_styling/theme_k6_variables.scss
new file mode 100644
index 000000000000..226126dd8305
--- /dev/null
+++ b/src/global_styling/theme_k6_variables.scss
@@ -0,0 +1,7 @@
+$euiTextColor: #2D2D2D;
+
+// K6 custom values
+@import 'k6/index';
+
+// Configuration
+@import 'variables/index';
diff --git a/src/global_styling/variables/_size.scss b/src/global_styling/variables/_size.scss
index 150b66eea1cc..b8ae115dea5b 100644
--- a/src/global_styling/variables/_size.scss
+++ b/src/global_styling/variables/_size.scss
@@ -1,10 +1,10 @@
-$euiSize:     16px;
+$euiSize:     16px !default;
 
-$euiSizeXS:   $euiSize * .25;
-$euiSizeS:    $euiSize * .5;
-$euiSizeM:    $euiSize * .75;
-$euiSizeL:    $euiSize * 1.5;
-$euiSizeXL:   $euiSize * 2;
-$euiSizeXXL:  $euiSize * 2.5;
+$euiSizeXS:   $euiSize * .25 !default;
+$euiSizeS:    $euiSize * .5 !default;
+$euiSizeM:    $euiSize * .75 !default;
+$euiSizeL:    $euiSize * 1.5 !default;
+$euiSizeXL:   $euiSize * 2 !default;
+$euiSizeXXL:  $euiSize * 2.5 !default;
 
-$euiButtonMinWidth: $euiSize * 7;
+$euiButtonMinWidth: $euiSize * 7 !default;
diff --git a/src/global_styling/variables/_typography.scss b/src/global_styling/variables/_typography.scss
index 42eeff66edd7..ce88c0422088 100644
--- a/src/global_styling/variables/_typography.scss
+++ b/src/global_styling/variables/_typography.scss
@@ -23,14 +23,14 @@ $euiCodeFontFamily: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courie
 
 // Font sizes
 
-$euiFontSize:       $euiSize;
+$euiFontSize:       $euiSize !default;
 
-$euiFontSizeXS:     $euiFontSize * .75;
-$euiFontSizeS:      $euiFontSize * .875;
-$euiFontSizeM:      $euiFontSize;
-$euiFontSizeL:      $euiFontSize * 1.5;
-$euiFontSizeXL:     $euiFontSize * 2;
-$euiFontSizeXXL:    $euiFontSize * 3;
+$euiFontSizeXS:     $euiFontSize * .75 !default;
+$euiFontSizeS:      $euiFontSize * .875 !default;
+$euiFontSizeM:      $euiFontSize !default;
+$euiFontSizeL:      $euiFontSize * 1.5 !default;
+$euiFontSizeXL:     $euiFontSize * 2 !default;
+$euiFontSizeXXL:    $euiFontSize * 3 !default;
 
 // Line height
 
@@ -39,64 +39,6 @@ $euiLineHeight:     1.5;
 
 // Font weights
 
-$euiFontWeightLight:    300;
-$euiFontWeightRegular:  400;
-$euiFontWeightMedium:   500;
-
-// Our base fonts
-
-@mixin euiFont {
-  font-family: $euiFontFamily;
-  font-weight: $euiFontWeightRegular;
-}
-
-@mixin euiCodeFont {
-  font-family: $euiCodeFontFamily;
-}
-
-@mixin euiTitle {
-  color: $euiTitleColor;
-  font-weight: $euiFontWeightLight;
-}
-
-@mixin euiText {
-  color: $euiTextColor;
-  font-weight: $euiFontWeightRegular;
-}
-
-// Font sizing extends, using rem mixin
-
-@mixin euiFontSize {
-  @include fontSize($euiFontSize);
-  line-height: $euiLineHeight;
-}
-
-@mixin euiFontSizeXS {
-  @include fontSize($euiFontSizeXS);
-  line-height: $euiLineHeight;
-}
-
-@mixin euiFontSizeS {
-  @include fontSize($euiFontSizeS);
-  line-height: $euiLineHeight;
-}
-
-@mixin euiFontSizeM {
-  @include fontSize($euiFontSizeM);
-  line-height: $euiLineHeight;
-}
-
-@mixin euiFontSizeL {
-  @include fontSize($euiFontSizeL);
-  line-height: $euiLineHeight;
-}
-
-@mixin euiFontSizeXL {
-  @include fontSize($euiFontSizeXL);
-  line-height: $euiLineHeight;
-}
-
-@mixin euiFontSizeXXL {
-  @include fontSize($euiFontSizeXXL);
-  line-height: $euiLineHeight;
-}
+$euiFontWeightLight:    300 !default;
+$euiFontWeightRegular:  400 !default;
+$euiFontWeightMedium:   500 !default;
diff --git a/src/theme_k6.scss b/src/theme_k6.scss
new file mode 100644
index 000000000000..34406790c30f
--- /dev/null
+++ b/src/theme_k6.scss
@@ -0,0 +1,8 @@
+// Variables
+@import 'global_styling/theme_k6_variables';
+
+// Global styling
+@import 'global_styling/core';
+
+// Components
+@import 'components/index';
diff --git a/src/theme_k6_dark.scss b/src/theme_k6_dark.scss
new file mode 100644
index 000000000000..9008ed60b0b7
--- /dev/null
+++ b/src/theme_k6_dark.scss
@@ -0,0 +1,8 @@
+// Variables
+@import 'global_styling/theme_k6_dark_variables';
+
+// Global styling
+@import 'global_styling/core';
+
+// Components
+@import 'components/index';