diff --git a/packages/netlify-cms-backend-git-gateway/src/AuthenticationPage.js b/packages/netlify-cms-backend-git-gateway/src/AuthenticationPage.js
index c30fbb09..560dc90f 100644
--- a/packages/netlify-cms-backend-git-gateway/src/AuthenticationPage.js
+++ b/packages/netlify-cms-backend-git-gateway/src/AuthenticationPage.js
@@ -9,6 +9,7 @@ import {
   colors,
   colorsRaw,
   lengths,
+  zIndex,
 } from 'netlify-cms-ui-default';
 
 const LoginButton = styled.button`
@@ -38,7 +39,7 @@ const AuthInput = styled.input`
   margin-top: 6px;
   width: 100%;
   position: relative;
-  z-index: 1;
+  z-index: ${zIndex.zIndex1};
 
   &:focus {
     outline: none;
diff --git a/packages/netlify-cms-core/src/components/App/Header.js b/packages/netlify-cms-core/src/components/App/Header.js
index d8c40248..bcc7a19b 100644
--- a/packages/netlify-cms-core/src/components/App/Header.js
+++ b/packages/netlify-cms-core/src/components/App/Header.js
@@ -14,6 +14,7 @@ import {
   lengths,
   shadows,
   buttons,
+  zIndex,
 } from 'netlify-cms-ui-default';
 import SettingsDropdown from 'UI/SettingsDropdown';
 
@@ -31,7 +32,7 @@ const AppHeader = props => (
       width: 100%;
       top: 0;
       background-color: ${colors.foreground};
-      z-index: 300;
+      z-index: ${zIndex.zIndex300};
       height: ${lengths.topBarHeight};
     `}
     {...props}
diff --git a/packages/netlify-cms-core/src/components/Collection/Entries/EntryCard.js b/packages/netlify-cms-core/src/components/Collection/Entries/EntryCard.js
index d5edaf54..859ab682 100644
--- a/packages/netlify-cms-core/src/components/Collection/Entries/EntryCard.js
+++ b/packages/netlify-cms-core/src/components/Collection/Entries/EntryCard.js
@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 import { connect } from 'react-redux';
 import { boundGetAsset } from 'Actions/media';
 import { Link } from 'react-router-dom';
-import { colors, colorsRaw, components, lengths } from 'netlify-cms-ui-default';
+import { colors, colorsRaw, components, lengths, zIndex } from 'netlify-cms-ui-default';
 import { VIEW_STYLE_LIST, VIEW_STYLE_GRID } from 'Constants/collectionViews';
 import { summaryFormatter } from 'Lib/formatters';
 import { keyToPathArray } from 'Lib/stringTemplate';
@@ -68,7 +68,7 @@ const CardBody = styled.div`
     content: '';
     position: absolute;
     display: block;
-    z-index: 1;
+    z-index: ${zIndex.zIndex1};
     bottom: 0;
     left: -20%;
     height: 140%;
diff --git a/packages/netlify-cms-core/src/components/Collection/Sidebar.js b/packages/netlify-cms-core/src/components/Collection/Sidebar.js
index fa14f505..a124c885 100644
--- a/packages/netlify-cms-core/src/components/Collection/Sidebar.js
+++ b/packages/netlify-cms-core/src/components/Collection/Sidebar.js
@@ -5,7 +5,7 @@ import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import { translate } from 'react-polyglot';
 import { NavLink } from 'react-router-dom';
-import { Icon, components, colors, colorsRaw, lengths } from 'netlify-cms-ui-default';
+import { Icon, components, colors, colorsRaw, lengths, zIndex } from 'netlify-cms-ui-default';
 import { searchCollections } from 'Actions/collections';
 
 const styles = {
@@ -43,7 +43,7 @@ const SearchContainer = styled.div`
     position: absolute;
     top: 0;
     left: 6px;
-    z-index: 2;
+    z-index: ${zIndex.zIndex2};
     height: 100%;
     display: flex;
     align-items: center;
@@ -58,7 +58,7 @@ const SearchInput = styled.input`
   padding: 10px 6px 10px 32px;
   width: 100%;
   position: relative;
-  z-index: 1;
+  z-index: ${zIndex.zIndex1};
 
   &:focus {
     outline: none;
diff --git a/packages/netlify-cms-core/src/components/Editor/EditorInterface.js b/packages/netlify-cms-core/src/components/Editor/EditorInterface.js
index bdbb43b4..78347804 100644
--- a/packages/netlify-cms-core/src/components/Editor/EditorInterface.js
+++ b/packages/netlify-cms-core/src/components/Editor/EditorInterface.js
@@ -4,7 +4,14 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { css, Global } from '@emotion/core';
 import styled from '@emotion/styled';
 import SplitPane from 'react-split-pane';
-import { colors, colorsRaw, components, transitions, IconButton } from 'netlify-cms-ui-default';
+import {
+  colors,
+  colorsRaw,
+  components,
+  transitions,
+  IconButton,
+  zIndex,
+} from 'netlify-cms-ui-default';
 import { ScrollSync, ScrollSyncPane } from 'react-scroll-sync';
 import EditorControlPane from './EditorControlPane/EditorControlPane';
 import EditorPreviewPane from './EditorPreviewPane/EditorPreviewPane';
@@ -107,7 +114,7 @@ const ViewControls = styled.div`
   position: absolute;
   top: 10px;
   right: 10px;
-  z-index: 299;
+  z-index: ${zIndex.zIndex299};
 `;
 
 class EditorInterface extends Component {
diff --git a/packages/netlify-cms-core/src/components/Editor/EditorToolbar.js b/packages/netlify-cms-core/src/components/Editor/EditorToolbar.js
index de6333f2..55563a01 100644
--- a/packages/netlify-cms-core/src/components/Editor/EditorToolbar.js
+++ b/packages/netlify-cms-core/src/components/Editor/EditorToolbar.js
@@ -15,6 +15,7 @@ import {
   colors,
   components,
   buttons,
+  zIndex,
 } from 'netlify-cms-ui-default';
 import { status } from 'Constants/publishModes';
 import SettingsDropdown from 'UI/SettingsDropdown';
@@ -55,7 +56,7 @@ const ToolbarContainer = styled.div`
   left: 0;
   width: 100%;
   min-width: 800px;
-  z-index: 300;
+  z-index: ${zIndex.zIndex300};
   background-color: #fff;
   height: 66px;
   display: flex;
diff --git a/packages/netlify-cms-core/src/components/MediaLibrary/MediaLibraryActions.js b/packages/netlify-cms-core/src/components/MediaLibrary/MediaLibraryActions.js
index d8d8e7d5..7e05776a 100644
--- a/packages/netlify-cms-core/src/components/MediaLibrary/MediaLibraryActions.js
+++ b/packages/netlify-cms-core/src/components/MediaLibrary/MediaLibraryActions.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { css } from '@emotion/core';
 import styled from '@emotion/styled';
 import { FileUploadButton } from 'UI';
-import { buttons, shadows } from 'netlify-cms-ui-default';
+import { buttons, shadows, zIndex } from 'netlify-cms-ui-default';
 
 const styles = {
   button: css`
@@ -46,7 +46,7 @@ const StyledUploadButton = styled(FileUploadButton)`
     opacity: 0;
     overflow: hidden;
     position: absolute;
-    z-index: 0;
+    z-index: ${zIndex.zIndex0};
     outline: none;
   }
 `;
diff --git a/packages/netlify-cms-core/src/components/MediaLibrary/MediaLibrarySearch.js b/packages/netlify-cms-core/src/components/MediaLibrary/MediaLibrarySearch.js
index 74538564..c2be293f 100644
--- a/packages/netlify-cms-core/src/components/MediaLibrary/MediaLibrarySearch.js
+++ b/packages/netlify-cms-core/src/components/MediaLibrary/MediaLibrarySearch.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
-import { Icon, lengths, colors } from 'netlify-cms-ui-default';
+import { Icon, lengths, colors, zIndex } from 'netlify-cms-ui-default';
 
 const SearchContainer = styled.div`
   height: 37px;
@@ -19,7 +19,7 @@ const SearchInput = styled.input`
   padding: 10px 6px 10px 32px;
   width: 100%;
   position: relative;
-  z-index: 1;
+  z-index: ${zIndex.zIndex1};
 
   &:focus {
     outline: none;
@@ -31,7 +31,7 @@ const SearchIcon = styled(Icon)`
   position: absolute;
   top: 50%;
   left: 6px;
-  z-index: 2;
+  z-index: ${zIndex.zIndex2};
   transform: translate(0, -50%);
 `;
 
diff --git a/packages/netlify-cms-core/src/components/UI/Modal.js b/packages/netlify-cms-core/src/components/UI/Modal.js
index 1dbeba03..3c8e1c98 100644
--- a/packages/netlify-cms-core/src/components/UI/Modal.js
+++ b/packages/netlify-cms-core/src/components/UI/Modal.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { css, Global, ClassNames } from '@emotion/core';
 import ReactModal from 'react-modal';
-import { transitions, shadows, lengths } from 'netlify-cms-ui-default';
+import { transitions, shadows, lengths, zIndex } from 'netlify-cms-ui-default';
 
 const ReactModalGlobalStyles = () => (
   <Global
@@ -29,7 +29,7 @@ const styleStrings = {
     }
   `,
   overlay: `
-    z-index: 99999;
+    z-index: ${zIndex.zIndex99999};
     position: fixed;
     top: 0;
     left: 0;
diff --git a/packages/netlify-cms-core/src/components/UI/Toast.js b/packages/netlify-cms-core/src/components/UI/Toast.js
index 9f796b3b..97b4666b 100644
--- a/packages/netlify-cms-core/src/components/UI/Toast.js
+++ b/packages/netlify-cms-core/src/components/UI/Toast.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { css, Global } from '@emotion/core';
 import { translate } from 'react-polyglot';
 import reduxNotificationsStyles from 'redux-notifications/lib/styles.css';
-import { shadows, colors, lengths } from 'netlify-cms-ui-default';
+import { shadows, colors, lengths, zIndex } from 'netlify-cms-ui-default';
 
 const ReduxNotificationsGlobalStyles = () => (
   <Global
@@ -12,7 +12,7 @@ const ReduxNotificationsGlobalStyles = () => (
       ${reduxNotificationsStyles};
 
       .notif__container {
-        z-index: 10000;
+        z-index: ${zIndex.zIndex10000};
         white-space: pre-wrap;
       }
     `}
diff --git a/packages/netlify-cms-ui-default/src/Dropdown.js b/packages/netlify-cms-ui-default/src/Dropdown.js
index 03e3ce43..fbf3a4e5 100644
--- a/packages/netlify-cms-ui-default/src/Dropdown.js
+++ b/packages/netlify-cms-ui-default/src/Dropdown.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { css } from '@emotion/core';
 import styled from '@emotion/styled';
 import { Wrapper, Button as DropdownButton, Menu, MenuItem } from 'react-aria-menubutton';
-import { buttons, components } from './styles';
+import { buttons, components, zIndex } from './styles';
 import Icon from './Icon';
 
 const StyledWrapper = styled(Wrapper)`
@@ -37,7 +37,7 @@ const DropdownList = styled.ul`
   top: 0;
   left: 0;
   min-width: 100%;
-  z-index: 2;
+  z-index: ${zIndex.zIndex2};
 
   ${props => css`
     width: ${props.width};
diff --git a/packages/netlify-cms-ui-default/src/Loader.js b/packages/netlify-cms-ui-default/src/Loader.js
index e8eb5e49..65107740 100644
--- a/packages/netlify-cms-ui-default/src/Loader.js
+++ b/packages/netlify-cms-ui-default/src/Loader.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { css, keyframes } from '@emotion/core';
 import CSSTransition from 'react-transition-group/CSSTransition';
-import { colors } from './styles';
+import { colors, zIndex } from './styles';
 
 const styles = {
   disabled: css`
@@ -122,7 +122,7 @@ const StyledLoader = styled(Loader)`
   left: 50%;
   margin: 0px;
   text-align: center;
-  z-index: 1000;
+  z-index: ${zIndex.zIndex1000};
   transform: translateX(-50%) translateY(-50%);
 
   &:before,
diff --git a/packages/netlify-cms-ui-default/src/index.js b/packages/netlify-cms-ui-default/src/index.js
index ccaceafa..9ce24847 100644
--- a/packages/netlify-cms-ui-default/src/index.js
+++ b/packages/netlify-cms-ui-default/src/index.js
@@ -21,6 +21,7 @@ import {
   borders,
   transitions,
   effects,
+  zIndex,
   reactSelectStyles,
   GlobalStyles,
 } from './styles';
@@ -53,6 +54,7 @@ export const NetlifyCmsUiDefault = {
   borders,
   transitions,
   effects,
+  zIndex,
   reactSelectStyles,
   GlobalStyles,
 };
@@ -84,6 +86,7 @@ export {
   borders,
   transitions,
   effects,
+  zIndex,
   reactSelectStyles,
   GlobalStyles,
   GoBackButton,
diff --git a/packages/netlify-cms-ui-default/src/styles.js b/packages/netlify-cms-ui-default/src/styles.js
index 591c11e6..2677fcb5 100644
--- a/packages/netlify-cms-ui-default/src/styles.js
+++ b/packages/netlify-cms-ui-default/src/styles.js
@@ -380,6 +380,20 @@ const reactSelectStyles = {
   }),
 };
 
+const zIndex = {
+  zIndex0: 0,
+  zIndex1: 1,
+  zIndex2: 2,
+  zIndex10: 10,
+  zIndex100: 100,
+  zIndex200: 200,
+  zIndex299: 299,
+  zIndex300: 300,
+  zIndex1000: 1000,
+  zIndex10000: 10000,
+  zIndex99999: 99999,
+};
+
 const GlobalStyles = () => (
   <Global
     styles={css`
@@ -480,6 +494,7 @@ export {
   borders,
   transitions,
   effects,
+  zIndex,
   reactSelectStyles,
   GlobalStyles,
 };
diff --git a/packages/netlify-cms-widget-code/src/SettingsButton.js b/packages/netlify-cms-widget-code/src/SettingsButton.js
index 1e4a9fd7..a4260f1c 100644
--- a/packages/netlify-cms-widget-code/src/SettingsButton.js
+++ b/packages/netlify-cms-widget-code/src/SettingsButton.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from '@emotion/styled';
-import { Icon, buttons, shadows } from 'netlify-cms-ui-default';
+import { Icon, buttons, shadows, zIndex } from 'netlify-cms-ui-default';
 
 const StyledSettingsButton = styled.button`
   ${buttons.button};
@@ -8,7 +8,7 @@ const StyledSettingsButton = styled.button`
   ${shadows.drop};
   display: block;
   position: absolute;
-  z-index: 100;
+  z-index: ${zIndex.zIndex100};
   right: 8px;
   top: 8px;
   opacity: 0.8;
diff --git a/packages/netlify-cms-widget-code/src/SettingsPane.js b/packages/netlify-cms-widget-code/src/SettingsPane.js
index 8aeca9e8..33ca23db 100644
--- a/packages/netlify-cms-widget-code/src/SettingsPane.js
+++ b/packages/netlify-cms-widget-code/src/SettingsPane.js
@@ -2,7 +2,7 @@ import React from 'react';
 import styled from '@emotion/styled';
 import Select from 'react-select';
 import isHotkey from 'is-hotkey';
-import { text, shadows } from 'netlify-cms-ui-default';
+import { text, shadows, zIndex } from 'netlify-cms-ui-default';
 import SettingsButton from './SettingsButton';
 import languageSelectStyles from './languageSelectStyles';
 
@@ -10,7 +10,7 @@ const SettingsPaneContainer = styled.div`
   position: absolute;
   right: 0;
   width: 200px;
-  z-index: 10;
+  z-index: ${zIndex.zIndex10};
   height: 100%;
   background-color: #fff;
   overflow: hidden;
diff --git a/packages/netlify-cms-widget-markdown/src/MarkdownControl/VisualEditor.js b/packages/netlify-cms-widget-markdown/src/MarkdownControl/VisualEditor.js
index 3053b577..bfdb5663 100644
--- a/packages/netlify-cms-widget-markdown/src/MarkdownControl/VisualEditor.js
+++ b/packages/netlify-cms-widget-markdown/src/MarkdownControl/VisualEditor.js
@@ -7,7 +7,7 @@ import { css as coreCss, ClassNames } from '@emotion/core';
 import { get, isEmpty, debounce } from 'lodash';
 import { Value, Document, Block, Text } from 'slate';
 import { Editor as Slate } from 'slate-react';
-import { lengths, fonts } from 'netlify-cms-ui-default';
+import { lengths, fonts, zIndex } from 'netlify-cms-ui-default';
 import { editorStyleVars, EditorControlBar } from '../styles';
 import { slateToMarkdown, markdownToSlate } from '../serializers';
 import Toolbar from '../MarkdownControl/Toolbar';
@@ -28,7 +28,7 @@ const visualEditorStyles = ({ minimal }) => `
   padding: 0;
   display: flex;
   flex-direction: column;
-  z-index: 100;
+  z-index: ${zIndex.zIndex100};
 `;
 
 const InsertionPoint = styled.div`
diff --git a/packages/netlify-cms-widget-markdown/src/MarkdownControl/components/VoidBlock.js b/packages/netlify-cms-widget-markdown/src/MarkdownControl/components/VoidBlock.js
index 38df3e08..b16010f5 100644
--- a/packages/netlify-cms-widget-markdown/src/MarkdownControl/components/VoidBlock.js
+++ b/packages/netlify-cms-widget-markdown/src/MarkdownControl/components/VoidBlock.js
@@ -1,6 +1,7 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
 import { css } from '@emotion/core';
+import { zIndex } from 'netlify-cms-ui-default';
 
 const InsertionPoint = props => (
   <div
@@ -8,7 +9,7 @@ const InsertionPoint = props => (
       height: 32px;
       cursor: text;
       position: relative;
-      z-index: 1;
+      z-index: ${zIndex.zIndex1};
       margin-top: -16px;
     `}
     {...props}
diff --git a/packages/netlify-cms-widget-markdown/src/styles.js b/packages/netlify-cms-widget-markdown/src/styles.js
index 9c55e311..686f7cc7 100644
--- a/packages/netlify-cms-widget-markdown/src/styles.js
+++ b/packages/netlify-cms-widget-markdown/src/styles.js
@@ -1,11 +1,12 @@
 import styled from '@emotion/styled';
+import { zIndex } from 'netlify-cms-ui-default';
 
 export const editorStyleVars = {
   stickyDistanceBottom: '100px',
 };
 
 export const EditorControlBar = styled.div`
-  z-index: 200;
+  z-index: ${zIndex.zIndex200};
   position: sticky;
   top: 0;
   margin-bottom: ${editorStyleVars.stickyDistanceBottom};