diff --git a/.changeset/clever-islands-breathe.md b/.changeset/clever-islands-breathe.md
new file mode 100644
index 00000000000..91a5bd18886
--- /dev/null
+++ b/.changeset/clever-islands-breathe.md
@@ -0,0 +1,5 @@
+---
+'@primer/components': patch
+---
+
+Use functional color variables in BaseStyles
diff --git a/.changeset/cuddly-suns-flow.md b/.changeset/cuddly-suns-flow.md
new file mode 100644
index 00000000000..bf5ea232677
--- /dev/null
+++ b/.changeset/cuddly-suns-flow.md
@@ -0,0 +1,5 @@
+---
+'@primer/components': patch
+---
+
+Use functional color variables in BranchName
diff --git a/.changeset/purple-snakes-wait.md b/.changeset/purple-snakes-wait.md
new file mode 100644
index 00000000000..ca8525cfa2f
--- /dev/null
+++ b/.changeset/purple-snakes-wait.md
@@ -0,0 +1,5 @@
+---
+'@primer/components': patch
+---
+
+Use functional color variables in BorderBox
diff --git a/.changeset/warm-dryers-attack.md b/.changeset/warm-dryers-attack.md
new file mode 100644
index 00000000000..8c9e3f81363
--- /dev/null
+++ b/.changeset/warm-dryers-attack.md
@@ -0,0 +1,5 @@
+---
+'@primer/components': patch
+---
+
+Use functional color variables in AvatarPair
diff --git a/.changeset/wet-dryers-repeat.md b/.changeset/wet-dryers-repeat.md
new file mode 100644
index 00000000000..fa3b5d55ccc
--- /dev/null
+++ b/.changeset/wet-dryers-repeat.md
@@ -0,0 +1,5 @@
+---
+'@primer/components': patch
+---
+
+Use functional color variables in AvatarStack
diff --git a/src/AvatarPair.tsx b/src/AvatarPair.tsx
index 6940eef5e28..1ae30a264c5 100644
--- a/src/AvatarPair.tsx
+++ b/src/AvatarPair.tsx
@@ -1,15 +1,16 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 import styled from 'styled-components'
-import {Relative, RelativeProps} from './Position'
 import Avatar from './Avatar'
+import {get} from './constants'
+import {Relative, RelativeProps} from './Position'
 import theme from './theme'
 
 const ChildAvatar = styled(Avatar)`
   position: absolute;
   right: -15%;
   bottom: -9%;
-  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8);
+  box-shadow: ${get('shadows.avatar.childShadow')};
 `
 
 export type AvatarPairProps = RelativeProps
@@ -17,7 +18,7 @@ export type AvatarPairProps = RelativeProps
 const AvatarPair = ({children, ...rest}: AvatarPairProps) => {
   const avatars = React.Children.map(children, (child, i) => {
     if (!React.isValidElement(child)) return child
-    return i === 0 ? React.cloneElement(child, {size: 40}) : <ChildAvatar bg="white" {...child.props} size={20} />
+    return i === 0 ? React.cloneElement(child, {size: 40}) : <ChildAvatar bg="bg.canvas" {...child.props} size={20} />
   })
   return (
     <Relative display="inline-flex" {...rest}>
diff --git a/src/AvatarStack.tsx b/src/AvatarStack.tsx
index 12e96e6a78d..1529632314e 100644
--- a/src/AvatarStack.tsx
+++ b/src/AvatarStack.tsx
@@ -23,7 +23,7 @@ const AvatarStackWrapper = styled.span<StyledAvatarStackWrapperProps>`
     flex-shrink: 0;
     height: 20px;
     width: 20px;
-    box-shadow: 0 0 0 1px ${get('colors.white')};
+    box-shadow: 0 0 0 1px ${get('colors.bg.canvas')};
     margin-left: -11px;
     position: relative;
     overflow: hidden;
@@ -120,7 +120,7 @@ const AvatarStackWrapper = styled.span<StyledAvatarStackWrapperProps>`
       margin-left: ${get('space.1')};
       opacity: 100%;
       visibility: visible;
-      box-shadow: 0 0 0 4px ${get('colors.white')};
+      box-shadow: 0 0 0 4px ${get('colors.bg.canvas')};
       &:first-child {
         margin-left: 0;
       }
diff --git a/src/BaseStyles.tsx b/src/BaseStyles.tsx
index c520b1d9654..600ae282d44 100644
--- a/src/BaseStyles.tsx
+++ b/src/BaseStyles.tsx
@@ -46,7 +46,7 @@ function BaseStyles(props: BaseStylesProps) {
 }
 
 BaseStyles.defaultProps = {
-  color: 'gray.9',
+  color: 'text.primary',
   fontFamily: 'normal',
   lineHeight: 'default',
   theme
diff --git a/src/BorderBox.tsx b/src/BorderBox.tsx
index da7acd56968..9de672aed3d 100644
--- a/src/BorderBox.tsx
+++ b/src/BorderBox.tsx
@@ -15,7 +15,7 @@ BorderBox.defaultProps = {
   theme,
   borderWidth: '1px',
   borderStyle: 'solid',
-  borderColor: 'gray.2',
+  borderColor: 'border.primary',
   borderRadius: 2
 }
 
diff --git a/src/BranchName.tsx b/src/BranchName.tsx
index 4b1bca27b18..de574659f67 100644
--- a/src/BranchName.tsx
+++ b/src/BranchName.tsx
@@ -10,9 +10,9 @@ const BranchName = styled.a<SystemCommonProps & SxProp>`
   padding: 2px 6px;
   font-size: ${get('fontSizes.0')};
   font-family: ${get('fonts.mono')};
-  color: rgba(27, 31, 35, 0.6);
-  background-color: #eaf5ff;
-  border-radius: 3px;
+  color: ${get('colors.branchName.text')};
+  background-color: ${get('colors.branchName.bg')};
+  border-radius: ${get('radii.2')};
   ${COMMON};
   ${sx};
 `
diff --git a/src/__tests__/__snapshots__/BranchName.tsx.snap b/src/__tests__/__snapshots__/BranchName.tsx.snap
index 6f4391dfbdd..08c964defa1 100644
--- a/src/__tests__/__snapshots__/BranchName.tsx.snap
+++ b/src/__tests__/__snapshots__/BranchName.tsx.snap
@@ -6,9 +6,9 @@ exports[`BranchName renders consistently 1`] = `
   padding: 2px 6px;
   font-size: 12px;
   font-family: SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
-  color: rgba(27,31,35,0.6);
+  color: #586069;
   background-color: #eaf5ff;
-  border-radius: 3px;
+  border-radius: 6px;
 }
 
 <a