add the colors most likely to be used in the theme. kept the other default for now.

App.tsx

@@ -10,7 +10,7 @@ export default function App() {
 		<ThemeProvider theme={theme}>
 			<View style={styles.container}>
 				<StatusBar style="auto" />
-				<Text color="cardPrimaryBackground">Restyle Text</Text>
+				<Text color="tertiary">Restyle Text</Text>
 				<Card variant={"elevated"} width={200} height={200} />
 			</View>
 		</ThemeProvider>

src/themes/Theme.tsx

@@ -10,13 +10,18 @@ const palette = {
 	greenDark: "#0A906E",
 
 	black: "#0B0B0B",
-	white: "#F0F2F3",
+	white: "#FFFFFF",
+	green: "#00875A",
+	lightGray: "#F4F5F7",
+	gray: "#747E98",
+	yellow: "#F4C44A",
 };
 
 const theme = createTheme({
 	colors: {
-		mainBackground: palette.white,
-		cardPrimaryBackground: palette.purplePrimary,
+		primary: palette.white,
+		secondary: palette.green,
+		tertiary: palette.yellow,
 		black: palette.black,
 	},
 	spacing: {

src/themes/Variants.tsx

@@ -8,6 +8,6 @@ export const cardVariants = createVariant<Theme, "cardVariants">({
 			phone: "s",
 			tablet: "m",
 		},
-		backgroundColor: "cardPrimaryBackground",
+		backgroundColor: "secondary",
 	},
 });