diff --git a/src-docs/src/views/app_view.js b/src-docs/src/views/app_view.js
index cf33804176ce..e657f7d14e0a 100644
--- a/src-docs/src/views/app_view.js
+++ b/src-docs/src/views/app_view.js
@@ -12,6 +12,7 @@ import {
 } from '../../../src/components';
 
 import { keys } from '../../../src/services';
+import { EuiGlobalReset } from '../../../src/global_styling/reset/global_reset';
 import { GuidePageHeader } from '../components/guide_page/guide_page_header';
 
 import favicon16Prod from '../images/favicon/prod/favicon-16x16.png';
@@ -75,6 +76,7 @@ export class AppView extends Component {
             sizes="96x96"
           />
         </Helmet>
+        <EuiGlobalReset />
         <GuidePageHeader
           onToggleLocale={toggleLocale}
           selectedLocale={locale}
diff --git a/src/global_styling/index.scss b/src/global_styling/index.scss
index e480e5adb92d..21fec3c1f1ca 100644
--- a/src/global_styling/index.scss
+++ b/src/global_styling/index.scss
@@ -13,7 +13,7 @@
 @import 'utility/index';
 
 // The reset file makes use of variables and mixins
-@import 'reset/index';
+// @import 'reset/index';
 
 // Customization of the React Date Picker
 @import 'react_date_picker/index';
diff --git a/src/global_styling/mixins/_helpers.ts b/src/global_styling/mixins/_helpers.ts
index 83138f698043..e4bdd85a150e 100644
--- a/src/global_styling/mixins/_helpers.ts
+++ b/src/global_styling/mixins/_helpers.ts
@@ -55,29 +55,43 @@ export const useInnerBorder = ({
 // Set scroll bar appearance on Chrome (and firefox).
 export const useScrollBar = ({
   thumbColor: _thumbColor,
-  trackBackgroundColor: _trackBackgroundColor,
+  trackBackgroundColor = 'transparent',
+  width = 'thin',
 }: {
   thumbColor?: string;
   trackBackgroundColor?: string;
+  width?: 'thin' | 'thick';
 } = {}) => {
   const {
     euiTheme: { colors, size },
   } = useEuiTheme();
   const thumbColor = _thumbColor || colors.darkShade;
-  const trackBackgroundColor = _trackBackgroundColor || 'transparent';
-  // Firefox's scrollbar coloring cascades, but the sizing does not,
-  // so it's being added to this mixin for allowing support wherever custom scrollbars are
   return `
-    scrollbar-width: thin;
+    // Firefox's scrollbar coloring cascades, but the sizing does not,
+    // so it's being added to this mixin for allowing support wherever custom scrollbars are
+    // sass-lint:disable-block no-misspelled-properties
+    scrollbar-color: ${transparentize(
+      thumbColor,
+      0.5
+    )} ${trackBackgroundColor}; // Firefox support
+
+    ${width === 'thin' ? 'scrollbar-width: thin' : ''};
+
     &::-webkit-scrollbar {
       width: ${size.base};
       height: ${size.base};
     }
+
     &::-webkit-scrollbar-thumb {
       background-color: ${transparentize(thumbColor, 0.5)};
-      border: calc(${size.base} * 0.75) solid ${trackBackgroundColor};
       background-clip: content-box;
+      border-radius: ${size.base};
+ 
+      border: ${
+        width === 'thin' ? `calc(${size.s} * 0.75)` : size.xs
+      } solid ${trackBackgroundColor};
     }
+
     &::-webkit-scrollbar-corner,
     &::-webkit-scrollbar-track {
       background-color: ${trackBackgroundColor};
diff --git a/src/global_styling/mixins/_typography.ts b/src/global_styling/mixins/_typography.ts
new file mode 100644
index 000000000000..1a2fc7553ef0
--- /dev/null
+++ b/src/global_styling/mixins/_typography.ts
@@ -0,0 +1,30 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { useEuiTheme, isDefaultTheme } from '../../services/theme';
+
+// Some mixins that help us deal with browser scaling of text more consistently.
+// Essentially, fonts across eui should scale against the root html element, not
+// against parent inheritance.
+
+// Our base fonts
+
+export const useEuiFont = () => {
+  const {
+    euiTheme: { font, themeName },
+  } = useEuiTheme();
+  const defaultTheme = isDefaultTheme(themeName);
+  return `
+    font-family: ${font.family};
+    font-weight: ${font.weight.regular};
+    letter-spacing: ${defaultTheme ? '-.005em' : 'normal'};
+    -webkit-text-size-adjust: 100%;
+    -ms-text-size-adjust: 100%;
+    font-kerning: normal;
+  `;
+};
diff --git a/src/global_styling/reset/global_reset.tsx b/src/global_styling/reset/global_reset.tsx
new file mode 100644
index 000000000000..4a4d41e72e67
--- /dev/null
+++ b/src/global_styling/reset/global_reset.tsx
@@ -0,0 +1,299 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { Global, css } from '@emotion/react';
+import { useScrollBar } from '../mixins/_helpers';
+import { useEuiFont } from '../mixins/_typography';
+import { shade, tint } from '../../services/color';
+import { useEuiTheme, isDefaultTheme } from '../../services/theme';
+
+export const EuiGlobalReset = () => {
+  const {
+    euiTheme: { base, colors, font, size, themeName },
+    colorMode,
+  } = useEuiTheme();
+  const defaultTheme = isDefaultTheme(themeName);
+  const euiFont = useEuiFont();
+
+  const hacks = css`
+    // Chrome has an issue around RTL languages in SVGs when letter-spacing is negative
+    // https://bugs.chromium.org/p/chromium/issues/detail?id=966480
+    svg text {
+      letter-spacing: normal !important; // sass-lint:disable-line no-important
+    }
+  `;
+
+  const scrollbarStyles = useScrollBar({
+    trackBackgroundColor:
+      colorMode === 'LIGHT'
+        ? shade(colors.body, 0.03)
+        : tint(colors.body, 0.07),
+    width: 'thick',
+  });
+  const scrollbar = css`
+    // Declaring the top level scrollbar colors to match the theme also requires setting the sizes on Chrome
+    // so that it knows to use custom styles. Therefore, we just reuse the same scrollbar mixin with thick size.
+    html {
+      ${scrollbarStyles}
+    }
+  `;
+
+  const reset = css`
+    /**
+     * Adapted from Eric Meyer's reset (http://meyerweb.com/eric/tools/css/reset/, v2.0 | 20110126).
+     *
+     */
+
+    *,
+    *:before,
+    *:after {
+      box-sizing: border-box;
+    }
+
+    html,
+    body,
+    div,
+    span,
+    applet,
+    object,
+    iframe,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p,
+    blockquote,
+    pre,
+    a,
+    abbr,
+    acronym,
+    address,
+    big,
+    cite,
+    code,
+    del,
+    dfn,
+    em,
+    img,
+    ins,
+    kbd,
+    q,
+    s,
+    samp,
+    small,
+    strike,
+    strong,
+    sub,
+    sup,
+    tt,
+    var,
+    b,
+    u,
+    i,
+    center,
+    dl,
+    dt,
+    dd,
+    ol,
+    ul,
+    li,
+    fieldset,
+    form,
+    label,
+    legend,
+    table,
+    caption,
+    tbody,
+    tfoot,
+    thead,
+    tr,
+    th,
+    td,
+    article,
+    aside,
+    canvas,
+    details,
+    embed,
+    figure,
+    figcaption,
+    footer,
+    header,
+    hgroup,
+    menu,
+    nav,
+    output,
+    ruby,
+    section,
+    summary,
+    time,
+    mark,
+    audio,
+    video {
+      margin: 0;
+      padding: 0;
+      border: none;
+      vertical-align: baseline;
+    }
+
+    code,
+    pre,
+    kbd,
+    samp {
+      font-family: ${font.familyCode};
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p {
+      font-family: inherit;
+      font-weight: inherit;
+      font-size: inherit;
+    }
+
+    input,
+    textarea,
+    select,
+    button {
+      font-family: ${font.family};
+    }
+
+    em {
+      font-style: italic;
+    }
+
+    strong {
+      font-weight: ${font.weight.bold};
+    }
+
+    /* HTML5 display-role reset for older browsers */
+    article,
+    aside,
+    details,
+    figcaption,
+    figure,
+    footer,
+    header,
+    hgroup,
+    menu,
+    nav,
+    section {
+      display: block;
+    }
+
+    html {
+      // @include euiFont;
+      ${euiFont}
+      // font-size: $euiFontSize;
+      font-size: ${defaultTheme ? size.base : `${base - 2}px`};
+      color: ${colors.text};
+      height: 100%;
+      background-color: ${colors.body};
+    }
+
+    body {
+      // line-height: $euiBodyLineHeight;
+      line-height: ${defaultTheme ? '1' : '1.142857143'};
+    }
+
+    *:focus {
+      outline: none;
+
+      // Disables border that shows up when tabbing in Firefox.
+      &::-moz-focus-inner {
+        border: none;
+      }
+
+      &:-moz-focusring {
+        outline: none;
+      }
+    }
+
+    a {
+      text-decoration: none;
+      color: ${colors.primary};
+
+      &:hover {
+        text-decoration: none;
+      }
+
+      &:focus {
+        text-decoration: none;
+        outline: none;
+      }
+    }
+
+    a:hover,
+    button,
+    [role='button'] {
+      cursor: pointer;
+    }
+
+    input {
+      margin: 0;
+      padding: 0;
+
+      &:disabled {
+        opacity: 1; /* required on iOS */
+      }
+    }
+
+    button {
+      background: none;
+      border: none;
+      padding: 0;
+      margin: 0;
+      outline: none;
+      font-size: inherit;
+      color: inherit;
+      border-radius: 0;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+
+    ol,
+    ul {
+      list-style: none;
+    }
+
+    blockquote,
+    q {
+      quotes: none;
+    }
+
+    blockquote:before,
+    blockquote:after,
+    q:before,
+    q:after {
+      content: '';
+      content: none;
+    }
+
+    table {
+      border-collapse: collapse;
+      border-spacing: 0;
+    }
+
+    hr {
+      margin: 0;
+    }
+
+    fieldset {
+      min-inline-size: auto;
+    }
+  `;
+  return <Global styles={[reset, hacks, scrollbar]} />;
+};