diff --git a/src/design-system/components/Button/Button.test.tsx b/src/design-system/components/Button/Button.test.tsx
index 433ea986..9e02ed77 100644
--- a/src/design-system/components/Button/Button.test.tsx
+++ b/src/design-system/components/Button/Button.test.tsx
@@ -23,7 +23,6 @@ describe('Button', () => {
     const { getByTestId } = render(<Button.Primary title="Button" />)
     expect(getByTestId('baseButton').props.style).toStrictEqual({
       ...baseStyles,
-      alignItems: 'center',
       backgroundColor: theme.light.colors.button.primary.bg,
       borderColor: theme.light.colors.button.primary.border,
       borderWidth: 1,
@@ -34,7 +33,6 @@ describe('Button', () => {
     const { getByTestId } = render(<Button.PrimaryDestructive title="Button" />)
     expect(getByTestId('baseButton').props.style).toStrictEqual({
       ...baseStyles,
-      alignItems: 'center',
       backgroundColor: theme.light.colors.button.primary.error.bg,
       borderColor: theme.light.colors.button.primary.error.border,
       borderWidth: 1,
@@ -45,7 +43,6 @@ describe('Button', () => {
     const { getByTestId } = render(<Button.SecondaryColor title="Button" />)
     expect(getByTestId('baseButton').props.style).toStrictEqual({
       ...baseStyles,
-      alignItems: 'center',
       backgroundColor: theme.light.colors.button.secondary.bg,
       borderColor: theme.light.colors.button.secondary.border,
       borderWidth: 1,
@@ -67,7 +64,6 @@ describe('Button', () => {
     const { getByTestId } = render(<Button.SecondaryDestructive title="Button" />)
     expect(getByTestId('baseButton').props.style).toStrictEqual({
       ...baseStyles,
-      alignItems: 'center',
       backgroundColor: theme.light.colors.button.secondary.error.bg,
       borderColor: theme.light.colors.button.secondary.error.border,
       borderWidth: 1,
@@ -78,8 +74,8 @@ describe('Button', () => {
     const { getByTestId } = render(<Button.TertiaryColor title="Button" />)
     expect(getByTestId('baseButton').props.style).toStrictEqual({
       ...baseStyles,
-      backgroundColor: 'transparent',
-      borderColor: 'transparent',
+      backgroundColor: theme.light.colors.Base.transparent,
+      borderColor: theme.light.colors.Base.transparent,
       borderWidth: undefined,
     })
   })
@@ -88,8 +84,8 @@ describe('Button', () => {
     const { getByTestId } = render(<Button.TertiaryGray title="Button" />)
     expect(getByTestId('baseButton').props.style).toStrictEqual({
       ...baseStyles,
-      backgroundColor: 'transparent',
-      borderColor: 'transparent',
+      backgroundColor: theme.light.colors.Base.transparent,
+      borderColor: theme.light.colors.Base.transparent,
       borderWidth: undefined,
     })
   })
@@ -98,8 +94,8 @@ describe('Button', () => {
     const { getByTestId } = render(<Button.TertiaryDestructive title="Button" />)
     expect(getByTestId('baseButton').props.style).toStrictEqual({
       ...baseStyles,
-      backgroundColor: 'transparent',
-      borderColor: 'transparent',
+      backgroundColor: theme.light.colors.Base.transparent,
+      borderColor: theme.light.colors.Base.transparent,
       borderWidth: undefined,
     })
   })
@@ -108,8 +104,8 @@ describe('Button', () => {
     const { getByTestId } = render(<Button.LinkColor title="Button" />)
     expect(getByTestId('baseButton').props.style).toStrictEqual({
       ...baseStyles,
-      backgroundColor: 'transparent',
-      borderColor: 'transparent',
+      backgroundColor: theme.light.colors.Base.transparent,
+      borderColor: theme.light.colors.Base.transparent,
       borderWidth: undefined,
     })
   })
@@ -118,8 +114,8 @@ describe('Button', () => {
     const { getByTestId } = render(<Button.LinkGray title="Button" />)
     expect(getByTestId('baseButton').props.style).toStrictEqual({
       ...baseStyles,
-      backgroundColor: 'transparent',
-      borderColor: 'transparent',
+      backgroundColor: theme.light.colors.Base.transparent,
+      borderColor: theme.light.colors.Base.transparent,
       borderWidth: undefined,
     })
   })
@@ -128,8 +124,8 @@ describe('Button', () => {
     const { getByTestId } = render(<Button.LinkDestructive title="Button" />)
     expect(getByTestId('baseButton').props.style).toStrictEqual({
       ...baseStyles,
-      backgroundColor: 'transparent',
-      borderColor: 'transparent',
+      backgroundColor: theme.light.colors.Base.transparent,
+      borderColor: theme.light.colors.Base.transparent,
       borderWidth: undefined,
     })
   })
diff --git a/src/design-system/config/theme.ts b/src/design-system/config/theme.ts
index e049d9c7..c9c8f480 100644
--- a/src/design-system/config/theme.ts
+++ b/src/design-system/config/theme.ts
@@ -341,11 +341,11 @@ export const _appTheme = {
 export const theme = {
   light: {
     ..._appTheme,
-    colors: themeColors.lightMode,
+    colors: { ...themeColors.primitives, ...themeColors.lightMode },
   },
   dark: {
     ..._appTheme,
-    colors: themeColors.darkMode,
+    colors: { ...themeColors.primitives, ...themeColors.darkMode },
   },
 }
 
diff --git a/src/types/theme.d.ts b/src/types/theme.d.ts
index 58ddebbc..58611f3b 100644
--- a/src/types/theme.d.ts
+++ b/src/types/theme.d.ts
@@ -11,7 +11,8 @@ declare global {
   type Fonts = keyof AppTheme['fonts']
 
   // COLORS
-  type Colors = typeof themeColors.lightMode | typeof themeColors.darkMode
+  type Colors = typeof themeColors.primitives &
+    (typeof themeColors.lightMode | typeof themeColors.darkMode)
 
   export type ColorNames = NestedKeys<Colors>
 
diff --git a/src/utils/getColorValue.ts b/src/utils/getColorValue.ts
index d792b776..0771fdf9 100644
--- a/src/utils/getColorValue.ts
+++ b/src/utils/getColorValue.ts
@@ -8,7 +8,7 @@ export const getColorValue = ({ color, colors }: GetColorValueProps): string =>
     return color
   }
 
-  if (!color || typeof color === 'object') return 'transparent'
+  if (!color || typeof color === 'object') return colors.Base.transparent
 
   const keys = color.split('.')