Define basic color palette

dapp/src/components/Navbar/ConnectWallet.tsx

@@ -25,7 +25,7 @@ function ConnectButton({
   account,
   requestAccount,
 }: ConnectButtonsProps) {
-  const styles = !account ? { color: "error", borderColor: "error" } : undefined
+  const styles = !account ? { color: "red.400", borderColor: "red.400" } : undefined
   return (
     <Button
       variant="outline"

dapp/src/theme/Button.ts

@@ -7,12 +7,14 @@ const Button = {
   },
   variants: {
     solid: (props: StyleFunctionProps) => ({
-      backgroundColor: mode("black", "purple")(props),
+      // TODO: Update when the dark theme is ready
+      backgroundColor: mode("brand.400", "brand.400")(props),
       color: "white",
     }),
     outline: (props: StyleFunctionProps) => ({
-      color: mode("black", "grey.80")(props),
-      borderColor: mode("black", "grey.50")(props),
+      // TODO: Update when the dark theme is ready
+      color: mode("grey.700", "grey.700")(props),
+      borderColor: mode("grey.700", "grey.700")(props),
     }),
   },
 }

dapp/src/theme/index.ts

@@ -8,8 +8,9 @@ const defaultTheme = {
   styles: {
     global: (props: StyleFunctionProps) => ({
       body: {
-        backgroundColor: mode("lightGrey", "darkGrey")(props),
-        color: mode("black", "grey.80")(props),
+        // TODO: Update when the dark theme is ready
+        backgroundColor: mode("gold.300", "gold.300")(props),
+        color: mode("grey.700", "grey.700")(props),
       },
     }),
   },

dapp/src/theme/utils/colors.ts

@@ -1,14 +1,56 @@
-// TODO: Currently, the correct colors have not yet been defined.
-// Let's update them later.
 export const colors = {
-  white: "#FFF",
-  black: "#000",
-  purple: "#7D00FF",
-  error: "#F00",
+  brand: {
+    100: "#FFEDEB",
+    200: "#FFC5BF",
+    300: "#FF8B7B",
+    400: "#F34900", // Acre Orange
+    500: "#B53400",
+    600: "#7A2000",
+    700: "#450E00",
+  },
+  gold: {
+    100: "#FBF7EC",
+    200: "#F8EFDA",
+    300: "#F3E5C1", // Acre Dust
+    400: "#EDD8A2",
+    500: "#EACF88",
+    600: "#E2B950",
+    700: "#D69B04", // Acre Wheat
+  },
+  green: {
+    100: "#D6F2CE",
+    200: "#AFE7A1",
+    300: "#79CA52",
+    400: "#43AD02", // Acre Grass
+    500: "#318401",
+    600: "#205C01",
+    700: "#103800",
+  },
+  blue: {
+    100: "#EEF0FF",
+    200: "#CDD4FE",
+    300: "#9AAAFD",
+    400: "#5E80FC",
+    500: "#1059E6", // Acre Aqua
+    600: "#073B9E",
+    700: "#021F5C",
+  },
+  red: {
+    100: "#FDDADA",
+    200: "#FAA3A4",
+    300: "#F86165",
+    400: "#DA1E28",
+    500: "#9A1219",
+    600: "#5F070B",
+    700: "#2B0102",
+  },
   grey: {
-    50: "rgba(255, 255, 255, 0.50)",
-    80: "rgba(255, 255, 255, 0.80)",
+    100: "#F1F0F1",
+    200: "#D3D0D1",
+    300: "#AFA8A9",
+    400: "#8D8184",
+    500: "#675E60",
+    600: "#443D3F",
+    700: "#231F20", // Acre Dirt
   },
-  lightGrey: "#ECECEC",
-  darkGrey: "#1A1B1D",
 }