diff --git a/package.json b/package.json
index c3d23517c5c..84cfdedf716 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "18.0.0",
+  "version": "18.1.0",
   "description": "Primer react components",
   "main": "dist/index.umd.js",
   "module": "dist/index.esm.js",
@@ -37,6 +37,7 @@
   "license": "MIT",
   "dependencies": {
     "@primer/octicons-react": "^9.2.0",
+    "@primer/primitives": "2.0.1",
     "@reach/dialog": "0.3.0",
     "@styled-system/prop-types": "5.1.2",
     "@styled-system/props": "5.1.4",
@@ -50,8 +51,6 @@
     "details-element-polyfill": "2.4.0",
     "jest-axe": "3.2.0",
     "nanoid": "2.1.4",
-    "primer-colors": "1.0.1",
-    "primer-typography": "1.0.1",
     "react": "^16.10.2",
     "react-is": "16.10.2",
     "styled-system": "5.1.2"
diff --git a/src/ButtonStyles.js b/src/ButtonStyles.js
index d0133010ca1..06a4c5cad55 100644
--- a/src/ButtonStyles.js
+++ b/src/ButtonStyles.js
@@ -27,4 +27,8 @@ export default css`
   &:disabled {
     cursor: default;
   }
+
+  &:disabled svg {
+    opacity: 0.6;
+  }
 `
diff --git a/src/Label.js b/src/Label.js
index 3e23ad361fd..6d694d07627 100644
--- a/src/Label.js
+++ b/src/Label.js
@@ -43,7 +43,7 @@ const sizeVariant = variant({
 
 const Label = styled('span')`
   display: inline-block;
-  font-weight: 600;
+  font-weight: ${get('fontWeights.normal')};
   color: ${get('colors.white')};
   border-radius: ${get('radii.3')};
   &:hover {
diff --git a/src/SelectMenu/SelectMenuHeader.js b/src/SelectMenu/SelectMenuHeader.js
index 35b42838526..8f173cb6a62 100644
--- a/src/SelectMenu/SelectMenuHeader.js
+++ b/src/SelectMenu/SelectMenuHeader.js
@@ -21,6 +21,7 @@ const StyledHeader = styled.header`
   display: flex;
   flex: none; // fixes header from getting squeezed in Safari iOS
   padding: ${get('space.3')};
+  border-bottom: ${get('borders.1')} ${get('colors.border.gray')};
   ${COMMON}
   ${TYPOGRAPHY}
 
diff --git a/src/SelectMenu/SelectMenuList.js b/src/SelectMenu/SelectMenuList.js
index 5e57b049e26..b93dbb114d1 100644
--- a/src/SelectMenu/SelectMenuList.js
+++ b/src/SelectMenu/SelectMenuList.js
@@ -10,7 +10,6 @@ const listStyles = css`
   overflow-x: hidden;
   overflow-y: auto;
   background-color: ${get('colors.white')};
-  border-top: ${get('borders.1')} ${get('colors.border.gray')};
   -webkit-overflow-scrolling: touch; // Adds momentum + bouncy scrolling
 
   @media (hover: hover) {
diff --git a/src/SelectMenu/SelectMenuTab.js b/src/SelectMenu/SelectMenuTab.js
index f1421db24d1..d8c989f5b49 100644
--- a/src/SelectMenu/SelectMenuTab.js
+++ b/src/SelectMenu/SelectMenuTab.js
@@ -13,7 +13,7 @@ const tabStyles = css`
   font-weight: 500;
   color: ${get('colors.gray.5')};
   text-align: center;
-  background-color: transparent;
+  background-color: ${get('colors.gray.1')};
   border: 0;
   box-shadow: inset 0 -1px 0 ${get('colors.border.gray')};
 
@@ -24,6 +24,7 @@ const tabStyles = css`
     border-bottom-width: 0;
     border-top-left-radius: ${get('radii.2')};
     border-top-right-radius: ${get('radii.2')};
+    background-color: ${get('colors.white')};
   }
 
   &[aria-selected='true'] {
diff --git a/src/SelectMenu/SelectMenuTabPanel.js b/src/SelectMenu/SelectMenuTabPanel.js
index 338598c9645..18166180c72 100644
--- a/src/SelectMenu/SelectMenuTabPanel.js
+++ b/src/SelectMenu/SelectMenuTabPanel.js
@@ -4,7 +4,7 @@ import styled from 'styled-components'
 import {MenuContext} from './SelectMenuContext'
 import SelectMenuList from './SelectMenuList'
 import theme from '../theme'
-import {COMMON} from '../constants'
+import {COMMON, get} from '../constants'
 
 const TabPanelBase = ({tabName, className, children, ...rest}) => {
   const menuContext = useContext(MenuContext)
@@ -16,6 +16,7 @@ const TabPanelBase = ({tabName, className, children, ...rest}) => {
 }
 
 const TabPanel = styled(TabPanelBase)`
+  border-top: ${get('borders.1')} ${get('colors.border.gray')};
   ${COMMON}
 `
 
diff --git a/src/SelectMenu/SelectMenuTabs.js b/src/SelectMenu/SelectMenuTabs.js
index 72ae1007446..7e665a2c049 100644
--- a/src/SelectMenu/SelectMenuTabs.js
+++ b/src/SelectMenu/SelectMenuTabs.js
@@ -7,8 +7,9 @@ const tabWrapperStyles = css`
   display: flex;
   flex-shrink: 0;
   margin-bottom: -1px; // hide border of element below
-  border-top: ${get('borders.1')} ${get('colors.border.gray')};
   -webkit-overflow-scrolling: touch;
+  overflow-x: auto;
+  overflow-y: hidden;
 
   // Hide scrollbar so it doesn't cover the text
   &::-webkit-scrollbar {
@@ -17,7 +18,7 @@ const tabWrapperStyles = css`
 
   @media (min-width: ${get('breakpoints.0')}) {
     padding: 0 ${get('space.2')};
-    border-top: 0;
+    margin-top: ${get('space.3')};
   }
 `
 
diff --git a/src/SideNav.js b/src/SideNav.js
index 517954d063f..6f0cde046e8 100644
--- a/src/SideNav.js
+++ b/src/SideNav.js
@@ -24,7 +24,7 @@ function SideNavBase({variant, className, bordered, children, ...props}) {
 }
 
 const SideNav = styled(SideNavBase)`
-  background-color: ${get('colors.gray.0')};
+  background-color: ${get('colors.white')};
 
   ${props =>
     props.bordered &&
@@ -67,6 +67,16 @@ SideNav.Link = styled(Link).attrs(props => {
     border-bottom: none;
   }
 
+  &:first-child {
+    border-top-right-radius: ${get('radii.2')};
+    border-top-left-radius: ${get('radii.2')};
+  }
+
+  &:last-child {
+    border-bottom-right-radius: ${get('radii.2')};
+    border-bottom-left-radius: ${get('radii.2')};
+  }
+
   ${SideNav}.variant-normal > & {
     color: ${get('colors.gray.6')};
     padding: ${get('space.3')};
@@ -95,26 +105,16 @@ SideNav.Link = styled(Link).attrs(props => {
       text-decoration: none;
       background-color: ${get('colors.gray.1')};
       outline: none;
-
-      // Bar on the left
-      &::before {
-        background-color: ${get('colors.gray.4')};
-      }
-    }
-
-    &:active {
-      background-color: ${get('colors.white')};
     }
 
     &[aria-current='page'],
     &[aria-selected='true'] {
       font-weight: ${get('fontWeights.semibold')};
       color: ${get('colors.gray.9')};
-      background-color: ${get('colors.white')};
 
       // Bar on the left
       &::before {
-        background-color: ${get('colors.orange.5')};
+        background-color: ${get('colors.accent')};
       }
     }
   }
diff --git a/src/UnderlineNav.js b/src/UnderlineNav.js
index cb68b215da9..398d6a96bab 100644
--- a/src/UnderlineNav.js
+++ b/src/UnderlineNav.js
@@ -67,7 +67,7 @@ UnderlineNav.Link = styled.a.attrs(props => ({
   &:focus {
     color: ${get('colors.gray.9')};
     text-decoration: none;
-    border-bottom-color: ${get('colors.accent')};
+    border-bottom-color: ${get('colors.gray.2')};
     transition: 0.2s ease;
 
     .UnderlineNav-octicon {
diff --git a/src/__tests__/__snapshots__/Button.js.snap b/src/__tests__/__snapshots__/Button.js.snap
index 32fcd30db9a..345730f19e1 100644
--- a/src/__tests__/__snapshots__/Button.js.snap
+++ b/src/__tests__/__snapshots__/Button.js.snap
@@ -23,8 +23,8 @@ exports[`Button respects the "disabled" prop 1`] = `
   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);
+  border: 1px solid rgba(27,31,35,0.12);
+  box-shadow: 0px 1px 0px rgba(27,31,35,0.04),inset 0px 2px 0px rgba(255,255,255,0.25);
 }
 
 .c0:hover {
@@ -40,6 +40,10 @@ exports[`Button respects the "disabled" prop 1`] = `
   cursor: default;
 }
 
+.c0:disabled svg {
+  opacity: 0.6;
+}
+
 .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);
@@ -108,11 +112,15 @@ exports[`ButtonDanger renders correct disabled styles 1`] = `
   cursor: default;
 }
 
+.c0:disabled svg {
+  opacity: 0.6;
+}
+
 .c0:hover {
   color: #fff;
   background-color: #cb2431;
-  border-color: #b31d28;
-  box-shadow: 0px 1px 0px rgba(149,157,165,0.1),inset 0px 2px 0px rgba(255,255,255,0.03);
+  border-color: rgba(27,31,35,0.15);
+  box-shadow: 0px 1px 0px rgba(27,31,35,0.1),inset 0px 2px 0px rgba(255,255,255,0.03);
 }
 
 .c0:focus {
@@ -123,8 +131,8 @@ exports[`ButtonDanger renders correct disabled styles 1`] = `
 .c0:active {
   color: #fff;
   background-color: #be222e;
-  box-shadow: inset 0px 2px 0px rgba(179,29,40,0.4);
-  border-color: #9e1c23;
+  box-shadow: 0px 1px 0px rgba(27,31,35,0.1),inset 0px 2px 0px rgba(255,255,255,0.03);
+  border-color: rgba(27,31,35,0.15);
 }
 
 .c0:disabled {
@@ -160,7 +168,7 @@ exports[`ButtonOutline renders correct disabled styles 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-size: 14px;
-  color: #005cc5;
+  color: #0366d6;
   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);
@@ -179,11 +187,15 @@ exports[`ButtonOutline renders correct disabled styles 1`] = `
   cursor: default;
 }
 
+.c0:disabled svg {
+  opacity: 0.6;
+}
+
 .c0:hover {
   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);
+  border-color: rgba(27,31,35,0.15);
+  box-shadow: 0px 1px 0px rgba(27,31,35,0.1),inset 0px 2px 0px rgba(255,255,255,0.03);
 }
 
 .c0:focus {
@@ -194,8 +206,8 @@ exports[`ButtonOutline renders correct disabled styles 1`] = `
 .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);
+  border-color: rgba(27,31,35,0.15);
+  box-shadow: 0px 1px 0px rgba(27,31,35,0.1),inset 0px 2px 0px rgba(255,255,255,0.03);
 }
 
 .c0:disabled {
@@ -232,7 +244,7 @@ exports[`ButtonPrimary renders correct disabled styles 1`] = `
   text-decoration: none;
   font-size: 14px;
   color: #fff;
-  background-color: #159739;
+  background-color: #2EA44F;
   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);
 }
@@ -250,21 +262,25 @@ exports[`ButtonPrimary renders correct disabled styles 1`] = `
   cursor: default;
 }
 
+.c0:disabled svg {
+  opacity: 0.6;
+}
+
 .c0:hover {
-  background-color: #138934;
-  border-color: #176f2c;
+  background-color: #2C974B;
+  border-color: rgba(27,31,35,0.15);
 }
 
 .c0:focus {
   border-color: transparent;
   box-shadow: 0 0 0 3px #94D3A2;
-  background-color: #138934;
+  background-color: #2C974B;
 }
 
 .c0:active {
   background-color: #128031;
-  box-shadow: inset 0px 1px 0px rgba(20,70,32,0.2);
-  border-color: #176f2c;
+  box-shadow: 0px 1px 0px rgba(27,31,35,0.1),inset 0px 2px 0px rgba(255,255,255,0.03);
+  border-color: rgba(27,31,35,0.15);
 }
 
 .c0:disabled {
diff --git a/src/__tests__/__snapshots__/Dropdown.js.snap b/src/__tests__/__snapshots__/Dropdown.js.snap
index b5723539189..77fc3a2849b 100644
--- a/src/__tests__/__snapshots__/Dropdown.js.snap
+++ b/src/__tests__/__snapshots__/Dropdown.js.snap
@@ -69,8 +69,8 @@ exports[`Dropdown.Button matches the snapshots 1`] = `
   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);
+  border: 1px solid rgba(27,31,35,0.12);
+  box-shadow: 0px 1px 0px rgba(27,31,35,0.04),inset 0px 2px 0px rgba(255,255,255,0.25);
 }
 
 .c0:hover {
@@ -86,6 +86,10 @@ exports[`Dropdown.Button matches the snapshots 1`] = `
   cursor: default;
 }
 
+.c0:disabled svg {
+  opacity: 0.6;
+}
+
 .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);
diff --git a/src/__tests__/__snapshots__/Label.js.snap b/src/__tests__/__snapshots__/Label.js.snap
index 8761b29b449..9eb5ab34a64 100644
--- a/src/__tests__/__snapshots__/Label.js.snap
+++ b/src/__tests__/__snapshots__/Label.js.snap
@@ -3,7 +3,7 @@
 exports[`Label respects the "outline" prop 1`] = `
 .c0 {
   display: inline-block;
-  font-weight: 600;
+  font-weight: 400;
   color: #fff;
   border-radius: 100px;
   font-size: 12px;
@@ -32,7 +32,7 @@ exports[`Label respects the "outline" prop 1`] = `
 exports[`Label respects the "variant" prop 1`] = `
 .c0 {
   display: inline-block;
-  font-weight: 600;
+  font-weight: 400;
   color: #fff;
   border-radius: 100px;
   font-size: 14px;
diff --git a/src/__tests__/__snapshots__/LabelGroup.js.snap b/src/__tests__/__snapshots__/LabelGroup.js.snap
index 3a8aeac5699..690be160340 100644
--- a/src/__tests__/__snapshots__/LabelGroup.js.snap
+++ b/src/__tests__/__snapshots__/LabelGroup.js.snap
@@ -11,7 +11,7 @@ exports[`BranchName matches snapshot 1`] = `
 
 .c1 {
   display: inline-block;
-  font-weight: 600;
+  font-weight: 400;
   color: #fff;
   border-radius: 100px;
   font-size: 12px;
@@ -27,7 +27,7 @@ exports[`BranchName matches snapshot 1`] = `
 
 .c2 {
   display: inline-block;
-  font-weight: 600;
+  font-weight: 400;
   color: #fff;
   border-radius: 100px;
   font-size: 12px;
diff --git a/src/__tests__/__snapshots__/SideNav.js.snap b/src/__tests__/__snapshots__/SideNav.js.snap
index ccd14ec95f5..9dacf4f5ca7 100644
--- a/src/__tests__/__snapshots__/SideNav.js.snap
+++ b/src/__tests__/__snapshots__/SideNav.js.snap
@@ -8,7 +8,7 @@ exports[`SideNav and SideNav.Link renders with default props 1`] = `
 }
 
 .c2 {
-  background-color: #fafbfc;
+  background-color: #fff;
 }
 
 .c3 > .c1 {
@@ -46,20 +46,10 @@ exports[`SideNav and SideNav.Link renders with default props 1`] = `
   outline: none;
 }
 
-.c1.variant-normal > .c3:hover::before,
-.c1.variant-normal > .c3:focus::before {
-  background-color: #959da5;
-}
-
-.c1.variant-normal > .c3:active {
-  background-color: #fff;
-}
-
 .c1.variant-normal > .c3[aria-current='page'],
 .c1.variant-normal > .c3[aria-selected='true'] {
   font-weight: 500;
   color: #24292e;
-  background-color: #fff;
 }
 
 .c1.variant-normal > .c3[aria-current='page']::before,
@@ -112,6 +102,16 @@ exports[`SideNav and SideNav.Link renders with default props 2`] = `
   border-bottom: none;
 }
 
+.c0:first-child {
+  border-top-right-radius: 6px;
+  border-top-left-radius: 6px;
+}
+
+.c0:last-child {
+  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+
 .c1.variant-normal > .c0 {
   color: #586069;
   padding: 16px;
@@ -143,20 +143,10 @@ exports[`SideNav and SideNav.Link renders with default props 2`] = `
   outline: none;
 }
 
-.c1.variant-normal > .c0:hover::before,
-.c1.variant-normal > .c0:focus::before {
-  background-color: #959da5;
-}
-
-.c1.variant-normal > .c0:active {
-  background-color: #fff;
-}
-
 .c1.variant-normal > .c0[aria-current='page'],
 .c1.variant-normal > .c0[aria-selected='true'] {
   font-weight: 500;
   color: #24292e;
-  background-color: #fff;
 }
 
 .c1.variant-normal > .c0[aria-current='page']::before,
diff --git a/src/__tests__/__snapshots__/UnderlineNavLink.js.snap b/src/__tests__/__snapshots__/UnderlineNavLink.js.snap
index b3bd51bac03..640603feade 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: #f66a0a;
+  border-bottom-color: #e1e4e8;
   -webkit-transition: 0.2s ease;
   transition: 0.2s ease;
 }
@@ -61,7 +61,7 @@ exports[`UnderlineNav.Link respects the "selected" prop 1`] = `
   color: #24292e;
   -webkit-text-decoration: none;
   text-decoration: none;
-  border-bottom-color: #f66a0a;
+  border-bottom-color: #e1e4e8;
   -webkit-transition: 0.2s ease;
   transition: 0.2s ease;
 }
diff --git a/src/theme.js b/src/theme.js
index e0542dfa958..cff0b5955d7 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -1,6 +1,7 @@
-import {black, white, gray, blue, green, orange, purple, red, yellow} from 'primer-colors'
-import {lineHeights} from 'primer-typography'
+import {colors as colorPrimitives, typography} from '@primer/primitives'
 
+const {lineHeights} = typography
+const {black, white, pink, gray, blue, green, orange, purple, red, yellow} = colorPrimitives
 // General
 const colors = {
   bodytext: gray[9],
@@ -13,6 +14,7 @@ const colors = {
   purple,
   red,
   yellow,
+  pink,
   blackfade15: 'rgba(27, 31, 35, 0.15)',
   blackfade20: 'rgba(27, 31, 35, 0.20)',
   blackfade30: 'rgba(27,31,35,0.3)',
@@ -50,7 +52,27 @@ const colors = {
     grayLight: gray[0],
     disabled: '#F3F4F6'
   },
-  accent: orange[5]
+  accent: orange[5],
+  labels: {
+    gray: gray[2],
+    grayText: gray[9],
+    grayDark: gray[5],
+    grayDarkText: gray[9],
+    blue: blue[5],
+    blueText: blue[5],
+    orange: orange[5],
+    orangeText: orange[6],
+    green: green[5],
+    greenText: green[6],
+    red: red[6],
+    redText: red[6],
+    yellow: yellow[6],
+    yellowText: yellow[9],
+    pink: pink[4],
+    pinkText: pink[6],
+    purple: purple[4],
+    purpleText: [5]
+  }
 }
 
 const breakpoints = ['544px', '768px', '1012px', '1280px']
@@ -113,7 +135,7 @@ const buttons = {
       disabled: gray[4]
     },
     border: {
-      default: colors.border.gray,
+      default: 'rgba(27, 31, 35, 0.12)',
       active: colors.border.grayDark,
       disabled: colors.border.grayLight
     },
@@ -124,7 +146,7 @@ const buttons = {
       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)',
+      default: '0px 1px 0px rgba(27, 31, 35, 0.04), 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)'
@@ -137,20 +159,21 @@ const buttons = {
     },
     border: {
       default: green[6],
-      hover: green[7],
-      active: green[7],
+      hover: 'rgba(27, 31, 35, 0.15)',
+      active: 'rgba(27, 31, 35, 0.15)',
       disabled: 'rgba(34, 134, 58, 0.1)'
     },
     bg: {
-      default: '#159739', //custom green
-      focus: '#138934', //custom green
-      hover: '#138934', //custom green
+      default: '#2EA44F', //custom green
+      focus: '#2C974B', //custom green
+      hover: '#2C974B', //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)',
+      active: '0px 1px 0px rgba(27, 31, 35, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)',
+      hover: '0px 1px 0px rgba(27, 31, 35, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)',
       focus: '0 0 0 3px #94D3A2'
     }
   },
@@ -163,8 +186,8 @@ const buttons = {
     },
     border: {
       default: colors.border.gray,
-      hover: red[7],
-      active: red[8]
+      hover: 'rgba(27, 31, 35, 0.15)',
+      active: 'rgba(27, 31, 35, 0.15)'
     },
     bg: {
       default: gray[0],
@@ -174,22 +197,22 @@ const buttons = {
     },
     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)',
+      active: '0px 1px 0px rgba(27, 31, 35, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)',
+      hover: '0px 1px 0px rgba(27, 31, 35, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)',
       focus: '0 0 0 3px rgba(203, 36, 49, 0.4)'
     }
   },
   outline: {
     color: {
-      default: blue[6],
+      default: blue[5],
       hover: white,
       active: white,
       disabled: gray[4]
     },
     border: {
       default: gray[2], //border-gray
-      hover: blue[6],
-      active: 'rgba(4, 66, 137, .5)'
+      hover: 'rgba(27, 31, 35, 0.15)',
+      active: 'rgba(27, 31, 35, 0.15)'
     },
     bg: {
       default: gray[0],
@@ -199,8 +222,8 @@ const buttons = {
     },
     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)',
+      active: '0px 1px 0px rgba(27, 31, 35, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)',
+      hover: '0px 1px 0px rgba(27, 31, 35, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)',
       focus: '0 0 0 3px rgba(3, 102, 214, 0.3)'
     }
   }
diff --git a/yarn.lock b/yarn.lock
index cec80e1527a..99235a247dd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1982,6 +1982,11 @@
   dependencies:
     prop-types "^15.6.1"
 
+"@primer/primitives@2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-2.0.1.tgz#060b0882cdf75c3100db84100bb40538628bb63f"
+  integrity sha512-1zMGwqAfeTU3bOcsxzVgJlCPKTeDtDIP3h+Hm7qTvU0ez/87WZqjLKY6Jl7EBp9WH5VSm+LNwo56KfajInd3/w==
+
 "@reach/component-component@^0.3.0":
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/@reach/component-component/-/component-component-0.3.0.tgz#ccf593e26132cbec0ad92774b80356dcf544d5c5"
@@ -8659,16 +8664,6 @@ pretty-format@^25.0.0:
     ansi-styles "^4.0.0"
     react-is "^16.8.4"
 
-primer-colors@1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/primer-colors/-/primer-colors-1.0.1.tgz#9bc2dbfefeba3ec987eb7d71c6a3d14c67ae9c35"
-  integrity sha512-bxo3OPoIO1F/C07RpKbLjPzuSsTkOMzo9Yl9OJFHGD7/UxA+JvNdZK0GbJzWtz5Y8H6KabbHadxwVWRp1xl08A==
-
-primer-typography@1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/primer-typography/-/primer-typography-1.0.1.tgz#559c03e0d2470fa2d48a4166a63091f4b1162759"
-  integrity sha512-9f1MNOMYOWemosmJIG8FToqZoL7YKQW3KHNsMS3DddTUzJefnVzeqmiiTBPc2ok0yE7fE2PgobG9iRY+itgdVg==
-
 private@^0.1.6, private@~0.1.5:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"