diff --git a/.size-limit.js b/.size-limit.js
index deb14e53b5ee21..2cff31bb2ed41a 100644
--- a/.size-limit.js
+++ b/.size-limit.js
@@ -27,7 +27,7 @@ module.exports = [
     name: 'The size of all the modules of material-ui.',
     webpack: true,
     path: 'packages/material-ui/build/index.js',
-    limit: '94.9 KB',
+    limit: '94.6 KB',
   },
   {
     name: 'The main bundle of the docs',
diff --git a/packages/material-ui-docs/src/MarkdownElement/MarkdownElement.js b/packages/material-ui-docs/src/MarkdownElement/MarkdownElement.js
index e9921da8c56990..a1c22d6571d52f 100644
--- a/packages/material-ui-docs/src/MarkdownElement/MarkdownElement.js
+++ b/packages/material-ui-docs/src/MarkdownElement/MarkdownElement.js
@@ -83,11 +83,11 @@ const styles = theme => ({
     fontSize: 16,
     color: theme.palette.text.primary,
     '& .anchor-link': {
-      marginTop: -theme.spacing.unit * 12, // Offset for the anchor.
+      marginTop: -96, // Offset for the anchor.
       position: 'absolute',
     },
     '& pre, & pre[class*="language-"]': {
-      margin: `${theme.spacing.unit * 3}px 0`,
+      margin: '24px 0',
       padding: '12px 18px',
       backgroundColor: theme.palette.background.paper,
       borderRadius: theme.shape.borderRadius,
@@ -110,26 +110,26 @@ const styles = theme => ({
     '& h1': {
       ...theme.typography.display2,
       color: theme.palette.text.secondary,
-      margin: `${theme.spacing.unit * 4}px 0 ${theme.spacing.unit * 2}px`,
+      margin: '32px 0 16px',
     },
     '& .description': {
       ...theme.typography.headline,
-      margin: `0 0 ${theme.spacing.unit * 5}px`,
+      margin: '0 0 40px',
     },
     '& h2': {
       ...theme.typography.display1,
       color: theme.palette.text.secondary,
-      margin: `${theme.spacing.unit * 4}px 0 ${theme.spacing.unit * 3}px`,
+      margin: '32px 0 24px',
     },
     '& h3': {
       ...theme.typography.headline,
       color: theme.palette.text.secondary,
-      margin: `${theme.spacing.unit * 4}px 0 ${theme.spacing.unit * 3}px`,
+      margin: '32px 0 24px',
     },
     '& h4': {
       ...theme.typography.title,
       color: theme.palette.text.secondary,
-      margin: `${theme.spacing.unit * 3}px 0 ${theme.spacing.unit * 2}px`,
+      margin: '24px 0 16px',
     },
     '& p, & ul, & ol': {
       lineHeight: 1.6,
@@ -149,7 +149,7 @@ const styles = theme => ({
       '&:hover .anchor-link-style': {
         display: 'inline-block',
         opacity: 1,
-        padding: `0 ${theme.spacing.unit}px`,
+        padding: '0 8px',
         color: theme.palette.text.hint,
         '&:hover': {
           color: theme.palette.text.secondary,
@@ -199,16 +199,14 @@ const styles = theme => ({
     },
     '& td': {
       borderBottom: `1px solid ${theme.palette.divider}`,
-      padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px ${theme.spacing.unit}px ${
-        theme.spacing.unit
-      }px`,
+      padding: '8px 16px 8px 8px',
       textAlign: 'left',
     },
     '& td:last-child': {
-      paddingRight: theme.spacing.unit * 3,
+      paddingRight: 24,
     },
     '& td compact': {
-      paddingRight: theme.spacing.unit * 3,
+      paddingRight: 24,
     },
     '& td code': {
       fontSize: 13,
@@ -218,11 +216,11 @@ const styles = theme => ({
       whiteSpace: 'pre',
       borderBottom: `1px solid ${theme.palette.divider}`,
       fontWeight: theme.typography.fontWeightMedium,
-      padding: `0 ${theme.spacing.unit * 2}px 0 ${theme.spacing.unit}px`,
+      padding: '0 16px 0 8px',
       textAlign: 'left',
     },
     '& th:last-child': {
-      paddingRight: theme.spacing.unit * 3,
+      paddingRight: 24,
     },
     '& tr': {
       height: 48,
@@ -236,8 +234,8 @@ const styles = theme => ({
     '& blockquote': {
       borderLeft: `5px solid ${theme.palette.text.hint}`,
       backgroundColor: theme.palette.background.paper,
-      padding: `${theme.spacing.unit / 2}px ${theme.spacing.unit * 3}px`,
-      margin: `${theme.spacing.unit * 3}px 0`,
+      padding: '4px 24px',
+      margin: '24px 0',
     },
     '& a, & a code': {
       // Style taken from the Link component
diff --git a/packages/material-ui-lab/src/SpeedDial/SpeedDial.js b/packages/material-ui-lab/src/SpeedDial/SpeedDial.js
index 4d9c2e42b4fe68..de495f66786325 100644
--- a/packages/material-ui-lab/src/SpeedDial/SpeedDial.js
+++ b/packages/material-ui-lab/src/SpeedDial/SpeedDial.js
@@ -10,7 +10,7 @@ import { duration } from '@material-ui/core/styles/transitions';
 import Button from '@material-ui/core/Button';
 import { isMuiElement } from '@material-ui/core/utils/reactHelpers';
 
-const styles = theme => ({
+const styles = {
   root: {
     zIndex: 1050,
     display: 'flex',
@@ -19,12 +19,12 @@ const styles = theme => ({
   actions: {
     display: 'flex',
     flexDirection: 'column-reverse', // Display the first action at the bottom.
-    marginBottom: theme.spacing.unit * 2,
+    marginBottom: 16,
   },
   actionsClosed: {
     transition: 'top 0s linear 0.2s',
   },
-});
+};
 
 class SpeedDial extends React.Component {
   state = {
diff --git a/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js b/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js
index 9318d0aab83552..e67655c30017e7 100644
--- a/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js
+++ b/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js
@@ -10,7 +10,7 @@ const styles = theme => ({
     position: 'relative',
   },
   button: {
-    margin: theme.spacing.unit,
+    margin: 8,
     color: theme.palette.text.secondary,
     transition: `${theme.transitions.create('transform', {
       duration: theme.transitions.duration.shorter,
diff --git a/packages/material-ui/src/Avatar/Avatar.js b/packages/material-ui/src/Avatar/Avatar.js
index 34916fd78ae114..60ad3692646a34 100644
--- a/packages/material-ui/src/Avatar/Avatar.js
+++ b/packages/material-ui/src/Avatar/Avatar.js
@@ -10,8 +10,8 @@ export const styles = theme => ({
     alignItems: 'center',
     justifyContent: 'center',
     flexShrink: 0,
-    width: theme.spacing.unit * 5,
-    height: theme.spacing.unit * 5,
+    width: 40,
+    height: 40,
     fontFamily: theme.typography.fontFamily,
     fontSize: theme.typography.pxToRem(20),
     borderRadius: '50%',
diff --git a/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js b/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js
index 3990a9febdd0fc..218c2b814d59d2 100644
--- a/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js
+++ b/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js
@@ -12,7 +12,7 @@ export const styles = theme => ({
     transition: theme.transitions.create(['color', 'padding-top'], {
       duration: theme.transitions.duration.short,
     }),
-    paddingTop: theme.spacing.unit,
+    paddingTop: 8,
     paddingBottom: 10,
     paddingLeft: 12,
     paddingRight: 12,
@@ -21,7 +21,7 @@ export const styles = theme => ({
     color: theme.palette.text.secondary,
     flex: '1',
     '&$iconOnly': {
-      paddingTop: theme.spacing.unit * 2,
+      paddingTop: 16,
     },
     '&$selected': {
       paddingTop: 6,
diff --git a/packages/material-ui/src/CardActions/CardActions.js b/packages/material-ui/src/CardActions/CardActions.js
index f5f9ea312e63f5..25a86d3b546dee 100644
--- a/packages/material-ui/src/CardActions/CardActions.js
+++ b/packages/material-ui/src/CardActions/CardActions.js
@@ -10,13 +10,13 @@ export const styles = theme => ({
     display: 'flex',
     alignItems: 'center',
     boxSizing: 'border-box',
-    padding: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`,
+    padding: '8px 4px',
     [theme.breakpoints.up('sm')]: {
-      padding: `${theme.spacing.unit}px ${theme.spacing.unit * 1.5}px`,
+      padding: '8px 12px',
     },
   },
   action: {
-    margin: `0 ${theme.spacing.unit / 2}px`,
+    margin: '0 4px',
   },
 });
 
diff --git a/packages/material-ui/src/CardContent/CardContent.js b/packages/material-ui/src/CardContent/CardContent.js
index d8c8dc633ec854..aaa0cef89d1839 100644
--- a/packages/material-ui/src/CardContent/CardContent.js
+++ b/packages/material-ui/src/CardContent/CardContent.js
@@ -5,10 +5,10 @@ import withStyles from '../styles/withStyles';
 
 export const styles = theme => ({
   root: theme.mixins.gutters({
-    paddingTop: theme.spacing.unit * 2,
-    paddingBottom: theme.spacing.unit * 2,
+    paddingTop: 16,
+    paddingBottom: 16,
     '&:last-child': {
-      paddingBottom: theme.spacing.unit * 3,
+      paddingBottom: 24,
     },
   }),
 });
diff --git a/packages/material-ui/src/CardHeader/CardHeader.js b/packages/material-ui/src/CardHeader/CardHeader.js
index afb8beb1bc1886..124ba013ac0077 100644
--- a/packages/material-ui/src/CardHeader/CardHeader.js
+++ b/packages/material-ui/src/CardHeader/CardHeader.js
@@ -8,18 +8,18 @@ export const styles = theme => ({
   root: theme.mixins.gutters({
     display: 'flex',
     alignItems: 'center',
-    paddingTop: theme.spacing.unit * 2,
-    paddingBottom: theme.spacing.unit * 2,
+    paddingTop: 16,
+    paddingBottom: 16,
   }),
   avatar: {
     flex: '0 0 auto',
-    marginRight: theme.spacing.unit * 2,
+    marginRight: 16,
   },
   action: {
     flex: '0 0 auto',
     alignSelf: 'flex-start',
-    marginTop: theme.spacing.unit * -1,
-    marginRight: theme.spacing.unit * -2,
+    marginTop: -8,
+    marginRight: -16,
   },
   content: {
     flex: '1 1 auto',
diff --git a/packages/material-ui/src/Dialog/Dialog.js b/packages/material-ui/src/Dialog/Dialog.js
index eed3745a96a89d..40323ba3c3bd91 100644
--- a/packages/material-ui/src/Dialog/Dialog.js
+++ b/packages/material-ui/src/Dialog/Dialog.js
@@ -32,7 +32,7 @@ export const styles = theme => ({
   },
   paperScrollPaper: {
     flex: '0 1 auto',
-    maxHeight: `calc(100% - ${48 * 2}px)`,
+    maxHeight: 'calc(100% - 96px)',
   },
   paperScrollBody: {
     margin: '48px auto',
diff --git a/packages/material-ui/src/DialogActions/DialogActions.js b/packages/material-ui/src/DialogActions/DialogActions.js
index d6dca8f4ee190a..c13b9c792d4ec3 100644
--- a/packages/material-ui/src/DialogActions/DialogActions.js
+++ b/packages/material-ui/src/DialogActions/DialogActions.js
@@ -5,19 +5,19 @@ import withStyles from '../styles/withStyles';
 import { cloneChildrenWithClassName } from '../utils/reactHelpers';
 import '../Button'; // So we don't have any override priority issue.
 
-export const styles = theme => ({
+export const styles = {
   root: {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'flex-end',
     flex: '0 0 auto',
-    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`,
+    margin: '8px 4px',
   },
   action: {
-    margin: `0 ${theme.spacing.unit / 2}px`,
+    margin: '0 4px',
     minWidth: 64,
   },
-});
+};
 
 function DialogActions(props) {
   const { disableActionSpacing, children, classes, className, ...other } = props;
diff --git a/packages/material-ui/src/DialogContent/DialogContent.js b/packages/material-ui/src/DialogContent/DialogContent.js
index c0373857868d78..fc4cdd15f770f6 100644
--- a/packages/material-ui/src/DialogContent/DialogContent.js
+++ b/packages/material-ui/src/DialogContent/DialogContent.js
@@ -3,19 +3,16 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import withStyles from '../styles/withStyles';
 
-export const styles = theme => {
-  const spacing = theme.spacing.unit * 3;
-  return {
-    root: {
-      flex: '1 1 auto',
-      overflowY: 'auto',
-      WebkitOverflowScrolling: 'touch', // Add iOS momentum scrolling.
-      padding: `0 ${spacing}px ${spacing}px ${spacing}px`,
-      '&:first-child': {
-        paddingTop: spacing,
-      },
+export const styles = {
+  root: {
+    flex: '1 1 auto',
+    overflowY: 'auto',
+    WebkitOverflowScrolling: 'touch', // Add iOS momentum scrolling.
+    padding: '0 24px 24px',
+    '&:first-child': {
+      paddingTop: 24,
     },
-  };
+  },
 };
 
 function DialogContent(props) {
diff --git a/packages/material-ui/src/DialogTitle/DialogTitle.js b/packages/material-ui/src/DialogTitle/DialogTitle.js
index a859f6aa89279e..460cd7dd565d5a 100644
--- a/packages/material-ui/src/DialogTitle/DialogTitle.js
+++ b/packages/material-ui/src/DialogTitle/DialogTitle.js
@@ -4,14 +4,13 @@ import classNames from 'classnames';
 import withStyles from '../styles/withStyles';
 import Typography from '../Typography';
 
-export const styles = theme => ({
+export const styles = {
   root: {
     margin: 0,
-    padding: `${theme.spacing.unit * 3}px ${theme.spacing.unit * 3}px \
-      20px ${theme.spacing.unit * 3}px`,
+    padding: '24px 24px 20px',
     flex: '0 0 auto',
   },
-});
+};
 
 function DialogTitle(props) {
   const { children, classes, className, disableTypography, ...other } = props;
diff --git a/packages/material-ui/src/Divider/Divider.js b/packages/material-ui/src/Divider/Divider.js
index 42510a3d4ac802..1ca7d86d5c8724 100644
--- a/packages/material-ui/src/Divider/Divider.js
+++ b/packages/material-ui/src/Divider/Divider.js
@@ -19,7 +19,7 @@ export const styles = theme => ({
     width: '100%',
   },
   inset: {
-    marginLeft: theme.spacing.unit * 9,
+    marginLeft: 72,
   },
   light: {
     backgroundColor: fade(theme.palette.divider, 0.08),
diff --git a/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js b/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js
index ceee29677e2f0b..5af37242cd5c07 100644
--- a/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js
+++ b/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js
@@ -60,7 +60,7 @@ export const styles = theme => {
       },
     },
     expanded: {
-      margin: `${theme.spacing.unit * 2}px 0`,
+      margin: '16px 0',
       '&:first-child': {
         marginTop: 0,
       },
diff --git a/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.js b/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.js
index 676c6e19f5d3ac..d8bc10fc9d60fa 100644
--- a/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.js
+++ b/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.js
@@ -5,17 +5,17 @@ import withStyles from '../styles/withStyles';
 import { cloneChildrenWithClassName } from '../utils/reactHelpers';
 import '../Button'; // So we don't have any override priority issue.
 
-export const styles = theme => ({
+export const styles = {
   root: {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'flex-end',
-    padding: `${theme.spacing.unit * 2}px ${theme.spacing.unit}px`,
+    padding: '16px 8px',
   },
   action: {
-    marginLeft: theme.spacing.unit,
+    marginLeft: 8,
   },
-});
+};
 
 function ExpansionPanelActions(props) {
   const { children, classes, className, ...other } = props;
diff --git a/packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.js b/packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.js
index cbc2f76ad6c4e7..c1179eeeb37a1f 100644
--- a/packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.js
+++ b/packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.js
@@ -3,12 +3,12 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import withStyles from '../styles/withStyles';
 
-export const styles = theme => ({
+export const styles = {
   root: {
     display: 'flex',
-    padding: `${theme.spacing.unit}px ${theme.spacing.unit * 3}px ${theme.spacing.unit * 3}px`,
+    padding: '8px 24px 24px',
   },
-});
+};
 
 function ExpansionPanelDetails(props) {
   const { classes, children, className, ...other } = props;
diff --git a/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.js b/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.js
index 04b7918022640c..73d0ea36dddca8 100644
--- a/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.js
+++ b/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.js
@@ -14,9 +14,9 @@ export const styles = theme => {
   return {
     root: {
       display: 'flex',
-      minHeight: theme.spacing.unit * 6,
+      minHeight: 8 * 6,
       transition: theme.transitions.create(['min-height', 'background-color'], transition),
-      padding: `0 ${theme.spacing.unit * 3}px 0 ${theme.spacing.unit * 3}px`,
+      padding: '0 24px 0 24px',
       '&:hover:not($disabled)': {
         cursor: 'pointer',
       },
@@ -39,7 +39,7 @@ export const styles = theme => {
       transition: theme.transitions.create(['margin'], transition),
       margin: '12px 0',
       '& > :last-child': {
-        paddingRight: theme.spacing.unit * 4,
+        paddingRight: 32,
       },
       '&$expanded': {
         margin: '20px 0',
@@ -48,7 +48,7 @@ export const styles = theme => {
     expandIcon: {
       position: 'absolute',
       top: '50%',
-      right: theme.spacing.unit,
+      right: 8,
       transform: 'translateY(-50%) rotate(0deg)',
       transition: theme.transitions.create('transform', transition),
       '&:hover': {
diff --git a/packages/material-ui/src/FormControl/FormControl.js b/packages/material-ui/src/FormControl/FormControl.js
index a0086ccd5c867e..129d7ed5c6b9f5 100644
--- a/packages/material-ui/src/FormControl/FormControl.js
+++ b/packages/material-ui/src/FormControl/FormControl.js
@@ -6,7 +6,7 @@ import { isFilled, isAdornedStart } from '../Input/Input';
 import { capitalize } from '../utils/helpers';
 import { isMuiElement } from '../utils/reactHelpers';
 
-export const styles = theme => ({
+export const styles = {
   root: {
     display: 'inline-flex',
     flexDirection: 'column',
@@ -18,17 +18,17 @@ export const styles = theme => ({
     border: 0,
   },
   marginNormal: {
-    marginTop: theme.spacing.unit * 2,
-    marginBottom: theme.spacing.unit,
+    marginTop: 16,
+    marginBottom: 8,
   },
   marginDense: {
-    marginTop: theme.spacing.unit,
-    marginBottom: theme.spacing.unit / 2,
+    marginTop: 8,
+    marginBottom: 4,
   },
   fullWidth: {
     width: '100%',
   },
-});
+};
 
 /**
  * Provides context such as filled/focused/error/required for form inputs.
diff --git a/packages/material-ui/src/FormControlLabel/FormControlLabel.js b/packages/material-ui/src/FormControlLabel/FormControlLabel.js
index da5db998b6e7fd..d5ef0bfddbaadc 100644
--- a/packages/material-ui/src/FormControlLabel/FormControlLabel.js
+++ b/packages/material-ui/src/FormControlLabel/FormControlLabel.js
@@ -16,7 +16,7 @@ export const styles = theme => ({
     // Remove grey highlight
     WebkitTapHighlightColor: 'transparent',
     marginLeft: -14,
-    marginRight: theme.spacing.unit * 2, // used for row presentation of radio/checkbox
+    marginRight: 16, // used for row presentation of radio/checkbox
     '&$disabled': {
       cursor: 'default',
     },
diff --git a/packages/material-ui/src/FormHelperText/FormHelperText.js b/packages/material-ui/src/FormHelperText/FormHelperText.js
index 74b740ebb4acb1..8e205d9f02cb37 100644
--- a/packages/material-ui/src/FormHelperText/FormHelperText.js
+++ b/packages/material-ui/src/FormHelperText/FormHelperText.js
@@ -9,7 +9,7 @@ export const styles = theme => ({
     fontFamily: theme.typography.fontFamily,
     fontSize: theme.typography.pxToRem(12),
     textAlign: 'left',
-    marginTop: theme.spacing.unit,
+    marginTop: 8,
     lineHeight: '1em',
     minHeight: '1em',
     margin: 0,
@@ -23,7 +23,7 @@ export const styles = theme => ({
   error: {},
   disabled: {},
   marginDense: {
-    marginTop: theme.spacing.unit / 2,
+    marginTop: 4,
   },
 });
 
diff --git a/packages/material-ui/src/Input/Input.js b/packages/material-ui/src/Input/Input.js
index bf11e28cc5bd21..b3389ffcf309e6 100644
--- a/packages/material-ui/src/Input/Input.js
+++ b/packages/material-ui/src/Input/Input.js
@@ -71,7 +71,7 @@ export const styles = theme => {
     },
     formControl: {
       'label + &': {
-        marginTop: theme.spacing.unit * 2,
+        marginTop: 16,
       },
     },
     focused: {},
@@ -121,7 +121,7 @@ export const styles = theme => {
     },
     error: {},
     multiline: {
-      padding: `${theme.spacing.unit - 2}px 0 ${theme.spacing.unit - 1}px`,
+      padding: `${8 - 2}px 0 ${8 - 1}px`,
     },
     fullWidth: {
       width: '100%',
@@ -129,7 +129,7 @@ export const styles = theme => {
     input: {
       font: 'inherit',
       color: 'currentColor',
-      padding: `${theme.spacing.unit - 2}px 0 ${theme.spacing.unit - 1}px`,
+      padding: `${8 - 2}px 0 ${8 - 1}px`,
       border: 0,
       boxSizing: 'content-box',
       verticalAlign: 'middle',
@@ -172,7 +172,7 @@ export const styles = theme => {
       },
     },
     inputMarginDense: {
-      paddingTop: theme.spacing.unit / 2 - 1,
+      paddingTop: 4 - 1,
     },
     inputMultiline: {
       resize: 'none',
diff --git a/packages/material-ui/src/InputAdornment/InputAdornment.js b/packages/material-ui/src/InputAdornment/InputAdornment.js
index 66f45d43751cad..51c3875149d886 100644
--- a/packages/material-ui/src/InputAdornment/InputAdornment.js
+++ b/packages/material-ui/src/InputAdornment/InputAdornment.js
@@ -4,19 +4,19 @@ import classNames from 'classnames';
 import Typography from '../Typography';
 import withStyles from '../styles/withStyles';
 
-export const styles = theme => ({
+export const styles = {
   root: {
     display: 'flex',
     maxHeight: '2em',
     alignItems: 'center',
   },
   positionStart: {
-    marginRight: theme.spacing.unit,
+    marginRight: 8,
   },
   positionEnd: {
-    marginLeft: theme.spacing.unit,
+    marginLeft: 8,
   },
-});
+};
 
 function InputAdornment(props) {
   const {
diff --git a/packages/material-ui/src/InputLabel/InputLabel.js b/packages/material-ui/src/InputLabel/InputLabel.js
index e0169b95b7ce82..bf9562b26da1d2 100644
--- a/packages/material-ui/src/InputLabel/InputLabel.js
+++ b/packages/material-ui/src/InputLabel/InputLabel.js
@@ -15,11 +15,11 @@ export const styles = theme => ({
     left: 0,
     top: 0,
     // slight alteration to spec spacing to match visual spec result
-    transform: `translate(0, ${theme.spacing.unit * 3}px) scale(1)`,
+    transform: 'translate(0, 24px) scale(1)',
   },
   marginDense: {
     // Compensation for the `Input.inputDense` style.
-    transform: `translate(0, ${theme.spacing.unit * 2.5 + 1}px) scale(1)`,
+    transform: 'translate(0, 21px) scale(1)',
   },
   shrink: {
     transform: 'translate(0, 1.5px) scale(0.75)',
diff --git a/packages/material-ui/src/List/List.js b/packages/material-ui/src/List/List.js
index 6362cab1cac991..d5ed9b6e8d16d4 100644
--- a/packages/material-ui/src/List/List.js
+++ b/packages/material-ui/src/List/List.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import withStyles from '../styles/withStyles';
 
-export const styles = theme => ({
+export const styles = {
   root: {
     listStyle: 'none',
     margin: 0,
@@ -11,17 +11,17 @@ export const styles = theme => ({
     position: 'relative',
   },
   padding: {
-    paddingTop: theme.spacing.unit,
-    paddingBottom: theme.spacing.unit,
+    paddingTop: 8,
+    paddingBottom: 8,
   },
   dense: {
-    paddingTop: theme.spacing.unit / 2,
-    paddingBottom: theme.spacing.unit / 2,
+    paddingTop: 4,
+    paddingBottom: 4,
   },
   subheader: {
     paddingTop: 0,
   },
-});
+};
 
 class List extends React.Component {
   getChildContext() {
diff --git a/packages/material-ui/src/ListItem/ListItem.js b/packages/material-ui/src/ListItem/ListItem.js
index 0a2fcb3377d693..8bcdba97908452 100644
--- a/packages/material-ui/src/ListItem/ListItem.js
+++ b/packages/material-ui/src/ListItem/ListItem.js
@@ -27,8 +27,8 @@ export const styles = theme => ({
     paddingBottom: 12,
   },
   dense: {
-    paddingTop: theme.spacing.unit,
-    paddingBottom: theme.spacing.unit,
+    paddingTop: 8,
+    paddingBottom: 8,
   },
   disabled: {
     opacity: 0.5,
@@ -54,7 +54,7 @@ export const styles = theme => ({
   secondaryAction: {
     // Add some space to avoid collision as `ListItemSecondaryAction`
     // is absolutely positionned.
-    paddingRight: theme.spacing.unit * 4,
+    paddingRight: 32,
   },
 });
 
diff --git a/packages/material-ui/src/ListItemIcon/ListItemIcon.js b/packages/material-ui/src/ListItemIcon/ListItemIcon.js
index f168f88cbb1fda..043568b5769bc6 100644
--- a/packages/material-ui/src/ListItemIcon/ListItemIcon.js
+++ b/packages/material-ui/src/ListItemIcon/ListItemIcon.js
@@ -5,7 +5,7 @@ import withStyles from '../styles/withStyles';
 
 export const styles = theme => ({
   root: {
-    marginRight: theme.spacing.unit * 2,
+    marginRight: 16,
     color: theme.palette.action.active,
     flexShrink: 0,
   },
diff --git a/packages/material-ui/src/ListItemText/ListItemText.js b/packages/material-ui/src/ListItemText/ListItemText.js
index ecdba460a5f191..a445dc141c3306 100644
--- a/packages/material-ui/src/ListItemText/ListItemText.js
+++ b/packages/material-ui/src/ListItemText/ListItemText.js
@@ -8,14 +8,14 @@ export const styles = theme => ({
   root: {
     flex: '1 1 auto',
     minWidth: 0,
-    padding: `0 ${theme.spacing.unit * 2}px`,
+    padding: '0 16px',
     '&:first-child': {
       paddingLeft: 0,
     },
   },
   inset: {
     '&:first-child': {
-      paddingLeft: theme.spacing.unit * 7,
+      paddingLeft: 56,
     },
   },
   dense: {
diff --git a/packages/material-ui/src/ListSubheader/ListSubheader.js b/packages/material-ui/src/ListSubheader/ListSubheader.js
index 01943f012d62c3..549f3ef50ab225 100644
--- a/packages/material-ui/src/ListSubheader/ListSubheader.js
+++ b/packages/material-ui/src/ListSubheader/ListSubheader.js
@@ -21,7 +21,7 @@ export const styles = theme => ({
     color: 'inherit',
   },
   inset: {
-    paddingLeft: theme.spacing.unit * 9,
+    paddingLeft: 72,
   },
   sticky: {
     position: 'sticky',
diff --git a/packages/material-ui/src/MenuItem/MenuItem.js b/packages/material-ui/src/MenuItem/MenuItem.js
index 2f8aebf5e7eb12..70b3e626969e5e 100644
--- a/packages/material-ui/src/MenuItem/MenuItem.js
+++ b/packages/material-ui/src/MenuItem/MenuItem.js
@@ -9,14 +9,14 @@ import ListItem from '../ListItem';
 export const styles = theme => ({
   root: {
     ...theme.typography.subheading,
-    height: theme.spacing.unit * 3,
+    height: 24,
     boxSizing: 'content-box',
     width: 'auto',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
-    paddingLeft: theme.spacing.unit * 2,
-    paddingRight: theme.spacing.unit * 2,
+    paddingLeft: 16,
+    paddingRight: 16,
     '&$selected': {
       backgroundColor: theme.palette.action.selected,
     },
diff --git a/packages/material-ui/src/MobileStepper/MobileStepper.js b/packages/material-ui/src/MobileStepper/MobileStepper.js
index ad8bca60a0d974..2ed4f6dcb58d96 100644
--- a/packages/material-ui/src/MobileStepper/MobileStepper.js
+++ b/packages/material-ui/src/MobileStepper/MobileStepper.js
@@ -15,7 +15,7 @@ export const styles = theme => ({
     justifyContent: 'space-between',
     alignItems: 'center',
     background: theme.palette.background.default,
-    padding: theme.spacing.unit,
+    padding: 8,
   },
   positionBottom: {
     position: 'fixed',
@@ -39,8 +39,8 @@ export const styles = theme => ({
   dot: {
     backgroundColor: theme.palette.action.disabled,
     borderRadius: '50%',
-    width: theme.spacing.unit,
-    height: theme.spacing.unit,
+    width: 8,
+    height: 8,
     margin: '0 2px',
   },
   dotActive: {
diff --git a/packages/material-ui/src/NativeSelect/NativeSelect.js b/packages/material-ui/src/NativeSelect/NativeSelect.js
index 18c0838118050c..e116f9a182603b 100644
--- a/packages/material-ui/src/NativeSelect/NativeSelect.js
+++ b/packages/material-ui/src/NativeSelect/NativeSelect.js
@@ -18,9 +18,9 @@ export const styles = theme => ({
     // When interacting quickly, the text can end up selected.
     // Native select can't be selected either.
     userSelect: 'none',
-    paddingRight: theme.spacing.unit * 4,
-    width: `calc(100% - ${theme.spacing.unit * 4}px)`,
-    minWidth: theme.spacing.unit * 2, // So it doesn't collapse.
+    paddingRight: 32,
+    width: 'calc(100% - 32px)',
+    minWidth: 16, // So it doesn't collapse.
     cursor: 'pointer',
     '&:focus': {
       // Show that it's not an text input
diff --git a/packages/material-ui/src/Snackbar/Snackbar.js b/packages/material-ui/src/Snackbar/Snackbar.js
index 89aeef5aba3775..d2f7b9ef6a9f0e 100644
--- a/packages/material-ui/src/Snackbar/Snackbar.js
+++ b/packages/material-ui/src/Snackbar/Snackbar.js
@@ -10,7 +10,7 @@ import Slide from '../Slide';
 import SnackbarContent from '../SnackbarContent';
 
 export const styles = theme => {
-  const gutter = theme.spacing.unit * 3;
+  const gutter = 24;
   const top = { top: 0 };
   const bottom = { bottom: 0 };
   const right = { justifyContent: 'flex-end' };
diff --git a/packages/material-ui/src/SnackbarContent/SnackbarContent.js b/packages/material-ui/src/SnackbarContent/SnackbarContent.js
index 6c5b7f766ba583..b4895d99ecc509 100644
--- a/packages/material-ui/src/SnackbarContent/SnackbarContent.js
+++ b/packages/material-ui/src/SnackbarContent/SnackbarContent.js
@@ -20,7 +20,7 @@ export const styles = theme => {
       display: 'flex',
       alignItems: 'center',
       flexWrap: 'wrap',
-      padding: `6px ${theme.spacing.unit * 3}px`,
+      padding: '6px 24px',
       [theme.breakpoints.up('md')]: {
         minWidth: 288,
         maxWidth: 568,
@@ -31,14 +31,14 @@ export const styles = theme => {
       },
     },
     message: {
-      padding: `${theme.spacing.unit}px 0`,
+      padding: '8px 0',
     },
     action: {
       display: 'flex',
       alignItems: 'center',
       marginLeft: 'auto',
-      paddingLeft: theme.spacing.unit * 3,
-      marginRight: -theme.spacing.unit,
+      paddingLeft: 24,
+      marginRight: -8,
     },
   };
 };
diff --git a/packages/material-ui/src/Step/Step.js b/packages/material-ui/src/Step/Step.js
index 4b36656c0df491..83578980e0e622 100644
--- a/packages/material-ui/src/Step/Step.js
+++ b/packages/material-ui/src/Step/Step.js
@@ -4,11 +4,11 @@ import classNames from 'classnames';
 import warning from 'warning';
 import withStyles from '../styles/withStyles';
 
-export const styles = theme => ({
+export const styles = {
   root: {},
   horizontal: {
-    paddingLeft: theme.spacing.unit,
-    paddingRight: theme.spacing.unit,
+    paddingLeft: 8,
+    paddingRight: 8,
     '&:first-child': {
       paddingLeft: 0,
     },
@@ -21,7 +21,7 @@ export const styles = theme => ({
     flex: 1,
     position: 'relative',
   },
-});
+};
 
 function Step(props) {
   const {
diff --git a/packages/material-ui/src/StepButton/StepButton.js b/packages/material-ui/src/StepButton/StepButton.js
index 5200d4a9ddd1ec..c29590a6a6a26d 100644
--- a/packages/material-ui/src/StepButton/StepButton.js
+++ b/packages/material-ui/src/StepButton/StepButton.js
@@ -8,11 +8,11 @@ import ButtonBase from '../ButtonBase';
 import StepLabel from '../StepLabel';
 import { isMuiElement } from '../utils/reactHelpers';
 
-export const styles = theme => ({
+export const styles = {
   root: {
     width: '100%',
-    padding: `${theme.spacing.unit * 3}px ${theme.spacing.unit * 2}px`,
-    margin: `${-theme.spacing.unit * 3}px ${-theme.spacing.unit * 2}px`,
+    padding: '24px 16px',
+    margin: '-24px -16px',
     boxSizing: 'content-box',
   },
   vertical: {
@@ -21,7 +21,7 @@ export const styles = theme => ({
   touchRipple: {
     color: 'rgba(0, 0, 0, 0.3)',
   },
-});
+};
 
 function StepButton(props) {
   const {
diff --git a/packages/material-ui/src/StepConnector/StepConnector.js b/packages/material-ui/src/StepConnector/StepConnector.js
index 8de7b2860b6a5d..9d23078cec6ddf 100644
--- a/packages/material-ui/src/StepConnector/StepConnector.js
+++ b/packages/material-ui/src/StepConnector/StepConnector.js
@@ -10,11 +10,11 @@ export const styles = theme => ({
   horizontal: {},
   vertical: {
     marginLeft: 12, // half icon
-    padding: `0 0 ${theme.spacing.unit}px`,
+    padding: '0 0 8px',
   },
   alternativeLabel: {
     position: 'absolute',
-    top: theme.spacing.unit + 4,
+    top: 8 + 4,
     left: 'calc(50% + 20px)',
     right: 'calc(-50% + 20px)',
   },
@@ -29,7 +29,7 @@ export const styles = theme => ({
   lineVertical: {
     borderLeftStyle: 'solid',
     borderLeftWidth: 1,
-    minHeight: theme.spacing.unit * 3,
+    minHeight: 24,
   },
 });
 
diff --git a/packages/material-ui/src/StepContent/StepContent.js b/packages/material-ui/src/StepContent/StepContent.js
index 3356b2e8f21d95..34fa520389f8b6 100644
--- a/packages/material-ui/src/StepContent/StepContent.js
+++ b/packages/material-ui/src/StepContent/StepContent.js
@@ -7,10 +7,10 @@ import withStyles from '../styles/withStyles';
 
 export const styles = theme => ({
   root: {
-    marginTop: theme.spacing.unit,
+    marginTop: 8,
     marginLeft: 12, // half icon
-    paddingLeft: theme.spacing.unit + 12, // margin + half icon
-    paddingRight: theme.spacing.unit,
+    paddingLeft: 8 + 12, // margin + half icon
+    paddingRight: 8,
     borderLeft: `1px solid ${
       theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]
     }`,
diff --git a/packages/material-ui/src/StepLabel/StepLabel.js b/packages/material-ui/src/StepLabel/StepLabel.js
index 123803b50f6b3e..79e0954ee53c3d 100644
--- a/packages/material-ui/src/StepLabel/StepLabel.js
+++ b/packages/material-ui/src/StepLabel/StepLabel.js
@@ -35,14 +35,14 @@ export const styles = theme => ({
     },
     '&$alternativeLabel': {
       textAlign: 'center',
-      marginTop: theme.spacing.unit * 2,
+      marginTop: 16,
     },
     '&$error': {
       color: theme.palette.error.main,
     },
   },
   iconContainer: {
-    paddingRight: theme.spacing.unit,
+    paddingRight: 8,
     '&$alternativeLabel': {
       paddingRight: 0,
     },
diff --git a/packages/material-ui/src/Stepper/Stepper.js b/packages/material-ui/src/Stepper/Stepper.js
index 090d0a99d6bf2a..731cebd0569957 100644
--- a/packages/material-ui/src/Stepper/Stepper.js
+++ b/packages/material-ui/src/Stepper/Stepper.js
@@ -7,10 +7,10 @@ import withStyles from '../styles/withStyles';
 import Paper from '../Paper';
 import StepConnector from '../StepConnector';
 
-export const styles = theme => ({
+export const styles = {
   root: {
     display: 'flex',
-    padding: theme.spacing.unit * 3,
+    padding: 24,
   },
   horizontal: {
     flexDirection: 'row',
@@ -22,7 +22,7 @@ export const styles = theme => ({
   alternativeLabel: {
     alignItems: 'flex-start',
   },
-});
+};
 
 function Stepper(props) {
   const {
diff --git a/packages/material-ui/src/Tab/Tab.js b/packages/material-ui/src/Tab/Tab.js
index bdea8c4d5511d3..cf9ef41070f2f1 100644
--- a/packages/material-ui/src/Tab/Tab.js
+++ b/packages/material-ui/src/Tab/Tab.js
@@ -72,8 +72,8 @@ export const styles = theme => ({
     paddingLeft: 12,
     paddingRight: 12,
     [theme.breakpoints.up('md')]: {
-      paddingLeft: theme.spacing.unit * 3,
-      paddingRight: theme.spacing.unit * 3,
+      paddingLeft: 24,
+      paddingRight: 24,
     },
   },
   label: {
diff --git a/packages/material-ui/src/TableCell/TableCell.js b/packages/material-ui/src/TableCell/TableCell.js
index e3a7701d0e10b2..52bbf6989c5d49 100644
--- a/packages/material-ui/src/TableCell/TableCell.js
+++ b/packages/material-ui/src/TableCell/TableCell.js
@@ -18,10 +18,9 @@ export const styles = theme => ({
         : darken(fade(theme.palette.divider, 1), 0.8)
     }`,
     textAlign: 'left',
-    padding: `${theme.spacing.unit / 2}px ${theme.spacing.unit * 7}px ${theme.spacing.unit /
-      2}px ${theme.spacing.unit * 3}px`,
+    padding: '4px 56px 4px 24px',
     '&:last-child': {
-      paddingRight: theme.spacing.unit * 3,
+      paddingRight: 24,
     },
   },
   head: {
@@ -44,7 +43,7 @@ export const styles = theme => ({
     flexDirection: 'row-reverse', // can be dynamically inherited at runtime by contents
   },
   paddingDense: {
-    paddingRight: theme.spacing.unit * 3,
+    paddingRight: 24,
   },
   paddingCheckbox: {
     padding: '0 12px',
diff --git a/packages/material-ui/src/TablePagination/TablePagination.js b/packages/material-ui/src/TablePagination/TablePagination.js
index 122f441a1fa980..f366f9d24c37a2 100644
--- a/packages/material-ui/src/TablePagination/TablePagination.js
+++ b/packages/material-ui/src/TablePagination/TablePagination.js
@@ -36,13 +36,13 @@ export const styles = theme => ({
     flexShrink: 0,
   },
   selectRoot: {
-    marginRight: theme.spacing.unit * 4,
-    marginLeft: theme.spacing.unit,
+    marginRight: 32,
+    marginLeft: 8,
     color: theme.palette.text.secondary,
   },
   select: {
-    paddingLeft: theme.spacing.unit,
-    paddingRight: theme.spacing.unit * 2,
+    paddingLeft: 8,
+    paddingRight: 16,
   },
   selectIcon: {
     top: 1,
@@ -50,7 +50,7 @@ export const styles = theme => ({
   actions: {
     flexShrink: 0,
     color: theme.palette.text.secondary,
-    marginLeft: theme.spacing.unit * 2.5,
+    marginLeft: 20,
   },
 });
 
diff --git a/packages/material-ui/src/Tabs/TabScrollButton.js b/packages/material-ui/src/Tabs/TabScrollButton.js
index 3a22746e505446..d7a1c6438a0e55 100644
--- a/packages/material-ui/src/Tabs/TabScrollButton.js
+++ b/packages/material-ui/src/Tabs/TabScrollButton.js
@@ -6,12 +6,12 @@ import KeyboardArrowRight from '../internal/svg-icons/KeyboardArrowRight';
 import withStyles from '../styles/withStyles';
 import ButtonBase from '../ButtonBase';
 
-export const styles = theme => ({
+export const styles = {
   root: {
     color: 'inherit',
-    flex: `0 0 ${theme.spacing.unit * 7}px`,
+    flex: '0 0 56px',
   },
-});
+};
 
 /**
  * @ignore - internal component.
diff --git a/packages/material-ui/src/Tooltip/Tooltip.js b/packages/material-ui/src/Tooltip/Tooltip.js
index ddb782e941e8b5..532602e467020f 100644
--- a/packages/material-ui/src/Tooltip/Tooltip.js
+++ b/packages/material-ui/src/Tooltip/Tooltip.js
@@ -34,7 +34,7 @@ export const styles = theme => ({
       easing: theme.transitions.easing.easeIn,
     }),
     minHeight: 0,
-    padding: `${theme.spacing.unit / 2}px ${theme.spacing.unit}px`,
+    padding: '4px 8px',
     fontSize: theme.typography.pxToRem(10),
     lineHeight: `${theme.typography.round(14 / 10)}em`,
     '&$open': {
@@ -47,34 +47,34 @@ export const styles = theme => ({
     },
   },
   touch: {
-    padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`,
+    padding: '8px 16px',
     fontSize: theme.typography.pxToRem(14),
     lineHeight: `${theme.typography.round(16 / 14)}em`,
   },
   tooltipPlacementLeft: {
     transformOrigin: 'right center',
-    margin: `0 ${theme.spacing.unit * 3}px`,
+    margin: '0 24px',
     [theme.breakpoints.up('sm')]: {
       margin: '0 14px',
     },
   },
   tooltipPlacementRight: {
     transformOrigin: 'left center',
-    margin: `0 ${theme.spacing.unit * 3}px`,
+    margin: '0 24px',
     [theme.breakpoints.up('sm')]: {
       margin: '0 14px',
     },
   },
   tooltipPlacementTop: {
     transformOrigin: 'center bottom',
-    margin: `${theme.spacing.unit * 3}px 0`,
+    margin: '24px 0',
     [theme.breakpoints.up('sm')]: {
       margin: '14px 0',
     },
   },
   tooltipPlacementBottom: {
     transformOrigin: 'center top',
-    margin: `${theme.spacing.unit * 3}px 0`,
+    margin: '24px 0',
     [theme.breakpoints.up('sm')]: {
       margin: '14px 0',
     },
diff --git a/packages/material-ui/src/Typography/Typography.js b/packages/material-ui/src/Typography/Typography.js
index 1153d99d73c809..427123552be9e9 100644
--- a/packages/material-ui/src/Typography/Typography.js
+++ b/packages/material-ui/src/Typography/Typography.js
@@ -41,7 +41,7 @@ export const styles = theme => ({
     marginBottom: '0.35em',
   },
   paragraph: {
-    marginBottom: theme.spacing.unit * 2,
+    marginBottom: 16,
   },
   colorInherit: {
     color: 'inherit',