diff --git a/example/src/AccordionExample.js b/example/src/AccordionExample.js
index dab7ee017..4879af8c4 100644
--- a/example/src/AccordionExample.js
+++ b/example/src/AccordionExample.js
@@ -5,7 +5,7 @@ import Section, { Container } from "./Section";
 
 function AccordionExample({ theme }) {
   return (
-    <Container style={{ backgroundColor: theme.colors.background.brand }}>
+    <Container style={{ backgroundColor: theme.colors.background.base }}>
       <Section title="Basic accordion with no additional styles">
         <AccordionGroup label={"Basic"}>
           <Text>Item 1</Text>
@@ -30,7 +30,7 @@ function AccordionExample({ theme }) {
         <AccordionGroup
           openColor={theme.colors.branding.primary}
           closedColor={theme.colors.branding.secondary}
-          caretColor={theme.colors.border.brand}
+          caretColor={theme.colors.border.base}
           icon={"folder"}
           iconSize={26}
           style={{ fontWeight: "normal" }}
diff --git a/example/src/ActionSheetExample.js b/example/src/ActionSheetExample.js
index 84af5b856..790911c34 100644
--- a/example/src/ActionSheetExample.js
+++ b/example/src/ActionSheetExample.js
@@ -20,7 +20,7 @@ function ActionSheetExample({ theme }) {
   }, []);
 
   return (
-    <Container style={{ backgroundColor: theme.colors.background.brand }}>
+    <Container style={{ backgroundColor: theme.colors.background.base }}>
       <Section title="Action Sheet">
         <ButtonSolid title="Open Action Sheet" onPress={showActionSheet} />
         <ActionSheet visible={visible} onClose={hideActionSheet}>
diff --git a/example/src/App.tsx b/example/src/App.tsx
index 08651869c..618a0cbc6 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -183,7 +183,7 @@ const DarkTheme = createTheme({
     name: "DarkTheme",
     colors: {
       background: {
-        brand: "#404040",
+        base: "#404040",
       },
       text: {
         normal: "white",
@@ -221,14 +221,14 @@ const OtherTheme = createTheme({
         secondary: "#824D74",
       },
       background: {
-        brand: "black",
+        base: "black",
       },
       text: {
         strong: "white",
         normal: "white",
       },
       border: {
-        brand: "#FDAF7B",
+        base: "#FDAF7B",
       },
     },
     typography: {
@@ -358,7 +358,7 @@ function Example({ title, children }: ExampleProps) {
       hasTopSafeArea={true}
       hasBottomSafeArea={true}
       scrollable={false}
-      style={{ backgroundColor: theme.colors.background.brand }}
+      style={{ backgroundColor: theme.colors.background.base }}
     >
       <View
         style={[
diff --git a/example/src/DatePickerExample.js b/example/src/DatePickerExample.js
index 29cb13d29..85ad7a23a 100644
--- a/example/src/DatePickerExample.js
+++ b/example/src/DatePickerExample.js
@@ -12,7 +12,7 @@ function DatePickerExample({ theme }) {
   const [date3, setDate3] = React.useState(new Date());
 
   return (
-    <Container style={{ backgroundColor: theme.colors.background.brand }}>
+    <Container style={{ backgroundColor: theme.colors.background.base }}>
       <Section title="Underline">
         <DatePicker
           label="Date (without date prop)"
diff --git a/example/src/SliderExample.tsx b/example/src/SliderExample.tsx
index d2f25c7c3..595693559 100644
--- a/example/src/SliderExample.tsx
+++ b/example/src/SliderExample.tsx
@@ -9,7 +9,7 @@ function SliderExample({ theme }) {
   const handleChange = (v) => setValue(v);
 
   return (
-    <Container style={{ backgroundColor: theme.colors.background.brand }}>
+    <Container style={{ backgroundColor: theme.colors.background.base }}>
       <Section title="Uncontrolled">
         <Slider
           onValueChange={console.log}
@@ -28,7 +28,7 @@ function SliderExample({ theme }) {
       <Section title="Controlled">
         <Slider
           step={10}
-          maximumTrackTintColor={theme.colors.foreground.brand}
+          maximumTrackTintColor={theme.colors.foreground.base}
           minimumTrackTintColor={theme.colors.branding.primary}
           thumbTintColor={theme.colors.branding.primary}
           value={value}
@@ -43,7 +43,7 @@ function SliderExample({ theme }) {
       <Section title="Controlled with initial value">
         <Slider
           step={10}
-          maximumTrackTintColor={theme.colors.foreground.brand}
+          maximumTrackTintColor={theme.colors.foreground.base}
           minimumTrackTintColor={theme.colors.branding.primary}
           thumbTintColor={theme.colors.branding.primary}
           value={value2}
diff --git a/example/src/StarRatingExample.js b/example/src/StarRatingExample.js
index 4752e0f07..9cfe90f98 100644
--- a/example/src/StarRatingExample.js
+++ b/example/src/StarRatingExample.js
@@ -6,7 +6,7 @@ function StarRatingExample({ theme }) {
   const [rating, setRating] = React.useState(0.5);
 
   return (
-    <Container style={{ backgroundColor: theme.colors.background.brand }}>
+    <Container style={{ backgroundColor: theme.colors.background.base }}>
       <Section title="Star Rating">
         <StarRating rating={3.5} />
       </Section>
diff --git a/example/src/StepperExample.js b/example/src/StepperExample.js
index 45884eadb..f9f6267e4 100644
--- a/example/src/StepperExample.js
+++ b/example/src/StepperExample.js
@@ -10,7 +10,7 @@ function StepperExample({ theme }) {
   const handleChange = (v) => setValue(v);
 
   return (
-    <Container style={{ backgroundColor: theme.colors.background.brand }}>
+    <Container style={{ backgroundColor: theme.colors.background.base }}>
       <Section title="With State">
         <Stepper value={value} onChange={handleChange} />
       </Section>
diff --git a/example/src/SurfaceExample.js b/example/src/SurfaceExample.js
index 11b9f5146..72676784a 100644
--- a/example/src/SurfaceExample.js
+++ b/example/src/SurfaceExample.js
@@ -5,7 +5,7 @@ import Section, { Container } from "./Section";
 
 function SurfaceExample({ theme }) {
   return (
-    <Container style={{ backgroundColor: theme.colors.background.brand }}>
+    <Container style={{ backgroundColor: theme.colors.background.base }}>
       <Section title="overflow: 'hidden', backgroundColor: 'pink'">
         <Surface
           style={{
diff --git a/example/src/SwitchExample.js b/example/src/SwitchExample.js
index 733f4455f..4796fec2e 100644
--- a/example/src/SwitchExample.js
+++ b/example/src/SwitchExample.js
@@ -8,7 +8,7 @@ function SwitchExample({ theme }) {
   const handleChange = (v) => toggle(v);
 
   return (
-    <Container style={{ backgroundColor: theme.colors.background.brand }}>
+    <Container style={{ backgroundColor: theme.colors.background.base }}>
       <Section title="Enabled">
         <Switch value={value} disabled={false} onValueChange={handleChange} />
       </Section>
diff --git a/packages/core/src/components/BottomSheet/BottomSheet.tsx b/packages/core/src/components/BottomSheet/BottomSheet.tsx
index 9442f50d5..4d8dd7bb8 100644
--- a/packages/core/src/components/BottomSheet/BottomSheet.tsx
+++ b/packages/core/src/components/BottomSheet/BottomSheet.tsx
@@ -67,7 +67,7 @@ const BottomSheet = React.forwardRef<BottomSheetComponent, BottomSheetProps>(
   ) => {
     const theme = useTheme();
     const backgroundColor =
-      (style as ViewStyle)?.backgroundColor || theme.colors.background.brand;
+      (style as ViewStyle)?.backgroundColor || theme.colors.background.base;
 
     const snapPoints = snapPointsProp ?? [
       topSnapPosition,
@@ -102,7 +102,7 @@ const BottomSheet = React.forwardRef<BottomSheetComponent, BottomSheetProps>(
             : getSnapIndexFromPosition(initialSnapPosition)
         }
         handleIndicatorStyle={[
-          { backgroundColor: handleColor ?? theme.colors.border.brand },
+          { backgroundColor: handleColor ?? theme.colors.border.base },
           !showHandle ? { display: "none" } : {},
         ]}
         backgroundStyle={{
@@ -110,7 +110,7 @@ const BottomSheet = React.forwardRef<BottomSheetComponent, BottomSheetProps>(
           borderTopLeftRadius: topBorderRadius,
           borderTopRightRadius: topBorderRadius,
           borderWidth,
-          borderColor: borderColor ?? theme.colors.border.brand,
+          borderColor: borderColor ?? theme.colors.border.base,
         }}
         onChange={(index) =>
           // Convert bottom-sheet index to match our top-to-bottom ordering
diff --git a/packages/core/src/components/DatePicker/DatePicker.tsx b/packages/core/src/components/DatePicker/DatePicker.tsx
index 300934043..46edd1b1f 100644
--- a/packages/core/src/components/DatePicker/DatePicker.tsx
+++ b/packages/core/src/components/DatePicker/DatePicker.tsx
@@ -267,17 +267,17 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
 
   inputTextColor = colors.text.strong;
   if (disabled) {
-    activeColor = colors.border.brand;
+    activeColor = colors.border.base;
     placeholderColor = colors.text.light;
     borderColor = "transparent";
     underlineColor = "transparent";
-    backgroundColor = colors.border.brand;
+    backgroundColor = colors.border.base;
   } else {
     activeColor = inputBorderColorActive || colors.branding.primary;
     placeholderColor = colors.text.light;
     underlineColor =
-      viewStyles.borderColor ?? inputBorderColor ?? colors.border.brand;
-    backgroundColor = colors.background.brand;
+      viewStyles.borderColor ?? inputBorderColor ?? colors.border.base;
+    backgroundColor = colors.background.base;
   }
 
   const { lineHeight, ...subtitle1 } = typography.subtitle1;
@@ -560,7 +560,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
             style={[
               styles.picker,
               {
-                backgroundColor: colors.border.brand,
+                backgroundColor: colors.border.base,
               },
             ]}
           >
diff --git a/packages/core/src/components/DeckSwiper/DeckSwiperCard.tsx b/packages/core/src/components/DeckSwiper/DeckSwiperCard.tsx
index 43a4d0276..61b9e0e58 100644
--- a/packages/core/src/components/DeckSwiper/DeckSwiperCard.tsx
+++ b/packages/core/src/components/DeckSwiper/DeckSwiperCard.tsx
@@ -15,8 +15,8 @@ const DeckSwiperCard: React.FC<
     style={[
       styles.card,
       {
-        backgroundColor: theme.colors.background.brand,
-        borderColor: theme.colors.border.brand,
+        backgroundColor: theme.colors.background.base,
+        borderColor: theme.colors.border.base,
       },
       style,
     ]}
diff --git a/packages/core/src/components/Divider.tsx b/packages/core/src/components/Divider.tsx
index 4c90f440c..a3dca1609 100644
--- a/packages/core/src/components/Divider.tsx
+++ b/packages/core/src/components/Divider.tsx
@@ -19,7 +19,7 @@ const Divider: React.FC<React.PropsWithChildren<Props>> = ({
     <View
       style={[
         {
-          backgroundColor: color || colors.border.brand,
+          backgroundColor: color || colors.border.base,
           height: StyleSheet.hairlineWidth,
         },
         style,
diff --git a/packages/core/src/components/Elevation.tsx b/packages/core/src/components/Elevation.tsx
index 96015f893..bbb0a7720 100644
--- a/packages/core/src/components/Elevation.tsx
+++ b/packages/core/src/components/Elevation.tsx
@@ -33,7 +33,7 @@ const Elevation: React.FC<React.PropsWithChildren<Props>> = ({
       style={[
         {
           borderRadius,
-          backgroundColor: colors.background.brand,
+          backgroundColor: colors.background.base,
         },
         elevation ? { elevation } : null,
         style,
diff --git a/packages/core/src/components/MediaPlayer/AudioPlayer/AudioPlayerWithInterface.tsx b/packages/core/src/components/MediaPlayer/AudioPlayer/AudioPlayerWithInterface.tsx
index 679026b1f..c2f3fc183 100644
--- a/packages/core/src/components/MediaPlayer/AudioPlayer/AudioPlayerWithInterface.tsx
+++ b/packages/core/src/components/MediaPlayer/AudioPlayer/AudioPlayerWithInterface.tsx
@@ -129,8 +129,8 @@ const AudioPlayerWithInterface = React.forwardRef<
           testID="audio-player-interface"
           style={[
             {
-              backgroundColor: theme.colors.background.brand,
-              borderColor: theme.colors.border.brand,
+              backgroundColor: theme.colors.background.base,
+              borderColor: theme.colors.border.base,
             },
             styles.container,
             viewStyles,
@@ -166,7 +166,7 @@ const AudioPlayerWithInterface = React.forwardRef<
                 completedTrackColor ?? theme.colors.branding.primary
               }
               maximumTrackTintColor={
-                remainingTrackColor ?? theme.colors.border.brand
+                remainingTrackColor ?? theme.colors.border.base
               }
               thumbTintColor={thumbColor ?? theme.colors.branding.primary}
               minimumValue={0}
diff --git a/packages/core/src/components/Picker/dropdown/DropDownModalPicker.tsx b/packages/core/src/components/Picker/dropdown/DropDownModalPicker.tsx
index dde5a500e..ff8ec386d 100644
--- a/packages/core/src/components/Picker/dropdown/DropDownModalPicker.tsx
+++ b/packages/core/src/components/Picker/dropdown/DropDownModalPicker.tsx
@@ -28,8 +28,8 @@ const ModalPicker: React.FC<
   selectedIconName = "Feather/check",
   selectedIconColor = theme.colors.text.strong,
   selectedIconSize = 20,
-  dropDownBackgroundColor = theme.colors.background.brand,
-  dropDownBorderColor = theme.colors.border.brand,
+  dropDownBackgroundColor = theme.colors.background.base,
+  dropDownBorderColor = theme.colors.border.base,
   dropDownTextColor = theme.colors.text.strong,
   dropDownBorderWidth = 1,
   dropDownBorderRadius = 8,
diff --git a/packages/core/src/components/Picker/dropdown/DropDownPicker.tsx b/packages/core/src/components/Picker/dropdown/DropDownPicker.tsx
index cad2b4fe6..afa40a313 100644
--- a/packages/core/src/components/Picker/dropdown/DropDownPicker.tsx
+++ b/packages/core/src/components/Picker/dropdown/DropDownPicker.tsx
@@ -28,8 +28,8 @@ const DropDownPicker: React.FC<
   selectedIconName = "Feather/check",
   selectedIconColor = theme.colors.text.strong,
   selectedIconSize = 20,
-  dropDownBackgroundColor = theme.colors.background.brand,
-  dropDownBorderColor = theme.colors.border.brand,
+  dropDownBackgroundColor = theme.colors.background.base,
+  dropDownBorderColor = theme.colors.border.base,
   dropDownTextColor = theme.colors.text.strong,
   dropDownBorderWidth = 1,
   dropDownBorderRadius = 8,
diff --git a/packages/core/src/components/PinInput/PinInput.tsx b/packages/core/src/components/PinInput/PinInput.tsx
index 65e54f294..fb953c1bb 100644
--- a/packages/core/src/components/PinInput/PinInput.tsx
+++ b/packages/core/src/components/PinInput/PinInput.tsx
@@ -97,7 +97,7 @@ const PinInput = React.forwardRef<NativeTextInput, PinInputProps>(
           testID="default-code-input-cell"
           style={[
             styles.cell,
-            { borderColor: theme.colors.border.brand },
+            { borderColor: theme.colors.border.base },
             viewStyles,
             isFocused && focusedBorderWidth
               ? { borderWidth: focusedBorderWidth }
diff --git a/packages/core/src/components/Progress/CircularProgress/CircularProgress.tsx b/packages/core/src/components/Progress/CircularProgress/CircularProgress.tsx
index 701dc6119..277492c56 100644
--- a/packages/core/src/components/Progress/CircularProgress/CircularProgress.tsx
+++ b/packages/core/src/components/Progress/CircularProgress/CircularProgress.tsx
@@ -24,7 +24,7 @@ export const CircularProgress: React.FC<
   thickness = 10,
   trackThickness = thickness,
   color = theme.colors.branding.primary,
-  trackColor = theme.colors.border.brand,
+  trackColor = theme.colors.border.base,
   trackOpacity = 1,
   showTrack = true,
   animationDuration = DEFAULT_ANIMATION_DURATION,
diff --git a/packages/core/src/components/Progress/LinearProgress/LinearProgress.tsx b/packages/core/src/components/Progress/LinearProgress/LinearProgress.tsx
index a9e0380f7..c92d26e81 100644
--- a/packages/core/src/components/Progress/LinearProgress/LinearProgress.tsx
+++ b/packages/core/src/components/Progress/LinearProgress/LinearProgress.tsx
@@ -21,7 +21,7 @@ export const LinearProgress: React.FC<ValueProgressProps> = ({
   thickness = 10,
   trackThickness = thickness,
   color = theme.colors.branding.primary,
-  trackColor = theme.colors.border.brand,
+  trackColor = theme.colors.border.base,
   trackOpacity = 1,
   showTrack = true,
   animationDuration = DEFAULT_ANIMATION_DURATION,
diff --git a/packages/core/src/components/ScreenContainer.tsx b/packages/core/src/components/ScreenContainer.tsx
index 9db360bb2..53740ad67 100644
--- a/packages/core/src/components/ScreenContainer.tsx
+++ b/packages/core/src/components/ScreenContainer.tsx
@@ -36,7 +36,7 @@ function ScreenContainer({
   ...rest
 }: ScreenContainerProps) {
   const backgroundColor =
-    StyleSheet.flatten(style)?.backgroundColor || theme.colors.background.brand;
+    StyleSheet.flatten(style)?.backgroundColor || theme.colors.background.base;
 
   const edges: Edge[] = [];
   if (hasSafeArea || hasTopSafeArea) {
diff --git a/packages/core/src/components/SectionList/SectionHeader.tsx b/packages/core/src/components/SectionList/SectionHeader.tsx
index bef8be169..441a1bff0 100644
--- a/packages/core/src/components/SectionList/SectionHeader.tsx
+++ b/packages/core/src/components/SectionList/SectionHeader.tsx
@@ -22,7 +22,7 @@ export const DefaultSectionHeader = withTheme(
       <Text
         testID="default-section-header"
         style={{
-          color: theme.colors.background.brand,
+          color: theme.colors.background.base,
           backgroundColor: theme.colors.branding.primary,
           fontSize: 16,
           padding: 10,
diff --git a/packages/core/src/components/Surface.tsx b/packages/core/src/components/Surface.tsx
index 9742f13e2..5b8ef4e16 100644
--- a/packages/core/src/components/Surface.tsx
+++ b/packages/core/src/components/Surface.tsx
@@ -38,7 +38,7 @@ const Surface: React.FC<React.PropsWithChildren<Props>> = ({
     if (backgroundColor) {
       return backgroundColor;
     } else {
-      return colors.background.brand;
+      return colors.background.base;
     }
   };
 
diff --git a/packages/core/src/components/SwipeableItem/SwipeableItem.tsx b/packages/core/src/components/SwipeableItem/SwipeableItem.tsx
index 1356d63d5..acce1f232 100644
--- a/packages/core/src/components/SwipeableItem/SwipeableItem.tsx
+++ b/packages/core/src/components/SwipeableItem/SwipeableItem.tsx
@@ -207,14 +207,14 @@ const SwipeableItem: React.FC<React.PropsWithChildren<Props>> = ({
         <Icon
           name={item.icon}
           size={item.iconSize || 25}
-          color={item.color || theme.colors.background.brand}
+          color={item.color || theme.colors.background.base}
         />
       )}
       {item.title && (
         <Text
           style={[
             textStyles,
-            { color: item.color || theme.colors.background.brand },
+            { color: item.color || theme.colors.background.base },
           ]}
         >
           {item.title}
@@ -294,7 +294,7 @@ const SwipeableItem: React.FC<React.PropsWithChildren<Props>> = ({
           style={[
             styles.surfaceContainer,
             {
-              backgroundColor: theme.colors.background.brand,
+              backgroundColor: theme.colors.background.base,
             },
             surfaceContainerStyles,
           ]}
diff --git a/packages/core/src/components/Swiper/Swiper.tsx b/packages/core/src/components/Swiper/Swiper.tsx
index 2379e06ed..106c72446 100644
--- a/packages/core/src/components/Swiper/Swiper.tsx
+++ b/packages/core/src/components/Swiper/Swiper.tsx
@@ -49,7 +49,7 @@ const Swiper = forwardRef<SwiperRef, SwiperProps<any>>(
       prevTitleColor,
       nextTitleColor,
       dotsTouchable = true,
-      dotColor = theme?.colors.foreground.brand,
+      dotColor = theme?.colors.foreground.base,
       dotActiveColor = theme?.colors.branding.primary,
       data,
       keyExtractor,
diff --git a/packages/core/src/components/TabView/TabView.tsx b/packages/core/src/components/TabView/TabView.tsx
index efa34d632..4d785cc51 100644
--- a/packages/core/src/components/TabView/TabView.tsx
+++ b/packages/core/src/components/TabView/TabView.tsx
@@ -137,7 +137,7 @@ const TabViewComponent: React.FC<React.PropsWithChildren<TabViewProps>> = ({
           ) : null
         }
         style={{
-          backgroundColor: tabsBackgroundColor || theme.colors.background.brand,
+          backgroundColor: tabsBackgroundColor || theme.colors.background.base,
         }}
       />
     );
diff --git a/packages/core/src/components/Table/Table.tsx b/packages/core/src/components/Table/Table.tsx
index 272ae3d5b..07eda9808 100644
--- a/packages/core/src/components/Table/Table.tsx
+++ b/packages/core/src/components/Table/Table.tsx
@@ -27,7 +27,7 @@ export interface Props<T> extends TableProps, ScrollViewProps {
 const Table = <T extends object>({
   theme,
   borderWidth = 1,
-  borderColor = theme.colors.border.brand,
+  borderColor = theme.colors.border.base,
   borderStyle = "solid",
   drawTopBorder = true,
   drawBottomBorder = false,
diff --git a/packages/core/src/components/TextField.tsx b/packages/core/src/components/TextField.tsx
index ba6177997..2108db951 100644
--- a/packages/core/src/components/TextField.tsx
+++ b/packages/core/src/components/TextField.tsx
@@ -270,7 +270,7 @@ class TextField extends React.Component<Props, State> {
       placeholderColor = colors.text.light;
       borderColor = "transparent";
       underlineColor = "transparent";
-      backgroundColor = colors.border.brand;
+      backgroundColor = colors.border.base;
     } else {
       activeColor = error ? colors.text.danger : activeBorderColorProp;
       placeholderColor = borderColor = colors.text.light;
diff --git a/packages/core/src/deprecated-components/AvatarEdit.tsx b/packages/core/src/deprecated-components/AvatarEdit.tsx
index 05155d475..032450f6b 100644
--- a/packages/core/src/deprecated-components/AvatarEdit.tsx
+++ b/packages/core/src/deprecated-components/AvatarEdit.tsx
@@ -29,8 +29,8 @@ const AvatarEdit: React.FC<React.PropsWithChildren<Props>> = ({
 }) => {
   const colorStyles = {
     editBackgroundColor: theme.colors.branding.primary,
-    editIconColor: theme.colors.background.brand,
-    editBorderColor: theme.colors.background.brand,
+    editIconColor: theme.colors.background.base,
+    editBorderColor: theme.colors.background.base,
   };
 
   const dimensions = {
diff --git a/packages/core/src/deprecated-components/Card.tsx b/packages/core/src/deprecated-components/Card.tsx
index ec61ca462..9cfdfc0de 100644
--- a/packages/core/src/deprecated-components/Card.tsx
+++ b/packages/core/src/deprecated-components/Card.tsx
@@ -64,7 +64,7 @@ export const TopRightCircleIcon = withTheme(
           <Icon
             name={icon}
             size={ICON_SIZE}
-            color={theme.colors.background.brand}
+            color={theme.colors.background.base}
           />
         </Pressable>
       </Surface>
@@ -120,7 +120,7 @@ const Card: React.FC<React.PropsWithChildren<Props>> = ({
     ...styles
   } = StyleSheet.flatten(style || {});
 
-  const backgroundColor = bgColor ? bgColor : theme.colors.background.brand;
+  const backgroundColor = bgColor ? bgColor : theme.colors.background.base;
   const innerPadding = padding ? padding : 12;
 
   return (
diff --git a/packages/core/src/deprecated-components/DeprecatedButton.tsx b/packages/core/src/deprecated-components/DeprecatedButton.tsx
index 9fe7840ce..5a61f65cd 100644
--- a/packages/core/src/deprecated-components/DeprecatedButton.tsx
+++ b/packages/core/src/deprecated-components/DeprecatedButton.tsx
@@ -90,9 +90,9 @@ const Button: React.FC<React.PropsWithChildren<Props>> = ({
     backgroundColor = buttonColor;
 
     if (disabled) {
-      textColor = color(colors.background.brand).alpha(0.5).rgb().string();
+      textColor = color(colors.background.base).alpha(0.5).rgb().string();
     } else {
-      textColor = labelColor || colors.background.brand;
+      textColor = labelColor || colors.background.base;
     }
   } else {
     backgroundColor = "transparent";
diff --git a/packages/core/src/deprecated-components/DeprecatedFAB.tsx b/packages/core/src/deprecated-components/DeprecatedFAB.tsx
index 062440d76..18bf62bf0 100644
--- a/packages/core/src/deprecated-components/DeprecatedFAB.tsx
+++ b/packages/core/src/deprecated-components/DeprecatedFAB.tsx
@@ -92,9 +92,9 @@ const FAB: React.FC<React.PropsWithChildren<Props>> = ({
     backgroundColor = buttonColor;
 
     if (disabled) {
-      textColor = color(colors.background.brand).alpha(0.5).rgb().string();
+      textColor = color(colors.background.base).alpha(0.5).rgb().string();
     } else {
-      textColor = colors.background.brand;
+      textColor = colors.background.base;
     }
   } else {
     backgroundColor = "transparent";
diff --git a/packages/core/src/deprecated-components/FieldSearchBarFull.tsx b/packages/core/src/deprecated-components/FieldSearchBarFull.tsx
index 2e54e5b80..cdebfe65e 100644
--- a/packages/core/src/deprecated-components/FieldSearchBarFull.tsx
+++ b/packages/core/src/deprecated-components/FieldSearchBarFull.tsx
@@ -94,7 +94,7 @@ const FieldSearchBarFull: React.FC<React.PropsWithChildren<Props>> = ({
         <Icon
           name={icon}
           size={Config.fieldSearchBarFullIconSize}
-          color={focused ? colors.branding.primary : colors.foreground.brand}
+          color={focused ? colors.branding.primary : colors.foreground.base}
         />
       )}
       <View style={{ marginLeft: showIcon ? 12 : 0, flex: 1 }}>
@@ -106,7 +106,7 @@ const FieldSearchBarFull: React.FC<React.PropsWithChildren<Props>> = ({
           onFocus={onFocus}
           onChangeText={handleChangeText}
           onSubmitEditing={onSubmit}
-          placeholderTextColor={colors.foreground.brand}
+          placeholderTextColor={colors.foreground.base}
           style={[
             {
               color: colors.text.medium,
diff --git a/packages/core/src/deprecated-components/RowBodyIcon.tsx b/packages/core/src/deprecated-components/RowBodyIcon.tsx
index e7a40e05f..4003dd7b8 100644
--- a/packages/core/src/deprecated-components/RowBodyIcon.tsx
+++ b/packages/core/src/deprecated-components/RowBodyIcon.tsx
@@ -31,14 +31,14 @@ const RowBodyIcon: React.FC<React.PropsWithChildren<Props>> = ({
       titleTypeStyle={typography.body1}
       titleColor={colors.text.medium}
       subtitleTypeStyle={typography.subtitle2}
-      subtitleColor={colors.foreground.brand}
+      subtitleColor={colors.foreground.base}
       title={title}
       subtitle={subtitle}
       right={() => (
         <Icon
           name={icon}
           size={Config.rowSingleLineIconSize}
-          color={colors.foreground.brand}
+          color={colors.foreground.base}
           style={{ marginLeft: 16 }}
         />
       )}
diff --git a/packages/maps/src/components/marker-cluster/MapMarkerClusterView.tsx b/packages/maps/src/components/marker-cluster/MapMarkerClusterView.tsx
index befdd3977..572afdbfe 100644
--- a/packages/maps/src/components/marker-cluster/MapMarkerClusterView.tsx
+++ b/packages/maps/src/components/marker-cluster/MapMarkerClusterView.tsx
@@ -38,7 +38,7 @@ export const DefaultMapMarkerClusterView = withTheme(
             testID="default-map-marker-cluster-view"
             style={{
               backgroundColor: theme.colors.branding.primary,
-              borderColor: theme.colors.background.brand,
+              borderColor: theme.colors.background.base,
               borderWidth: 1,
               borderRadius: 15,
               paddingHorizontal: 3,
@@ -50,7 +50,7 @@ export const DefaultMapMarkerClusterView = withTheme(
           >
             <Text
               style={{
-                color: theme.colors.background.brand,
+                color: theme.colors.background.base,
                 textAlign: "center",
               }}
             >
diff --git a/packages/theme/src/DefaultTheme.ts b/packages/theme/src/DefaultTheme.ts
index 683c2844a..90a9b9c6e 100644
--- a/packages/theme/src/DefaultTheme.ts
+++ b/packages/theme/src/DefaultTheme.ts
@@ -42,6 +42,7 @@ const DraftbitTheme = createTheme({
         danger: palettes.draftbit.error,
       },
       background: {
+        base: palettes.draftbit.background,
         brand: palettes.draftbit.background,
         info: palettes.draftbit.info,
         success: palettes.draftbit.success,
@@ -49,6 +50,7 @@ const DraftbitTheme = createTheme({
         danger: palettes.draftbit.error,
       },
       foreground: {
+        base: palettes.draftbit.light,
         brand: palettes.draftbit.light,
         info: palettes.draftbit.strong,
         success: palettes.draftbit.light,
@@ -56,6 +58,7 @@ const DraftbitTheme = createTheme({
         danger: palettes.draftbit.light,
       },
       border: {
+        base: palettes.draftbit.divider,
         brand: palettes.draftbit.divider,
         info: palettes.draftbit.divider,
         success: palettes.draftbit.divider,