diff --git a/docs/pages/system/global-classes.js b/docs/pages/system/global-classes.js
new file mode 100644
index 00000000000000..85e2ceb1382cb6
--- /dev/null
+++ b/docs/pages/system/global-classes.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
+
+const pageFilename = 'system/global-classes';
+const requireDemo = require.context('docs/src/pages/system/global-classes', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
+  '!raw-loader!../../src/pages/system/global-classes',
+  false,
+  /\.(js|md|tsx)$/,
+);
+
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+}
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/src/pages.js b/docs/src/pages.js
index aa9f3c94278f81..4c39cb12490055 100644
--- a/docs/src/pages.js
+++ b/docs/src/pages.js
@@ -153,6 +153,7 @@ const pages = [
       { pathname: '/system/screen-readers' },
       { pathname: '/system/typography' },
       { pathname: '/system/api', title: 'API' },
+      { pathname: '/system/global-classes' },
     ],
   },
   {
diff --git a/docs/src/pages/system/global-classes/Basics.js b/docs/src/pages/system/global-classes/Basics.js
new file mode 100644
index 00000000000000..872991a9a437ef
--- /dev/null
+++ b/docs/src/pages/system/global-classes/Basics.js
@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { GlobalCss } from '@material-ui/system';
+import { makeStyles } from '@material-ui/styles';
+
+const useStyles = makeStyles({
+  debug: {
+    '& *': {
+      border: '1px dashed grey',
+    },
+  },
+});
+
+export default function App() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.debug}>
+      <GlobalCss />
+      <div className="m-2 p-1-5">
+        <div className="m-4 p-2" />
+      </div>
+    </div>
+  );
+}
diff --git a/docs/src/pages/system/global-classes/Basics.tsx b/docs/src/pages/system/global-classes/Basics.tsx
new file mode 100644
index 00000000000000..872991a9a437ef
--- /dev/null
+++ b/docs/src/pages/system/global-classes/Basics.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { GlobalCss } from '@material-ui/system';
+import { makeStyles } from '@material-ui/styles';
+
+const useStyles = makeStyles({
+  debug: {
+    '& *': {
+      border: '1px dashed grey',
+    },
+  },
+});
+
+export default function App() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.debug}>
+      <GlobalCss />
+      <div className="m-2 p-1-5">
+        <div className="m-4 p-2" />
+      </div>
+    </div>
+  );
+}
diff --git a/docs/src/pages/system/global-classes/ColorsExample.js b/docs/src/pages/system/global-classes/ColorsExample.js
new file mode 100644
index 00000000000000..47ddc9080130e6
--- /dev/null
+++ b/docs/src/pages/system/global-classes/ColorsExample.js
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import Button from '@material-ui/core/Button';
+
+export default function App() {
+  return (
+    <div>
+      <Button
+        variant="contained"
+        className="m-1 bg-warning-main hover:bg-warning-dark text-warning-contrastText"
+      >
+        Warning
+      </Button>
+      <Button
+        variant="contained"
+        className="m-1 bg-error-main hover:bg-error-dark text-error-contrastText"
+      >
+        Error
+      </Button>
+      <Button
+        variant="contained"
+        className="m-1 bg-success-main hover:bg-success-dark text-success-contrastText"
+      >
+        Success
+      </Button>
+      <Button
+        variant="contained"
+        className="m-1 sm:bg-success-main sm:hover:bg-success-dark sm:text-success-contrastText md:bg-error-main md:hover:bg-error-dark md:text-error-contrastText lg:bg-warning-main lg:hover:bg-warning-dark lg:text-warning-contrastText"
+      >
+        Media
+      </Button>
+    </div>
+  );
+}
diff --git a/docs/src/pages/system/global-classes/ColorsExample.tsx b/docs/src/pages/system/global-classes/ColorsExample.tsx
new file mode 100644
index 00000000000000..47ddc9080130e6
--- /dev/null
+++ b/docs/src/pages/system/global-classes/ColorsExample.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import Button from '@material-ui/core/Button';
+
+export default function App() {
+  return (
+    <div>
+      <Button
+        variant="contained"
+        className="m-1 bg-warning-main hover:bg-warning-dark text-warning-contrastText"
+      >
+        Warning
+      </Button>
+      <Button
+        variant="contained"
+        className="m-1 bg-error-main hover:bg-error-dark text-error-contrastText"
+      >
+        Error
+      </Button>
+      <Button
+        variant="contained"
+        className="m-1 bg-success-main hover:bg-success-dark text-success-contrastText"
+      >
+        Success
+      </Button>
+      <Button
+        variant="contained"
+        className="m-1 sm:bg-success-main sm:hover:bg-success-dark sm:text-success-contrastText md:bg-error-main md:hover:bg-error-dark md:text-error-contrastText lg:bg-warning-main lg:hover:bg-warning-dark lg:text-warning-contrastText"
+      >
+        Media
+      </Button>
+    </div>
+  );
+}
diff --git a/docs/src/pages/system/global-classes/DisplaysExample.js b/docs/src/pages/system/global-classes/DisplaysExample.js
new file mode 100644
index 00000000000000..8e810b1cd998d8
--- /dev/null
+++ b/docs/src/pages/system/global-classes/DisplaysExample.js
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { makeStyles } from '@material-ui/styles';
+
+const useStyles = makeStyles({
+  debug: {
+    '& *': {
+      border: '1px dashed grey',
+    },
+  },
+});
+
+export default function App() {
+  const classes = useStyles();
+  return (
+    <div className={classes.debug}>
+      <div className="d-inline mr-1 p-2">div.d-inline</div>
+      <div className="d-inline print:d-none p-2">Hidden when printed</div>
+    </div>
+  );
+}
diff --git a/docs/src/pages/system/global-classes/DisplaysExample.tsx b/docs/src/pages/system/global-classes/DisplaysExample.tsx
new file mode 100644
index 00000000000000..8e810b1cd998d8
--- /dev/null
+++ b/docs/src/pages/system/global-classes/DisplaysExample.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { makeStyles } from '@material-ui/styles';
+
+const useStyles = makeStyles({
+  debug: {
+    '& *': {
+      border: '1px dashed grey',
+    },
+  },
+});
+
+export default function App() {
+  const classes = useStyles();
+  return (
+    <div className={classes.debug}>
+      <div className="d-inline mr-1 p-2">div.d-inline</div>
+      <div className="d-inline print:d-none p-2">Hidden when printed</div>
+    </div>
+  );
+}
diff --git a/docs/src/pages/system/global-classes/ElevationsExample.js b/docs/src/pages/system/global-classes/ElevationsExample.js
new file mode 100644
index 00000000000000..feeb4e436177a3
--- /dev/null
+++ b/docs/src/pages/system/global-classes/ElevationsExample.js
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { makeStyles } from '@material-ui/styles';
+
+const useStyles = makeStyles({
+  debug: {
+    '& > *': { border: '1px dashed grey' },
+  },
+});
+
+export default function App() {
+  const classes = useStyles();
+  return (
+    <div className={classes.debug}>
+      {Array.from(Array(24).keys()).map((val) => (
+        <div className={`m-2 p-1 elevation-${val}`} key={val}>
+          Elevation {val}
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/docs/src/pages/system/global-classes/ElevationsExample.tsx b/docs/src/pages/system/global-classes/ElevationsExample.tsx
new file mode 100644
index 00000000000000..feeb4e436177a3
--- /dev/null
+++ b/docs/src/pages/system/global-classes/ElevationsExample.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { makeStyles } from '@material-ui/styles';
+
+const useStyles = makeStyles({
+  debug: {
+    '& > *': { border: '1px dashed grey' },
+  },
+});
+
+export default function App() {
+  const classes = useStyles();
+  return (
+    <div className={classes.debug}>
+      {Array.from(Array(24).keys()).map((val) => (
+        <div className={`m-2 p-1 elevation-${val}`} key={val}>
+          Elevation {val}
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/docs/src/pages/system/global-classes/PositionsExample.js b/docs/src/pages/system/global-classes/PositionsExample.js
new file mode 100644
index 00000000000000..cfe3e542abb9d2
--- /dev/null
+++ b/docs/src/pages/system/global-classes/PositionsExample.js
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { makeStyles } from '@material-ui/styles';
+
+const useStyles = makeStyles({
+  root: { width: '100%' },
+});
+
+export default function App() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <div className="position-relative p-4 mb-10">
+        <div className="position-absolute p-2 top-4 left-0 bg-grey-700 text-common-white">
+          position-absolute
+        </div>
+        <div className="position-absolute py-2 px-6 top-9 left-5 zIndex-tooltip bg-primary-light text-common-white">
+          zIndex-tooltip
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/docs/src/pages/system/global-classes/PositionsExample.tsx b/docs/src/pages/system/global-classes/PositionsExample.tsx
new file mode 100644
index 00000000000000..cfe3e542abb9d2
--- /dev/null
+++ b/docs/src/pages/system/global-classes/PositionsExample.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { makeStyles } from '@material-ui/styles';
+
+const useStyles = makeStyles({
+  root: { width: '100%' },
+});
+
+export default function App() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <div className="position-relative p-4 mb-10">
+        <div className="position-absolute p-2 top-4 left-0 bg-grey-700 text-common-white">
+          position-absolute
+        </div>
+        <div className="position-absolute py-2 px-6 top-9 left-5 zIndex-tooltip bg-primary-light text-common-white">
+          zIndex-tooltip
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/docs/src/pages/system/global-classes/SpacingsExample.js b/docs/src/pages/system/global-classes/SpacingsExample.js
new file mode 100644
index 00000000000000..de3025b98a6b61
--- /dev/null
+++ b/docs/src/pages/system/global-classes/SpacingsExample.js
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { makeStyles } from '@material-ui/styles';
+
+const useStyles = makeStyles({
+  debug: {
+    '& *': { border: '1px dashed grey' },
+  },
+});
+
+export default function App() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.debug}>
+      <div className="m-4 p-4">
+        <div className="px-10 py-4" />
+      </div>
+    </div>
+  );
+}
diff --git a/docs/src/pages/system/global-classes/SpacingsExample.tsx b/docs/src/pages/system/global-classes/SpacingsExample.tsx
new file mode 100644
index 00000000000000..de3025b98a6b61
--- /dev/null
+++ b/docs/src/pages/system/global-classes/SpacingsExample.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { makeStyles } from '@material-ui/styles';
+
+const useStyles = makeStyles({
+  debug: {
+    '& *': { border: '1px dashed grey' },
+  },
+});
+
+export default function App() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.debug}>
+      <div className="m-4 p-4">
+        <div className="px-10 py-4" />
+      </div>
+    </div>
+  );
+}
diff --git a/docs/src/pages/system/global-classes/TypographyExample.js b/docs/src/pages/system/global-classes/TypographyExample.js
new file mode 100644
index 00000000000000..bbe82efe42b64e
--- /dev/null
+++ b/docs/src/pages/system/global-classes/TypographyExample.js
@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+export default function App() {
+  return (
+    <div>
+      {[
+        'h1',
+        'h2',
+        'h3',
+        'h4',
+        'h5',
+        'h6',
+        'subtitle1',
+        'subtitle2',
+        'body1',
+        'body2',
+        'button',
+        'caption',
+        'overline',
+      ].map((val) => (
+        <div className={`m-0-5 p-1 typography-${val}`} key={val}>
+          Text {val}
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/docs/src/pages/system/global-classes/TypographyExample.tsx b/docs/src/pages/system/global-classes/TypographyExample.tsx
new file mode 100644
index 00000000000000..bbe82efe42b64e
--- /dev/null
+++ b/docs/src/pages/system/global-classes/TypographyExample.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+export default function App() {
+  return (
+    <div>
+      {[
+        'h1',
+        'h2',
+        'h3',
+        'h4',
+        'h5',
+        'h6',
+        'subtitle1',
+        'subtitle2',
+        'body1',
+        'body2',
+        'button',
+        'caption',
+        'overline',
+      ].map((val) => (
+        <div className={`m-0-5 p-1 typography-${val}`} key={val}>
+          Text {val}
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/docs/src/pages/system/global-classes/global-classes.md b/docs/src/pages/system/global-classes/global-classes.md
new file mode 100644
index 00000000000000..5a0970c035949c
--- /dev/null
+++ b/docs/src/pages/system/global-classes/global-classes.md
@@ -0,0 +1,45 @@
+# Global classes
+
+<p class="description">The global classes available trough the <code>GlobalCss</code> provider allows users to use the system properties consistenlty on all components.</p>
+
+## Basics
+
+You can add the `<GlobalCss />` provider in your application tree and use all utility classes available.
+
+{{"demo": "pages/system/global-classes/Basics.js"}}
+
+## Spacing
+
+You can use the utility `m-{val}` and `p-{val}` to add margins and paddings to your components.
+
+{{"demo": "pages/system/global-classes/SpacingsExample.js"}}
+
+## Colors
+
+You can access all colors available in the palette, for both the background or text in your components.
+
+{{"demo": "pages/system/global-classes/ColorsExample.js"}}
+
+## Typography
+
+You can apply different typography styles in your components using the typography classes.
+
+{{"demo": "pages/system/global-classes/TypographyExample.js"}}
+
+## Elevations
+
+You can use each of the theme's shadows for applying different eleavtion to your components.
+
+{{"demo": "pages/system/global-classes/ElevationsExample.js"}}
+
+## Positions
+
+You can use different positioning on the components, as well as different zIndexs which are available via the theme.
+
+{{"demo": "pages/system/global-classes/PositionsExample.js"}}
+
+## Displays
+
+You can set different values for the display property, as well as specify different display values when the page is printed.
+
+{{"demo": "pages/system/global-classes/DisplaysExample.js"}}
diff --git a/packages/material-ui-system/src/GlobalCss/GlobalCss.d.ts b/packages/material-ui-system/src/GlobalCss/GlobalCss.d.ts
new file mode 100644
index 00000000000000..7a8198f630d1b9
--- /dev/null
+++ b/packages/material-ui-system/src/GlobalCss/GlobalCss.d.ts
@@ -0,0 +1 @@
+export default function GlobalCss(): JSX.Element;
diff --git a/packages/material-ui-system/src/GlobalCss/GlobalCss.js b/packages/material-ui-system/src/GlobalCss/GlobalCss.js
new file mode 100644
index 00000000000000..06ff3f56e0ead4
--- /dev/null
+++ b/packages/material-ui-system/src/GlobalCss/GlobalCss.js
@@ -0,0 +1,25 @@
+import { withStyles } from '@material-ui/styles';
+import spacings from './spacings';
+import colors from './colors';
+import elevations from './elevations';
+import typography from './typography';
+import positions from './positions';
+import displays from './displays';
+
+const GlobalCss = withStyles(
+  (theme) => {
+    return {
+      '@global': {
+        ...spacings(theme),
+        ...colors(theme),
+        ...elevations(theme),
+        ...typography(theme),
+        ...positions(theme),
+        ...displays(theme),
+      },
+    };
+  },
+  { index: 0 },
+)(() => null);
+
+export default GlobalCss;
diff --git a/packages/material-ui-system/src/GlobalCss/colors.js b/packages/material-ui-system/src/GlobalCss/colors.js
new file mode 100644
index 00000000000000..258b78ac4ff35d
--- /dev/null
+++ b/packages/material-ui-system/src/GlobalCss/colors.js
@@ -0,0 +1,22 @@
+import combineWithBreakpoints from './combineWithBreakpoints';
+
+const r = (val, accumulator, colorsSelectors) => {
+  if (typeof val === 'string') {
+    colorsSelectors[`bg-${accumulator}`] = { backgroundColor: val };
+    colorsSelectors[`text-${accumulator}`] = { color: val };
+    colorsSelectors[`hover\\:bg-${accumulator}`] = {
+      '&:hover': { backgroundColor: val },
+    };
+    colorsSelectors[`hover\\:text-${accumulator}`] = { '&:hover': { color: val } };
+  } else if (typeof val === 'object' && val !== null) {
+    Object.keys(val).forEach((key) => {
+      r(val[key], `${accumulator}${accumulator.length > 0 ? '-' : ''}${key}`, colorsSelectors);
+    });
+  }
+};
+
+export default function colors(theme) {
+  const colorsSelectors = {};
+  r(theme.palette, '', colorsSelectors);
+  return combineWithBreakpoints(theme, colorsSelectors);
+}
diff --git a/packages/material-ui-system/src/GlobalCss/combineWithBreakpoints.js b/packages/material-ui-system/src/GlobalCss/combineWithBreakpoints.js
new file mode 100644
index 00000000000000..ca64a1720d6313
--- /dev/null
+++ b/packages/material-ui-system/src/GlobalCss/combineWithBreakpoints.js
@@ -0,0 +1,17 @@
+export default function combineWithBreakpoints(theme, obj) {
+  const result = {};
+
+  theme.breakpoints.keys.forEach((breakpoint) => {
+    Object.keys(obj).forEach((selector) => {
+      result[`.${breakpoint}\\:${selector}`] = {
+        [theme.breakpoints.up(breakpoint)]: obj[selector],
+      };
+    });
+  });
+
+  Object.keys(obj).forEach((selector) => {
+    result[`.${selector}`] = obj[selector];
+  });
+
+  return result;
+}
diff --git a/packages/material-ui-system/src/GlobalCss/displays.js b/packages/material-ui-system/src/GlobalCss/displays.js
new file mode 100644
index 00000000000000..dbbd72b88c5ac8
--- /dev/null
+++ b/packages/material-ui-system/src/GlobalCss/displays.js
@@ -0,0 +1,115 @@
+import combineWithBreakpoints from './combineWithBreakpoints';
+
+const displaysProps = {
+  'd-inline': { display: 'inline' },
+  'd-block': { display: 'block' },
+  'd-contents': { display: 'contents' },
+  'd-flex': { display: 'flex' },
+  'd-grid': { display: 'grid' },
+  'd-inline-block': { display: 'inline-block' },
+  'd-inline-flex': { display: 'inline-flex' },
+  'd-inline-grid': { display: 'inline-grid' },
+  'd-inline-table': { display: 'inline-table' },
+  'd-list-item': { display: 'list-item' },
+  'd-run-in': { display: 'run-in' },
+  'd-table': { display: 'table' },
+  'd-table-caption': { display: 'table-caption' },
+  'd-table-column-group': { display: 'table-column-group' },
+  'd-table-header-group': { display: 'table-header-group' },
+  'd-table-footer-group': { display: 'table-footer-group' },
+  'd-table-row-group': { display: 'table-row-group' },
+  'd-table-cell': { display: 'table-cell' },
+  'd-table-column': { display: 'table-column' },
+  'd-table-row': { display: 'table-row' },
+  'd-none': { display: 'none' },
+  'd-initial': { display: 'initial' },
+  'd-inherit': { display: 'inherit' },
+  'print\\:d-inline': { '@media print': { display: 'inline' } },
+  'print\\:d-block': { '@media print': { display: 'block' } },
+  'print\\:d-contents': { '@media print': { display: 'contents' } },
+  'print\\:d-flex': { '@media print': { display: 'flex' } },
+  'print\\:d-grid': { '@media print': { display: 'grid' } },
+  'print\\:d-inline-block': { '@media print': { display: 'inline-block' } },
+  'print\\:d-inline-flex': { '@media print': { display: 'inline-flex' } },
+  'print\\:d-inline-grid': { '@media print': { display: 'inline-grid' } },
+  'print\\:d-inline-table': { '@media print': { display: 'inline-table' } },
+  'print\\:d-list-item': { '@media print': { display: 'list-item' } },
+  'print\\:d-run-in': { '@media print': { display: 'run-in' } },
+  'print\\:d-table': { '@media print': { display: 'table' } },
+  'print\\:d-table-caption': { '@media print': { display: 'table-caption' } },
+  'print\\:d-table-column-group': {
+    '@media print': { display: 'table-column-group' },
+  },
+  'print\\:d-table-header-group': {
+    '@media print': { display: 'table-header-group' },
+  },
+  'print\\:d-table-footer-group': {
+    '@media print': { display: 'table-footer-group' },
+  },
+  'print\\:d-table-row-group': {
+    '@media print': { display: 'table-row-group' },
+  },
+  'print\\:d-table-cell': { '@media print': { display: 'table-cell' } },
+  'print\\:d-table-column': { '@media print': { display: 'table-column' } },
+  'print\\:d-table-row': { '@media print': { display: 'table-row' } },
+  'print\\:d-none': { '@media print': { display: 'none' } },
+  'print\\:d-initial': { '@media print': { display: 'initial' } },
+  'print\\:d-inherit': { '@media print': { display: 'inherit' } },
+  'd-sr-only': {
+    border: 0,
+    clip: 'rect(0 0 0 0)',
+    height: 1,
+    margin: -1,
+    overflow: 'hidden',
+    padding: 0,
+    position: 'absolute',
+    whiteSpace: 'nowrap',
+    width: 1,
+  },
+};
+
+const overflows = {
+  'overflow-visible': { overflow: 'visible' },
+  'overflow-hidden': { overflow: 'hidden' },
+  'overflow-scroll': { overflow: 'scroll' },
+  'overflow-auto': { overflow: 'auto' },
+  'overflow-initial': { overflow: 'initial' },
+  'overflow-inherit': { overflow: 'inherit' },
+};
+
+const textOverflows = {
+  'text-overflow-clip': { textOverflow: 'clip' },
+  'text-overflow-ellipsis': { textOverflow: 'ellipsis' },
+  'text-overflow-initial': { textOverflow: 'initial' },
+  'text-overflow-inherit': { textOverflow: 'inherit' },
+};
+
+const visibilities = {
+  'v-visible': { visibility: 'visible' },
+  'v-hidden': { visibility: 'hidden' },
+  'v-collapse': { visibility: 'collapse' },
+  'v-initial': { visibility: 'initial' },
+  'v-inherit': { visibility: 'inherit' },
+};
+
+const whiteSpaces = {
+  'ws-normal': { whiteSpace: 'normal' },
+  'ws-nowrap': { whiteSpace: 'nowrap' },
+  'ws-pre': { whiteSpace: 'pre' },
+  'ws-pre-line': { whiteSpace: 'pre-line' },
+  'ws-pre-wrap': { whiteSpace: 'pre-wrap' },
+  'ws-initial': { whiteSpace: 'initial' },
+  'ws-inherit': { whiteSpace: 'inherit' },
+};
+
+export default function displays(theme) {
+  const result = {
+    ...combineWithBreakpoints(theme, displaysProps),
+    ...combineWithBreakpoints(theme, overflows),
+    ...combineWithBreakpoints(theme, textOverflows),
+    ...combineWithBreakpoints(theme, visibilities),
+    ...combineWithBreakpoints(theme, whiteSpaces),
+  };
+
+  return result;
+}
diff --git a/packages/material-ui-system/src/GlobalCss/elevations.js b/packages/material-ui-system/src/GlobalCss/elevations.js
new file mode 100644
index 00000000000000..a6b5d8a44f2435
--- /dev/null
+++ b/packages/material-ui-system/src/GlobalCss/elevations.js
@@ -0,0 +1,11 @@
+import combineWithBreakpoints from './combineWithBreakpoints';
+
+export default function elevations(theme) {
+  const elevationsSelectors = {};
+
+  theme.shadows.forEach((shadow, idx) => {
+    elevationsSelectors[`elevation-${idx}`] = { boxShadow: shadow };
+  });
+
+  return combineWithBreakpoints(theme, elevationsSelectors);
+}
diff --git a/packages/material-ui-system/src/GlobalCss/positions.js b/packages/material-ui-system/src/GlobalCss/positions.js
new file mode 100644
index 00000000000000..fd3c7f73d77fd5
--- /dev/null
+++ b/packages/material-ui-system/src/GlobalCss/positions.js
@@ -0,0 +1,38 @@
+import combineWithBreakpoints from './combineWithBreakpoints';
+
+const values = [0, 0.5, 1, 1.5, 2, 2.5, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];
+
+export default function positions(theme) {
+  const positionsSelectors = {
+    'position-static': { position: 'static' },
+    'position-absolute': { position: 'absolute' },
+    'position-fixed': { position: 'fixed' },
+    'position-relative': { position: 'relative' },
+    'position-sticky': { position: 'sticky' },
+    'position-initial': { position: 'initial' },
+    'position-inherit': { position: 'inherit' },
+  };
+
+  values.forEach((val) => {
+    positionsSelectors[`top-${val.toString().replace('.', '-')}`] = {
+      top: theme.spacing(val),
+    };
+    positionsSelectors[`bottom-${val.toString().replace('.', '-')}`] = {
+      bottom: theme.spacing(val),
+    };
+    positionsSelectors[`right-${val.toString().replace('.', '-')}`] = {
+      right: theme.spacing(val),
+    };
+    positionsSelectors[`left-${val.toString().replace('.', '-')}`] = {
+      left: theme.spacing(val),
+    };
+  });
+
+  Object.keys(theme.zIndex).forEach((key) => {
+    positionsSelectors[`zIndex-${key}`] = {
+      zIndex: `${theme.zIndex[key]}`,
+    };
+  });
+
+  return combineWithBreakpoints(theme, positionsSelectors);
+}
diff --git a/packages/material-ui-system/src/GlobalCss/spacings.js b/packages/material-ui-system/src/GlobalCss/spacings.js
new file mode 100644
index 00000000000000..6fbcb5d87ff359
--- /dev/null
+++ b/packages/material-ui-system/src/GlobalCss/spacings.js
@@ -0,0 +1,44 @@
+import combineWithBreakpoints from './combineWithBreakpoints';
+
+const properties = {
+  m: 'margin',
+  p: 'padding',
+};
+
+const directions = {
+  t: 'Top',
+  r: 'Right',
+  b: 'Bottom',
+  l: 'Left',
+  x: ['Left', 'Right'],
+  y: ['Top', 'Bottom'],
+};
+
+const values = [0, 0.5, 1, 1.5, 2, 2.5, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];
+
+export default function spacings(theme) {
+  const spacingsSelectors = {};
+
+  Object.keys(properties).forEach((property) => {
+    values.forEach((val) => {
+      spacingsSelectors[`${property}-${val.toString().replace('.', '-')}`] = {
+        [`${properties[property]}`]: theme.spacing(val),
+      };
+    });
+
+    Object.keys(directions).forEach((direction) => {
+      values.forEach((val) => {
+        const cssProperties =
+          direction !== 'x' && direction !== 'y' ? [directions[direction]] : directions[direction];
+
+        const cssKey = `${property}${direction}-${val.toString().replace('.', '-')}`;
+        spacingsSelectors[cssKey] = {};
+        cssProperties.forEach((cssProperty) => {
+          spacingsSelectors[cssKey][`${properties[property]}${cssProperty}`] = theme.spacing(val);
+        });
+      });
+    });
+  });
+
+  return combineWithBreakpoints(theme, spacingsSelectors);
+}
diff --git a/packages/material-ui-system/src/GlobalCss/typography.js b/packages/material-ui-system/src/GlobalCss/typography.js
new file mode 100644
index 00000000000000..ed4af977f934b1
--- /dev/null
+++ b/packages/material-ui-system/src/GlobalCss/typography.js
@@ -0,0 +1,13 @@
+import combineWithBreakpoints from './combineWithBreakpoints';
+
+export default function typography(theme) {
+  const typographys = {};
+
+  Object.keys(theme.typography).forEach((key) => {
+    if (typeof theme.typography[key] === 'object') {
+      typographys[`typography-${key}`] = theme.typography[key];
+    }
+  });
+
+  return combineWithBreakpoints(theme, typographys);
+}
diff --git a/packages/material-ui-system/src/index.d.ts b/packages/material-ui-system/src/index.d.ts
index c149cec73d0e57..565e246f441c78 100644
--- a/packages/material-ui-system/src/index.d.ts
+++ b/packages/material-ui-system/src/index.d.ts
@@ -205,3 +205,5 @@ export const visuallyHidden: CSS.Properties;
 
 // utils
 type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
+
+export { default as GlobalCss } from './GlobalCss/GlobalCss';
diff --git a/packages/material-ui-system/src/index.js b/packages/material-ui-system/src/index.js
index 46dce6a29323d7..e8bc0752c3acfa 100644
--- a/packages/material-ui-system/src/index.js
+++ b/packages/material-ui-system/src/index.js
@@ -21,3 +21,4 @@ export { default as style } from './style';
 export { default as typography } from './typography';
 export * from './typography';
 export { default as visuallyHidden } from './visuallyHidden';
+export { default as GlobalCss } from './GlobalCss/GlobalCss';