diff --git a/common/changes/office-ui-fabric-react/magellan-spinButtonConsistentStyles_2018-02-27-22-22.json b/common/changes/office-ui-fabric-react/magellan-spinButtonConsistentStyles_2018-02-27-22-22.json
new file mode 100644
index 0000000000000..fe54983db3851
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/magellan-spinButtonConsistentStyles_2018-02-27-22-22.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "SpinButton: Updated styling to be consistent with Button and TextField",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "law@microsoft.com"
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.styles.ts b/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.styles.ts
index 3bcf63e9f2a39..cca82ee58e199 100644
--- a/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.styles.ts
@@ -36,12 +36,16 @@ export const getArrowButtonStyles = memoizeFunction((
   customSpecificArrowStyles?: Partial<IButtonStyles>,
 ): IButtonStyles => {
 
-  const { palette } = theme;
+  const {
+    semanticColors
+  } = theme;
 
-  const ArrowButtonTextColor = palette.neutralPrimary;
-  const ArrowButtonTextColorPressed = palette.white;
-  const ArrowButtonBackgroundHovered = palette.neutralLight;
-  const ArrowButtonBackgroundPressed = palette.themePrimary;
+  const ArrowButtonTextColor = semanticColors.buttonText;
+  const ArrowButtonTextColorHovered = semanticColors.buttonTextHovered;
+  const ArrowButtonTextColorPressed = semanticColors.buttonTextChecked;
+
+  const ArrowButtonBackgroundHovered = semanticColors.buttonBackgroundHovered;
+  const ArrowButtonBackgroundPressed = semanticColors.buttonBackgroundChecked;
 
   const defaultArrowButtonStyles: IButtonStyles = {
     root: {
@@ -49,17 +53,15 @@ export const getArrowButtonStyles = memoizeFunction((
       display: 'block',
       height: '50%',
       width: '14px',
-      paddingTop: '0',
-      paddingRight: '0',
-      paddingBottom: '0',
-      paddingLeft: '0',
+      padding: '0',
       backgroundColor: 'transparent',
       textAlign: 'center',
       cursor: 'default',
       color: ArrowButtonTextColor
     },
     rootHovered: {
-      backgroundColor: ArrowButtonBackgroundHovered
+      backgroundColor: ArrowButtonBackgroundHovered,
+      color: ArrowButtonTextColorHovered
     },
     rootChecked: {
       backgroundColor: ArrowButtonBackgroundPressed,
@@ -121,12 +123,12 @@ export const getStyles = memoizeFunction((
 ): ISpinButtonStyles => {
   const { fonts, palette, semanticColors } = theme;
 
-  const SpinButtonRootBorderColor = palette.neutralTertiaryAlt;
-  const SpinButtonRootBorderColorHovered = palette.neutralSecondary;
-  const SpinButtonRootBorderColorFocused = palette.themePrimary;
+  const SpinButtonRootBorderColor = semanticColors.inputBorder;
+  const SpinButtonRootBorderColorHovered = semanticColors.inputBorderHovered;
+  const SpinButtonRootBorderColorFocused = semanticColors.inputFocusBorderAlt;
 
-  const SpinButtonTextColorDisabled = palette.neutralTertiaryAlt;
-  const SpinButtonInputTextColor = palette.neutralPrimary;
+  const SpinButtonTextColorDisabled = semanticColors.disabledText;
+  const SpinButtonInputTextColor = semanticColors.bodyText;
   const SpinButtonInputTextColorSelected = palette.white;
   const SpinButtonInputBackgroundColorSelected = palette.themePrimary;
 
@@ -138,10 +140,7 @@ export const getStyles = memoizeFunction((
       fontSize: FontSizes.medium,
       width: '100%',
       minWidth: '86px',
-      paddingTop: '2px',
-      paddingRight: '2px',
-      paddingBottom: '2px',
-      paddingLeft: '2px',
+      padding: '2px',
     },
     labelWrapper: {
       display: 'inline-flex'
@@ -161,11 +160,7 @@ export const getStyles = memoizeFunction((
       marginTop: '10px'
     },
     icon: {
-      paddingTop: '2px',
-      paddingRight: '5px',
-      paddingBottom: '2px',
-      paddingLeft: '5px',
-
+      padding: '2px 5px',
       fontSize: '20px'
     },
     iconDisabled: {
@@ -173,10 +168,7 @@ export const getStyles = memoizeFunction((
     },
     label: {
       pointerEvents: 'none',
-      paddingTop: '2px',
-      paddingRight: '0',
-      paddingBottom: '2px',
-      paddingLeft: '0',
+      padding: '2px 0',
     },
     labelDisabled: {
       cursor: 'default',
@@ -189,7 +181,8 @@ export const getStyles = memoizeFunction((
     },
     spinButtonWrapper: {
       display: 'flex',
-      height: '26px',
+      boxSizing: 'border-box',
+      height: '32px',
       minWidth: '86px',
       borderWidth: '1px',
       borderStyle: 'solid',
@@ -228,10 +221,7 @@ export const getStyles = memoizeFunction((
       fontSize: FontSizes.medium,
       color: SpinButtonInputTextColor,
       height: '100%',
-      paddingTop: '3px',
-      paddingRight: '3px',
-      paddingBottom: '4px',
-      paddingLeft: '4px',
+      padding: '0 12px',
       outline: '0',
       textOverflow: 'ellipsis',
       display: 'block',
@@ -261,10 +251,7 @@ export const getStyles = memoizeFunction((
       float: 'left',
       height: '100%',
       cursor: 'default',
-      paddingTop: '0',
-      paddingRight: '0',
-      paddingBottom: '0',
-      paddingLeft: '0',
+      padding: '0',
       boxSizing: 'border-box'
     },
     arrowButtonsContainerDisabled: _getDisabledStyles(theme),
diff --git a/packages/office-ui-fabric-react/src/components/SpinButton/__snapshots__/SpinButton.test.tsx.snap b/packages/office-ui-fabric-react/src/components/SpinButton/__snapshots__/SpinButton.test.tsx.snap
index a0050221b1b21..00e7e210848b5 100644
--- a/packages/office-ui-fabric-react/src/components/SpinButton/__snapshots__/SpinButton.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/SpinButton/__snapshots__/SpinButton.test.tsx.snap
@@ -57,15 +57,16 @@ exports[`SpinButton renders SpinButton correctly 1`] = `
     className=
 
         {
-          border-color: #c8c8c8;
+          border-color: #a6a6a6;
           border-style: solid;
           border-width: 1px;
+          box-sizing: border-box;
           display: flex;
-          height: 26px;
+          height: 32px;
           min-width: 86px;
         }
         &:hover {
-          border-color: #666666;
+          border-color: #212121;
           outline: 2px dashed transparent;
         }
         @media screen and (-ms-high-contrast: active){&:hover {
@@ -98,10 +99,10 @@ exports[`SpinButton renders SpinButton correctly 1`] = `
             min-width: 72px;
             outline: 0;
             overflow: hidden;
-            padding-bottom: 4px;
-            padding-left: 4px;
-            padding-right: 3px;
-            padding-top: 3px;
+            padding-bottom: 0;
+            padding-left: 12px;
+            padding-right: 12px;
+            padding-top: 0;
             text-overflow: ellipsis;
             user-select: text;
             width: calc(100% - 14px);
@@ -198,11 +199,11 @@ exports[`SpinButton renders SpinButton correctly 1`] = `
             }
             &:hover {
               background-color: #eaeaea;
-              color: #004578;
+              color: #000000;
             }
             &:active {
-              background-color: #0078d7;
-              color: #ffffff;
+              background-color: #c8c8c8;
+              color: #212121;
             }
             @media screen and (-ms-high-contrast: active){&:active {
               background-color: Highlight;
@@ -303,11 +304,11 @@ exports[`SpinButton renders SpinButton correctly 1`] = `
             }
             &:hover {
               background-color: #eaeaea;
-              color: #004578;
+              color: #000000;
             }
             &:active {
-              background-color: #0078d7;
-              color: #ffffff;
+              background-color: #c8c8c8;
+              color: #212121;
             }
             @media screen and (-ms-high-contrast: active){&:active {
               background-color: Highlight;