diff --git a/.storybook/main.ts b/.storybook/main.ts
index 02d785aefdc..f7b4b280d24 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -17,8 +17,8 @@ import type { StorybookConfig } from "@storybook/nextjs"
 const config: StorybookConfig = {
   stories: [
     "../src/components/**/*.stories.{ts,tsx}",
-    "../src/@chakra-ui/stories/*.stories.tsx",
     "../src/layouts/stories/*.stories.tsx",
+    "../src/styles/*.stories.tsx",
   ],
   addons: [
     "@storybook/addon-links",
diff --git a/src/@chakra-ui/stories/Colors.stories.tsx b/src/@chakra-ui/stories/Colors.stories.tsx
deleted file mode 100644
index ddaf32ef76d..00000000000
--- a/src/@chakra-ui/stories/Colors.stories.tsx
+++ /dev/null
@@ -1,187 +0,0 @@
-import { type ReactNode } from "react"
-import capitalize from "lodash/capitalize"
-import { Box, Flex, HStack, Square, Stack, Text } from "@chakra-ui/react"
-import type { Meta, StoryObj } from "@storybook/react"
-
-import colors from "@/@chakra-ui/foundations/colors"
-import semanticTokens from "@/@chakra-ui/semanticTokens"
-
-const semanticTokenColors = semanticTokens["colors"]
-
-import Heading from "@/components/Heading"
-
-const meta = {
-  title: "Design System/Colors",
-  parameters: {
-    // Do not create snapshots for any stories in the file.
-    chromatic: { disableSnapshot: true },
-  },
-} satisfies Meta
-
-export default meta
-
-const primitiveColorKeys = ["gray", "blue", "orange"]
-export const Primitives: StoryObj = {
-  render: () => {
-    const primitiveColorsMap = Object.entries(colors)
-      .filter((obj) => primitiveColorKeys.includes(obj[0]))
-      .reduce<{ [tokenKey: string]: [string, string][] }>(
-        (acc, [key, value]) => {
-          const tokenMap = Object.entries(value)
-          return {
-            ...acc,
-            [key]: tokenMap,
-          }
-        },
-        {}
-      )
-
-    return (
-      <Stack direction="column" gap="16">
-        {primitiveColorKeys.map((color) => (
-          <ColorGroupWrapper key={color} color={color}>
-            <HStack>
-              {primitiveColorsMap[color].map(([tokenKey, value]) => (
-                <Stack key={`${color}${tokenKey}`} direction="column">
-                  <Box>
-                    <Square size="20" bg={`${color}.${tokenKey}`}></Square>
-                  </Box>
-                  <Stack direction="column">
-                    <Text size="sm">{value}</Text>
-                    <Text size="sm">
-                      {color}.{tokenKey}
-                    </Text>
-                  </Stack>
-                </Stack>
-              ))}
-            </HStack>
-          </ColorGroupWrapper>
-        ))}
-      </Stack>
-    )
-  },
-}
-
-const ColorGroupWrapper = ({
-  color,
-  children,
-}: {
-  color: string
-  children: ReactNode
-}) => {
-  return (
-    <Box
-      key={color}
-      color={color === "orange" ? "white" : undefined}
-      px="8"
-      py="8"
-      bg={
-        color === "gray"
-          ? `linear-gradient(180deg, #1b1b1b 35%, #fff 35%)`
-          : color === "orange"
-            ? "gray.800"
-            : undefined
-      }
-    >
-      {children}
-    </Box>
-  )
-}
-
-export const SemanticScheme: StoryObj = {
-  parameters: {
-    chromatic: {
-      modes: {
-        darkMode: {
-          colorMode: "dark",
-        },
-        lightMode: {
-          colorMode: "light",
-        },
-      },
-    },
-  },
-  render: () => {
-    const tokenNames = [
-      "primary",
-      "body",
-      "background",
-      "disabled",
-      "success",
-      "attention",
-      "error",
-    ] as const
-    const deprecatedTokens: Record<(typeof tokenNames)[number], string[]> = {
-      primary: ["light", "dark", "pressed"],
-      body: [],
-      background: [],
-      disabled: [],
-      success: ["neutral", "outline"],
-      attention: ["neutral", "outline"],
-      error: ["neutral", "outline"],
-    }
-
-    return (
-      <Flex direction="column" gap="16">
-        {tokenNames.map((tokenName) => {
-          const currentDeprecatedTokens = deprecatedTokens[
-            tokenName
-          ] as string[]
-
-          const tokenObj = semanticTokenColors[tokenName]
-
-          const filteredTokenObj =
-            "base" in tokenObj
-              ? Object.keys(semanticTokens["colors"][tokenName]).filter(
-                  (key) => !currentDeprecatedTokens.includes(key)
-                )
-              : undefined
-
-          return (
-            <Flex key={tokenName} direction="column" gap="4">
-              <Heading>{capitalize(tokenName)}</Heading>
-              <HStack gap="8">
-                {!filteredTokenObj ? (
-                  <SemanticColorBlock
-                    nestedKey={tokenName}
-                    tokenName={tokenName}
-                  />
-                ) : (
-                  <>
-                    {filteredTokenObj.map((nestedKey) => (
-                      <SemanticColorBlock
-                        key={nestedKey}
-                        nestedKey={nestedKey}
-                        tokenName={tokenName}
-                      />
-                    ))}
-                  </>
-                )}
-              </HStack>
-            </Flex>
-          )
-        })}
-      </Flex>
-    )
-  },
-}
-
-const SemanticColorBlock = ({
-  nestedKey,
-  tokenName,
-}: Record<"nestedKey" | "tokenName", string>) => (
-  <Flex key={nestedKey} direction="column" gap="2">
-    <Square
-      border={
-        tokenName === "background" && nestedKey === "base"
-          ? "1px solid"
-          : undefined
-      }
-      size="20"
-      bg={tokenName === nestedKey ? tokenName : `${tokenName}.${nestedKey}`}
-    />
-    <Text>
-      {tokenName}.{nestedKey}
-    </Text>
-  </Flex>
-)
diff --git a/src/styles/colors.stories.tsx b/src/styles/colors.stories.tsx
new file mode 100644
index 00000000000..4af728227c7
--- /dev/null
+++ b/src/styles/colors.stories.tsx
@@ -0,0 +1,149 @@
+import { type ReactNode } from "react"
+import capitalize from "lodash/capitalize"
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { HStack, Stack, VStack } from "@/components/ui/flex"
+
+import { cn } from "@/lib/utils/cn"
+
+const meta = {
+  title: "Design System / Colors",
+  parameters: {
+    // Do not create snapshots for any stories in the file.
+    chromatic: { disableSnapshot: true },
+  },
+} satisfies Meta
+
+export default meta
+
+/**
+ * Get all CSS Variables in the document.
+ *
+ * Used to search CSS Variables and retrieve their values.
+ *
+ * NOTE: Function created with AI assistance
+ */
+const getCSSCustomPropIndex = () => {
+  const rootStyles = document.styleSheets
+  const variables = {}
+
+  for (const sheet of rootStyles) {
+    for (const rule of sheet.cssRules) {
+      // Check for CSSStyleRule type as `selectorText` might not always be available
+      if (rule instanceof CSSStyleRule && rule.selectorText === ":root") {
+        for (const style of rule.style) {
+          if (style.startsWith("--")) {
+            variables[style] = rule.style.getPropertyValue(style).trim()
+          }
+        }
+      }
+    }
+  }
+  return variables as Record<string, string>
+}
+
+const cssVarsEntries = Object.entries(getCSSCustomPropIndex())
+
+const primitiveColorKeys = ["gray", "purple"] as const
+export const Primitives: StoryObj = {
+  render: () => {
+    return (
+      <Stack className="gap-16">
+        {primitiveColorKeys.map((color) => (
+          <ColorGroupWrapper key={color} color={color}>
+            <HStack className="justify-between gap-4">
+              {cssVarsEntries
+                .filter(([key]) => key.startsWith(`--${color}`))
+                .map(([tokenKey, value]) => (
+                  <VStack key={`${tokenKey}-${value}`}>
+                    <div>
+                      <div
+                        className="size-20"
+                        style={{ background: `hsla(var(${tokenKey}))` }}
+                      />
+                    </div>
+                    <Stack>
+                      <span>{value}</span>
+                      <span>{tokenKey}</span>
+                    </Stack>
+                  </VStack>
+                ))}
+            </HStack>
+          </ColorGroupWrapper>
+        ))}
+      </Stack>
+    )
+  },
+}
+
+const ColorGroupWrapper = ({
+  color,
+  children,
+}: {
+  color: (typeof primitiveColorKeys)[number]
+  children: ReactNode
+}) => (
+  <div
+    key={color}
+    className="bg-gradient-to-t from-[#1b1b1b] from-65% to-white to-35% p-8 text-white"
+  >
+    {children}
+  </div>
+)
+
+export const SemanticScheme: StoryObj = {
+  render: () => {
+    const tokenNames = [
+      "primary",
+      "body",
+      "background",
+      "disabled",
+      "success",
+      "warning",
+      "error",
+    ] as const
+
+    return (
+      <Stack className="gap-16">
+        {tokenNames.map((tokenName) => {
+          const variableObj = cssVarsEntries.filter(([key]) =>
+            key.startsWith(`--${tokenName}`)
+          )
+
+          return (
+            <Stack key={tokenName} className="gap-4">
+              <h2>{capitalize(tokenName)}</h2>
+              <HStack className="gap-8">
+                {variableObj.map((variable) => (
+                  <SemanticColorBlock
+                    key={JSON.stringify(variable)}
+                    variable={variable}
+                  />
+                ))}
+              </HStack>
+            </Stack>
+          )
+        })}
+      </Stack>
+    )
+  },
+}
+
+const SemanticColorBlock = ({
+  variable: [varName, varValue],
+}: {
+  variable: [string, string]
+}) => (
+  <VStack key={`${varName}-${varValue}`} className="mb-auto">
+    <div
+      className={cn(
+        "size-20",
+        varName === "--background" || varName === "--body-inverse"
+          ? "border"
+          : undefined
+      )}
+      style={{ background: `hsla(var(${varName}))` }}
+    />
+    <span>{varName}</span>
+  </VStack>
+)