diff --git a/docs/content/Label.md b/docs/content/Label.md
index 07159a9350a..c77d3cba59d 100644
--- a/docs/content/Label.md
+++ b/docs/content/Label.md
@@ -7,9 +7,17 @@ The Label component is used to add contextual metadata to a design. Visually it
 ## Default example
 
 ```jsx live
-<Label m={1}>Default label</Label>
-<Label m={1} dropshadow bg='red.4'>Label with custom background</Label>
-<Label m={1} outline>Default outline label</Label>
+  <Label variant="small" outline borderColor="red.2" mr={2} color="red.4">small</Label>
+  <Label variant="medium" mr={2}>medium (default)</Label>
+  <Label variant="large" mr={2}>large</Label>
+  <Label variant="xl">xl label</Label>
+  
+  <Box mt={4}/>
+  <Label variant="medium" bg="#A575FF" m={1}>good first issue</Label>
+  <Label variant="medium" bg="#FF75C8" m={1}>🚂 deploy: train</Label>
+  <Label variant="medium" bg="#1C90FA" m={1}>css</Label>
+  <Label variant="medium" bg=" #FFF06C" color="#24292E" m={1}>documentation</Label>
+  <Label variant="medium" bg="#656BFE" m={1}>primer</Label>
 ```
 
 ## System props
diff --git a/docs/package.json b/docs/package.json
index efdb0618cee..db421f50ba5 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -11,7 +11,7 @@
     "node": "10.x"
   },
   "dependencies": {
-    "@primer/gatsby-theme-doctocat": "^0.16.9",
+    "@primer/gatsby-theme-doctocat": "^0.16.10",
     "@primer/octicons-react": "^9.2.0",
     "@styled-system/prop-types": "^5.1.0",
     "@styled-system/theme-get": "^5.1.0",
diff --git a/docs/yarn.lock b/docs/yarn.lock
index e7169d45b10..73f503253bb 100644
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@@ -1234,10 +1234,10 @@
     react-is "16.10.2"
     styled-system "5.1.2"
 
-"@primer/gatsby-theme-doctocat@^0.16.9":
-  version "0.16.9"
-  resolved "https://registry.yarnpkg.com/@primer/gatsby-theme-doctocat/-/gatsby-theme-doctocat-0.16.9.tgz#7ab8b769ac02c9ceaa1d43d150e24b0e75989f6c"
-  integrity sha512-Nz23CpAorBMntpVuvCJfUK/1CKD0BxdjqAIvDbfaHzgUZgLSXthAdXupQl1OEp4EPnDb2Egv3ZBt4CT5ssfdNQ==
+"@primer/gatsby-theme-doctocat@^0.16.10":
+  version "0.16.10"
+  resolved "https://registry.yarnpkg.com/@primer/gatsby-theme-doctocat/-/gatsby-theme-doctocat-0.16.10.tgz#9798bca7b08b548e8b9bd62f8ca7a8be9003d5a5"
+  integrity sha512-173EeoIEwf1cAO3te4XDYg+kjQwLhtlOU2LAHty8T7Hb8hjOLysBPO3rmmtz583+eWhASA0GBb6cvR5S6/OQHg==
   dependencies:
     "@babel/preset-env" "^7.5.5"
     "@babel/preset-react" "^7.0.0"
diff --git a/package.json b/package.json
index a28d3427d64..676d7629ec1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "15.3.0",
+  "version": "16.0.0",
   "description": "Primer react components",
   "main": "dist/index.umd.js",
   "module": "dist/index.esm.js",
diff --git a/src/BorderBox.js b/src/BorderBox.js
index c3a14eb7f06..2cdde7b595d 100644
--- a/src/BorderBox.js
+++ b/src/BorderBox.js
@@ -10,7 +10,7 @@ BorderBox.defaultProps = {
   theme,
   border: '1px solid',
   borderColor: 'gray.2',
-  borderRadius: 1
+  borderRadius: 2
 }
 
 BorderBox.propTypes = {
diff --git a/src/Button.js b/src/Button.js
index c2fd0f2b606..36c30aa44c3 100644
--- a/src/Button.js
+++ b/src/Button.js
@@ -1,47 +1,47 @@
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
-import {COMMON} from './constants'
-import theme from './theme'
-import buttonStyles from './ButtonStyles'
-import {compose, variant, layout, fontSize} from 'styled-system'
 import systemPropTypes from '@styled-system/prop-types'
+import {COMMON, get} from './constants'
+import theme from './theme'
+import ButtonBase from './ButtonBase'
+
+const Button = styled(ButtonBase)`
+  color: ${get('buttons.default.color.default')};
+  background-color: ${get('buttons.default.bg.default')};
+  border: 1px solid ${get('buttons.default.border.default')};
+  box-shadow: ${get('buttons.default.shadow.default')};
+
+  &:hover {
+    background-color: ${get('buttons.default.bg.hover')};
+    border-color: ${get('buttons.default.border.hover')};
+    box-shadow: ${get('buttons.default.shadow.hover')};
+  }
+
+  // focus must come before :active so that the active box shadow overrides
+  &:focus {
+    border-color: transparent;
+    box-shadow: ${get('buttons.default.shadow.focus')};
+  }
+
+  &:active {
+    background-color: ${get('buttons.default.bg.active')};
+    box-shadow: ${get('buttons.default.shadow.active')};
+    border-color: ${get('buttons.default.border.active')};
+  }
 
-const variants = variant({
-  variants: {
-    small: {
-      p: '3px 10px',
-      fontSize: 0
-    },
-    medium: {
-      fontSize: 1
-    },
-    large: {
-      fontSize: 2
-    }
+  &:disabled {
+    color: ${get('buttons.default.color.disabled')};
+    background-color: ${get('buttons.default.bg.disabled')};
+    border-color: ${get('buttons.default.border.disabled')};
   }
-})
-
-const Button = styled.button.attrs(({disabled, onClick}) => ({
-  onClick: disabled ? undefined : onClick
-}))`
-  ${buttonStyles}
-  ${variants}
-  ${compose(fontSize, COMMON, layout)}
 `
 
 Button.defaultProps = {
-  theme,
-  variant: 'medium'
+  theme
 }
 
 Button.propTypes = {
-  as: PropTypes.oneOfType([PropTypes.oneOf(['button', 'a', 'summary', 'input']), PropTypes.func]),
-  children: PropTypes.node,
-  disabled: PropTypes.bool,
-  fontSize: systemPropTypes.typography.fontSize,
-  onClick: PropTypes.func,
   theme: PropTypes.object,
-  variant: PropTypes.oneOf(['small', 'medium', 'large']),
   ...COMMON.propTypes,
   ...systemPropTypes.layout
 }
diff --git a/src/ButtonBase.js b/src/ButtonBase.js
new file mode 100644
index 00000000000..3b90de1863e
--- /dev/null
+++ b/src/ButtonBase.js
@@ -0,0 +1,50 @@
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import {COMMON} from './constants'
+import theme from './theme'
+import buttonBaseStyles from './ButtonStyles'
+import {compose, variant, layout, fontSize} from 'styled-system'
+import systemPropTypes from '@styled-system/prop-types'
+
+const variants = variant({
+  variants: {
+    small: {
+      p: '4px 12px',
+      fontSize: 0
+    },
+    medium: {
+      fontSize: 1
+    },
+    large: {
+      fontSize: 2,
+      p: '10px 20px'
+    }
+  }
+})
+
+const ButtonBase = styled.button.attrs(({disabled, onClick}) => ({
+  onClick: disabled ? undefined : onClick
+}))`
+  ${buttonBaseStyles}
+  ${variants}
+  ${compose(fontSize, COMMON, layout)}
+`
+
+ButtonBase.defaultProps = {
+  theme,
+  variant: 'medium'
+}
+
+ButtonBase.propTypes = {
+  as: PropTypes.oneOfType([PropTypes.oneOf(['button', 'a', 'summary', 'input']), PropTypes.func]),
+  children: PropTypes.node,
+  disabled: PropTypes.bool,
+  fontSize: systemPropTypes.typography.fontSize,
+  onClick: PropTypes.func,
+  theme: PropTypes.object,
+  variant: PropTypes.oneOf(['small', 'medium', 'large']),
+  ...COMMON.propTypes,
+  ...systemPropTypes.layout
+}
+
+export default ButtonBase
diff --git a/src/ButtonDanger.js b/src/ButtonDanger.js
index 5577441f69a..b8f74bb58ce 100644
--- a/src/ButtonDanger.js
+++ b/src/ButtonDanger.js
@@ -1,49 +1,36 @@
 import styled from 'styled-components'
-import Button from './Button'
+import ButtonBase from './ButtonBase'
 import {get} from './constants'
 
-const ButtonDanger = styled(Button)`
-  color: ${get('colors.red.6')};
-  background-color: ${get('colors.gray.0')};
-  background-image: linear-gradient(-180deg, ${get('colors.gray.0')} 0%, ${get('colors.button.bg2')} 90%);
+const ButtonDanger = styled(ButtonBase)`
+  color: ${get('buttons.danger.color.default')};
+  border: 1px solid ${get('buttons.danger.border.default')};
+  background-color: ${get('buttons.danger.bg.default')};
+  box-shadow: ${get('buttons.danger.shadow.default')};
 
   &:hover {
-    color: ${get('colors.white')};
-    background-color: ${get('colors.red.6')};
-    background-image: linear-gradient(
-      -180deg,
-      ${get('colors.button.dangerHoverBgImage')} 0%,
-      ${get('colors.red.6')} 90%
-    );
-    border-color: ${get('colors.blackfade50')};
+    color: ${get('buttons.danger.color.hover')};
+    background-color: ${get('buttons.danger.bg.hover')};
+    border-color: ${get('buttons.danger.border.hover')};
+    box-shadow: ${get('buttons.danger.shadow.hover')};
   }
-
+  // focus must come before :active so that the active box shadow overrides
   &:focus {
-    box-shadow: ${get('colors.button.dangerFocusShadow')} 0px 0px 0px 0.2em;
+    border-color: transparent;
+    box-shadow: ${get('buttons.danger.shadow.focus')};
   }
 
   &:active {
-    color: ${get('colors.white')};
-    background-color: ${get('colors.button.dangerActiveBg')};
-    background-image: none;
-    box-shadow: ${get('colors.blackfade15')} 0px 0.15em 0.3em inset;
-    border-color: ${get('colors.blackfade50')};
-  }
-
-  &:selected {
-    color: ${get('colors.white')};
-    background-color: ${get('colors.button.dangerActiveBg')};
-    background-image: none;
-    box-shadow: ${get('colors.blackfade15')} 0px 0.15em 0.3em inset;
-    border-color: ${get('colors.blackfade50')};
+    color: ${get('buttons.danger.color.active')};
+    background-color: ${get('buttons.danger.bg.active')};
+    box-shadow: ${get('buttons.danger.shadow.active')};
+    border-color: ${get('buttons.danger.border.active')};
   }
 
   &:disabled {
-    color: ${get('colors.button.dangerDisabledColor')};
-    background-color: ${get('colors.button.disabledBg')};
-    background-image: none;
-    border-color: ${get('colors.blackfade20')};
-    box-shadow: none;
+    color: ${get('buttons.danger.color.disabled')};
+    background-color: ${get('buttons.danger.bg.disabled')};
+    border: 1px solid ${get('buttons.danger.border.default')};
   }
 `
 
diff --git a/src/ButtonGroup.js b/src/ButtonGroup.js
index 785d5434680..1ac188c8f32 100644
--- a/src/ButtonGroup.js
+++ b/src/ButtonGroup.js
@@ -1,4 +1,5 @@
 import styled from 'styled-components'
+import {get} from './constants'
 import Box from './Box'
 
 const ButtonGroup = styled(Box)`
@@ -10,8 +11,8 @@ const ButtonGroup = styled(Box)`
     border-radius: 0;
 
     :first-child {
-      border-top-left-radius: 3px;
-      border-bottom-left-radius: 3px;
+      border-top-left-radius: ${get('radii.2')};
+      border-bottom-left-radius: ${get('radii.2')};
       margin-right: 0;
     }
 
@@ -22,8 +23,8 @@ const ButtonGroup = styled(Box)`
 
     :last-child {
       border-right-width: 1px;
-      border-top-right-radius: 3px;
-      border-bottom-right-radius: 3px;
+      border-top-right-radius: ${get('radii.2')};
+      border-bottom-right-radius: ${get('radii.2')};
     }
 
     :focus,
diff --git a/src/ButtonOutline.js b/src/ButtonOutline.js
index 9dc11596bdf..abc6b9a812d 100644
--- a/src/ButtonOutline.js
+++ b/src/ButtonOutline.js
@@ -1,36 +1,36 @@
 import styled from 'styled-components'
-import Button from './Button'
+import ButtonBase from './ButtonBase'
 import {get} from './constants'
 
-const ButtonOutline = styled(Button)`
-  color: ${get('colors.button.outlineBlue')};
-  background-color: ${get('colors.button.white')};
-  background-image: none;
+const ButtonOutline = styled(ButtonBase)`
+  color: ${get('buttons.outline.color.default')};
+  border: 1px solid ${get('buttons.outline.border.default')};
+  background-color: ${get('buttons.outline.bg.default')};
+  box-shadow: ${get('buttons.outline.shadow.default')};
 
   &:hover {
-    color: ${get('colors.button.white')};
-    background-color: ${get('colors.button.outlineBlue')};
-    background-image: none;
-    border-color: ${get('colors.button.outlineBlue')};
+    color: ${get('buttons.outline.color.hover')};
+    background-color: ${get('buttons.outline.bg.hover')};
+    border-color: ${get('buttons.outline.border.hover')};
+    box-shadow: ${get('buttons.outline.shadow.hover')};
   }
-
-  &:active {
-    color: ${get('colors.button.white')};
-    background-color: ${get('colors.button.outlineBlue')};
-    background-image: none;
-    border-color: ${get('colors.button.outlineBlue')};
+  // focus must come before :active so that the active box shadow overrides
+  &:focus {
+    border-color: transparent;
+    box-shadow: ${get('buttons.outline.shadow.focus')};
   }
 
-  &:focus {
-    box-shadow: ${get('colors.button.outlineShadow')} 0px 0px 0px 0.2em;
-    border-color: ${get('colors.button.outlineBlue')};
+  &:active {
+    color: ${get('buttons.outline.color.active')};
+    background-color: ${get('buttons.outline.bg.active')};
+    border-color: ${get('buttons.outline.border.active')};
+    box-shadow: ${get('buttons.outline.shadow.active')};
   }
 
   &:disabled {
-    color: ${get('colors.blackfade30')};
-    background-color: ${get('colors.white')};
-    border-color: ${get('colors.blackfade15')};
-    box-shadow: none;
+    color: ${get('buttons.outline.color.disabled')};
+    border-color: ${get('buttons.outline.border.default')};
+    background-color: ${get('buttons.outline.bg.disabled')};
   }
 `
 
diff --git a/src/ButtonPrimary.js b/src/ButtonPrimary.js
index dbe685dfcf3..02388e237fe 100644
--- a/src/ButtonPrimary.js
+++ b/src/ButtonPrimary.js
@@ -1,43 +1,34 @@
 import styled from 'styled-components'
-import Button from './Button'
+import ButtonBase from './ButtonBase'
 import {get} from './constants'
 
-const ButtonPrimary = styled(Button)`
-  color: ${get('colors.button.white')};
-  background-color: ${get('colors.button.primaryBg')};
-  background-image: linear-gradient(
-    -180deg,
-    ${get('colors.button.primaryBgImage')} 0%,
-    ${get('colors.button.primaryBg')} 90%
-  );
+const ButtonPrimary = styled(ButtonBase)`
+  color: ${get('buttons.primary.color.default')};
+  background-color: ${get('buttons.primary.bg.default')};
+  border: 1px solid ${get('buttons.primary.border.default')};
+  box-shadow: ${get('buttons.primary.shadow.default')};
 
   &:hover {
-    background-color: ${get('colors.button.primaryHoverBg')};
-    background-image: linear-gradient(
-      -180deg,
-      ${get('colors.button.primaryHoverBgImage')} 0%,
-      ${get('colors.button.primaryHoverBg')} 90%
-    );
-    background-position: -0.5em center;
-    border-color: ${get('colors.button.primaryBorder')};
+    background-color: ${get('buttons.primary.bg.hover')};
+    border-color: ${get('buttons.primary.border.hover')};
+  }
+  // focus must come before :active so that the active box shadow overrides
+  &:focus {
+    border-color: transparent;
+    box-shadow: ${get('buttons.primary.shadow.focus')};
+    background-color: ${get('buttons.primary.bg.focus')};
   }
 
   &:active {
-    background-color: ${get('colors.button.primaryActiveBg')};
-    background-image: none;
-    box-shadow: ${get('colors.button.primaryActiveShadow')} 0px 0.15em 0.3em inset;
-    border-color: ${get('colors.button.primaryBorder')};
+    background-color: ${get('buttons.primary.bg.active')};
+    box-shadow: ${get('buttons.primary.shadow.active')};
+    border-color: ${get('buttons.primary.border.active')};
   }
 
-  &:focus {
-    box-shadow: rgba(52, 208, 88, 0.4) 0px 0px 0px 0.2em;
-  }
   &:disabled {
-    color: ${get('colors.button.primaryDisabledColor')};
-    background-color: ${get('colors.button.primaryDisabledBg')};
-    background-image: none;
-    border-color: ${get('colors.button.primaryDisabledBorder')};
-    box-shadow: none;
+    color: ${get('buttons.primary.color.disabled')};
+    background-color: ${get('buttons.primary.bg.disabled')};
+    border-color: ${get('buttons.primary.border.disabled')};
   }
 `
 
diff --git a/src/ButtonStyles.js b/src/ButtonStyles.js
index 3d5927a43dd..98db3f21b70 100644
--- a/src/ButtonStyles.js
+++ b/src/ButtonStyles.js
@@ -4,83 +4,32 @@ import {get} from './constants'
 export default css`
   position: relative;
   display: inline-block;
-  padding: 6px 12px;
-  color: ${get('colors.gray.9')};
-  background-color: ${get('colors.gray.1')};
-  background-image: linear-gradient(-180deg, ${get('colors.gray.0')} 0%, ${get('colors.button.bg2')} 90%);
-  font-size: ${get('fontSizes.1')};
+  padding: 6px 16px;
   font-weight: ${get('fontWeights.bold')};
   line-height: 20px;
   white-space: nowrap;
   vertical-align: middle;
   cursor: pointer;
   user-select: none;
-  background-repeat: repeat-x;
-  background-position: -1px -1px;
-  background-size: 110% 110%;
-  border: 1px solid ${get('colors.button.border')};
-  border-radius: ${get('radii.1')};
+  border-radius: ${get('radii.2')};
   appearance: none;
   text-decoration: none;
 
   &:hover {
-    background-color: ${get('colors.button.hoverBg')};
-    background-image: linear-gradient(-180deg, ${get('colors.button.bg2')} 0%, ${get('colors.button.hoverBg')} 90%);
-    background-position: -0.5em center;
-    border-color: ${get('colors.blackfade35')};
+    // needed to override link styles
     text-decoration: none;
-    background-repeat: repeat-x;
-  }
-
-  &:active {
-    background-color: ${get('colors.button.activeBg')};
-    background-image: none;
-    box-shadow: ${get('colors.blackfade15')} 0px 0.15em 0.3em inset;
-    border-color: ${get('colors.button.border')}; //convert black to rbg here
   }
 
   &:focus {
     outline: none;
-    box-shadow: ${get('colors.button.focusShadow')} 0px 0px 0px 0.2em;
   }
 
-  &.grouped {
-    position: relative;
-    border-right-width: 0;
-    border-radius: 0;
-
-    &:first-child {
-      border-top-left-radius: ${get('radii.1')};
-      border-bottom-left-radius: ${get('radii.1')};
-    }
-
-    &:last-child {
-      border-right-width: 1px;
-      border-top-right-radius: ${get('radii.1')};
-      border-bottom-right-radius: ${get('radii.1')};
-    }
-
-    &:focus,
-    &:active,
-    &:hover {
-      border-right-width: 1px;
-
-      + .grouped {
-        border-left-width: 0;
-      }
-    }
-  }
   &:focus,
   &:active {
     z-index: 1;
   }
 
   &:disabled {
-    color: ${get('colors.button.disabledColor')};
-    background-color: ${get('colors.button.disabledBg')};
-    background-image: none;
-    border-color: ${get('colors.blackfade20')};
-    box-shadow: none;
     cursor: default;
   }
 `
diff --git a/src/Dropdown.js b/src/Dropdown.js
index 780dc3eb730..4d60a4d5854 100644
--- a/src/Dropdown.js
+++ b/src/Dropdown.js
@@ -11,7 +11,7 @@ const DropdownBase = ({title, children, className, ...rest}) => {
   return (
     <Details overlay className={className} {...rest}>
       <>
-        <Button as="summary" color="gray.7" aria-haspopup="true" {...rest}>
+        <Button as="summary" aria-haspopup="true" {...rest}>
           {title}
           <DropdownCaret />
         </Button>
@@ -27,8 +27,8 @@ const Dropdown = styled(DropdownBase)`
 `
 
 const DropdownCaret = styled.div`
-  border: ${get('space.1')} solid transparent;
-  margin-left: ${get('space.1')};
+  border: 4px solid transparent;
+  margin-left: 12px;
   border-top-color: currentcolor;
   border-bottom-width: 0;
   content: '';
@@ -42,7 +42,7 @@ const DropdownMenu = styled.ul`
   background-clip: padding-box;
   background-color: ${get('colors.white')};
   border: 1px solid rgba(27, 31, 35, 0.15);
-  border-radius: ${get('radii.1')};
+  border-radius: ${get('radii.2')};
   box-shadow: 0 3px 12px rgba(27, 31, 35, 0.15);
   left: 0;
   list-style: none;
@@ -66,7 +66,7 @@ const DropdownMenu = styled.ul`
   }
 
   &::before {
-    border: ${get('space.2')} solid transparent;
+    border: 8px solid transparent;
     border-bottom-color: ${get('colors.blackfade15')};
   }
 
diff --git a/src/FilteredSearch.js b/src/FilteredSearch.js
index ae84b29b34e..47c59555e37 100644
--- a/src/FilteredSearch.js
+++ b/src/FilteredSearch.js
@@ -10,14 +10,14 @@ const FilteredSearch = styled.div`
 
   summary {
     border-radius: 0;
-    border-top-left-radius: ${get('radii.1')};
-    border-bottom-left-radius: ${get('radii.1')};
+    border-top-left-radius: ${get('radii.2')};
+    border-bottom-left-radius: ${get('radii.2')};
     border-right: 0;
   }
   .TextInput-wrapper {
     border-radius: 0;
-    border-top-right-radius: ${get('radii.1')};
-    border-bottom-right-radius: ${get('radii.1')};
+    border-top-right-radius: ${get('radii.2')};
+    border-bottom-right-radius: ${get('radii.2')};
     z-index: 1; // Allows the focus outline to show on top of the dropdown.
   }
 `
diff --git a/src/Label.js b/src/Label.js
index a5b7ec5def7..3e23ad361fd 100644
--- a/src/Label.js
+++ b/src/Label.js
@@ -1,40 +1,42 @@
 import PropTypes from 'prop-types'
 import styled, {css} from 'styled-components'
-import {variant} from 'styled-system'
+import {variant, borderColor} from 'styled-system'
 import theme from './theme'
 import {COMMON, get} from './constants'
 
 const outlineStyles = css`
   margin-top: -1px; // offsets the 1px border
   margin-bottom: -1px; // offsets the 1px border
-  font-weight: 400;
   color: ${get('colors.gray.6')};
-  background-color: transparent;
   border: ${get('borders.1')} ${get('colors.blackfade15')};
   box-shadow: none;
+  ${borderColor};
+  ${COMMON};
+  background-color: transparent;
 `
 
 const sizeVariant = variant({
   variants: {
     small: {
       fontSize: 0,
-      px: '0.125em',
-      py: 1
+      lineHeight: '16px',
+      padding: '0px 8px'
     },
     medium: {
       fontSize: 0,
-      px: '3px',
-      py: 1
+      lineHeight: '20px',
+      padding: '0 8px'
     },
     large: {
-      fontSize: 1,
-      px: 1,
-      py: 2
+      fontSize: 0,
+      lineHeight: '24px',
+      padding: '0 12px'
     },
+    // corresponds to StateLabel fontSize/lineHeight/padding
     xl: {
-      fontSize: 2,
-      px: 1,
-      py: 2
+      fontSize: 1,
+      lineHeight: '16px',
+      padding: '8px 12px'
     }
   }
 })
@@ -42,9 +44,8 @@ const sizeVariant = variant({
 const Label = styled('span')`
   display: inline-block;
   font-weight: 600;
-  line-height: ${get('lineHeights.condensedUltra')};
   color: ${get('colors.white')};
-  border-radius: 2px;
+  border-radius: ${get('radii.3')};
   &:hover {
     text-decoration: none;
   }
diff --git a/src/SideNav.js b/src/SideNav.js
index dd8a08a8dd0..517954d063f 100644
--- a/src/SideNav.js
+++ b/src/SideNav.js
@@ -77,11 +77,6 @@ SideNav.Link = styled(Link).attrs(props => {
       border-top: 0;
     }
 
-    &:last-child {
-      // makes sure there is a "bottom border" in case the list is not long enough
-      box-shadow: 0 1px 0 ${get('colors.gray.2')};
-    }
-
     // Bar on the left
     &::before {
       position: absolute;
@@ -119,7 +114,7 @@ SideNav.Link = styled(Link).attrs(props => {
 
       // Bar on the left
       &::before {
-        background-color: ${get('colors.orange.7')};
+        background-color: ${get('colors.orange.5')};
       }
     }
   }
diff --git a/src/StateLabel.js b/src/StateLabel.js
index 592c0c99eb5..bd0bda8baae 100644
--- a/src/StateLabel.js
+++ b/src/StateLabel.js
@@ -3,14 +3,14 @@ import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import {GitMerge, GitPullRequest, IssueClosed, IssueOpened} from '@primer/octicons-react'
 import theme, {colors} from './theme'
-import {COMMON} from './constants'
+import {COMMON, get} from './constants'
 import StyledOcticon from './StyledOcticon'
 
 const statusMap = {
   issueClosed: colors.red[6],
-  pullClosed: colors.red[6],
+  pullClosed: colors.red[5],
   pullMerged: colors.purple[5],
-  issueOpened: '#2cbe4e', // This was generated by a sass function in Primer, so using a hex here
+  issueOpened: '#159739', // Custom green
   pullOpened: '#2cbe4e', // This was generated by a sass function in Primer, so using a hex here
   gray: colors.gray[5]
 }
@@ -36,14 +36,17 @@ function StateLabelBase({className, status, small = false, children}) {
 const StateLabel = styled(StateLabelBase)`
   display: inline-flex;
   align-items: center;
-  padding: ${props => (props.small ? `0.125em ${theme.space[1]}` : `${theme.space[1]} ${theme.space[2]}`)};
+  padding: ${props => (props.small ? `4px 8px` : `8px 12px`)};
   font-weight: 600;
-  line-height: 20px;
+  line-height: 16px;
   color: ${colors.white};
-  font-size: ${props => (props.small ? theme.fontSizes[0] : theme.fontSizes[1])};
+  font-size: ${props =>
+    props.small
+      ? theme.fontSizes[0]
+      : theme.fontSizes[1]}; // TODO: these should use the get function instead of referencing the theme directly
   text-align: center;
   background-color: ${props => (props.status ? statusMap[props.status] : statusMap.gray)};
-  border-radius: ${theme.radii[1]};
+  border-radius: ${get('radii.3')};
   ${COMMON};
 `
 
diff --git a/src/SubNav.js b/src/SubNav.js
index 4c2e988dd33..6b4ab9f16bd 100644
--- a/src/SubNav.js
+++ b/src/SubNav.js
@@ -67,14 +67,14 @@ SubNav.Link = styled.a.attrs(props => ({
   align-items: center;
 
   &:first-of-type {
-    border-top-left-radius: ${get('radii.1')};
-    border-bottom-left-radius: ${get('radii.1')};
+    border-top-left-radius: ${get('radii.2')};
+    border-bottom-left-radius: ${get('radii.2')};
     border-left: 1px solid ${get('colors.gray.2')};
   }
 
   &:last-of-type {
-    border-top-right-radius: ${get('radii.1')};
-    border-bottom-right-radius: ${get('radii.1')};
+    border-top-right-radius: ${get('radii.2')};
+    border-bottom-right-radius: ${get('radii.2')};
   }
 
   &:hover,
diff --git a/src/TabNav.js b/src/TabNav.js
index 11b857e3cd5..6f9af5875cd 100644
--- a/src/TabNav.js
+++ b/src/TabNav.js
@@ -19,7 +19,7 @@ function TabNavBase({actions, className, align, children, full, ...rest}) {
 
 const TabNav = styled(TabNavBase)`
   display: flex;
-  border-bottom: 1px solid ${get('colors.gray.3')};
+  border-bottom: 1px solid ${get('colors.border.gray')};
 
   .TabNav-body {
     display: flex;
@@ -36,7 +36,7 @@ TabNav.Link = styled.a.attrs(props => ({
   padding: 8px 12px;
   font-size: ${get('fontSizes.1')};
   line-height: 20px;
-  color: ${get('colors.gray.6')};
+  color: ${get('colors.black')};
   text-decoration: none;
   background-color: transparent;
   border: 1px solid transparent;
@@ -44,14 +44,15 @@ TabNav.Link = styled.a.attrs(props => ({
 
   &:hover,
   &:focus {
-    color: ${get('colors.gray.9')};
+    color: ${get('colors.text.grayDark')};
     text-decoration: none;
   }
 
   &.selected {
-    color: ${get('colors.gray.9')};
-    border-color: ${get('colors.gray.3')};
-    border-radius: 3px 3px 0 0;
+    color: ${get('colors.text.grayDark')};
+    border-color: ${get('colors.border.gray')};
+    border-top-right-radius: ${get('radii.2')};
+    border-top-left-radius: ${get('radii.2')};
     background-color: ${get('colors.white')};
   }
 `
diff --git a/src/TextInput.js b/src/TextInput.js
index 9cdc06e546d..f8fa325704c 100644
--- a/src/TextInput.js
+++ b/src/TextInput.js
@@ -26,15 +26,22 @@ const sizeVariants = variant({
   }
 })
 
-const TextInput = ({icon, className, block, ...rest}) => {
+const TextInput = ({icon, className, block, disabled, ...rest}) => {
   // this class is necessary to style FilterSearch, plz no touchy!
   const wrapperClasses = classnames(className, 'TextInput-wrapper')
   const wrapperProps = pick(rest)
   const inputProps = omit(rest)
   return (
-    <Wrapper className={wrapperClasses} hasIcon={!!icon} block={block} {...wrapperProps}>
+    <Wrapper
+      className={wrapperClasses}
+      hasIcon={!!icon}
+      block={block}
+      theme={theme}
+      disabled={disabled}
+      {...wrapperProps}
+    >
       {icon && <Octicon className="TextInput-icon" icon={icon} />}
-      <Input {...inputProps} />
+      <Input disabled={disabled} {...inputProps} />
     </Wrapper>
   )
 }
@@ -57,14 +64,14 @@ const Wrapper = styled.span`
   display: inline-flex;
   align-items: stretch;
   min-height: 34px;
-  font-size: ${get('fontSizes.2')};
+  font-size: ${get('fontSizes.1')};
   line-height: 20px;
   color: ${get('colors.gray.9')};
   vertical-align: middle;
   background-repeat: no-repeat; // Repeat and position set for form states (success, error, etc)
   background-position: right 8px center; // For form validation. This keeps images 8px from right and centered vertically.
-  border: 1px solid ${get('colors.gray.3')};
-  border-radius: ${get('radii.1')};
+  border: 1px solid ${get('colors.border.gray')};
+  border-radius: ${get('radii.2')};
   outline: none;
   box-shadow: ${get('shadows.formControl')};
 
@@ -75,7 +82,7 @@ const Wrapper = styled.span`
       `
     } else {
       return css`
-        padding: 6px ${get('space.2')};
+        padding: 6px 12px;
       `
     }
   }}
@@ -92,6 +99,14 @@ const Wrapper = styled.span`
     box-shadow: ${get('shadows.formControl')}, ${get('shadows.formControlFocus')};
   }
 
+  ${props =>
+    props.disabled &&
+    css`
+     background-color: ${get('colors.bg.disabled')};
+     box-shadow: ${get('shadows.formControlDisabled')}
+    }
+  `}
+
   ${props =>
     props.block &&
     css`
diff --git a/src/UnderlineNav.js b/src/UnderlineNav.js
index 780934923ec..cf98727a125 100644
--- a/src/UnderlineNav.js
+++ b/src/UnderlineNav.js
@@ -21,7 +21,7 @@ function UnderlineNavBase({actions, className, align, children, full, label, ...
 const UnderlineNav = styled(UnderlineNavBase)`
   display: flex;
   justify-content: space-between;
-  border-bottom: 1px solid ${get('colors.gray.2')};
+  border-bottom: 1px solid #eaecef;
   &.UnderlineNav--right {
     justify-content: flex-end;
 
@@ -67,7 +67,7 @@ UnderlineNav.Link = styled.a.attrs(props => ({
   &:focus {
     color: ${get('colors.gray.9')};
     text-decoration: none;
-    border-bottom-color: ${get('colors.gray.3')};
+    border-bottom-color: ${get('colors.orange.5')};
     transition: 0.2s ease;
 
     .UnderlineNav-octicon {
@@ -76,9 +76,8 @@ UnderlineNav.Link = styled.a.attrs(props => ({
   }
 
   &.selected {
-    font-weight: ${get('fontWeights.bold')};
     color: ${get('colors.gray.9')};
-    border-bottom-color: ${get('colors.orange.6')};
+    border-bottom-color: ${get('colors.orange.5')};
 
     .UnderlineNav-octicon {
       color: ${get('colors.gray.5')};
diff --git a/src/__tests__/__snapshots__/BreadcrumbItem.js.snap b/src/__tests__/__snapshots__/BreadcrumbItem.js.snap
index 56fedfc74f0..5aa788ce136 100644
--- a/src/__tests__/__snapshots__/BreadcrumbItem.js.snap
+++ b/src/__tests__/__snapshots__/BreadcrumbItem.js.snap
@@ -35,7 +35,111 @@ exports[`Breadcrumb.Item renders the given "as" prop 1`] = `
         "1012px",
         "1280px",
       ],
+      "buttons": Object {
+        "danger": Object {
+          "bg": Object {
+            "active": "#be222e",
+            "default": "#fafbfc",
+            "disabled": "#F3F4F6",
+            "hover": "#cb2431",
+          },
+          "border": Object {
+            "active": "#9e1c23",
+            "default": "#e1e4e8",
+            "hover": "#b31d28",
+          },
+          "color": Object {
+            "active": "#fff",
+            "default": "#cb2431",
+            "disabled": "rgba(203,36,49, .5)",
+            "hover": "#fff",
+          },
+          "shadow": Object {
+            "active": "inset 0px 2px 0px rgba(179, 29, 40, 0.4)",
+            "default": "0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.25)",
+            "focus": "0 0 0 3px rgba(203, 36, 49, 0.4)",
+            "hover": "0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)",
+          },
+        },
+        "default": Object {
+          "bg": Object {
+            "active": "#edeff2",
+            "default": "#fafbfc",
+            "disabled": "#fafbfc",
+            "hover": "#F3F4F6",
+          },
+          "border": Object {
+            "active": "#d1d5da",
+            "default": "#e1e4e8",
+            "disabled": "#eaecef",
+          },
+          "color": Object {
+            "default": "#24292e",
+            "disabled": "#959da5",
+          },
+          "shadow": Object {
+            "active": "inset 0px 2px 0px rgba(149, 157, 165, 0.1)",
+            "default": "0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.25)",
+            "focus": "0 0 0 3px rgba(3, 102, 214, 0.3)",
+            "hover": "0px 1px 0px rgba(209, 213, 218, 0.2), inset 0px 2px 0px rgba(255, 255, 255, 0.1)",
+          },
+        },
+        "outline": Object {
+          "bg": Object {
+            "active": "#035fc7",
+            "default": "#fafbfc",
+            "disabled": "#F3F4F6",
+            "hover": "#0366d6",
+          },
+          "border": Object {
+            "active": "rgba(4, 66, 137, .5)",
+            "default": "#e1e4e8",
+            "hover": "#005cc5",
+          },
+          "color": Object {
+            "active": "#fff",
+            "default": "#005cc5",
+            "disabled": "#959da5",
+            "hover": "#fff",
+          },
+          "shadow": Object {
+            "active": "inset 0px 1px 0px rgba(4, 66, 137, 0.2)",
+            "default": "0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.25)",
+            "focus": "0 0 0 3px rgba(3, 102, 214, 0.3)",
+            "hover": "0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)",
+          },
+        },
+        "primary": Object {
+          "bg": Object {
+            "active": "#128031",
+            "default": "#159739",
+            "disabled": "#94D3A2",
+            "focus": "#138934",
+            "hover": "#138934",
+          },
+          "border": Object {
+            "active": "#176f2c",
+            "default": "#22863a",
+            "disabled": "rgba(34, 134, 58, 0.1)",
+            "hover": "#176f2c",
+          },
+          "color": Object {
+            "default": "#fff",
+            "disabled": "rgba(255, 255, 255, 0.50)",
+          },
+          "shadow": Object {
+            "active": "inset 0px 1px 0px rgba(20, 70, 32, 0.2)",
+            "default": " 0px 1px 0px rgba(20, 70, 32, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)",
+            "focus": "0 0 0 3px #94D3A2",
+          },
+        },
+      },
       "colors": Object {
+        "bg": Object {
+          "disabled": "#F3F4F6",
+          "gray": "#f6f8fa",
+          "grayLight": "#fafbfc",
+        },
         "black": "#1b1f23",
         "blackfade15": "rgba(27, 31, 35, 0.15)",
         "blackfade20": "rgba(27, 31, 35, 0.20)",
@@ -55,32 +159,10 @@ exports[`Breadcrumb.Item renders the given "as" prop 1`] = `
           "#05264c",
         ],
         "bodytext": "#24292e",
-        "button": Object {
-          "activeBg": "rgb(233, 236, 239)",
-          "bg2": "rgb(239, 243, 246)",
-          "border": "rgba(27, 31, 35, 0.2)",
-          "dangerActiveBg": "rgb(181, 32, 44)",
-          "dangerDisabledColor": "rgba(203,36,49,0.4)",
-          "dangerFocusShadow": "rgba(203, 36, 49, 0.4)",
-          "dangerHoverBgImage": "rgb(222, 68, 80)",
-          "disabledBg": "#eff3f6",
-          "disabledColor": "rgba(36, 41, 46, 0.4)",
-          "focusShadow": "rgba(3, 102, 214, 0.3)",
-          "hoverBg": "rgb(230, 235, 241)",
-          "outlineBlue": "rgb(3, 102, 214)",
-          "outlineShadow": "rgba(3, 102, 214, 0.4)",
-          "primaryActiveBg": "rgb(39, 159, 67)",
-          "primaryActiveShadow": "rgba(27, 31, 35, 0.15)",
-          "primaryBg": "rgb(40, 167, 69)",
-          "primaryBgImage": "rgb(52, 208, 88)",
-          "primaryBorder": "rgba(27, 31, 35, 0.5)",
-          "primaryDisabledBg": "#94d3a2",
-          "primaryDisabledBorder": "rgba(27,31,35,0.2)",
-          "primaryDisabledColor": "rgba(255, 255, 255, .75)",
-          "primaryFocusShadow": "rgba(52, 208, 88, 0.4)",
-          "primaryHoverBg": "rgb(38, 159, 66)",
-          "primaryHoverBgImage": "rgb(47, 203, 83)",
-          "white": "rgb(255, 255, 255)",
+        "border": Object {
+          "gray": "#e1e4e8",
+          "grayDark": "#d1d5da",
+          "grayLight": "#eaecef",
         },
         "counter": Object {
           "bg": "rgba(27, 31, 35, 0.08)",
@@ -156,8 +238,15 @@ exports[`Breadcrumb.Item renders the given "as" prop 1`] = `
           "success": "#28a745",
           "unknown": "#959da5",
         },
+        "text": Object {
+          "gray": "#586069",
+          "grayDark": "#24292e",
+          "grayLight": "#6a737d",
+          "red": "#cb2431",
+        },
         "white": "#fff",
         "whitefade15": "rgba(255, 255, 255, 0.15)",
+        "whitefade50": "rgba(255, 255, 255, 0.50)",
         "yellow": Array [
           "#fffdef",
           "#fffbdd",
@@ -206,13 +295,17 @@ exports[`Breadcrumb.Item renders the given "as" prop 1`] = `
         "0",
         "3px",
         "6px",
+        "100px",
       ],
       "shadows": Object {
         "extra-large": "0 10px 50px rgba(27, 31, 35, 0.07)",
-        "formControl": "rgba(27, 31, 35, 0.075) 0px 1px 2px inset",
+        "formControl": "inset 0px 2px 0px rgba(225, 228, 232, 0.2)",
+        "formControlDisabled": "inset 0px 2px 0px rgba(220, 227, 237, 0.3)",
         "formControlFocus": "rgba(3, 102, 214, 0.3) 0px 0px 0px 0.2em",
         "large": "0 1px 15px rgba(27, 31, 35, 0.15)",
         "medium": "0 1px 5px rgba(27, 31, 35, 0.15)",
+        "primaryActiveShadow": "inset 0px 1px 0px rgba(20, 70, 32, 0.2)",
+        "primaryShadow": "0px 1px 0px rgba(20, 70, 32, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)",
         "small": "0 1px 1px rgba(27, 31, 35, 0.1)",
       },
       "space": Array [
diff --git a/src/__tests__/__snapshots__/Button.js.snap b/src/__tests__/__snapshots__/Button.js.snap
index 6d6e6890866..5e05be29c2c 100644
--- a/src/__tests__/__snapshots__/Button.js.snap
+++ b/src/__tests__/__snapshots__/Button.js.snap
@@ -4,11 +4,7 @@ exports[`Button respects the "disabled" prop 1`] = `
 .c0 {
   position: relative;
   display: inline-block;
-  padding: 6px 12px;
-  color: #24292e;
-  background-color: #f6f8fa;
-  background-image: linear-gradient(-180deg,#fafbfc 0%,rgb(239,243,246) 90%);
-  font-size: 14px;
+  padding: 6px 16px;
   font-weight: 600;
   line-height: 20px;
   white-space: nowrap;
@@ -18,82 +14,57 @@ exports[`Button respects the "disabled" prop 1`] = `
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  background-repeat: repeat-x;
-  background-position: -1px -1px;
-  background-size: 110% 110%;
-  border: 1px solid rgba(27,31,35,0.2);
-  border-radius: 3px;
+  border-radius: 6px;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   -webkit-text-decoration: none;
   text-decoration: none;
   font-size: 14px;
+  color: #24292e;
+  background-color: #fafbfc;
+  border: 1px solid #e1e4e8;
+  box-shadow: 0px 1px 0px rgba(149,157,165,0.1),inset 0px 2px 0px rgba(255,255,255,0.25);
 }
 
 .c0:hover {
-  background-color: rgb(230,235,241);
-  background-image: linear-gradient(-180deg,rgb(239,243,246) 0%,rgb(230,235,241) 90%);
-  background-position: -0.5em center;
-  border-color: rgba(27,31,35,0.35);
   -webkit-text-decoration: none;
   text-decoration: none;
-  background-repeat: repeat-x;
-}
-
-.c0:active {
-  background-color: rgb(233,236,239);
-  background-image: none;
-  box-shadow: rgba(27,31,35,0.15) 0px 0.15em 0.3em inset;
-  border-color: rgba(27,31,35,0.2);
 }
 
 .c0:focus {
   outline: none;
-  box-shadow: rgba(3,102,214,0.3) 0px 0px 0px 0.2em;
 }
 
-.c0.grouped {
-  position: relative;
-  border-right-width: 0;
-  border-radius: 0;
-}
-
-.c0.grouped:first-child {
-  border-top-left-radius: 3px;
-  border-bottom-left-radius: 3px;
+.c0:focus,
+.c0:active {
+  z-index: 1;
 }
 
-.c0.grouped:last-child {
-  border-right-width: 1px;
-  border-top-right-radius: 3px;
-  border-bottom-right-radius: 3px;
+.c0:disabled {
+  cursor: default;
 }
 
-.c0.grouped:focus,
-.c0.grouped:active,
-.c0.grouped:hover {
-  border-right-width: 1px;
+.c0:hover {
+  background-color: #F3F4F6;
+  box-shadow: 0px 1px 0px rgba(209,213,218,0.2),inset 0px 2px 0px rgba(255,255,255,0.1);
 }
 
-.c0.grouped:focus + .grouped,
-.c0.grouped:active + .grouped,
-.c0.grouped:hover + .grouped {
-  border-left-width: 0;
+.c0:focus {
+  border-color: transparent;
+  box-shadow: 0 0 0 3px rgba(3,102,214,0.3);
 }
 
-.c0:focus,
 .c0:active {
-  z-index: 1;
+  background-color: #edeff2;
+  box-shadow: inset 0px 2px 0px rgba(149,157,165,0.1);
+  border-color: #d1d5da;
 }
 
 .c0:disabled {
-  color: rgba(36,41,46,0.4);
-  background-color: #eff3f6;
-  background-image: none;
-  border-color: rgba(27,31,35,0.20);
-  box-shadow: none;
-  cursor: default;
+  color: #959da5;
+  background-color: #fafbfc;
+  border-color: #eaecef;
 }
 
 <button
@@ -106,11 +77,7 @@ exports[`ButtonDanger renders correct disabled styles 1`] = `
 .c0 {
   position: relative;
   display: inline-block;
-  padding: 6px 12px;
-  color: #24292e;
-  background-color: #f6f8fa;
-  background-image: linear-gradient(-180deg,#fafbfc 0%,rgb(239,243,246) 90%);
-  font-size: 14px;
+  padding: 6px 16px;
   font-weight: 600;
   line-height: 20px;
   white-space: nowrap;
@@ -120,11 +87,7 @@ exports[`ButtonDanger renders correct disabled styles 1`] = `
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  background-repeat: repeat-x;
-  background-position: -1px -1px;
-  background-size: 110% 110%;
-  border: 1px solid rgba(27,31,35,0.2);
-  border-radius: 3px;
+  border-radius: 6px;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -132,59 +95,18 @@ exports[`ButtonDanger renders correct disabled styles 1`] = `
   text-decoration: none;
   font-size: 14px;
   color: #cb2431;
+  border: 1px solid #e1e4e8;
   background-color: #fafbfc;
-  background-image: linear-gradient(-180deg,#fafbfc 0%,rgb(239,243,246) 90%);
+  box-shadow: 0px 1px 0px rgba(149,157,165,0.1),inset 0px 2px 0px rgba(255,255,255,0.25);
 }
 
 .c0:hover {
-  background-color: rgb(230,235,241);
-  background-image: linear-gradient(-180deg,rgb(239,243,246) 0%,rgb(230,235,241) 90%);
-  background-position: -0.5em center;
-  border-color: rgba(27,31,35,0.35);
   -webkit-text-decoration: none;
   text-decoration: none;
-  background-repeat: repeat-x;
-}
-
-.c0:active {
-  background-color: rgb(233,236,239);
-  background-image: none;
-  box-shadow: rgba(27,31,35,0.15) 0px 0.15em 0.3em inset;
-  border-color: rgba(27,31,35,0.2);
 }
 
 .c0:focus {
   outline: none;
-  box-shadow: rgba(3,102,214,0.3) 0px 0px 0px 0.2em;
-}
-
-.c0.grouped {
-  position: relative;
-  border-right-width: 0;
-  border-radius: 0;
-}
-
-.c0.grouped:first-child {
-  border-top-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-}
-
-.c0.grouped:last-child {
-  border-right-width: 1px;
-  border-top-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-
-.c0.grouped:focus,
-.c0.grouped:active,
-.c0.grouped:hover {
-  border-right-width: 1px;
-}
-
-.c0.grouped:focus + .grouped,
-.c0.grouped:active + .grouped,
-.c0.grouped:hover + .grouped {
-  border-left-width: 0;
 }
 
 .c0:focus,
@@ -193,47 +115,32 @@ exports[`ButtonDanger renders correct disabled styles 1`] = `
 }
 
 .c0:disabled {
-  color: rgba(36,41,46,0.4);
-  background-color: #eff3f6;
-  background-image: none;
-  border-color: rgba(27,31,35,0.20);
-  box-shadow: none;
   cursor: default;
 }
 
 .c0:hover {
   color: #fff;
   background-color: #cb2431;
-  background-image: linear-gradient( -180deg,rgb(222,68,80) 0%,#cb2431 90% );
-  border-color: rgba(27,31,35,0.5);
+  border-color: #b31d28;
+  box-shadow: 0px 1px 0px rgba(149,157,165,0.1),inset 0px 2px 0px rgba(255,255,255,0.03);
 }
 
 .c0:focus {
-  box-shadow: rgba(203,36,49,0.4) 0px 0px 0px 0.2em;
+  border-color: transparent;
+  box-shadow: 0 0 0 3px rgba(203,36,49,0.4);
 }
 
 .c0:active {
   color: #fff;
-  background-color: rgb(181,32,44);
-  background-image: none;
-  box-shadow: rgba(27,31,35,0.15) 0px 0.15em 0.3em inset;
-  border-color: rgba(27,31,35,0.5);
-}
-
-.c0:selected {
-  color: #fff;
-  background-color: rgb(181,32,44);
-  background-image: none;
-  box-shadow: rgba(27,31,35,0.15) 0px 0.15em 0.3em inset;
-  border-color: rgba(27,31,35,0.5);
+  background-color: #be222e;
+  box-shadow: inset 0px 2px 0px rgba(179,29,40,0.4);
+  border-color: #9e1c23;
 }
 
 .c0:disabled {
-  color: rgba(203,36,49,0.4);
-  background-color: #eff3f6;
-  background-image: none;
-  border-color: rgba(27,31,35,0.20);
-  box-shadow: none;
+  color: rgba(203,36,49,.5);
+  background-color: #F3F4F6;
+  border: 1px solid #e1e4e8;
 }
 
 <button
@@ -246,11 +153,7 @@ exports[`ButtonOutline renders correct disabled styles 1`] = `
 .c0 {
   position: relative;
   display: inline-block;
-  padding: 6px 12px;
-  color: #24292e;
-  background-color: #f6f8fa;
-  background-image: linear-gradient(-180deg,#fafbfc 0%,rgb(239,243,246) 90%);
-  font-size: 14px;
+  padding: 6px 16px;
   font-weight: 600;
   line-height: 20px;
   white-space: nowrap;
@@ -260,71 +163,26 @@ exports[`ButtonOutline renders correct disabled styles 1`] = `
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  background-repeat: repeat-x;
-  background-position: -1px -1px;
-  background-size: 110% 110%;
-  border: 1px solid rgba(27,31,35,0.2);
-  border-radius: 3px;
+  border-radius: 6px;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   -webkit-text-decoration: none;
   text-decoration: none;
   font-size: 14px;
-  color: rgb(3,102,214);
-  background-color: rgb(255,255,255);
-  background-image: none;
+  color: #005cc5;
+  border: 1px solid #e1e4e8;
+  background-color: #fafbfc;
+  box-shadow: 0px 1px 0px rgba(149,157,165,0.1),inset 0px 2px 0px rgba(255,255,255,0.25);
 }
 
 .c0:hover {
-  background-color: rgb(230,235,241);
-  background-image: linear-gradient(-180deg,rgb(239,243,246) 0%,rgb(230,235,241) 90%);
-  background-position: -0.5em center;
-  border-color: rgba(27,31,35,0.35);
   -webkit-text-decoration: none;
   text-decoration: none;
-  background-repeat: repeat-x;
-}
-
-.c0:active {
-  background-color: rgb(233,236,239);
-  background-image: none;
-  box-shadow: rgba(27,31,35,0.15) 0px 0.15em 0.3em inset;
-  border-color: rgba(27,31,35,0.2);
 }
 
 .c0:focus {
   outline: none;
-  box-shadow: rgba(3,102,214,0.3) 0px 0px 0px 0.2em;
-}
-
-.c0.grouped {
-  position: relative;
-  border-right-width: 0;
-  border-radius: 0;
-}
-
-.c0.grouped:first-child {
-  border-top-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-}
-
-.c0.grouped:last-child {
-  border-right-width: 1px;
-  border-top-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-
-.c0.grouped:focus,
-.c0.grouped:active,
-.c0.grouped:hover {
-  border-right-width: 1px;
-}
-
-.c0.grouped:focus + .grouped,
-.c0.grouped:active + .grouped,
-.c0.grouped:hover + .grouped {
-  border-left-width: 0;
 }
 
 .c0:focus,
@@ -333,38 +191,32 @@ exports[`ButtonOutline renders correct disabled styles 1`] = `
 }
 
 .c0:disabled {
-  color: rgba(36,41,46,0.4);
-  background-color: #eff3f6;
-  background-image: none;
-  border-color: rgba(27,31,35,0.20);
-  box-shadow: none;
   cursor: default;
 }
 
 .c0:hover {
-  color: rgb(255,255,255);
-  background-color: rgb(3,102,214);
-  background-image: none;
-  border-color: rgb(3,102,214);
+  color: #fff;
+  background-color: #0366d6;
+  border-color: #005cc5;
+  box-shadow: 0px 1px 0px rgba(149,157,165,0.1),inset 0px 2px 0px rgba(255,255,255,0.03);
 }
 
-.c0:active {
-  color: rgb(255,255,255);
-  background-color: rgb(3,102,214);
-  background-image: none;
-  border-color: rgb(3,102,214);
+.c0:focus {
+  border-color: transparent;
+  box-shadow: 0 0 0 3px rgba(3,102,214,0.3);
 }
 
-.c0:focus {
-  box-shadow: rgba(3,102,214,0.4) 0px 0px 0px 0.2em;
-  border-color: rgb(3,102,214);
+.c0:active {
+  color: #fff;
+  background-color: #035fc7;
+  border-color: rgba(4,66,137,.5);
+  box-shadow: inset 0px 1px 0px rgba(4,66,137,0.2);
 }
 
 .c0:disabled {
-  color: rgba(27,31,35,0.3);
-  background-color: #fff;
-  border-color: rgba(27,31,35,0.15);
-  box-shadow: none;
+  color: #959da5;
+  border-color: #e1e4e8;
+  background-color: #F3F4F6;
 }
 
 <button
@@ -377,11 +229,7 @@ exports[`ButtonPrimary renders correct disabled styles 1`] = `
 .c0 {
   position: relative;
   display: inline-block;
-  padding: 6px 12px;
-  color: #24292e;
-  background-color: #f6f8fa;
-  background-image: linear-gradient(-180deg,#fafbfc 0%,rgb(239,243,246) 90%);
-  font-size: 14px;
+  padding: 6px 16px;
   font-weight: 600;
   line-height: 20px;
   white-space: nowrap;
@@ -391,71 +239,26 @@ exports[`ButtonPrimary renders correct disabled styles 1`] = `
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  background-repeat: repeat-x;
-  background-position: -1px -1px;
-  background-size: 110% 110%;
-  border: 1px solid rgba(27,31,35,0.2);
-  border-radius: 3px;
+  border-radius: 6px;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   -webkit-text-decoration: none;
   text-decoration: none;
   font-size: 14px;
-  color: rgb(255,255,255);
-  background-color: rgb(40,167,69);
-  background-image: linear-gradient( -180deg,rgb(52,208,88) 0%,rgb(40,167,69) 90% );
+  color: #fff;
+  background-color: #159739;
+  border: 1px solid #22863a;
+  box-shadow: 0px 1px 0px rgba(20,70,32,0.1),inset 0px 2px 0px rgba(255,255,255,0.03);
 }
 
 .c0:hover {
-  background-color: rgb(230,235,241);
-  background-image: linear-gradient(-180deg,rgb(239,243,246) 0%,rgb(230,235,241) 90%);
-  background-position: -0.5em center;
-  border-color: rgba(27,31,35,0.35);
   -webkit-text-decoration: none;
   text-decoration: none;
-  background-repeat: repeat-x;
-}
-
-.c0:active {
-  background-color: rgb(233,236,239);
-  background-image: none;
-  box-shadow: rgba(27,31,35,0.15) 0px 0.15em 0.3em inset;
-  border-color: rgba(27,31,35,0.2);
 }
 
 .c0:focus {
   outline: none;
-  box-shadow: rgba(3,102,214,0.3) 0px 0px 0px 0.2em;
-}
-
-.c0.grouped {
-  position: relative;
-  border-right-width: 0;
-  border-radius: 0;
-}
-
-.c0.grouped:first-child {
-  border-top-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-}
-
-.c0.grouped:last-child {
-  border-right-width: 1px;
-  border-top-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-
-.c0.grouped:focus,
-.c0.grouped:active,
-.c0.grouped:hover {
-  border-right-width: 1px;
-}
-
-.c0.grouped:focus + .grouped,
-.c0.grouped:active + .grouped,
-.c0.grouped:hover + .grouped {
-  border-left-width: 0;
 }
 
 .c0:focus,
@@ -464,38 +267,30 @@ exports[`ButtonPrimary renders correct disabled styles 1`] = `
 }
 
 .c0:disabled {
-  color: rgba(36,41,46,0.4);
-  background-color: #eff3f6;
-  background-image: none;
-  border-color: rgba(27,31,35,0.20);
-  box-shadow: none;
   cursor: default;
 }
 
 .c0:hover {
-  background-color: rgb(38,159,66);
-  background-image: linear-gradient( -180deg,rgb(47,203,83) 0%,rgb(38,159,66) 90% );
-  background-position: -0.5em center;
-  border-color: rgba(27,31,35,0.5);
+  background-color: #138934;
+  border-color: #176f2c;
 }
 
-.c0:active {
-  background-color: rgb(39,159,67);
-  background-image: none;
-  box-shadow: rgba(27,31,35,0.15) 0px 0.15em 0.3em inset;
-  border-color: rgba(27,31,35,0.5);
+.c0:focus {
+  border-color: transparent;
+  box-shadow: 0 0 0 3px #94D3A2;
+  background-color: #138934;
 }
 
-.c0:focus {
-  box-shadow: rgba(52,208,88,0.4) 0px 0px 0px 0.2em;
+.c0:active {
+  background-color: #128031;
+  box-shadow: inset 0px 1px 0px rgba(20,70,32,0.2);
+  border-color: #176f2c;
 }
 
 .c0:disabled {
-  color: rgba(255,255,255,.75);
-  background-color: #94d3a2;
-  background-image: none;
-  border-color: rgba(27,31,35,0.2);
-  box-shadow: none;
+  color: rgba(255,255,255,0.50);
+  background-color: #94D3A2;
+  border-color: rgba(34,134,58,0.1);
 }
 
 <button
diff --git a/src/__tests__/__snapshots__/Dropdown.js.snap b/src/__tests__/__snapshots__/Dropdown.js.snap
index 000abd4b0c9..d4659409279 100644
--- a/src/__tests__/__snapshots__/Dropdown.js.snap
+++ b/src/__tests__/__snapshots__/Dropdown.js.snap
@@ -4,11 +4,7 @@ exports[`Dropdown matches the snapshots 1`] = `
 .c2 {
   position: relative;
   display: inline-block;
-  padding: 6px 12px;
-  color: #24292e;
-  background-color: #f6f8fa;
-  background-image: linear-gradient(-180deg,#fafbfc 0%,rgb(239,243,246) 90%);
-  font-size: 14px;
+  padding: 6px 16px;
   font-weight: 600;
   line-height: 20px;
   white-space: nowrap;
@@ -18,83 +14,57 @@ exports[`Dropdown matches the snapshots 1`] = `
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  background-repeat: repeat-x;
-  background-position: -1px -1px;
-  background-size: 110% 110%;
-  border: 1px solid rgba(27,31,35,0.2);
-  border-radius: 3px;
+  border-radius: 6px;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   -webkit-text-decoration: none;
   text-decoration: none;
   font-size: 14px;
-  color: #444d56;
+  color: #24292e;
+  background-color: #fafbfc;
+  border: 1px solid #e1e4e8;
+  box-shadow: 0px 1px 0px rgba(149,157,165,0.1),inset 0px 2px 0px rgba(255,255,255,0.25);
 }
 
 .c2:hover {
-  background-color: rgb(230,235,241);
-  background-image: linear-gradient(-180deg,rgb(239,243,246) 0%,rgb(230,235,241) 90%);
-  background-position: -0.5em center;
-  border-color: rgba(27,31,35,0.35);
   -webkit-text-decoration: none;
   text-decoration: none;
-  background-repeat: repeat-x;
-}
-
-.c2:active {
-  background-color: rgb(233,236,239);
-  background-image: none;
-  box-shadow: rgba(27,31,35,0.15) 0px 0.15em 0.3em inset;
-  border-color: rgba(27,31,35,0.2);
 }
 
 .c2:focus {
   outline: none;
-  box-shadow: rgba(3,102,214,0.3) 0px 0px 0px 0.2em;
 }
 
-.c2.grouped {
-  position: relative;
-  border-right-width: 0;
-  border-radius: 0;
-}
-
-.c2.grouped:first-child {
-  border-top-left-radius: 3px;
-  border-bottom-left-radius: 3px;
+.c2:focus,
+.c2:active {
+  z-index: 1;
 }
 
-.c2.grouped:last-child {
-  border-right-width: 1px;
-  border-top-right-radius: 3px;
-  border-bottom-right-radius: 3px;
+.c2:disabled {
+  cursor: default;
 }
 
-.c2.grouped:focus,
-.c2.grouped:active,
-.c2.grouped:hover {
-  border-right-width: 1px;
+.c2:hover {
+  background-color: #F3F4F6;
+  box-shadow: 0px 1px 0px rgba(209,213,218,0.2),inset 0px 2px 0px rgba(255,255,255,0.1);
 }
 
-.c2.grouped:focus + .grouped,
-.c2.grouped:active + .grouped,
-.c2.grouped:hover + .grouped {
-  border-left-width: 0;
+.c2:focus {
+  border-color: transparent;
+  box-shadow: 0 0 0 3px rgba(3,102,214,0.3);
 }
 
-.c2:focus,
 .c2:active {
-  z-index: 1;
+  background-color: #edeff2;
+  box-shadow: inset 0px 2px 0px rgba(149,157,165,0.1);
+  border-color: #d1d5da;
 }
 
 .c2:disabled {
-  color: rgba(36,41,46,0.4);
-  background-color: #eff3f6;
-  background-image: none;
-  border-color: rgba(27,31,35,0.20);
-  box-shadow: none;
-  cursor: default;
+  color: #959da5;
+  background-color: #fafbfc;
+  border-color: #eaecef;
 }
 
 .c0 > summary {
@@ -112,7 +82,7 @@ exports[`Dropdown matches the snapshots 1`] = `
 
 .c3 {
   border: 4px solid transparent;
-  margin-left: 4px;
+  margin-left: 12px;
   border-top-color: currentcolor;
   border-bottom-width: 0;
   content: '';
@@ -130,7 +100,6 @@ exports[`Dropdown matches the snapshots 1`] = `
   <summary
     aria-haspopup="true"
     className="c2"
-    color="gray.7"
   >
     <div
       className="c3"
@@ -144,11 +113,7 @@ exports[`Dropdown matches the snapshots 2`] = `
 .c2 {
   position: relative;
   display: inline-block;
-  padding: 6px 12px;
-  color: #24292e;
-  background-color: #f6f8fa;
-  background-image: linear-gradient(-180deg,#fafbfc 0%,rgb(239,243,246) 90%);
-  font-size: 14px;
+  padding: 6px 16px;
   font-weight: 600;
   line-height: 20px;
   white-space: nowrap;
@@ -158,83 +123,57 @@ exports[`Dropdown matches the snapshots 2`] = `
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  background-repeat: repeat-x;
-  background-position: -1px -1px;
-  background-size: 110% 110%;
-  border: 1px solid rgba(27,31,35,0.2);
-  border-radius: 3px;
+  border-radius: 6px;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   -webkit-text-decoration: none;
   text-decoration: none;
   font-size: 14px;
-  color: #444d56;
+  color: #24292e;
+  background-color: #fafbfc;
+  border: 1px solid #e1e4e8;
+  box-shadow: 0px 1px 0px rgba(149,157,165,0.1),inset 0px 2px 0px rgba(255,255,255,0.25);
 }
 
 .c2:hover {
-  background-color: rgb(230,235,241);
-  background-image: linear-gradient(-180deg,rgb(239,243,246) 0%,rgb(230,235,241) 90%);
-  background-position: -0.5em center;
-  border-color: rgba(27,31,35,0.35);
   -webkit-text-decoration: none;
   text-decoration: none;
-  background-repeat: repeat-x;
-}
-
-.c2:active {
-  background-color: rgb(233,236,239);
-  background-image: none;
-  box-shadow: rgba(27,31,35,0.15) 0px 0.15em 0.3em inset;
-  border-color: rgba(27,31,35,0.2);
 }
 
 .c2:focus {
   outline: none;
-  box-shadow: rgba(3,102,214,0.3) 0px 0px 0px 0.2em;
 }
 
-.c2.grouped {
-  position: relative;
-  border-right-width: 0;
-  border-radius: 0;
-}
-
-.c2.grouped:first-child {
-  border-top-left-radius: 3px;
-  border-bottom-left-radius: 3px;
+.c2:focus,
+.c2:active {
+  z-index: 1;
 }
 
-.c2.grouped:last-child {
-  border-right-width: 1px;
-  border-top-right-radius: 3px;
-  border-bottom-right-radius: 3px;
+.c2:disabled {
+  cursor: default;
 }
 
-.c2.grouped:focus,
-.c2.grouped:active,
-.c2.grouped:hover {
-  border-right-width: 1px;
+.c2:hover {
+  background-color: #F3F4F6;
+  box-shadow: 0px 1px 0px rgba(209,213,218,0.2),inset 0px 2px 0px rgba(255,255,255,0.1);
 }
 
-.c2.grouped:focus + .grouped,
-.c2.grouped:active + .grouped,
-.c2.grouped:hover + .grouped {
-  border-left-width: 0;
+.c2:focus {
+  border-color: transparent;
+  box-shadow: 0 0 0 3px rgba(3,102,214,0.3);
 }
 
-.c2:focus,
 .c2:active {
-  z-index: 1;
+  background-color: #edeff2;
+  box-shadow: inset 0px 2px 0px rgba(149,157,165,0.1);
+  border-color: #d1d5da;
 }
 
 .c2:disabled {
-  color: rgba(36,41,46,0.4);
-  background-color: #eff3f6;
-  background-image: none;
-  border-color: rgba(27,31,35,0.20);
-  box-shadow: none;
-  cursor: default;
+  color: #959da5;
+  background-color: #fafbfc;
+  border-color: #eaecef;
 }
 
 .c0 > summary {
@@ -252,7 +191,7 @@ exports[`Dropdown matches the snapshots 2`] = `
 
 .c3 {
   border: 4px solid transparent;
-  margin-left: 4px;
+  margin-left: 12px;
   border-top-color: currentcolor;
   border-bottom-width: 0;
   content: '';
@@ -270,7 +209,6 @@ exports[`Dropdown matches the snapshots 2`] = `
   <summary
     aria-haspopup="true"
     className="c2"
-    color="gray.7"
   >
     hi
     <div
@@ -378,7 +316,7 @@ exports[`Dropdown.Menu matches the snapshots 1`] = `
   background-clip: padding-box;
   background-color: #fff;
   border: 1px solid rgba(27,31,35,0.15);
-  border-radius: 3px;
+  border-radius: 6px;
   box-shadow: 0 3px 12px rgba(27,31,35,0.15);
   left: 0;
   list-style: none;
@@ -451,7 +389,7 @@ exports[`Dropdown.Menu matches the snapshots 2`] = `
   background-clip: padding-box;
   background-color: #fff;
   border: 1px solid rgba(27,31,35,0.15);
-  border-radius: 3px;
+  border-radius: 6px;
   box-shadow: 0 3px 12px rgba(27,31,35,0.15);
   left: 0;
   list-style: none;
diff --git a/src/__tests__/__snapshots__/FilterListItem.js.snap b/src/__tests__/__snapshots__/FilterListItem.js.snap
index ab77eff2607..a8400eefd40 100644
--- a/src/__tests__/__snapshots__/FilterListItem.js.snap
+++ b/src/__tests__/__snapshots__/FilterListItem.js.snap
@@ -48,7 +48,111 @@ exports[`FilterList.Item renders the given "as" prop 1`] = `
         "1012px",
         "1280px",
       ],
+      "buttons": Object {
+        "danger": Object {
+          "bg": Object {
+            "active": "#be222e",
+            "default": "#fafbfc",
+            "disabled": "#F3F4F6",
+            "hover": "#cb2431",
+          },
+          "border": Object {
+            "active": "#9e1c23",
+            "default": "#e1e4e8",
+            "hover": "#b31d28",
+          },
+          "color": Object {
+            "active": "#fff",
+            "default": "#cb2431",
+            "disabled": "rgba(203,36,49, .5)",
+            "hover": "#fff",
+          },
+          "shadow": Object {
+            "active": "inset 0px 2px 0px rgba(179, 29, 40, 0.4)",
+            "default": "0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.25)",
+            "focus": "0 0 0 3px rgba(203, 36, 49, 0.4)",
+            "hover": "0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)",
+          },
+        },
+        "default": Object {
+          "bg": Object {
+            "active": "#edeff2",
+            "default": "#fafbfc",
+            "disabled": "#fafbfc",
+            "hover": "#F3F4F6",
+          },
+          "border": Object {
+            "active": "#d1d5da",
+            "default": "#e1e4e8",
+            "disabled": "#eaecef",
+          },
+          "color": Object {
+            "default": "#24292e",
+            "disabled": "#959da5",
+          },
+          "shadow": Object {
+            "active": "inset 0px 2px 0px rgba(149, 157, 165, 0.1)",
+            "default": "0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.25)",
+            "focus": "0 0 0 3px rgba(3, 102, 214, 0.3)",
+            "hover": "0px 1px 0px rgba(209, 213, 218, 0.2), inset 0px 2px 0px rgba(255, 255, 255, 0.1)",
+          },
+        },
+        "outline": Object {
+          "bg": Object {
+            "active": "#035fc7",
+            "default": "#fafbfc",
+            "disabled": "#F3F4F6",
+            "hover": "#0366d6",
+          },
+          "border": Object {
+            "active": "rgba(4, 66, 137, .5)",
+            "default": "#e1e4e8",
+            "hover": "#005cc5",
+          },
+          "color": Object {
+            "active": "#fff",
+            "default": "#005cc5",
+            "disabled": "#959da5",
+            "hover": "#fff",
+          },
+          "shadow": Object {
+            "active": "inset 0px 1px 0px rgba(4, 66, 137, 0.2)",
+            "default": "0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.25)",
+            "focus": "0 0 0 3px rgba(3, 102, 214, 0.3)",
+            "hover": "0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)",
+          },
+        },
+        "primary": Object {
+          "bg": Object {
+            "active": "#128031",
+            "default": "#159739",
+            "disabled": "#94D3A2",
+            "focus": "#138934",
+            "hover": "#138934",
+          },
+          "border": Object {
+            "active": "#176f2c",
+            "default": "#22863a",
+            "disabled": "rgba(34, 134, 58, 0.1)",
+            "hover": "#176f2c",
+          },
+          "color": Object {
+            "default": "#fff",
+            "disabled": "rgba(255, 255, 255, 0.50)",
+          },
+          "shadow": Object {
+            "active": "inset 0px 1px 0px rgba(20, 70, 32, 0.2)",
+            "default": " 0px 1px 0px rgba(20, 70, 32, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)",
+            "focus": "0 0 0 3px #94D3A2",
+          },
+        },
+      },
       "colors": Object {
+        "bg": Object {
+          "disabled": "#F3F4F6",
+          "gray": "#f6f8fa",
+          "grayLight": "#fafbfc",
+        },
         "black": "#1b1f23",
         "blackfade15": "rgba(27, 31, 35, 0.15)",
         "blackfade20": "rgba(27, 31, 35, 0.20)",
@@ -68,32 +172,10 @@ exports[`FilterList.Item renders the given "as" prop 1`] = `
           "#05264c",
         ],
         "bodytext": "#24292e",
-        "button": Object {
-          "activeBg": "rgb(233, 236, 239)",
-          "bg2": "rgb(239, 243, 246)",
-          "border": "rgba(27, 31, 35, 0.2)",
-          "dangerActiveBg": "rgb(181, 32, 44)",
-          "dangerDisabledColor": "rgba(203,36,49,0.4)",
-          "dangerFocusShadow": "rgba(203, 36, 49, 0.4)",
-          "dangerHoverBgImage": "rgb(222, 68, 80)",
-          "disabledBg": "#eff3f6",
-          "disabledColor": "rgba(36, 41, 46, 0.4)",
-          "focusShadow": "rgba(3, 102, 214, 0.3)",
-          "hoverBg": "rgb(230, 235, 241)",
-          "outlineBlue": "rgb(3, 102, 214)",
-          "outlineShadow": "rgba(3, 102, 214, 0.4)",
-          "primaryActiveBg": "rgb(39, 159, 67)",
-          "primaryActiveShadow": "rgba(27, 31, 35, 0.15)",
-          "primaryBg": "rgb(40, 167, 69)",
-          "primaryBgImage": "rgb(52, 208, 88)",
-          "primaryBorder": "rgba(27, 31, 35, 0.5)",
-          "primaryDisabledBg": "#94d3a2",
-          "primaryDisabledBorder": "rgba(27,31,35,0.2)",
-          "primaryDisabledColor": "rgba(255, 255, 255, .75)",
-          "primaryFocusShadow": "rgba(52, 208, 88, 0.4)",
-          "primaryHoverBg": "rgb(38, 159, 66)",
-          "primaryHoverBgImage": "rgb(47, 203, 83)",
-          "white": "rgb(255, 255, 255)",
+        "border": Object {
+          "gray": "#e1e4e8",
+          "grayDark": "#d1d5da",
+          "grayLight": "#eaecef",
         },
         "counter": Object {
           "bg": "rgba(27, 31, 35, 0.08)",
@@ -169,8 +251,15 @@ exports[`FilterList.Item renders the given "as" prop 1`] = `
           "success": "#28a745",
           "unknown": "#959da5",
         },
+        "text": Object {
+          "gray": "#586069",
+          "grayDark": "#24292e",
+          "grayLight": "#6a737d",
+          "red": "#cb2431",
+        },
         "white": "#fff",
         "whitefade15": "rgba(255, 255, 255, 0.15)",
+        "whitefade50": "rgba(255, 255, 255, 0.50)",
         "yellow": Array [
           "#fffdef",
           "#fffbdd",
@@ -219,13 +308,17 @@ exports[`FilterList.Item renders the given "as" prop 1`] = `
         "0",
         "3px",
         "6px",
+        "100px",
       ],
       "shadows": Object {
         "extra-large": "0 10px 50px rgba(27, 31, 35, 0.07)",
-        "formControl": "rgba(27, 31, 35, 0.075) 0px 1px 2px inset",
+        "formControl": "inset 0px 2px 0px rgba(225, 228, 232, 0.2)",
+        "formControlDisabled": "inset 0px 2px 0px rgba(220, 227, 237, 0.3)",
         "formControlFocus": "rgba(3, 102, 214, 0.3) 0px 0px 0px 0.2em",
         "large": "0 1px 15px rgba(27, 31, 35, 0.15)",
         "medium": "0 1px 5px rgba(27, 31, 35, 0.15)",
+        "primaryActiveShadow": "inset 0px 1px 0px rgba(20, 70, 32, 0.2)",
+        "primaryShadow": "0px 1px 0px rgba(20, 70, 32, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)",
         "small": "0 1px 1px rgba(27, 31, 35, 0.1)",
       },
       "space": Array [
diff --git a/src/__tests__/__snapshots__/Label.js.snap b/src/__tests__/__snapshots__/Label.js.snap
index 1bfb8627ad4..8761b29b449 100644
--- a/src/__tests__/__snapshots__/Label.js.snap
+++ b/src/__tests__/__snapshots__/Label.js.snap
@@ -4,22 +4,19 @@ exports[`Label respects the "outline" prop 1`] = `
 .c0 {
   display: inline-block;
   font-weight: 600;
-  line-height: 1;
   color: #fff;
-  border-radius: 2px;
+  border-radius: 100px;
   font-size: 12px;
-  padding-left: 3px;
-  padding-right: 3px;
-  padding-top: 4px;
-  padding-bottom: 4px;
+  line-height: 20px;
+  padding: 0 8px;
   background-color: #6a737d;
   margin-top: -1px;
   margin-bottom: -1px;
-  font-weight: 400;
   color: #586069;
-  background-color: transparent;
   border: 1px solid rgba(27,31,35,0.15);
   box-shadow: none;
+  background-color: #6a737d;
+  background-color: transparent;
 }
 
 .c0:hover {
@@ -36,14 +33,11 @@ exports[`Label respects the "variant" prop 1`] = `
 .c0 {
   display: inline-block;
   font-weight: 600;
-  line-height: 1;
   color: #fff;
-  border-radius: 2px;
-  font-size: 16px;
-  padding-left: 4px;
-  padding-right: 4px;
-  padding-top: 8px;
-  padding-bottom: 8px;
+  border-radius: 100px;
+  font-size: 14px;
+  line-height: 16px;
+  padding: 8px 12px;
   background-color: #6a737d;
 }
 
diff --git a/src/__tests__/__snapshots__/LabelGroup.js.snap b/src/__tests__/__snapshots__/LabelGroup.js.snap
index ac3ca67a2c4..3a8aeac5699 100644
--- a/src/__tests__/__snapshots__/LabelGroup.js.snap
+++ b/src/__tests__/__snapshots__/LabelGroup.js.snap
@@ -12,14 +12,11 @@ exports[`BranchName matches snapshot 1`] = `
 .c1 {
   display: inline-block;
   font-weight: 600;
-  line-height: 1;
   color: #fff;
-  border-radius: 2px;
+  border-radius: 100px;
   font-size: 12px;
-  padding-left: 3px;
-  padding-right: 3px;
-  padding-top: 4px;
-  padding-bottom: 4px;
+  line-height: 20px;
+  padding: 0 8px;
   background-color: #6a737d;
 }
 
@@ -31,22 +28,19 @@ exports[`BranchName matches snapshot 1`] = `
 .c2 {
   display: inline-block;
   font-weight: 600;
-  line-height: 1;
   color: #fff;
-  border-radius: 2px;
+  border-radius: 100px;
   font-size: 12px;
-  padding-left: 3px;
-  padding-right: 3px;
-  padding-top: 4px;
-  padding-bottom: 4px;
+  line-height: 20px;
+  padding: 0 8px;
   background-color: #6a737d;
   margin-top: -1px;
   margin-bottom: -1px;
-  font-weight: 400;
   color: #586069;
-  background-color: transparent;
   border: 1px solid rgba(27,31,35,0.15);
   box-shadow: none;
+  background-color: #6a737d;
+  background-color: transparent;
 }
 
 .c2:hover {
diff --git a/src/__tests__/__snapshots__/PointerBox.js.snap b/src/__tests__/__snapshots__/PointerBox.js.snap
index 1c76e3bccaf..c21a3131476 100644
--- a/src/__tests__/__snapshots__/PointerBox.js.snap
+++ b/src/__tests__/__snapshots__/PointerBox.js.snap
@@ -5,7 +5,7 @@ exports[`PointerBox passes the "bg" prop to both <BorderBox> and <Caret> 1`] = `
   background-color: #d73a49;
   border: 1px solid;
   border-color: #e1e4e8;
-  border-radius: 3px;
+  border-radius: 6px;
 }
 
 .c0 {
@@ -55,7 +55,7 @@ exports[`PointerBox passes the "borderColor" prop to both <BorderBox> and <Caret
 .c1 {
   border-color: #d73a49;
   border: 1px solid;
-  border-radius: 3px;
+  border-radius: 6px;
 }
 
 .c0 {
@@ -105,7 +105,7 @@ exports[`PointerBox renders a <Caret> in <BorderBox> with relative positioning 1
 .c1 {
   border: 1px solid;
   border-color: #e1e4e8;
-  border-radius: 3px;
+  border-radius: 6px;
 }
 
 .c0 {
diff --git a/src/__tests__/__snapshots__/SideNav.js.snap b/src/__tests__/__snapshots__/SideNav.js.snap
index b8e0ff7c8d6..ccd14ec95f5 100644
--- a/src/__tests__/__snapshots__/SideNav.js.snap
+++ b/src/__tests__/__snapshots__/SideNav.js.snap
@@ -4,7 +4,7 @@ exports[`SideNav and SideNav.Link renders with default props 1`] = `
 .c0 {
   border: none;
   border-color: #e1e4e8;
-  border-radius: 3px;
+  border-radius: 6px;
 }
 
 .c2 {
@@ -26,10 +26,6 @@ exports[`SideNav and SideNav.Link renders with default props 1`] = `
   border-top: 0;
 }
 
-.c1.variant-normal > .c3:last-child {
-  box-shadow: 0 1px 0 #e1e4e8;
-}
-
 .c1.variant-normal > .c3::before {
   position: absolute;
   top: 0;
@@ -68,7 +64,7 @@ exports[`SideNav and SideNav.Link renders with default props 1`] = `
 
 .c1.variant-normal > .c3[aria-current='page']::before,
 .c1.variant-normal > .c3[aria-selected='true']::before {
-  background-color: #d15704;
+  background-color: #f66a0a;
 }
 
 .c1.variant-lightweight > .c3 {
@@ -127,10 +123,6 @@ exports[`SideNav and SideNav.Link renders with default props 2`] = `
   border-top: 0;
 }
 
-.c1.variant-normal > .c0:last-child {
-  box-shadow: 0 1px 0 #e1e4e8;
-}
-
 .c1.variant-normal > .c0::before {
   position: absolute;
   top: 0;
@@ -169,7 +161,7 @@ exports[`SideNav and SideNav.Link renders with default props 2`] = `
 
 .c1.variant-normal > .c0[aria-current='page']::before,
 .c1.variant-normal > .c0[aria-selected='true']::before {
-  background-color: #d15704;
+  background-color: #f66a0a;
 }
 
 .c1.variant-lightweight > .c0 {
diff --git a/src/__tests__/__snapshots__/StateLabel.js.snap b/src/__tests__/__snapshots__/StateLabel.js.snap
index c76b0651fda..708477ab03c 100644
--- a/src/__tests__/__snapshots__/StateLabel.js.snap
+++ b/src/__tests__/__snapshots__/StateLabel.js.snap
@@ -10,14 +10,14 @@ exports[`StateLabel renders children 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  padding: 4px 8px;
+  padding: 8px 12px;
   font-weight: 600;
-  line-height: 20px;
+  line-height: 16px;
   color: #fff;
   font-size: 14px;
   text-align: center;
   background-color: #6a737d;
-  border-radius: 3px;
+  border-radius: 100px;
 }
 
 <span
@@ -37,14 +37,14 @@ exports[`StateLabel respects the small flag 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  padding: 0.125em 4px;
+  padding: 4px 8px;
   font-weight: 600;
-  line-height: 20px;
+  line-height: 16px;
   color: #fff;
   font-size: 12px;
   text-align: center;
   background-color: #6a737d;
-  border-radius: 3px;
+  border-radius: 100px;
 }
 
 <span
@@ -62,14 +62,14 @@ exports[`StateLabel respects the small flag 2`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  padding: 4px 8px;
+  padding: 8px 12px;
   font-weight: 600;
-  line-height: 20px;
+  line-height: 16px;
   color: #fff;
   font-size: 14px;
   text-align: center;
   background-color: #6a737d;
-  border-radius: 3px;
+  border-radius: 100px;
 }
 
 <span
@@ -91,14 +91,14 @@ exports[`StateLabel respects the status prop 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  padding: 4px 8px;
+  padding: 8px 12px;
   font-weight: 600;
-  line-height: 20px;
+  line-height: 16px;
   color: #fff;
   font-size: 14px;
   text-align: center;
-  background-color: #2cbe4e;
-  border-radius: 3px;
+  background-color: #159739;
+  border-radius: 100px;
 }
 
 <span
@@ -142,14 +142,14 @@ exports[`StateLabel respects the status prop 2`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  padding: 4px 8px;
+  padding: 8px 12px;
   font-weight: 600;
-  line-height: 20px;
+  line-height: 16px;
   color: #fff;
   font-size: 14px;
   text-align: center;
   background-color: #cb2431;
-  border-radius: 3px;
+  border-radius: 100px;
 }
 
 <span
@@ -193,14 +193,14 @@ exports[`StateLabel respects the status prop 3`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  padding: 4px 8px;
+  padding: 8px 12px;
   font-weight: 600;
-  line-height: 20px;
+  line-height: 16px;
   color: #fff;
   font-size: 14px;
   text-align: center;
   background-color: #6f42c1;
-  border-radius: 3px;
+  border-radius: 100px;
 }
 
 <span
diff --git a/src/__tests__/__snapshots__/SubNavLink.js.snap b/src/__tests__/__snapshots__/SubNavLink.js.snap
index 79666cdc866..2c426a7aad5 100644
--- a/src/__tests__/__snapshots__/SubNavLink.js.snap
+++ b/src/__tests__/__snapshots__/SubNavLink.js.snap
@@ -26,14 +26,14 @@ exports[`SubNav.Link renders the given "as" prop 1`] = `
 }
 
 .c0:first-of-type {
-  border-top-left-radius: 3px;
-  border-bottom-left-radius: 3px;
+  border-top-left-radius: 6px;
+  border-bottom-left-radius: 6px;
   border-left: 1px solid #e1e4e8;
 }
 
 .c0:last-of-type {
-  border-top-right-radius: 3px;
-  border-bottom-right-radius: 3px;
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
 }
 
 .c0:hover,
@@ -75,7 +75,111 @@ exports[`SubNav.Link renders the given "as" prop 1`] = `
         "1012px",
         "1280px",
       ],
+      "buttons": Object {
+        "danger": Object {
+          "bg": Object {
+            "active": "#be222e",
+            "default": "#fafbfc",
+            "disabled": "#F3F4F6",
+            "hover": "#cb2431",
+          },
+          "border": Object {
+            "active": "#9e1c23",
+            "default": "#e1e4e8",
+            "hover": "#b31d28",
+          },
+          "color": Object {
+            "active": "#fff",
+            "default": "#cb2431",
+            "disabled": "rgba(203,36,49, .5)",
+            "hover": "#fff",
+          },
+          "shadow": Object {
+            "active": "inset 0px 2px 0px rgba(179, 29, 40, 0.4)",
+            "default": "0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.25)",
+            "focus": "0 0 0 3px rgba(203, 36, 49, 0.4)",
+            "hover": "0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)",
+          },
+        },
+        "default": Object {
+          "bg": Object {
+            "active": "#edeff2",
+            "default": "#fafbfc",
+            "disabled": "#fafbfc",
+            "hover": "#F3F4F6",
+          },
+          "border": Object {
+            "active": "#d1d5da",
+            "default": "#e1e4e8",
+            "disabled": "#eaecef",
+          },
+          "color": Object {
+            "default": "#24292e",
+            "disabled": "#959da5",
+          },
+          "shadow": Object {
+            "active": "inset 0px 2px 0px rgba(149, 157, 165, 0.1)",
+            "default": "0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.25)",
+            "focus": "0 0 0 3px rgba(3, 102, 214, 0.3)",
+            "hover": "0px 1px 0px rgba(209, 213, 218, 0.2), inset 0px 2px 0px rgba(255, 255, 255, 0.1)",
+          },
+        },
+        "outline": Object {
+          "bg": Object {
+            "active": "#035fc7",
+            "default": "#fafbfc",
+            "disabled": "#F3F4F6",
+            "hover": "#0366d6",
+          },
+          "border": Object {
+            "active": "rgba(4, 66, 137, .5)",
+            "default": "#e1e4e8",
+            "hover": "#005cc5",
+          },
+          "color": Object {
+            "active": "#fff",
+            "default": "#005cc5",
+            "disabled": "#959da5",
+            "hover": "#fff",
+          },
+          "shadow": Object {
+            "active": "inset 0px 1px 0px rgba(4, 66, 137, 0.2)",
+            "default": "0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.25)",
+            "focus": "0 0 0 3px rgba(3, 102, 214, 0.3)",
+            "hover": "0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)",
+          },
+        },
+        "primary": Object {
+          "bg": Object {
+            "active": "#128031",
+            "default": "#159739",
+            "disabled": "#94D3A2",
+            "focus": "#138934",
+            "hover": "#138934",
+          },
+          "border": Object {
+            "active": "#176f2c",
+            "default": "#22863a",
+            "disabled": "rgba(34, 134, 58, 0.1)",
+            "hover": "#176f2c",
+          },
+          "color": Object {
+            "default": "#fff",
+            "disabled": "rgba(255, 255, 255, 0.50)",
+          },
+          "shadow": Object {
+            "active": "inset 0px 1px 0px rgba(20, 70, 32, 0.2)",
+            "default": " 0px 1px 0px rgba(20, 70, 32, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)",
+            "focus": "0 0 0 3px #94D3A2",
+          },
+        },
+      },
       "colors": Object {
+        "bg": Object {
+          "disabled": "#F3F4F6",
+          "gray": "#f6f8fa",
+          "grayLight": "#fafbfc",
+        },
         "black": "#1b1f23",
         "blackfade15": "rgba(27, 31, 35, 0.15)",
         "blackfade20": "rgba(27, 31, 35, 0.20)",
@@ -95,32 +199,10 @@ exports[`SubNav.Link renders the given "as" prop 1`] = `
           "#05264c",
         ],
         "bodytext": "#24292e",
-        "button": Object {
-          "activeBg": "rgb(233, 236, 239)",
-          "bg2": "rgb(239, 243, 246)",
-          "border": "rgba(27, 31, 35, 0.2)",
-          "dangerActiveBg": "rgb(181, 32, 44)",
-          "dangerDisabledColor": "rgba(203,36,49,0.4)",
-          "dangerFocusShadow": "rgba(203, 36, 49, 0.4)",
-          "dangerHoverBgImage": "rgb(222, 68, 80)",
-          "disabledBg": "#eff3f6",
-          "disabledColor": "rgba(36, 41, 46, 0.4)",
-          "focusShadow": "rgba(3, 102, 214, 0.3)",
-          "hoverBg": "rgb(230, 235, 241)",
-          "outlineBlue": "rgb(3, 102, 214)",
-          "outlineShadow": "rgba(3, 102, 214, 0.4)",
-          "primaryActiveBg": "rgb(39, 159, 67)",
-          "primaryActiveShadow": "rgba(27, 31, 35, 0.15)",
-          "primaryBg": "rgb(40, 167, 69)",
-          "primaryBgImage": "rgb(52, 208, 88)",
-          "primaryBorder": "rgba(27, 31, 35, 0.5)",
-          "primaryDisabledBg": "#94d3a2",
-          "primaryDisabledBorder": "rgba(27,31,35,0.2)",
-          "primaryDisabledColor": "rgba(255, 255, 255, .75)",
-          "primaryFocusShadow": "rgba(52, 208, 88, 0.4)",
-          "primaryHoverBg": "rgb(38, 159, 66)",
-          "primaryHoverBgImage": "rgb(47, 203, 83)",
-          "white": "rgb(255, 255, 255)",
+        "border": Object {
+          "gray": "#e1e4e8",
+          "grayDark": "#d1d5da",
+          "grayLight": "#eaecef",
         },
         "counter": Object {
           "bg": "rgba(27, 31, 35, 0.08)",
@@ -196,8 +278,15 @@ exports[`SubNav.Link renders the given "as" prop 1`] = `
           "success": "#28a745",
           "unknown": "#959da5",
         },
+        "text": Object {
+          "gray": "#586069",
+          "grayDark": "#24292e",
+          "grayLight": "#6a737d",
+          "red": "#cb2431",
+        },
         "white": "#fff",
         "whitefade15": "rgba(255, 255, 255, 0.15)",
+        "whitefade50": "rgba(255, 255, 255, 0.50)",
         "yellow": Array [
           "#fffdef",
           "#fffbdd",
@@ -246,13 +335,17 @@ exports[`SubNav.Link renders the given "as" prop 1`] = `
         "0",
         "3px",
         "6px",
+        "100px",
       ],
       "shadows": Object {
         "extra-large": "0 10px 50px rgba(27, 31, 35, 0.07)",
-        "formControl": "rgba(27, 31, 35, 0.075) 0px 1px 2px inset",
+        "formControl": "inset 0px 2px 0px rgba(225, 228, 232, 0.2)",
+        "formControlDisabled": "inset 0px 2px 0px rgba(220, 227, 237, 0.3)",
         "formControlFocus": "rgba(3, 102, 214, 0.3) 0px 0px 0px 0.2em",
         "large": "0 1px 15px rgba(27, 31, 35, 0.15)",
         "medium": "0 1px 5px rgba(27, 31, 35, 0.15)",
+        "primaryActiveShadow": "inset 0px 1px 0px rgba(20, 70, 32, 0.2)",
+        "primaryShadow": "0px 1px 0px rgba(20, 70, 32, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)",
         "small": "0 1px 1px rgba(27, 31, 35, 0.1)",
       },
       "space": Array [
@@ -301,14 +394,14 @@ exports[`SubNav.Link respects the "selected" prop 1`] = `
 }
 
 .c0:first-of-type {
-  border-top-left-radius: 3px;
-  border-bottom-left-radius: 3px;
+  border-top-left-radius: 6px;
+  border-bottom-left-radius: 6px;
   border-left: 1px solid #e1e4e8;
 }
 
 .c0:last-of-type {
-  border-top-right-radius: 3px;
-  border-bottom-right-radius: 3px;
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
 }
 
 .c0:hover,
diff --git a/src/__tests__/__snapshots__/TextInput.js.snap b/src/__tests__/__snapshots__/TextInput.js.snap
index c9bef77e0ec..14ac35370d0 100644
--- a/src/__tests__/__snapshots__/TextInput.js.snap
+++ b/src/__tests__/__snapshots__/TextInput.js.snap
@@ -24,17 +24,17 @@ exports[`TextInput renders 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: 34px;
-  font-size: 16px;
+  font-size: 14px;
   line-height: 20px;
   color: #24292e;
   vertical-align: middle;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  border: 1px solid #d1d5da;
-  border-radius: 3px;
+  border: 1px solid #e1e4e8;
+  border-radius: 6px;
   outline: none;
-  box-shadow: rgba(27,31,35,0.075) 0px 1px 2px inset;
-  padding: 6px 8px;
+  box-shadow: inset 0px 2px 0px rgba(225,228,232,0.2);
+  padding: 6px 12px;
 }
 
 .c0 .TextInput-icon {
@@ -50,7 +50,7 @@ exports[`TextInput renders 1`] = `
 
 .c0:focus-within {
   border-color: #2188ff;
-  box-shadow: rgba(27,31,35,0.075) 0px 1px 2px inset,rgba(3,102,214,0.3) 0px 0px 0px 0.2em;
+  box-shadow: inset 0px 2px 0px rgba(225,228,232,0.2),rgba(3,102,214,0.3) 0px 0px 0px 0.2em;
 }
 
 @media (max-width:768px) {
@@ -94,17 +94,17 @@ exports[`TextInput renders block 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: 34px;
-  font-size: 16px;
+  font-size: 14px;
   line-height: 20px;
   color: #24292e;
   vertical-align: middle;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  border: 1px solid #d1d5da;
-  border-radius: 3px;
+  border: 1px solid #e1e4e8;
+  border-radius: 6px;
   outline: none;
-  box-shadow: rgba(27,31,35,0.075) 0px 1px 2px inset;
-  padding: 6px 8px;
+  box-shadow: inset 0px 2px 0px rgba(225,228,232,0.2);
+  padding: 6px 12px;
   display: block;
   width: 100%;
 }
@@ -122,7 +122,7 @@ exports[`TextInput renders block 1`] = `
 
 .c0:focus-within {
   border-color: #2188ff;
-  box-shadow: rgba(27,31,35,0.075) 0px 1px 2px inset,rgba(3,102,214,0.3) 0px 0px 0px 0.2em;
+  box-shadow: inset 0px 2px 0px rgba(225,228,232,0.2),rgba(3,102,214,0.3) 0px 0px 0px 0.2em;
 }
 
 @media (max-width:768px) {
@@ -166,17 +166,17 @@ exports[`TextInput renders large 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: 34px;
-  font-size: 16px;
+  font-size: 14px;
   line-height: 20px;
   color: #24292e;
   vertical-align: middle;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  border: 1px solid #d1d5da;
-  border-radius: 3px;
+  border: 1px solid #e1e4e8;
+  border-radius: 6px;
   outline: none;
-  box-shadow: rgba(27,31,35,0.075) 0px 1px 2px inset;
-  padding: 6px 8px;
+  box-shadow: inset 0px 2px 0px rgba(225,228,232,0.2);
+  padding: 6px 12px;
   padding-left: 8px;
   padding-right: 8px;
   padding-top: 10px;
@@ -197,7 +197,7 @@ exports[`TextInput renders large 1`] = `
 
 .c0:focus-within {
   border-color: #2188ff;
-  box-shadow: rgba(27,31,35,0.075) 0px 1px 2px inset,rgba(3,102,214,0.3) 0px 0px 0px 0.2em;
+  box-shadow: inset 0px 2px 0px rgba(225,228,232,0.2),rgba(3,102,214,0.3) 0px 0px 0px 0.2em;
 }
 
 @media (max-width:768px) {
@@ -241,17 +241,17 @@ exports[`TextInput renders small 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: 34px;
-  font-size: 16px;
+  font-size: 14px;
   line-height: 20px;
   color: #24292e;
   vertical-align: middle;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  border: 1px solid #d1d5da;
-  border-radius: 3px;
+  border: 1px solid #e1e4e8;
+  border-radius: 6px;
   outline: none;
-  box-shadow: rgba(27,31,35,0.075) 0px 1px 2px inset;
-  padding: 6px 8px;
+  box-shadow: inset 0px 2px 0px rgba(225,228,232,0.2);
+  padding: 6px 12px;
   min-height: 28px;
   padding-left: 8px;
   padding-right: 8px;
@@ -274,7 +274,7 @@ exports[`TextInput renders small 1`] = `
 
 .c0:focus-within {
   border-color: #2188ff;
-  box-shadow: rgba(27,31,35,0.075) 0px 1px 2px inset,rgba(3,102,214,0.3) 0px 0px 0px 0.2em;
+  box-shadow: inset 0px 2px 0px rgba(225,228,232,0.2),rgba(3,102,214,0.3) 0px 0px 0px 0.2em;
 }
 
 @media (max-width:768px) {
@@ -318,17 +318,17 @@ exports[`TextInput should render a password input 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: 34px;
-  font-size: 16px;
+  font-size: 14px;
   line-height: 20px;
   color: #24292e;
   vertical-align: middle;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  border: 1px solid #d1d5da;
-  border-radius: 3px;
+  border: 1px solid #e1e4e8;
+  border-radius: 6px;
   outline: none;
-  box-shadow: rgba(27,31,35,0.075) 0px 1px 2px inset;
-  padding: 6px 8px;
+  box-shadow: inset 0px 2px 0px rgba(225,228,232,0.2);
+  padding: 6px 12px;
 }
 
 .c0 .TextInput-icon {
@@ -344,7 +344,7 @@ exports[`TextInput should render a password input 1`] = `
 
 .c0:focus-within {
   border-color: #2188ff;
-  box-shadow: rgba(27,31,35,0.075) 0px 1px 2px inset,rgba(3,102,214,0.3) 0px 0px 0px 0.2em;
+  box-shadow: inset 0px 2px 0px rgba(225,228,232,0.2),rgba(3,102,214,0.3) 0px 0px 0px 0.2em;
 }
 
 @media (max-width:768px) {
diff --git a/src/__tests__/__snapshots__/UnderlineNavLink.js.snap b/src/__tests__/__snapshots__/UnderlineNavLink.js.snap
index b00f727debb..02b5e7ee681 100644
--- a/src/__tests__/__snapshots__/UnderlineNavLink.js.snap
+++ b/src/__tests__/__snapshots__/UnderlineNavLink.js.snap
@@ -18,7 +18,7 @@ exports[`UnderlineNav.Link renders the given "as" prop 1`] = `
   color: #24292e;
   -webkit-text-decoration: none;
   text-decoration: none;
-  border-bottom-color: #d1d5da;
+  border-bottom-color: #f66a0a;
   -webkit-transition: 0.2s ease;
   transition: 0.2s ease;
 }
@@ -29,9 +29,8 @@ exports[`UnderlineNav.Link renders the given "as" prop 1`] = `
 }
 
 .c0.selected {
-  font-weight: 600;
   color: #24292e;
-  border-bottom-color: #e36209;
+  border-bottom-color: #f66a0a;
 }
 
 .c0.selected .UnderlineNav-octicon {
@@ -53,7 +52,111 @@ exports[`UnderlineNav.Link renders the given "as" prop 1`] = `
         "1012px",
         "1280px",
       ],
+      "buttons": Object {
+        "danger": Object {
+          "bg": Object {
+            "active": "#be222e",
+            "default": "#fafbfc",
+            "disabled": "#F3F4F6",
+            "hover": "#cb2431",
+          },
+          "border": Object {
+            "active": "#9e1c23",
+            "default": "#e1e4e8",
+            "hover": "#b31d28",
+          },
+          "color": Object {
+            "active": "#fff",
+            "default": "#cb2431",
+            "disabled": "rgba(203,36,49, .5)",
+            "hover": "#fff",
+          },
+          "shadow": Object {
+            "active": "inset 0px 2px 0px rgba(179, 29, 40, 0.4)",
+            "default": "0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.25)",
+            "focus": "0 0 0 3px rgba(203, 36, 49, 0.4)",
+            "hover": "0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)",
+          },
+        },
+        "default": Object {
+          "bg": Object {
+            "active": "#edeff2",
+            "default": "#fafbfc",
+            "disabled": "#fafbfc",
+            "hover": "#F3F4F6",
+          },
+          "border": Object {
+            "active": "#d1d5da",
+            "default": "#e1e4e8",
+            "disabled": "#eaecef",
+          },
+          "color": Object {
+            "default": "#24292e",
+            "disabled": "#959da5",
+          },
+          "shadow": Object {
+            "active": "inset 0px 2px 0px rgba(149, 157, 165, 0.1)",
+            "default": "0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.25)",
+            "focus": "0 0 0 3px rgba(3, 102, 214, 0.3)",
+            "hover": "0px 1px 0px rgba(209, 213, 218, 0.2), inset 0px 2px 0px rgba(255, 255, 255, 0.1)",
+          },
+        },
+        "outline": Object {
+          "bg": Object {
+            "active": "#035fc7",
+            "default": "#fafbfc",
+            "disabled": "#F3F4F6",
+            "hover": "#0366d6",
+          },
+          "border": Object {
+            "active": "rgba(4, 66, 137, .5)",
+            "default": "#e1e4e8",
+            "hover": "#005cc5",
+          },
+          "color": Object {
+            "active": "#fff",
+            "default": "#005cc5",
+            "disabled": "#959da5",
+            "hover": "#fff",
+          },
+          "shadow": Object {
+            "active": "inset 0px 1px 0px rgba(4, 66, 137, 0.2)",
+            "default": "0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.25)",
+            "focus": "0 0 0 3px rgba(3, 102, 214, 0.3)",
+            "hover": "0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)",
+          },
+        },
+        "primary": Object {
+          "bg": Object {
+            "active": "#128031",
+            "default": "#159739",
+            "disabled": "#94D3A2",
+            "focus": "#138934",
+            "hover": "#138934",
+          },
+          "border": Object {
+            "active": "#176f2c",
+            "default": "#22863a",
+            "disabled": "rgba(34, 134, 58, 0.1)",
+            "hover": "#176f2c",
+          },
+          "color": Object {
+            "default": "#fff",
+            "disabled": "rgba(255, 255, 255, 0.50)",
+          },
+          "shadow": Object {
+            "active": "inset 0px 1px 0px rgba(20, 70, 32, 0.2)",
+            "default": " 0px 1px 0px rgba(20, 70, 32, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)",
+            "focus": "0 0 0 3px #94D3A2",
+          },
+        },
+      },
       "colors": Object {
+        "bg": Object {
+          "disabled": "#F3F4F6",
+          "gray": "#f6f8fa",
+          "grayLight": "#fafbfc",
+        },
         "black": "#1b1f23",
         "blackfade15": "rgba(27, 31, 35, 0.15)",
         "blackfade20": "rgba(27, 31, 35, 0.20)",
@@ -73,32 +176,10 @@ exports[`UnderlineNav.Link renders the given "as" prop 1`] = `
           "#05264c",
         ],
         "bodytext": "#24292e",
-        "button": Object {
-          "activeBg": "rgb(233, 236, 239)",
-          "bg2": "rgb(239, 243, 246)",
-          "border": "rgba(27, 31, 35, 0.2)",
-          "dangerActiveBg": "rgb(181, 32, 44)",
-          "dangerDisabledColor": "rgba(203,36,49,0.4)",
-          "dangerFocusShadow": "rgba(203, 36, 49, 0.4)",
-          "dangerHoverBgImage": "rgb(222, 68, 80)",
-          "disabledBg": "#eff3f6",
-          "disabledColor": "rgba(36, 41, 46, 0.4)",
-          "focusShadow": "rgba(3, 102, 214, 0.3)",
-          "hoverBg": "rgb(230, 235, 241)",
-          "outlineBlue": "rgb(3, 102, 214)",
-          "outlineShadow": "rgba(3, 102, 214, 0.4)",
-          "primaryActiveBg": "rgb(39, 159, 67)",
-          "primaryActiveShadow": "rgba(27, 31, 35, 0.15)",
-          "primaryBg": "rgb(40, 167, 69)",
-          "primaryBgImage": "rgb(52, 208, 88)",
-          "primaryBorder": "rgba(27, 31, 35, 0.5)",
-          "primaryDisabledBg": "#94d3a2",
-          "primaryDisabledBorder": "rgba(27,31,35,0.2)",
-          "primaryDisabledColor": "rgba(255, 255, 255, .75)",
-          "primaryFocusShadow": "rgba(52, 208, 88, 0.4)",
-          "primaryHoverBg": "rgb(38, 159, 66)",
-          "primaryHoverBgImage": "rgb(47, 203, 83)",
-          "white": "rgb(255, 255, 255)",
+        "border": Object {
+          "gray": "#e1e4e8",
+          "grayDark": "#d1d5da",
+          "grayLight": "#eaecef",
         },
         "counter": Object {
           "bg": "rgba(27, 31, 35, 0.08)",
@@ -174,8 +255,15 @@ exports[`UnderlineNav.Link renders the given "as" prop 1`] = `
           "success": "#28a745",
           "unknown": "#959da5",
         },
+        "text": Object {
+          "gray": "#586069",
+          "grayDark": "#24292e",
+          "grayLight": "#6a737d",
+          "red": "#cb2431",
+        },
         "white": "#fff",
         "whitefade15": "rgba(255, 255, 255, 0.15)",
+        "whitefade50": "rgba(255, 255, 255, 0.50)",
         "yellow": Array [
           "#fffdef",
           "#fffbdd",
@@ -224,13 +312,17 @@ exports[`UnderlineNav.Link renders the given "as" prop 1`] = `
         "0",
         "3px",
         "6px",
+        "100px",
       ],
       "shadows": Object {
         "extra-large": "0 10px 50px rgba(27, 31, 35, 0.07)",
-        "formControl": "rgba(27, 31, 35, 0.075) 0px 1px 2px inset",
+        "formControl": "inset 0px 2px 0px rgba(225, 228, 232, 0.2)",
+        "formControlDisabled": "inset 0px 2px 0px rgba(220, 227, 237, 0.3)",
         "formControlFocus": "rgba(3, 102, 214, 0.3) 0px 0px 0px 0.2em",
         "large": "0 1px 15px rgba(27, 31, 35, 0.15)",
         "medium": "0 1px 5px rgba(27, 31, 35, 0.15)",
+        "primaryActiveShadow": "inset 0px 1px 0px rgba(20, 70, 32, 0.2)",
+        "primaryShadow": "0px 1px 0px rgba(20, 70, 32, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)",
         "small": "0 1px 1px rgba(27, 31, 35, 0.1)",
       },
       "space": Array [
@@ -271,7 +363,7 @@ exports[`UnderlineNav.Link respects the "selected" prop 1`] = `
   color: #24292e;
   -webkit-text-decoration: none;
   text-decoration: none;
-  border-bottom-color: #d1d5da;
+  border-bottom-color: #f66a0a;
   -webkit-transition: 0.2s ease;
   transition: 0.2s ease;
 }
@@ -282,9 +374,8 @@ exports[`UnderlineNav.Link respects the "selected" prop 1`] = `
 }
 
 .c0.selected {
-  font-weight: 600;
   color: #24292e;
-  border-bottom-color: #e36209;
+  border-bottom-color: #f66a0a;
 }
 
 .c0.selected .UnderlineNav-octicon {
diff --git a/src/theme.js b/src/theme.js
index 21e51859e57..b6c6a66d944 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -18,6 +18,7 @@ const colors = {
   blackfade35: 'rgba(27, 31, 35, 0.35)',
   blackfade50: 'rgba(27, 31, 35, 0.5)',
   whitefade15: 'rgba(255, 255, 255, 0.15)',
+  whitefade50: 'rgba(255, 255, 255, 0.50)',
   state: {
     error: red[5],
     failure: red[5],
@@ -26,38 +27,127 @@ const colors = {
     success: green[5],
     unknown: gray[4]
   },
-  button: {
-    disabledColor: 'rgba(36, 41, 46, 0.4)',
-    bg2: 'rgb(239, 243, 246)',
-    disabledBg: '#eff3f6',
-    border: 'rgba(27, 31, 35, 0.2)',
-    focusShadow: 'rgba(3, 102, 214, 0.3)',
-    activeBg: 'rgb(233, 236, 239)',
-    hoverBg: 'rgb(230, 235, 241)',
-    dangerActiveBg: 'rgb(181, 32, 44)',
-    dangerFocusShadow: 'rgba(203, 36, 49, 0.4)',
-    dangerHoverBgImage: 'rgb(222, 68, 80)',
-    dangerDisabledColor: 'rgba(203,36,49,0.4)',
-    white: 'rgb(255, 255, 255)',
-    outlineBlue: 'rgb(3, 102, 214)',
-    outlineShadow: 'rgba(3, 102, 214, 0.4)',
-    primaryBg: 'rgb(40, 167, 69)',
-    primaryBgImage: 'rgb(52, 208, 88)',
-    primaryHoverBg: 'rgb(38, 159, 66)',
-    primaryHoverBgImage: 'rgb(47, 203, 83)',
-    primaryBorder: 'rgba(27, 31, 35, 0.5)',
-    primaryActiveBg: 'rgb(39, 159, 67)',
-    primaryActiveShadow: 'rgba(27, 31, 35, 0.15)',
-    primaryFocusShadow: 'rgba(52, 208, 88, 0.4)',
-    primaryDisabledColor: 'rgba(255, 255, 255, .75)',
-    primaryDisabledBg: '#94d3a2',
-    primaryDisabledBorder: 'rgba(27,31,35,0.2)'
+  border: {
+    grayLight: '#eaecef',
+    gray: gray[2],
+    grayDark: '#d1d5da'
   },
   counter: {
     bg: 'rgba(27, 31, 35, 0.08)'
   },
   filterList: {
     hoverBg: '#eaecef'
+  },
+  text: {
+    gray: gray[6],
+    grayLight: gray[5],
+    grayDark: gray[9],
+    red: red[6]
+  },
+  bg: {
+    gray: gray[1],
+    grayLight: gray[0],
+    disabled: '#F3F4F6'
+  }
+}
+
+const buttons = {
+  default: {
+    color: {
+      default: colors.text.grayDark,
+      disabled: gray[4]
+    },
+    border: {
+      default: colors.border.gray,
+      active: colors.border.grayDark,
+      disabled: colors.border.grayLight
+    },
+    bg: {
+      default: colors.bg.grayLight,
+      hover: '#F3F4F6', // custom gray
+      active: '#edeff2', //custom gray
+      disabled: colors.bg.grayLight
+    },
+    shadow: {
+      default: '0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.25)',
+      hover: '0px 1px 0px rgba(209, 213, 218, 0.2), inset 0px 2px 0px rgba(255, 255, 255, 0.1)',
+      active: 'inset 0px 2px 0px rgba(149, 157, 165, 0.1)',
+      focus: '0 0 0 3px rgba(3, 102, 214, 0.3)'
+    }
+  },
+  primary: {
+    color: {
+      default: white,
+      disabled: colors.whitefade50
+    },
+    border: {
+      default: green[6],
+      hover: green[7],
+      active: green[7],
+      disabled: 'rgba(34, 134, 58, 0.1)'
+    },
+    bg: {
+      default: '#159739', //custom green
+      focus: '#138934', //custom green
+      hover: '#138934', //custom green
+      active: '#128031', // 2% darker than hover bg
+      disabled: '#94D3A2' // custom gray
+    },
+    shadow: {
+      default: ' 0px 1px 0px rgba(20, 70, 32, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)',
+      active: 'inset 0px 1px 0px rgba(20, 70, 32, 0.2)',
+      focus: '0 0 0 3px #94D3A2'
+    }
+  },
+  danger: {
+    color: {
+      default: colors.text.red,
+      hover: white,
+      active: white,
+      disabled: 'rgba(203,36,49, .5)' // custom?
+    },
+    border: {
+      default: colors.border.gray,
+      hover: red[7],
+      active: red[8]
+    },
+    bg: {
+      default: gray[0],
+      hover: red[6],
+      active: '#be222e', // 2% darker than hover bg
+      disabled: '#F3F4F6'
+    },
+    shadow: {
+      default: '0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.25)',
+      hover: '0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)',
+      active: 'inset 0px 2px 0px rgba(179, 29, 40, 0.4)',
+      focus: '0 0 0 3px rgba(203, 36, 49, 0.4)'
+    }
+  },
+  outline: {
+    color: {
+      default: blue[6],
+      hover: white,
+      active: white,
+      disabled: gray[4]
+    },
+    border: {
+      default: gray[2], //border-gray
+      hover: blue[6],
+      active: 'rgba(4, 66, 137, .5)'
+    },
+    bg: {
+      default: gray[0],
+      hover: blue[5],
+      active: '#035fc7', // 2% darker than hover bg
+      disabled: '#F3F4F6'
+    },
+    shadow: {
+      default: '0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.25)',
+      hover: '0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)',
+      active: 'inset 0px 1px 0px rgba(4, 66, 137, 0.2)',
+      focus: '0 0 0 3px rgba(3, 102, 214, 0.3)'
+    }
   }
 }
 
@@ -93,16 +183,20 @@ const theme = {
   borders: [0, '1px solid'],
   fontSizes: ['12px', '14px', '16px', '20px', '24px', '32px', '40px', '48px'],
   lineHeights,
-  radii: ['0', '3px', '6px'],
+  radii: ['0', '3px', '6px', '100px'],
   shadows: {
     small: '0 1px 1px rgba(27, 31, 35, 0.1)',
     medium: '0 1px 5px rgba(27, 31, 35, 0.15)',
     large: '0 1px 15px rgba(27, 31, 35, 0.15)',
     'extra-large': '0 10px 50px rgba(27, 31, 35, 0.07)',
-    formControl: 'rgba(27, 31, 35, 0.075) 0px 1px 2px inset',
-    formControlFocus: 'rgba(3, 102, 214, 0.3) 0px 0px 0px 0.2em'
+    formControl: 'inset 0px 2px 0px rgba(225, 228, 232, 0.2)',
+    formControlDisabled: 'inset 0px 2px 0px rgba(220, 227, 237, 0.3)',
+    formControlFocus: 'rgba(3, 102, 214, 0.3) 0px 0px 0px 0.2em',
+    primaryShadow: '0px 1px 0px rgba(20, 70, 32, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)',
+    primaryActiveShadow: 'inset 0px 1px 0px rgba(20, 70, 32, 0.2)'
   },
-  space: ['0', '4px', '8px', '16px', '24px', '32px', '40px', '48px', '64px', '80px', '96px', '112px', '128px']
+  space: ['0', '4px', '8px', '16px', '24px', '32px', '40px', '48px', '64px', '80px', '96px', '112px', '128px'],
+  buttons
 }
 
 export default theme