diff --git a/apps/website/src/app/build/page.tsx b/apps/website/src/app/build/page.tsx
index 10a183aee..75dc82e58 100644
--- a/apps/website/src/app/build/page.tsx
+++ b/apps/website/src/app/build/page.tsx
@@ -9,7 +9,7 @@ import IconCli from "../../icons/IconCli"
 export default function Build() {
     const toolCardsInfo = [
         {
-            icon: <IconCli width={8} height={8} color="ceruleanBlue" />,
+            icon: <IconCli width={8} height={8} color="primary.600" />,
             title: "CLI",
             subtitle: "INTEGRATE TO YOUR PROJECT",
             url: "https://github.com/semaphore-protocol/semaphore/tree/main/packages/cli#readme",
@@ -20,7 +20,7 @@ export default function Build() {
             ]
         },
         {
-            icon: <IconBook width={8} height={8} color="ceruleanBlue" />,
+            icon: <IconBook width={8} height={8} color="primary.600" />,
             title: "Boilerplate",
             subtitle: "START FROM TEMPLATE",
             url: "https://github.com/semaphore-protocol/boilerplate",
@@ -31,7 +31,7 @@ export default function Build() {
             ]
         },
         {
-            icon: <IconBox width={8} height={8} color="ceruleanBlue" />,
+            icon: <IconBox width={8} height={8} color="primary.600" />,
             title: "Packages",
             subtitle: "LEVERAGE DEVELOPED LIBRARIES",
             url: "https://github.com/semaphore-protocol/semaphore/tree/main/packages",
@@ -63,7 +63,7 @@ export default function Build() {
                 <Text textAlign="center" fontSize={{ base: "40px", md: "72px" }}>
                     Let’s build something new
                 </Text>
-                <Text textAlign="center" fontSize={{ base: "16px", md: "20px" }} color="alabaster.400" mt="14px">
+                <Text textAlign="center" fontSize={{ base: "16px", md: "20px" }} color="text.400" mt="14px">
                     Jumpstart your app development process with these building tools.
                 </Text>
                 <VStack mt="64px">
@@ -105,7 +105,7 @@ export default function Build() {
                         <Text fontSize={{ base: "30px", md: "44px" }} fontWeight="500">
                             Contribute to Semaphore
                         </Text>
-                        <Text fontSize={{ base: "16px", md: "18px" }} color="alabaster.300" mt="16px">
+                        <Text fontSize={{ base: "16px", md: "18px" }} color="text.300" mt="16px">
                             Semaphore is open source with dozens of community contributors. You can propose improvements
                             to the protocol or take good first issues to get started.
                         </Text>
diff --git a/apps/website/src/app/learn/page.tsx b/apps/website/src/app/learn/page.tsx
index 1ba4bcbe0..553f5e129 100644
--- a/apps/website/src/app/learn/page.tsx
+++ b/apps/website/src/app/learn/page.tsx
@@ -93,17 +93,17 @@ const nullifier = identity.getNullifier()
 const commitment = identity.generateCommitment()`,
             itemList: [
                 {
-                    icon: <IconEyelash w="24px" h="24px" color="ceruleanBlue" />,
+                    icon: <IconEyelash w="24px" h="24px" color="primary.600" />,
                     heading: "Private values",
                     body: "Trapdoor and nullifier values are the private values of the Semaphore identity. To avoid fraud, the owner must keep both values secret."
                 },
                 {
-                    icon: <IconEye w="24px" h="24px" color="ceruleanBlue" />,
+                    icon: <IconEye w="24px" h="24px" color="primary.600" />,
                     heading: "Public values",
                     body: "Semaphore uses the Poseidon hash function to create the identity commitment from the identity private values. Identity commitments can be made public, similarly to Ethereum addresses."
                 },
                 {
-                    icon: <IconUser w="24px" h="24px" color="ceruleanBlue" />,
+                    icon: <IconUser w="24px" h="24px" color="primary.600" />,
                     heading: "Generate identities",
                     body: "Semaphore identities can be generated deterministically or randomly. Deterministic identities can be generated from the hash of a secret message."
                 }
@@ -122,17 +122,17 @@ const group = new Group(1)
 group.addMember(commitment)`,
             itemList: [
                 {
-                    icon: <IconTree w="24px" h="24px" color="ceruleanBlue" />,
+                    icon: <IconTree w="24px" h="24px" color="primary.600" />,
                     heading: "Merkle trees",
                     body: "Each leaf contains an identity commitment for a user. The identity commitment proves that the user is a group member without revealing the private identity of the user."
                 },
                 {
-                    icon: <IconGroup w="24px" h="24px" color="ceruleanBlue" />,
+                    icon: <IconGroup w="24px" h="24px" color="primary.600" />,
                     heading: "Types of groups",
                     body: "Groups can be created and managed in a decentralized fashion with Semaphore contracts or off-chain with our JavaScript libraries."
                 },
                 {
-                    icon: <IconManageUsers w="24px" h="24px" color="ceruleanBlue" />,
+                    icon: <IconManageUsers w="24px" h="24px" color="primary.600" />,
                     heading: "Group management",
                     body: "Users can join and leave groups by themselves, or an admin can add and remove them. Admins can be centralized authorities, Ethereum accounts, multi-sig wallets or smart contracts."
                 }
@@ -159,17 +159,17 @@ const verificationKey = JSON.parse(fs.readFileSync("./semaphore.json", "utf-8"))
 await verifyProof(verificationKey, fullProof)`,
             itemList: [
                 {
-                    icon: <IconBadge w="24px" h="24px" color="ceruleanBlue" />,
+                    icon: <IconBadge w="24px" h="24px" color="primary.600" />,
                     heading: "Membership",
                     body: "Only users who are part of a group can generate a valid proof for that group."
                 },
                 {
-                    icon: <IconFlag w="24px" h="24px" color="ceruleanBlue" />,
+                    icon: <IconFlag w="24px" h="24px" color="primary.600" />,
                     heading: "Signals",
                     body: "Group users can anonymously broadcast signals such as votes or endorsements without revealing their original identity."
                 },
                 {
-                    icon: <IconCheck w="24px" h="24px" color="ceruleanBlue" />,
+                    icon: <IconCheck w="24px" h="24px" color="primary.600" />,
                     heading: "Verifiers",
                     body: "Semaphore proofs can be verified with our contracts or off-chain with our JavaScript libraries."
                 }
@@ -318,7 +318,7 @@ await verifyProof(verificationKey, fullProof)`,
                             codeText={sectionBlockText.codeText}
                             itemList={sectionBlockText.itemList}
                         />
-                        {i !== sectionBlockTexts.length - 1 && <Divider my="68px" borderColor="alabaster.600" />}
+                        {i !== sectionBlockTexts.length - 1 && <Divider my="68px" borderColor="text.600" />}
                     </VStack>
                 ))}
             </VStack>
diff --git a/apps/website/src/app/page.tsx b/apps/website/src/app/page.tsx
index 6a4564379..234387969 100644
--- a/apps/website/src/app/page.tsx
+++ b/apps/website/src/app/page.tsx
@@ -116,7 +116,7 @@ export default function Home() {
                                     <Text fontSize={{ base: "18px", md: "20px" }} fontFamily={sora.style.fontFamily}>
                                         Simplified privacy
                                     </Text>
-                                    <Text color="alabaster.400" fontSize="14px">
+                                    <Text color="text.400" fontSize="14px">
                                         Semaphore streamlines privacy-centric app development. It empowers developers to
                                         effortlessly incorporate robust privacy features.
                                     </Text>
@@ -134,7 +134,7 @@ export default function Home() {
                                     <Text fontSize={{ base: "18px", md: "20px" }} fontFamily={sora.style.fontFamily}>
                                         Universal integrations
                                     </Text>
-                                    <Text color="alabaster.400" fontSize="14px">
+                                    <Text color="text.400" fontSize="14px">
                                         Semaphore is a protocol for Web2 and Web3. It integrates into any front-end
                                         framework or pure HTML/CSS/JS. It is cross-chain compatible with EVM, L2s, and
                                         alt-blockchains.
@@ -160,7 +160,7 @@ export default function Home() {
                                     <Text fontSize={{ base: "18px", md: "20px" }} fontFamily={sora.style.fontFamily}>
                                         Leverage Zero Knowledge
                                     </Text>
-                                    <Text color="alabaster.400" fontSize="14px">
+                                    <Text color="text.400" fontSize="14px">
                                         Semaphore leverages Zero Knowledge, allowing us to verify information without
                                         revealing any underlying data. This powerful primitive allows one to prove
                                         membership and signal anonymously.
@@ -179,7 +179,7 @@ export default function Home() {
                                     <Text fontSize={{ base: "18px", md: "20px" }} fontFamily={sora.style.fontFamily}>
                                         Free open source software
                                     </Text>
-                                    <Text color="alabaster.400" fontSize="14px">
+                                    <Text color="text.400" fontSize="14px">
                                         Semaphore is a Public Good. This means it will never seek to profit, it is owned
                                         by the community and will always remain open source.
                                     </Text>
diff --git a/apps/website/src/components/ActionCard.tsx b/apps/website/src/components/ActionCard.tsx
index dbcde8981..b5a51f40e 100644
--- a/apps/website/src/components/ActionCard.tsx
+++ b/apps/website/src/components/ActionCard.tsx
@@ -1,4 +1,4 @@
-import { Heading, Text, Card, CardBody, Stack, Flex, Link } from "@chakra-ui/react"
+import { Heading, Text, Card, CardBody, Stack, Flex, Link, Button } from "@chakra-ui/react"
 
 export type ActionCardProps = {
     title: string
@@ -38,25 +38,16 @@ export default function ActionCard({ title, description, buttonText, buttonUrl }
                             fontSize={{ base: "16px", md: "20px" }}
                             lineHeight={{ base: "25px", md: "32px" }}
                             fontWeight="normal"
-                            textColor="alabaster.400"
+                            textColor="text.400"
                         >
                             {description}
                         </Text>
                     </Stack>
                     <Stack width={{ base: "full", md: "auto" }}>
-                        <Link
-                            href={buttonUrl}
-                            isExternal
-                            variant="buttonlink"
-                            bgGradient="semaphore"
-                            w="fit-content"
-                            lineHeight="24px"
-                            fontSize={{ base: "14px", md: "18px", lg: "20px" }}
-                            textColor="white"
-                            padding="14px 16px"
-                            _hover={{ opacity: "85%" }}
-                        >
-                            {buttonText}
+                        <Link href={buttonUrl} isExternal>
+                            <Button colorScheme="primary" size={{ base: "md", md: "lg" }}>
+                                {buttonText}
+                            </Button>
                         </Link>
                     </Stack>
                 </Flex>
diff --git a/apps/website/src/components/NavbarLinks.tsx b/apps/website/src/components/NavbarLinks.tsx
index f042010b1..7745c7020 100644
--- a/apps/website/src/components/NavbarLinks.tsx
+++ b/apps/website/src/components/NavbarLinks.tsx
@@ -19,7 +19,7 @@ export default function NavbarLinks({ onClick }: NavbarProps) {
                 as={NextLink}
                 href="/projects"
                 variant="navlink"
-                borderBottomColor={pathname === "/projects" ? "ceruleanBlue" : "transparent"}
+                borderBottomColor={pathname === "/projects" ? "primary.600" : "transparent"}
             >
                 <Heading fontSize="18px" fontWeight="normal">
                     Projects
@@ -30,7 +30,7 @@ export default function NavbarLinks({ onClick }: NavbarProps) {
                 as={NextLink}
                 href="/build"
                 variant="navlink"
-                borderBottomColor={pathname === "/build" ? "ceruleanBlue" : "transparent"}
+                borderBottomColor={pathname === "/build" ? "primary.600" : "transparent"}
             >
                 <Heading fontSize="18px" fontWeight="normal">
                     Build
@@ -41,7 +41,7 @@ export default function NavbarLinks({ onClick }: NavbarProps) {
                 as={NextLink}
                 href="/learn"
                 variant="navlink"
-                borderBottomColor={pathname === "/learn" ? "ceruleanBlue" : "transparent"}
+                borderBottomColor={pathname === "/learn" ? "primary.600" : "transparent"}
             >
                 <Heading fontSize="18px" fontWeight="normal">
                     Learn
diff --git a/apps/website/src/components/ProjectCard.tsx b/apps/website/src/components/ProjectCard.tsx
index aae0b5b22..6d50e3594 100644
--- a/apps/website/src/components/ProjectCard.tsx
+++ b/apps/website/src/components/ProjectCard.tsx
@@ -27,11 +27,11 @@ export default function ProjectCard({
             borderRadius="18px"
             color="white"
             border="1px"
-            borderColor="alabaster.950"
+            borderColor="text.950"
             padding="34px"
             w="full"
             h="full"
-            _hover={{ borderColor: "ceruleanBlue" }}
+            _hover={{ borderColor: "primary.600" }}
             {...props}
         >
             <HStack gap="8px" mb="2rem" wrap="wrap">
diff --git a/apps/website/src/components/SectionBlock.tsx b/apps/website/src/components/SectionBlock.tsx
index 52773f1c7..09218f074 100644
--- a/apps/website/src/components/SectionBlock.tsx
+++ b/apps/website/src/components/SectionBlock.tsx
@@ -27,7 +27,7 @@ export default function SectionBlock({ title, description, linkText, linkUrl, co
                     <Text fontSize={{ base: "40px", md: "44px" }} fontWeight={{ base: "400", md: "500" }}>
                         {title}
                     </Text>
-                    <Text fontSize={{ base: "16px", md: "18px" }} textColor="alabaster.400">
+                    <Text fontSize={{ base: "16px", md: "18px" }} textColor="text.400">
                         {description}
                     </Text>
                     <Link display="flex" alignItems="center" gap="10px" justifyItems="center" href={linkUrl} isExternal>
@@ -51,7 +51,7 @@ export default function SectionBlock({ title, description, linkText, linkUrl, co
                     <VStack key={item.heading} alignItems="start">
                         <VStack>{item.icon}</VStack>
                         <Text fontSize="24px">{item.heading}</Text>
-                        <Text fontSize="16px" color="alabaster.400">
+                        <Text fontSize="16px" color="text.400">
                             {item.body}
                         </Text>
                     </VStack>
diff --git a/apps/website/src/components/ToolsCard.tsx b/apps/website/src/components/ToolsCard.tsx
index 7ae2f93ca..ffa71116e 100644
--- a/apps/website/src/components/ToolsCard.tsx
+++ b/apps/website/src/components/ToolsCard.tsx
@@ -10,7 +10,8 @@ import {
     StackDivider,
     Box,
     Link,
-    Flex
+    Flex,
+    Button
 } from "@chakra-ui/react"
 import IconChevronRight from "@/icons/IconChevronRight"
 
@@ -29,34 +30,22 @@ export default function ToolsCard({ icon, title, subtitle, details, url }: Tools
             borderRadius="16px"
             color="white"
             border="1px"
-            borderColor="alabaster.950"
+            borderColor="text.950"
             padding="32px"
             width={{ base: "full", lg: "348px" }}
             height={{ base: "auto", lg: "501px" }}
         >
             <HStack mb="2rem">{icon}</HStack>
             <CardBody padding={0}>
-                <VStack divider={<StackDivider borderColor="alabaster.950" />} spacing="24px" align="stretch">
+                <VStack divider={<StackDivider borderColor="text.950" />} spacing="24px" align="stretch">
                     <Box>
                         <Heading fontSize="40px" fontWeight="normal">
                             {title}
                         </Heading>
-                        <Link
-                            display="flex"
-                            alignItems="center"
-                            justifyContent="center"
-                            href={url}
-                            isExternal
-                            variant="buttonlink"
-                            py="10px"
-                            mt="24px"
-                            w="full"
-                            bgGradient="linear(to-r, primary.500, primary.800)"
-                            color="white"
-                            fontSize="18px"
-                            _hover={{ bgGradient: "linear(to-r, primary.500, primary.800)", opacity: "85%" }}
-                        >
-                            Select tool
+                        <Link href={url} isExternal>
+                            <Button w="full" colorScheme="primary" size={{ base: "md", md: "lg" }} mt="6">
+                                Select tool
+                            </Button>
                         </Link>
                     </Box>
                     <Box>
@@ -69,7 +58,7 @@ export default function ToolsCard({ icon, title, subtitle, details, url }: Tools
                                 <ListItem key={elem}>
                                     <Flex>
                                         <HStack alignItems="start" mt="8px">
-                                            <IconChevronRight height={2} width={2} color="ceruleanBlue" />
+                                            <IconChevronRight height={2} width={2} color="primary.600" />
                                         </HStack>
                                         <Text display="inline-block" ml="8px" fontSize="14px" lineHeight="22.4px">
                                             {elem}
diff --git a/apps/website/src/styles/colors.ts b/apps/website/src/styles/colors.ts
index 6a3b7c5ef..5e79392cc 100644
--- a/apps/website/src/styles/colors.ts
+++ b/apps/website/src/styles/colors.ts
@@ -1,15 +1,6 @@
 const colors = {
     darkBlue: "#0E101B",
     darkBlueBg: "#00020D",
-    ceruleanBlue: "#3555DF",
-    semaphore: "linear(to-r, primary.500, primary.800)",
-    alabaster: {
-        300: "#B8B9C1",
-        400: "#92939E",
-        600: "#5E5F6B",
-        800: "#42424A",
-        950: "#26262B"
-    },
     primary: {
         50: "#f0f4fe",
         100: "#dde6fc",
diff --git a/apps/website/src/styles/components/Button.ts b/apps/website/src/styles/components/Button.ts
index c05375d3d..13df87d6b 100644
--- a/apps/website/src/styles/components/Button.ts
+++ b/apps/website/src/styles/components/Button.ts
@@ -1,6 +1,5 @@
 import { StyleFunctionProps, SystemStyleObject } from "@chakra-ui/theme-tools"
 import { font } from "../styles"
-import colors from "../colors"
 
 const Button = {
     baseStyle: {
@@ -14,22 +13,45 @@ const Button = {
         paddingRight: "18px !important"
     },
     defaultProps: {
-        colorScheme: "#FFFFFF"
+        colorScheme: "white"
     },
     variants: {
         solid: (props: StyleFunctionProps): SystemStyleObject => {
             const { colorScheme: c } = props
 
+            if (c === "primary") {
+                const bgGradient = "linear(to-r, primary.500, primary.800)"
+                const color = "white"
+
+                return {
+                    bgGradient,
+                    color,
+                    transitionDuration: "200ms",
+                    transitionTimingFunction: "linear",
+                    _hover: {
+                        bg: `${c}.800`,
+                        _disabled: {
+                            bgGradient
+                        }
+                    },
+                    _active: { bg: `${c}.800` }
+                }
+            }
+
+            const bg = c
+
             return {
-                bg: c,
-                color: colors.darkBlueBg,
+                bg,
+                color: `darkBlueBg`,
+                transitionDuration: "200ms",
+                transitionTimingFunction: "linear",
                 _hover: {
-                    color: c,
-                    bgGradient: colors.semaphore,
+                    bg: `primary.200`,
                     _disabled: {
-                        bg: c
+                        bg
                     }
-                }
+                },
+                _active: { bg: `primary.200` }
             }
         },
         outline: (props: StyleFunctionProps): SystemStyleObject => {
@@ -37,11 +59,13 @@ const Button = {
 
             return {
                 color: c,
-                border: `1.2px solid ${c}`,
+                transitionDuration: "200ms",
+                transitionTimingFunction: "linear",
+                borderWidth: "1.2px",
+                borderColor: c,
                 _hover: {
-                    bg: colors.darkBlueBg,
                     color: c,
-                    border: `1.2px solid ${colors.primary["600"]}`,
+                    borderColor: "primary.200",
                     _disabled: {
                         bg: c
                     }
diff --git a/apps/website/src/styles/components/Link.ts b/apps/website/src/styles/components/Link.ts
index 4095111cc..d1c924ad5 100644
--- a/apps/website/src/styles/components/Link.ts
+++ b/apps/website/src/styles/components/Link.ts
@@ -13,11 +13,7 @@ const Link = {
             borderBottomWidth: "2px",
             pb: "5px",
             pt: "6px",
-            _hover: { borderBottomColor: "ceruleanBlue" }
-        }),
-        buttonlink: (): SystemStyleObject => ({
-            borderRadius: "100px",
-            fontWeight: "500"
+            _hover: { borderBottomColor: "primary.600" }
         })
     }
 }