diff --git a/src/theme/Button.ts b/src/theme/Button.ts
index ee0baf3..a56cb9d 100644
--- a/src/theme/Button.ts
+++ b/src/theme/Button.ts
@@ -81,5 +81,21 @@ export const Button = {
         },
       }
     },
+    sequence: (props: any) => {
+      const selectedBg = mode("brand.300", "brand.500")(props)
+
+      return {
+        color: mode(undefined, "white")(props),
+        backgroundColor: mode("brand.75", "gray.700")(props),
+        _active: {
+          color: "white",
+          backgroundColor: selectedBg,
+        },
+        _hover: {
+          backgroundColor: selectedBg,
+          color: "white",
+        },
+      }
+    },
   },
 }
diff --git a/src/theme/utils/colors.ts b/src/theme/utils/colors.ts
index 6c7ccee..4201519 100644
--- a/src/theme/utils/colors.ts
+++ b/src/theme/utils/colors.ts
@@ -9,6 +9,7 @@ export const colors = {
   },
   brand: {
     50: "#FCF9FF",
+    75: "#F2EDFF",
     100: "#D5C6FF",
     // 200
     300: "#9974FF",