diff --git a/frontend/src/components/v2/Accordion/Accordion.stories.tsx b/frontend/src/components/v2/Accordion/Accordion.stories.tsx
new file mode 100644
index 000000000..bd17c8743
--- /dev/null
+++ b/frontend/src/components/v2/Accordion/Accordion.stories.tsx
@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./Accordion";
+
+const meta: Meta<typeof Accordion> = {
+  title: "Components/Accordion",
+  component: Accordion,
+  tags: ["v2"],
+  argTypes: {}
+};
+
+export default meta;
+type Story = StoryObj<typeof Accordion>;
+
+export const Basic: Story = {
+  render: (args) => (
+    <div className="flex justify-center w-full">
+      <Accordion {...args}>
+        <AccordionItem value="section-1">
+          <AccordionTrigger>Section 1</AccordionTrigger>
+          <AccordionContent>Description of Section 1</AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="section-2">
+          <AccordionTrigger>Section 2</AccordionTrigger>
+          <AccordionContent>Description of Section 2</AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  )
+};
diff --git a/frontend/src/components/v2/Accordion/Accordion.tsx b/frontend/src/components/v2/Accordion/Accordion.tsx
index 20ec5bacd..9188b873e 100644
--- a/frontend/src/components/v2/Accordion/Accordion.tsx
+++ b/frontend/src/components/v2/Accordion/Accordion.tsx
@@ -8,7 +8,7 @@ export const AccordionItem = forwardRef<HTMLDivElement, AccordionPrimitive.Accor
   ({ children, className, ...props }, forwardedRef) => (
     <AccordionPrimitive.Item
       className={twMerge(
-        "focus-within:shadow-mauve12 mt-px overflow-hidden first:mt-0 first:rounded-t last:rounded-b focus-within:relative focus-within:z-10 focus-within:shadow-[0_0_0_2px]",
+        "mt-px overflow-hidden first:mt-0 data-[state=open]:border-l data-[state=open]:border-primary transition-all border-transparent",
         className
       )}
       {...props}
@@ -27,7 +27,7 @@ export const AccordionTrigger = forwardRef<
   <AccordionPrimitive.Header className="flex">
     <AccordionPrimitive.Trigger
       className={twMerge(
-        "text-violet11 shadow-mauve6 hover:bg-mauve2 group flex h-[45px] flex-1 cursor-default items-center justify-between bg-white px-5 text-[15px] leading-none shadow-[0_1px_0] outline-none",
+        "py-2 px-4 group data-[state=open]:text-primary h-11 hover:text-primary flex flex-1 outline-none items-center justify-between ",
         className
       )}
       {...props}
@@ -36,7 +36,7 @@ export const AccordionTrigger = forwardRef<
       {children}
       <FontAwesomeIcon
         icon={faChevronDown}
-        className="text-violet10 ease-[cubic-bezier(0.87,_0,_0.13,_1)] transition-transform duration-300 group-data-[state=open]:rotate-180"
+        className="ease-[cubic-bezier(0.87,_0,_0.13,_1)] transition-transform duration-300 group-data-[state=open]:rotate-180 text-sm"
         aria-hidden
       />
     </AccordionPrimitive.Trigger>
@@ -51,13 +51,13 @@ export const AccordionContent = forwardRef<
 >(({ children, className, ...props }, forwardedRef) => (
   <AccordionPrimitive.Content
     className={twMerge(
-      "text-mauve11 bg-mauve2 data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp overflow-hidden text-[15px]",
+      "data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp overflow-hidden",
       className
     )}
     {...props}
     ref={forwardedRef}
   >
-    <div className="py-[15px] px-5">{children}</div>
+    <div className="text-sm py-2 px-4">{children}</div>
   </AccordionPrimitive.Content>
 ));
 
@@ -68,10 +68,7 @@ export const Accordion = ({
   children,
   ...props
 }: AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) => (
-  <AccordionPrimitive.Root
-    className="bg-mauve6 w-[300px] rounded-md shadow-[0_2px_10px] shadow-black/5"
-    {...props}
-  >
+  <AccordionPrimitive.Root {...props} className={twMerge("w-80 text-bunker-300", props.className)}>
     {children}
   </AccordionPrimitive.Root>
 );
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 29811c15a..39098bf5c 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,1794 +1,576 @@
-const colors = require('tailwindcss/colors');
+const colors = require("tailwindcss/colors");
 const round = (num) =>
   num
     .toFixed(7)
-    .replace(/(\.[0-9]+?)0+$/, '$1')
-    .replace(/\.0$/, '');
-const rem = (px) => `${round(px / 16)}rem`;
+    .replace(/(\.[0-9]+?)0+$/, "$1")
+    .replace(/\.0$/, "");
 const em = (px, base) => `${round(px / base)}em`;
 
-// TODO(akhilmhdh): Clean up this later
-let defaultModifiers = {
-  sm: {
-    css: [
-      {
-        fontSize: rem(14),
-        lineHeight: round(24 / 14),
-        p: {
-          marginTop: em(16, 14),
-          marginBottom: em(16, 14)
-        },
-        '[class~="lead"]': {
-          fontSize: em(18, 14),
-          lineHeight: round(28 / 18),
-          marginTop: em(16, 18),
-          marginBottom: em(16, 18)
-        },
-        blockquote: {
-          marginTop: em(24, 18),
-          marginBottom: em(24, 18),
-          paddingLeft: em(20, 18)
-        },
-        h1: {
-          fontSize: em(30, 14),
-          marginTop: '0',
-          marginBottom: em(24, 30),
-          lineHeight: round(36 / 30)
-        },
-        h2: {
-          fontSize: em(20, 14),
-          marginTop: em(32, 20),
-          marginBottom: em(16, 20),
-          lineHeight: round(28 / 20)
-        },
-        h3: {
-          fontSize: em(18, 14),
-          marginTop: em(28, 18),
-          marginBottom: em(8, 18),
-          lineHeight: round(28 / 18)
-        },
-        h4: {
-          marginTop: em(20, 14),
-          marginBottom: em(8, 14),
-          lineHeight: round(20 / 14)
-        },
-        img: {
-          marginTop: em(24, 14),
-          marginBottom: em(24, 14)
-        },
-        video: {
-          marginTop: em(24, 14),
-          marginBottom: em(24, 14)
-        },
-        figure: {
-          marginTop: em(24, 14),
-          marginBottom: em(24, 14)
-        },
-        'figure > *': {
-          marginTop: '0',
-          marginBottom: '0'
-        },
-        figcaption: {
-          fontSize: em(12, 14),
-          lineHeight: round(16 / 12),
-          marginTop: em(8, 12)
-        },
-        code: {
-          fontSize: em(12, 14)
-        },
-        'h2 code': {
-          fontSize: em(18, 20)
-        },
-        'h3 code': {
-          fontSize: em(16, 18)
-        },
-        pre: {
-          fontSize: em(12, 14),
-          lineHeight: round(20 / 12),
-          marginTop: em(20, 12),
-          marginBottom: em(20, 12),
-          borderRadius: rem(4),
-          paddingTop: em(8, 12),
-          paddingRight: em(12, 12),
-          paddingBottom: em(8, 12),
-          paddingLeft: em(12, 12)
-        },
-        ol: {
-          marginTop: em(16, 14),
-          marginBottom: em(16, 14),
-          paddingLeft: em(22, 14)
-        },
-        ul: {
-          marginTop: em(16, 14),
-          marginBottom: em(16, 14),
-          paddingLeft: em(22, 14)
-        },
-        li: {
-          marginTop: em(4, 14),
-          marginBottom: em(4, 14)
-        },
-        'ol > li': {
-          paddingLeft: em(6, 14)
-        },
-        'ul > li': {
-          paddingLeft: em(6, 14)
-        },
-        '> ul > li p': {
-          marginTop: em(8, 14),
-          marginBottom: em(8, 14)
-        },
-        '> ul > li > *:first-child': {
-          marginTop: em(16, 14)
-        },
-        '> ul > li > *:last-child': {
-          marginBottom: em(16, 14)
-        },
-        '> ol > li > *:first-child': {
-          marginTop: em(16, 14)
-        },
-        '> ol > li > *:last-child': {
-          marginBottom: em(16, 14)
-        },
-        'ul ul, ul ol, ol ul, ol ol': {
-          marginTop: em(8, 14),
-          marginBottom: em(8, 14)
-        },
-        hr: {
-          marginTop: em(40, 14),
-          marginBottom: em(40, 14)
-        },
-        'hr + *': {
-          marginTop: '0'
-        },
-        'h2 + *': {
-          marginTop: '0'
-        },
-        'h3 + *': {
-          marginTop: '0'
-        },
-        'h4 + *': {
-          marginTop: '0'
-        },
-        table: {
-          fontSize: em(12, 14),
-          lineHeight: round(18 / 12)
-        },
-        'thead th': {
-          paddingRight: em(12, 12),
-          paddingBottom: em(8, 12),
-          paddingLeft: em(12, 12)
-        },
-        'thead th:first-child': {
-          paddingLeft: '0'
-        },
-        'thead th:last-child': {
-          paddingRight: '0'
-        },
-        'tbody td, tfoot td': {
-          paddingTop: em(8, 12),
-          paddingRight: em(12, 12),
-          paddingBottom: em(8, 12),
-          paddingLeft: em(12, 12)
-        },
-        'tbody td:first-child, tfoot td:first-child': {
-          paddingLeft: '0'
-        },
-        'tbody td:last-child, tfoot td:last-child': {
-          paddingRight: '0'
-        }
-      },
-      {
-        '> :first-child': {
-          marginTop: '0'
-        },
-        '> :last-child': {
-          marginBottom: '0'
-        }
-      }
-    ]
-  },
-  base: {
-    css: [
-      {
-        fontSize: rem(16),
-        lineHeight: round(28 / 16),
-        p: {
-          marginTop: em(20, 16),
-          marginBottom: em(20, 16)
-        },
-        '[class~="lead"]': {
-          fontSize: em(20, 16),
-          lineHeight: round(32 / 20),
-          marginTop: em(24, 20),
-          marginBottom: em(24, 20)
-        },
-        blockquote: {
-          marginTop: em(32, 20),
-          marginBottom: em(32, 20),
-          paddingLeft: em(20, 20)
-        },
-        h1: {
-          fontSize: em(36, 16),
-          marginTop: '0',
-          marginBottom: em(32, 36),
-          lineHeight: round(40 / 36)
-        },
-        h2: {
-          fontSize: em(24, 16),
-          marginTop: em(48, 24),
-          marginBottom: em(24, 24),
-          lineHeight: round(32 / 24)
-        },
-        h3: {
-          fontSize: em(20, 16),
-          marginTop: em(32, 20),
-          marginBottom: em(12, 20),
-          lineHeight: round(32 / 20)
-        },
-        h4: {
-          marginTop: em(24, 16),
-          marginBottom: em(8, 16),
-          lineHeight: round(24 / 16)
-        },
-        img: {
-          marginTop: em(32, 16),
-          marginBottom: em(32, 16)
-        },
-        video: {
-          marginTop: em(32, 16),
-          marginBottom: em(32, 16)
-        },
-        figure: {
-          marginTop: em(32, 16),
-          marginBottom: em(32, 16)
-        },
-        'figure > *': {
-          marginTop: '0',
-          marginBottom: '0'
-        },
-        figcaption: {
-          fontSize: em(14, 16),
-          lineHeight: round(20 / 14),
-          marginTop: em(12, 14)
-        },
-        code: {
-          fontSize: em(14, 16)
-        },
-        'h2 code': {
-          fontSize: em(21, 24)
-        },
-        'h3 code': {
-          fontSize: em(18, 20)
-        },
-        pre: {
-          fontSize: em(14, 16),
-          lineHeight: round(24 / 14),
-          marginTop: em(24, 14),
-          marginBottom: em(24, 14),
-          borderRadius: rem(6),
-          paddingTop: em(12, 14),
-          paddingRight: em(16, 14),
-          paddingBottom: em(12, 14),
-          paddingLeft: em(16, 14)
-        },
-        ol: {
-          marginTop: em(20, 16),
-          marginBottom: em(20, 16),
-          paddingLeft: em(26, 16)
-        },
-        ul: {
-          marginTop: em(20, 16),
-          marginBottom: em(20, 16),
-          paddingLeft: em(26, 16)
-        },
-        li: {
-          marginTop: em(8, 16),
-          marginBottom: em(8, 16)
-        },
-        'ol > li': {
-          paddingLeft: em(6, 16)
-        },
-        'ul > li': {
-          paddingLeft: em(6, 16)
-        },
-        '> ul > li p': {
-          marginTop: em(12, 16),
-          marginBottom: em(12, 16)
-        },
-        '> ul > li > *:first-child': {
-          marginTop: em(20, 16)
-        },
-        '> ul > li > *:last-child': {
-          marginBottom: em(20, 16)
-        },
-        '> ol > li > *:first-child': {
-          marginTop: em(20, 16)
-        },
-        '> ol > li > *:last-child': {
-          marginBottom: em(20, 16)
-        },
-        'ul ul, ul ol, ol ul, ol ol': {
-          marginTop: em(12, 16),
-          marginBottom: em(12, 16)
-        },
-        hr: {
-          marginTop: em(48, 16),
-          marginBottom: em(48, 16)
-        },
-        'hr + *': {
-          marginTop: '0'
-        },
-        'h2 + *': {
-          marginTop: '0'
-        },
-        'h3 + *': {
-          marginTop: '0'
-        },
-        'h4 + *': {
-          marginTop: '0'
-        },
-        table: {
-          fontSize: em(14, 16),
-          lineHeight: round(24 / 14)
-        },
-        'thead th': {
-          paddingRight: em(8, 14),
-          paddingBottom: em(8, 14),
-          paddingLeft: em(8, 14)
-        },
-        'thead th:first-child': {
-          paddingLeft: '0'
-        },
-        'thead th:last-child': {
-          paddingRight: '0'
-        },
-        'tbody td, tfoot td': {
-          paddingTop: em(8, 14),
-          paddingRight: em(8, 14),
-          paddingBottom: em(8, 14),
-          paddingLeft: em(8, 14)
-        },
-        'tbody td:first-child, tfoot td:first-child': {
-          paddingLeft: '0'
-        },
-        'tbody td:last-child, tfoot td:last-child': {
-          paddingRight: '0'
-        }
-      },
-      {
-        '> :first-child': {
-          marginTop: '0'
-        },
-        '> :last-child': {
-          marginBottom: '0'
-        }
-      }
-    ]
-  },
-  lg: {
-    css: [
-      {
-        fontSize: rem(18),
-        lineHeight: round(32 / 18),
-        p: {
-          marginTop: em(24, 18),
-          marginBottom: em(24, 18)
-        },
-        '[class~="lead"]': {
-          fontSize: em(22, 18),
-          lineHeight: round(32 / 22),
-          marginTop: em(24, 22),
-          marginBottom: em(24, 22)
-        },
-        blockquote: {
-          marginTop: em(40, 24),
-          marginBottom: em(40, 24),
-          paddingLeft: em(24, 24)
-        },
-        h1: {
-          fontSize: em(48, 18),
-          marginTop: '0',
-          marginBottom: em(40, 48),
-          lineHeight: round(48 / 48)
-        },
-        h2: {
-          fontSize: em(30, 18),
-          marginTop: em(56, 30),
-          marginBottom: em(32, 30),
-          lineHeight: round(40 / 30)
-        },
-        h3: {
-          fontSize: em(24, 18),
-          marginTop: em(40, 24),
-          marginBottom: em(16, 24),
-          lineHeight: round(36 / 24)
-        },
-        h4: {
-          marginTop: em(32, 18),
-          marginBottom: em(8, 18),
-          lineHeight: round(28 / 18)
-        },
-        img: {
-          marginTop: em(32, 18),
-          marginBottom: em(32, 18)
-        },
-        video: {
-          marginTop: em(32, 18),
-          marginBottom: em(32, 18)
-        },
-        figure: {
-          marginTop: em(32, 18),
-          marginBottom: em(32, 18)
-        },
-        'figure > *': {
-          marginTop: '0',
-          marginBottom: '0'
-        },
-        figcaption: {
-          fontSize: em(16, 18),
-          lineHeight: round(24 / 16),
-          marginTop: em(16, 16)
-        },
-        code: {
-          fontSize: em(16, 18)
-        },
-        'h2 code': {
-          fontSize: em(26, 30)
-        },
-        'h3 code': {
-          fontSize: em(21, 24)
-        },
-        pre: {
-          fontSize: em(16, 18),
-          lineHeight: round(28 / 16),
-          marginTop: em(32, 16),
-          marginBottom: em(32, 16),
-          borderRadius: rem(6),
-          paddingTop: em(16, 16),
-          paddingRight: em(24, 16),
-          paddingBottom: em(16, 16),
-          paddingLeft: em(24, 16)
-        },
-        ol: {
-          marginTop: em(24, 18),
-          marginBottom: em(24, 18),
-          paddingLeft: em(28, 18)
-        },
-        ul: {
-          marginTop: em(24, 18),
-          marginBottom: em(24, 18),
-          paddingLeft: em(28, 18)
-        },
-        li: {
-          marginTop: em(12, 18),
-          marginBottom: em(12, 18)
-        },
-        'ol > li': {
-          paddingLeft: em(8, 18)
-        },
-        'ul > li': {
-          paddingLeft: em(8, 18)
-        },
-        '> ul > li p': {
-          marginTop: em(16, 18),
-          marginBottom: em(16, 18)
-        },
-        '> ul > li > *:first-child': {
-          marginTop: em(24, 18)
-        },
-        '> ul > li > *:last-child': {
-          marginBottom: em(24, 18)
-        },
-        '> ol > li > *:first-child': {
-          marginTop: em(24, 18)
-        },
-        '> ol > li > *:last-child': {
-          marginBottom: em(24, 18)
-        },
-        'ul ul, ul ol, ol ul, ol ol': {
-          marginTop: em(16, 18),
-          marginBottom: em(16, 18)
-        },
-        hr: {
-          marginTop: em(56, 18),
-          marginBottom: em(56, 18)
-        },
-        'hr + *': {
-          marginTop: '0'
-        },
-        'h2 + *': {
-          marginTop: '0'
-        },
-        'h3 + *': {
-          marginTop: '0'
-        },
-        'h4 + *': {
-          marginTop: '0'
-        },
-        table: {
-          fontSize: em(16, 18),
-          lineHeight: round(24 / 16)
-        },
-        'thead th': {
-          paddingRight: em(12, 16),
-          paddingBottom: em(12, 16),
-          paddingLeft: em(12, 16)
-        },
-        'thead th:first-child': {
-          paddingLeft: '0'
-        },
-        'thead th:last-child': {
-          paddingRight: '0'
-        },
-        'tbody td, tfoot td': {
-          paddingTop: em(12, 16),
-          paddingRight: em(12, 16),
-          paddingBottom: em(12, 16),
-          paddingLeft: em(12, 16)
-        },
-        'tbody td:first-child, tfoot td:first-child': {
-          paddingLeft: '0'
-        },
-        'tbody td:last-child, tfoot td:last-child': {
-          paddingRight: '0'
-        }
-      },
-      {
-        '> :first-child': {
-          marginTop: '0'
-        },
-        '> :last-child': {
-          marginBottom: '0'
-        }
-      }
-    ]
-  },
-  xl: {
-    css: [
-      {
-        fontSize: rem(20),
-        lineHeight: round(36 / 20),
-        p: {
-          marginTop: em(24, 20),
-          marginBottom: em(24, 20)
-        },
-        '[class~="lead"]': {
-          fontSize: em(24, 20),
-          lineHeight: round(36 / 24),
-          marginTop: em(24, 24),
-          marginBottom: em(24, 24)
-        },
-        blockquote: {
-          marginTop: em(48, 30),
-          marginBottom: em(48, 30),
-          paddingLeft: em(32, 30)
-        },
-        h1: {
-          fontSize: em(56, 20),
-          marginTop: '0',
-          marginBottom: em(48, 56),
-          lineHeight: round(56 / 56)
-        },
-        h2: {
-          fontSize: em(36, 20),
-          marginTop: em(56, 36),
-          marginBottom: em(32, 36),
-          lineHeight: round(40 / 36)
-        },
-        h3: {
-          fontSize: em(30, 20),
-          marginTop: em(48, 30),
-          marginBottom: em(20, 30),
-          lineHeight: round(40 / 30)
-        },
-        h4: {
-          marginTop: em(36, 20),
-          marginBottom: em(12, 20),
-          lineHeight: round(32 / 20)
-        },
-        img: {
-          marginTop: em(40, 20),
-          marginBottom: em(40, 20)
-        },
-        video: {
-          marginTop: em(40, 20),
-          marginBottom: em(40, 20)
-        },
-        figure: {
-          marginTop: em(40, 20),
-          marginBottom: em(40, 20)
-        },
-        'figure > *': {
-          marginTop: '0',
-          marginBottom: '0'
-        },
-        figcaption: {
-          fontSize: em(18, 20),
-          lineHeight: round(28 / 18),
-          marginTop: em(18, 18)
-        },
-        code: {
-          fontSize: em(18, 20)
-        },
-        'h2 code': {
-          fontSize: em(31, 36)
-        },
-        'h3 code': {
-          fontSize: em(27, 30)
-        },
-        pre: {
-          fontSize: em(18, 20),
-          lineHeight: round(32 / 18),
-          marginTop: em(36, 18),
-          marginBottom: em(36, 18),
-          borderRadius: rem(8),
-          paddingTop: em(20, 18),
-          paddingRight: em(24, 18),
-          paddingBottom: em(20, 18),
-          paddingLeft: em(24, 18)
-        },
-        ol: {
-          marginTop: em(24, 20),
-          marginBottom: em(24, 20),
-          paddingLeft: em(32, 20)
-        },
-        ul: {
-          marginTop: em(24, 20),
-          marginBottom: em(24, 20),
-          paddingLeft: em(32, 20)
-        },
-        li: {
-          marginTop: em(12, 20),
-          marginBottom: em(12, 20)
-        },
-        'ol > li': {
-          paddingLeft: em(8, 20)
-        },
-        'ul > li': {
-          paddingLeft: em(8, 20)
-        },
-        '> ul > li p': {
-          marginTop: em(16, 20),
-          marginBottom: em(16, 20)
-        },
-        '> ul > li > *:first-child': {
-          marginTop: em(24, 20)
-        },
-        '> ul > li > *:last-child': {
-          marginBottom: em(24, 20)
-        },
-        '> ol > li > *:first-child': {
-          marginTop: em(24, 20)
-        },
-        '> ol > li > *:last-child': {
-          marginBottom: em(24, 20)
-        },
-        'ul ul, ul ol, ol ul, ol ol': {
-          marginTop: em(16, 20),
-          marginBottom: em(16, 20)
-        },
-        hr: {
-          marginTop: em(56, 20),
-          marginBottom: em(56, 20)
-        },
-        'hr + *': {
-          marginTop: '0'
-        },
-        'h2 + *': {
-          marginTop: '0'
-        },
-        'h3 + *': {
-          marginTop: '0'
-        },
-        'h4 + *': {
-          marginTop: '0'
-        },
-        table: {
-          fontSize: em(18, 20),
-          lineHeight: round(28 / 18)
-        },
-        'thead th': {
-          paddingRight: em(12, 18),
-          paddingBottom: em(16, 18),
-          paddingLeft: em(12, 18)
-        },
-        'thead th:first-child': {
-          paddingLeft: '0'
-        },
-        'thead th:last-child': {
-          paddingRight: '0'
-        },
-        'tbody td, tfoot td': {
-          paddingTop: em(16, 18),
-          paddingRight: em(12, 18),
-          paddingBottom: em(16, 18),
-          paddingLeft: em(12, 18)
-        },
-        'tbody td:first-child, tfoot td:first-child': {
-          paddingLeft: '0'
-        },
-        'tbody td:last-child, tfoot td:last-child': {
-          paddingRight: '0'
-        }
-      },
-      {
-        '> :first-child': {
-          marginTop: '0'
-        },
-        '> :last-child': {
-          marginBottom: '0'
-        }
-      }
-    ]
-  },
-  '2xl': {
-    css: [
-      {
-        fontSize: rem(24),
-        lineHeight: round(40 / 24),
-        p: {
-          marginTop: em(32, 24),
-          marginBottom: em(32, 24)
-        },
-        '[class~="lead"]': {
-          fontSize: em(30, 24),
-          lineHeight: round(44 / 30),
-          marginTop: em(32, 30),
-          marginBottom: em(32, 30)
-        },
-        blockquote: {
-          marginTop: em(64, 36),
-          marginBottom: em(64, 36),
-          paddingLeft: em(40, 36)
-        },
-        h1: {
-          fontSize: em(64, 24),
-          marginTop: '0',
-          marginBottom: em(56, 64),
-          lineHeight: round(64 / 64)
-        },
-        h2: {
-          fontSize: em(48, 24),
-          marginTop: em(72, 48),
-          marginBottom: em(40, 48),
-          lineHeight: round(52 / 48)
-        },
-        h3: {
-          fontSize: em(36, 24),
-          marginTop: em(56, 36),
-          marginBottom: em(24, 36),
-          lineHeight: round(44 / 36)
-        },
-        h4: {
-          marginTop: em(40, 24),
-          marginBottom: em(16, 24),
-          lineHeight: round(36 / 24)
-        },
-        img: {
-          marginTop: em(48, 24),
-          marginBottom: em(48, 24)
-        },
-        video: {
-          marginTop: em(48, 24),
-          marginBottom: em(48, 24)
-        },
-        figure: {
-          marginTop: em(48, 24),
-          marginBottom: em(48, 24)
-        },
-        'figure > *': {
-          marginTop: '0',
-          marginBottom: '0'
-        },
-        figcaption: {
-          fontSize: em(20, 24),
-          lineHeight: round(32 / 20),
-          marginTop: em(20, 20)
-        },
-        code: {
-          fontSize: em(20, 24)
-        },
-        'h2 code': {
-          fontSize: em(42, 48)
-        },
-        'h3 code': {
-          fontSize: em(32, 36)
-        },
-        pre: {
-          fontSize: em(20, 24),
-          lineHeight: round(36 / 20),
-          marginTop: em(40, 20),
-          marginBottom: em(40, 20),
-          borderRadius: rem(8),
-          paddingTop: em(24, 20),
-          paddingRight: em(32, 20),
-          paddingBottom: em(24, 20),
-          paddingLeft: em(32, 20)
-        },
-        ol: {
-          marginTop: em(32, 24),
-          marginBottom: em(32, 24),
-          paddingLeft: em(38, 24)
-        },
-        ul: {
-          marginTop: em(32, 24),
-          marginBottom: em(32, 24),
-          paddingLeft: em(38, 24)
-        },
-        li: {
-          marginTop: em(12, 24),
-          marginBottom: em(12, 24)
-        },
-        'ol > li': {
-          paddingLeft: em(10, 24)
-        },
-        'ul > li': {
-          paddingLeft: em(10, 24)
-        },
-        '> ul > li p': {
-          marginTop: em(20, 24),
-          marginBottom: em(20, 24)
-        },
-        '> ul > li > *:first-child': {
-          marginTop: em(32, 24)
-        },
-        '> ul > li > *:last-child': {
-          marginBottom: em(32, 24)
-        },
-        '> ol > li > *:first-child': {
-          marginTop: em(32, 24)
-        },
-        '> ol > li > *:last-child': {
-          marginBottom: em(32, 24)
-        },
-        'ul ul, ul ol, ol ul, ol ol': {
-          marginTop: em(16, 24),
-          marginBottom: em(16, 24)
-        },
-        hr: {
-          marginTop: em(72, 24),
-          marginBottom: em(72, 24)
-        },
-        'hr + *': {
-          marginTop: '0'
-        },
-        'h2 + *': {
-          marginTop: '0'
-        },
-        'h3 + *': {
-          marginTop: '0'
-        },
-        'h4 + *': {
-          marginTop: '0'
-        },
-        table: {
-          fontSize: em(20, 24),
-          lineHeight: round(28 / 20)
-        },
-        'thead th': {
-          paddingRight: em(12, 20),
-          paddingBottom: em(16, 20),
-          paddingLeft: em(12, 20)
-        },
-        'thead th:first-child': {
-          paddingLeft: '0'
-        },
-        'thead th:last-child': {
-          paddingRight: '0'
-        },
-        'tbody td, tfoot td': {
-          paddingTop: em(16, 20),
-          paddingRight: em(12, 20),
-          paddingBottom: em(16, 20),
-          paddingLeft: em(12, 20)
-        },
-        'tbody td:first-child, tfoot td:first-child': {
-          paddingLeft: '0'
-        },
-        'tbody td:last-child, tfoot td:last-child': {
-          paddingRight: '0'
-        }
-      },
-      {
-        '> :first-child': {
-          marginTop: '0'
-        },
-        '> :last-child': {
-          marginBottom: '0'
-        }
-      }
-    ]
-  },
-
-  // Invert (for dark mode)
-  invert: {
-    css: {
-      '--tw-prose-body': 'var(--tw-prose-invert-body)',
-      '--tw-prose-headings': 'var(--tw-prose-invert-headings)',
-      '--tw-prose-lead': 'var(--tw-prose-invert-lead)',
-      '--tw-prose-links': 'var(--tw-prose-invert-links)',
-      '--tw-prose-bold': 'var(--tw-prose-invert-bold)',
-      '--tw-prose-counters': 'var(--tw-prose-invert-counters)',
-      '--tw-prose-bullets': 'var(--tw-prose-invert-bullets)',
-      '--tw-prose-hr': 'var(--tw-prose-invert-hr)',
-      '--tw-prose-quotes': 'var(--tw-prose-invert-quotes)',
-      '--tw-prose-quote-borders': 'var(--tw-prose-invert-quote-borders)',
-      '--tw-prose-captions': 'var(--tw-prose-invert-captions)',
-      '--tw-prose-code': 'var(--tw-prose-invert-code)',
-      '--tw-prose-pre-code': 'var(--tw-prose-invert-pre-code)',
-      '--tw-prose-pre-bg': 'var(--tw-prose-invert-pre-bg)',
-      '--tw-prose-th-borders': 'var(--tw-prose-invert-th-borders)',
-      '--tw-prose-td-borders': 'var(--tw-prose-invert-td-borders)'
-    }
-  },
-
-  // Gray color themes
-
-  slate: {
-    css: {
-      '--tw-prose-body': colors.slate[700],
-      '--tw-prose-headings': colors.slate[900],
-      '--tw-prose-lead': colors.slate[600],
-      '--tw-prose-links': colors.slate[900],
-      '--tw-prose-bold': colors.slate[900],
-      '--tw-prose-counters': colors.slate[500],
-      '--tw-prose-bullets': colors.slate[300],
-      '--tw-prose-hr': colors.slate[200],
-      '--tw-prose-quotes': colors.slate[900],
-      '--tw-prose-quote-borders': colors.slate[200],
-      '--tw-prose-captions': colors.slate[500],
-      '--tw-prose-code': colors.slate[900],
-      '--tw-prose-pre-code': colors.slate[200],
-      '--tw-prose-pre-bg': colors.slate[800],
-      '--tw-prose-th-borders': colors.slate[300],
-      '--tw-prose-td-borders': colors.slate[200],
-      '--tw-prose-invert-body': colors.slate[300],
-      '--tw-prose-invert-headings': colors.white,
-      '--tw-prose-invert-lead': colors.slate[400],
-      '--tw-prose-invert-links': colors.white,
-      '--tw-prose-invert-bold': colors.white,
-      '--tw-prose-invert-counters': colors.slate[400],
-      '--tw-prose-invert-bullets': colors.slate[600],
-      '--tw-prose-invert-hr': colors.slate[700],
-      '--tw-prose-invert-quotes': colors.slate[100],
-      '--tw-prose-invert-quote-borders': colors.slate[700],
-      '--tw-prose-invert-captions': colors.slate[400],
-      '--tw-prose-invert-code': colors.white,
-      '--tw-prose-invert-pre-code': colors.slate[300],
-      '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',
-      '--tw-prose-invert-th-borders': colors.slate[600],
-      '--tw-prose-invert-td-borders': colors.slate[700]
-    }
-  },
-
-  gray: {
-    css: {
-      '--tw-prose-body': colors.gray[700],
-      '--tw-prose-headings': colors.gray[900],
-      '--tw-prose-lead': colors.gray[600],
-      '--tw-prose-links': colors.gray[900],
-      '--tw-prose-bold': colors.gray[900],
-      '--tw-prose-counters': colors.gray[500],
-      '--tw-prose-bullets': colors.gray[300],
-      '--tw-prose-hr': colors.gray[200],
-      '--tw-prose-quotes': colors.gray[900],
-      '--tw-prose-quote-borders': colors.gray[200],
-      '--tw-prose-captions': colors.gray[500],
-      '--tw-prose-code': colors.gray[900],
-      '--tw-prose-pre-code': colors.gray[200],
-      '--tw-prose-pre-bg': colors.gray[800],
-      '--tw-prose-th-borders': colors.gray[300],
-      '--tw-prose-td-borders': colors.gray[200],
-      '--tw-prose-invert-body': colors.gray[300],
-      '--tw-prose-invert-headings': colors.white,
-      '--tw-prose-invert-lead': colors.gray[400],
-      '--tw-prose-invert-links': colors.white,
-      '--tw-prose-invert-bold': colors.white,
-      '--tw-prose-invert-counters': colors.gray[400],
-      '--tw-prose-invert-bullets': colors.gray[600],
-      '--tw-prose-invert-hr': colors.gray[700],
-      '--tw-prose-invert-quotes': colors.gray[100],
-      '--tw-prose-invert-quote-borders': colors.gray[700],
-      '--tw-prose-invert-captions': colors.gray[400],
-      '--tw-prose-invert-code': colors.white,
-      '--tw-prose-invert-pre-code': colors.gray[300],
-      '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',
-      '--tw-prose-invert-th-borders': colors.gray[600],
-      '--tw-prose-invert-td-borders': colors.gray[700]
-    }
-  },
-
-  zinc: {
-    css: {
-      '--tw-prose-body': colors.zinc[700],
-      '--tw-prose-headings': colors.zinc[900],
-      '--tw-prose-lead': colors.zinc[600],
-      '--tw-prose-links': colors.zinc[900],
-      '--tw-prose-bold': colors.zinc[900],
-      '--tw-prose-counters': colors.zinc[500],
-      '--tw-prose-bullets': colors.zinc[300],
-      '--tw-prose-hr': colors.zinc[200],
-      '--tw-prose-quotes': colors.zinc[900],
-      '--tw-prose-quote-borders': colors.zinc[200],
-      '--tw-prose-captions': colors.zinc[500],
-      '--tw-prose-code': colors.zinc[900],
-      '--tw-prose-pre-code': colors.zinc[200],
-      '--tw-prose-pre-bg': colors.zinc[800],
-      '--tw-prose-th-borders': colors.zinc[300],
-      '--tw-prose-td-borders': colors.zinc[200],
-      '--tw-prose-invert-body': colors.zinc[300],
-      '--tw-prose-invert-headings': colors.white,
-      '--tw-prose-invert-lead': colors.zinc[400],
-      '--tw-prose-invert-links': colors.white,
-      '--tw-prose-invert-bold': colors.white,
-      '--tw-prose-invert-counters': colors.zinc[400],
-      '--tw-prose-invert-bullets': colors.zinc[600],
-      '--tw-prose-invert-hr': colors.zinc[700],
-      '--tw-prose-invert-quotes': colors.zinc[100],
-      '--tw-prose-invert-quote-borders': colors.zinc[700],
-      '--tw-prose-invert-captions': colors.zinc[400],
-      '--tw-prose-invert-code': colors.white,
-      '--tw-prose-invert-pre-code': colors.zinc[300],
-      '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',
-      '--tw-prose-invert-th-borders': colors.zinc[600],
-      '--tw-prose-invert-td-borders': colors.zinc[700]
-    }
-  },
-
-  neutral: {
-    css: {
-      '--tw-prose-body': colors.neutral[700],
-      '--tw-prose-headings': colors.neutral[900],
-      '--tw-prose-lead': colors.neutral[600],
-      '--tw-prose-links': colors.neutral[900],
-      '--tw-prose-bold': colors.neutral[900],
-      '--tw-prose-counters': colors.neutral[500],
-      '--tw-prose-bullets': colors.neutral[300],
-      '--tw-prose-hr': colors.neutral[200],
-      '--tw-prose-quotes': colors.neutral[900],
-      '--tw-prose-quote-borders': colors.neutral[200],
-      '--tw-prose-captions': colors.neutral[500],
-      '--tw-prose-code': colors.neutral[900],
-      '--tw-prose-pre-code': colors.neutral[200],
-      '--tw-prose-pre-bg': colors.neutral[800],
-      '--tw-prose-th-borders': colors.neutral[300],
-      '--tw-prose-td-borders': colors.neutral[200],
-      '--tw-prose-invert-body': colors.neutral[300],
-      '--tw-prose-invert-headings': colors.white,
-      '--tw-prose-invert-lead': colors.neutral[400],
-      '--tw-prose-invert-links': colors.white,
-      '--tw-prose-invert-bold': colors.white,
-      '--tw-prose-invert-counters': colors.neutral[400],
-      '--tw-prose-invert-bullets': colors.neutral[600],
-      '--tw-prose-invert-hr': colors.neutral[700],
-      '--tw-prose-invert-quotes': colors.neutral[100],
-      '--tw-prose-invert-quote-borders': colors.neutral[700],
-      '--tw-prose-invert-captions': colors.neutral[400],
-      '--tw-prose-invert-code': colors.white,
-      '--tw-prose-invert-pre-code': colors.neutral[300],
-      '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',
-      '--tw-prose-invert-th-borders': colors.neutral[600],
-      '--tw-prose-invert-td-borders': colors.neutral[700]
-    }
-  },
-
-  stone: {
-    css: {
-      '--tw-prose-body': colors.stone[700],
-      '--tw-prose-headings': colors.stone[900],
-      '--tw-prose-lead': colors.stone[600],
-      '--tw-prose-links': colors.stone[900],
-      '--tw-prose-bold': colors.stone[900],
-      '--tw-prose-counters': colors.stone[500],
-      '--tw-prose-bullets': colors.stone[300],
-      '--tw-prose-hr': colors.stone[200],
-      '--tw-prose-quotes': colors.stone[900],
-      '--tw-prose-quote-borders': colors.stone[200],
-      '--tw-prose-captions': colors.stone[500],
-      '--tw-prose-code': colors.stone[900],
-      '--tw-prose-pre-code': colors.stone[200],
-      '--tw-prose-pre-bg': colors.stone[800],
-      '--tw-prose-th-borders': colors.stone[300],
-      '--tw-prose-td-borders': colors.stone[200],
-      '--tw-prose-invert-body': colors.stone[300],
-      '--tw-prose-invert-headings': colors.white,
-      '--tw-prose-invert-lead': colors.stone[400],
-      '--tw-prose-invert-links': colors.white,
-      '--tw-prose-invert-bold': colors.white,
-      '--tw-prose-invert-counters': colors.stone[400],
-      '--tw-prose-invert-bullets': colors.stone[600],
-      '--tw-prose-invert-hr': colors.stone[700],
-      '--tw-prose-invert-quotes': colors.stone[100],
-      '--tw-prose-invert-quote-borders': colors.stone[700],
-      '--tw-prose-invert-captions': colors.stone[400],
-      '--tw-prose-invert-code': colors.white,
-      '--tw-prose-invert-pre-code': colors.stone[300],
-      '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',
-      '--tw-prose-invert-th-borders': colors.stone[600],
-      '--tw-prose-invert-td-borders': colors.stone[700]
-    }
-  },
-
-  // Link-only themes (for backward compatibility)
-
-  red: {
-    css: {
-      '--tw-prose-links': colors.red[600],
-      '--tw-prose-invert-links': colors.red[500]
-    }
-  },
-
-  orange: {
-    css: {
-      '--tw-prose-links': colors.orange[600],
-      '--tw-prose-invert-links': colors.orange[500]
-    }
-  },
-
-  amber: {
-    css: {
-      '--tw-prose-links': colors.amber[600],
-      '--tw-prose-invert-links': colors.amber[500]
-    }
-  },
-
-  yellow: {
-    css: {
-      '--tw-prose-links': colors.yellow[600],
-      '--tw-prose-invert-links': colors.yellow[500]
-    }
-  },
-
-  lime: {
-    css: {
-      '--tw-prose-links': colors.lime[600],
-      '--tw-prose-invert-links': colors.lime[500]
-    }
-  },
-
-  green: {
-    css: {
-      '--tw-prose-links': colors.green[600],
-      '--tw-prose-invert-links': colors.green[500]
-    }
-  },
-
-  emerald: {
-    css: {
-      '--tw-prose-links': colors.emerald[600],
-      '--tw-prose-invert-links': colors.emerald[500]
-    }
-  },
-
-  teal: {
-    css: {
-      '--tw-prose-links': colors.teal[600],
-      '--tw-prose-invert-links': colors.teal[500]
-    }
-  },
-
-  cyan: {
-    css: {
-      '--tw-prose-links': colors.cyan[600],
-      '--tw-prose-invert-links': colors.cyan[500]
-    }
-  },
-
-  sky: {
-    css: {
-      '--tw-prose-links': colors.sky[600],
-      '--tw-prose-invert-links': colors.sky[500]
-    }
-  },
-
-  blue: {
-    css: {
-      '--tw-prose-links': colors.blue[600],
-      '--tw-prose-invert-links': colors.blue[500]
-    }
-  },
-
-  indigo: {
-    css: {
-      '--tw-prose-links': colors.indigo[600],
-      '--tw-prose-invert-links': colors.indigo[500]
-    }
-  },
-
-  violet: {
-    css: {
-      '--tw-prose-links': colors.violet[600],
-      '--tw-prose-invert-links': colors.violet[500]
-    }
-  },
-
-  purple: {
-    css: {
-      '--tw-prose-links': colors.purple[600],
-      '--tw-prose-invert-links': colors.purple[500]
-    }
-  },
-
-  fuchsia: {
-    css: {
-      '--tw-prose-links': colors.fuchsia[600],
-      '--tw-prose-invert-links': colors.fuchsia[500]
-    }
-  },
-
-  pink: {
-    css: {
-      '--tw-prose-links': colors.pink[600],
-      '--tw-prose-invert-links': colors.pink[500]
-    }
-  },
-
-  rose: {
-    css: {
-      '--tw-prose-links': colors.rose[600],
-      '--tw-prose-invert-links': colors.rose[500]
-    }
-  }
-};
-
-const plugin = require('tailwindcss/plugin');
+const plugin = require("tailwindcss/plugin");
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  darkMode: 'class',
-  content: ['./src/**/*.{js,ts,jsx,tsx}'],
+  darkMode: "class",
+  content: ["./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
     extend: {
       fontFamily: {
-        inter: ['Inter']
+        inter: ["Inter"]
       },
       colors: {
         // You can generate your own colors with this tool: https://javisperez.github.io/tailwindcolorshades/
         primary: {
-          50: '#fffff5',
-          100: '#fcfce8',
-          200: '#f8faca',
-          300: '#f4f7ab',
-          400: '#ecf26d',
-          500: '#e0ed34',
-          600: '#c2d62b',
-          700: '#97b31d',
-          800: '#708f13',
-          900: '#4d6b0b',
-          DEFAULT: '#e0ed34'
+          50: "#fffff5",
+          100: "#fcfce8",
+          200: "#f8faca",
+          300: "#f4f7ab",
+          400: "#ecf26d",
+          500: "#e0ed34",
+          600: "#c2d62b",
+          700: "#97b31d",
+          800: "#708f13",
+          900: "#4d6b0b",
+          DEFAULT: "#e0ed34"
         },
-        grey: '#0d1117',
+        grey: "#0d1117",
         mineshaft: {
-          50: '#f5f5f5',
-          100: '#ebebeb',
-          200: '#ccccce',
-          300: '#adaeb0',
-          400: '#707174',
-          500: '#323439',
-          600: '#2d2f33',
-          700: '#26272b',
-          800: '#1e1f22',
-          900: '#19191c',
-          DEFAULT: '#323439'
+          50: "#f5f5f5",
+          100: "#ebebeb",
+          200: "#ccccce",
+          300: "#adaeb0",
+          400: "#707174",
+          500: "#323439",
+          600: "#2d2f33",
+          700: "#26272b",
+          800: "#1e1f22",
+          900: "#19191c",
+          DEFAULT: "#323439"
         },
         chicago: {
-          50: '#f7f7f7',
-          100: '#efefef',
-          200: '#d6d6d7',
-          300: '#bdbebf',
-          400: '#8c8d8e',
-          500: '#5b5c5e',
-          600: '#525355',
-          700: '#444547',
-          800: '#373738',
-          900: '#2d2d2e',
-          DEFAULT: '#5b5c5e'
+          50: "#f7f7f7",
+          100: "#efefef",
+          200: "#d6d6d7",
+          300: "#bdbebf",
+          400: "#8c8d8e",
+          500: "#5b5c5e",
+          600: "#525355",
+          700: "#444547",
+          800: "#373738",
+          900: "#2d2d2e",
+          DEFAULT: "#5b5c5e"
         },
         bunker: {
-          50: '#f3f4f4',
-          100: '#e8e8e9',
-          200: '#c5c6c8',
-          300: '#a2a4a6',
-          400: '#5d5f64',
-          500: '#171b21',
-          600: '#15181e',
-          700: '#111419',
-          800: '#0e1014',
-          900: '#0b0d10',
-          DEFAULT: '#171B21'
+          50: "#f3f4f4",
+          100: "#e8e8e9",
+          200: "#c5c6c8",
+          300: "#a2a4a6",
+          400: "#5d5f64",
+          500: "#171b21",
+          600: "#15181e",
+          700: "#111419",
+          800: "#0e1014",
+          900: "#0b0d10",
+          DEFAULT: "#171B21"
         },
-        githubblack: '#020409',
-        blue2: '#130f40',
-        blue1: '#3498db',
+        githubblack: "#020409",
+        blue2: "#130f40",
+        blue1: "#3498db",
         yellow: {
-          50: '#fefcf3',
-          100: '#fef9e7',
-          200: '#fcf0c3',
-          300: '#f9e79f',
-          400: '#f5d657',
-          500: '#f1c40f',
-          600: '#d9b00e',
-          700: '#b5930b',
-          800: '#917609',
-          900: '#766007',
-          DEFAULT: '#f1c40f'
+          50: "#fefcf3",
+          100: "#fef9e7",
+          200: "#fcf0c3",
+          300: "#f9e79f",
+          400: "#f5d657",
+          500: "#f1c40f",
+          600: "#d9b00e",
+          700: "#b5930b",
+          800: "#917609",
+          900: "#766007",
+          DEFAULT: "#f1c40f"
         },
         red: {
-          50: '#fef6f5',
-          100: '#fdedec',
-          200: '#f9d2ce',
-          300: '#f5b7b1',
-          400: '#ee8277',
-          500: '#e74c3c',
-          600: '#d04436',
-          700: '#ad392d',
-          800: '#8b2e24',
-          900: '#71251d',
-          DEFAULT: '#e74c3c'
+          50: "#fef6f5",
+          100: "#fdedec",
+          200: "#f9d2ce",
+          300: "#f5b7b1",
+          400: "#ee8277",
+          500: "#e74c3c",
+          600: "#d04436",
+          700: "#ad392d",
+          800: "#8b2e24",
+          900: "#71251d",
+          DEFAULT: "#e74c3c"
         },
-        orange: '#f39c12',
+        orange: "#f39c12",
         green: {
-          50: '#f5fcf8',
-          100: '#eafaf1',
-          200: '#cbf2dc',
-          300: '#abebc6',
-          400: '#6ddb9c',
-          500: '#2ecc71',
-          600: '#29b866',
-          700: '#239955',
-          800: '#1c7a44',
-          900: '#176437',
-          DEFAULT: '#2ecc71'
+          50: "#f5fcf8",
+          100: "#eafaf1",
+          200: "#cbf2dc",
+          300: "#abebc6",
+          400: "#6ddb9c",
+          500: "#2ecc71",
+          600: "#29b866",
+          700: "#239955",
+          800: "#1c7a44",
+          900: "#176437",
+          DEFAULT: "#2ecc71"
         },
         blue: {
-          50: '#f2f8ff', 
-          100: '#e6f1ff', 
-          200: '#bfdbff', 
-          300: '#99c5ff', 
-          400: '#4d9aff', 
-          500: '#006eff', 
-          600: '#0063e6', 
-          700: '#0053bf', 
-          800: '#004299', 
-          900: '#00367d'
+          50: "#f2f8ff",
+          100: "#e6f1ff",
+          200: "#bfdbff",
+          300: "#99c5ff",
+          400: "#4d9aff",
+          500: "#006eff",
+          600: "#0063e6",
+          700: "#0053bf",
+          800: "#004299",
+          900: "#00367d"
         },
         darkblue: {
-          50: '#f2f4f7', 
-          100: '#e6e8f0', 
-          200: '#bfc6d9', 
-          300: '#99a3c3', 
-          400: '#4d5f95', 
-          500: '#001a68', 
-          600: '#00175e', 
-          700: '#00144e', 
-          800: '#00103e', 
-          900: '#000d33'
-        },
+          50: "#f2f4f7",
+          100: "#e6e8f0",
+          200: "#bfc6d9",
+          300: "#99a3c3",
+          400: "#4d5f95",
+          500: "#001a68",
+          600: "#00175e",
+          700: "#00144e",
+          800: "#00103e",
+          900: "#000d33"
+        }
       },
       keyframes: {
         type: {
-          '0%': { transform: 'translateX(0ch)' },
-          '5%, 10%': { transform: 'translateX(1ch)' },
-          '15%, 20%': { transform: 'translateX(2ch)' },
-          '25%, 30%': { transform: 'translateX(3ch)' },
-          '35%, 40%': { transform: 'translateX(4ch)' },
-          '45%, 50%': { transform: 'translateX(5ch)' },
-          '55%, 60%': { transform: 'translateX(6ch)' },
-          '65%, 70%': { transform: 'translateX(7ch)' },
-          '75%, 80%': { transform: 'translateX(8ch)' },
-          '85%, 90%': { transform: 'translateX(9ch)' },
-          '95%, 100%': { transform: 'translateX(11ch)' }
+          "0%": { transform: "translateX(0ch)" },
+          "5%, 10%": { transform: "translateX(1ch)" },
+          "15%, 20%": { transform: "translateX(2ch)" },
+          "25%, 30%": { transform: "translateX(3ch)" },
+          "35%, 40%": { transform: "translateX(4ch)" },
+          "45%, 50%": { transform: "translateX(5ch)" },
+          "55%, 60%": { transform: "translateX(6ch)" },
+          "65%, 70%": { transform: "translateX(7ch)" },
+          "75%, 80%": { transform: "translateX(8ch)" },
+          "85%, 90%": { transform: "translateX(9ch)" },
+          "95%, 100%": { transform: "translateX(11ch)" }
         },
         // REQUIRED BY DESIGN COMPONENT
         // MODAL
         fadeIn: {
-          '0%': { opacity: 0 },
-          '100%': { opacity: 1 }
+          "0%": { opacity: 0 },
+          "100%": { opacity: 1 }
         },
         popIn: {
           from: {
             opacity: 0,
-            transform: 'translate(-50%, -48%) scale(0.96)'
+            transform: "translate(-50%, -48%) scale(0.96)"
           },
           to: {
             opacity: 1,
-            transform: 'translate(-50%, -50%) scale(1)'
+            transform: "translate(-50%, -50%) scale(1)"
           }
         },
         // Dropdown
         slideUpAndFade: {
           from: {
             opacity: 0,
-            transform: ' translateY(2px)'
+            transform: " translateY(2px)"
           },
           to: {
             opacity: 1,
-            transform: ' translateY(0)'
+            transform: " translateY(0)"
           }
         },
         slideRightAndFade: {
           from: {
             opacity: 0,
-            transform: ' translateX(-2px)'
+            transform: " translateX(-2px)"
           },
           to: {
             opacity: 1,
-            transform: ' translateX(0)'
+            transform: " translateX(0)"
           }
         },
         slideDownAndFade: {
           from: {
             opacity: 0,
-            transform: ' translateY(-2px)'
+            transform: " translateY(-2px)"
           },
           to: {
             opacity: 1,
-            transform: ' translateY(0)'
+            transform: " translateY(0)"
           }
         },
         slideLeftAndFade: {
           from: {
             opacity: 0,
-            transform: ' translateX(2px)'
+            transform: " translateX(2px)"
           },
           to: {
             opacity: 1,
-            transform: ' translateX(0)'
+            transform: " translateX(0)"
           }
         },
         // END
         spin: {
-          '0%': { transform: 'rotate(0deg)' },
-          '40%': { transform: 'rotate(360deg)' },
-          '100%': { transform: 'rotate(360deg)' }
+          "0%": { transform: "rotate(0deg)" },
+          "40%": { transform: "rotate(360deg)" },
+          "100%": { transform: "rotate(360deg)" }
         },
         bounce: {
-          '0%': { transform: 'translateY(-90%)' },
-          '100%': { transform: 'translateY(-100%)' }
+          "0%": { transform: "translateY(-90%)" },
+          "100%": { transform: "translateY(-100%)" }
         },
         wiggle: {
-          '0%, 100%': { transform: 'rotate(-3deg)' },
-          '50%': { transform: 'rotate(3deg)' }
+          "0%, 100%": { transform: "rotate(-3deg)" },
+          "50%": { transform: "rotate(3deg)" }
         },
         ping: {
-          '75%, 100%': {
-            transform: 'scale(2)',
+          "75%, 100%": {
+            transform: "scale(2)",
             opacity: 0
           }
         },
         popup: {
-          '0%': {
-            transform: 'scale(0.2)',
+          "0%": {
+            transform: "scale(0.2)",
             opacity: 0
             // transform: "translateY(120%)",
           },
-          '100%': {
-            transform: 'scale(1)',
+          "100%": {
+            transform: "scale(1)",
             opacity: 1
             // transform: "translateY(100%)",
           }
         },
         popright: {
-          '0%': {
-            transform: 'translateX(-100%)'
+          "0%": {
+            transform: "translateX(-100%)"
           },
-          '100%': {
-            transform: 'translateX(0%)'
+          "100%": {
+            transform: "translateX(0%)"
           }
         },
         popleft: {
-          '0%': {
-            transform: 'translateX(100%)'
+          "0%": {
+            transform: "translateX(100%)"
           },
-          '100%': {
-            transform: 'translateX(0%)'
+          "100%": {
+            transform: "translateX(0%)"
           }
         },
         popdown: {
-          '0%': {
-            transform: 'scale(0.2)',
+          "0%": {
+            transform: "scale(0.2)",
             opacity: 0
             // transform: "translateY(80%)",
           },
-          '100%': {
-            transform: 'scale(1)',
+          "100%": {
+            transform: "scale(1)",
             opacity: 1
             // transform: "translateY(100%)",
           }
         },
         drawerRightIn: {
-          '0%': {
-            transform: 'translateX(100%)'
+          "0%": {
+            transform: "translateX(100%)"
           },
-          '100%': {
-            transform: 'translateX(0)'
+          "100%": {
+            transform: "translateX(0)"
           }
         },
         drawerRightOut: {
-          '0%': {
-            transform: 'translateX(0)'
+          "0%": {
+            transform: "translateX(0)"
           },
-          '100%': {
-            transform: 'translateX(100%)'
+          "100%": {
+            transform: "translateX(100%)"
           }
+        },
+        slideDown: {
+          from: { height: 0 },
+          to: { height: "var(--radix-accordion-content-height)" }
+        },
+        slideUp: {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: 0 }
         }
       },
       animation: {
         // Design Lib
         // MODAL
-        fadeIn: 'fadeIn 100ms cubic-bezier(0.16, 1, 0.3, 1)',
-        popIn: 'popIn 150ms cubic-bezier(0.16, 1, 0.3, 1);',
+        fadeIn: "fadeIn 100ms cubic-bezier(0.16, 1, 0.3, 1)",
+        popIn: "popIn 150ms cubic-bezier(0.16, 1, 0.3, 1);",
         // drawer
-        drawerRightIn: 'drawerRightIn 150ms ease-in-out',
-        drawerRightOut: 'drawerRightOut 150ms ease-in-out',
+        drawerRightIn: "drawerRightIn 150ms ease-in-out",
+        drawerRightOut: "drawerRightOut 150ms ease-in-out",
         // Dropdown
-        slideDownAndFade: 'slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-        slideLeftAndFade: 'slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-        slideUpAndFade: 'slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-        slideRightAndFade: 'slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+        slideDownAndFade: "slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+        slideLeftAndFade: "slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+        slideUpAndFade: "slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+        slideRightAndFade: "slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+        slideDown: "slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1)",
+        slideUp: "slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1)",
         // END
         // TODO:(akhilmhdh) remove all these unused and keep the config file as small as possible
         // Make the whole color pallelte into simpler
-        bounce: 'bounce 1000ms ease-in-out infinite',
-        spin: 'spin 4000ms ease-in-out infinite',
-        cursor: 'cursor .6s linear infinite alternate',
-        type: 'type 2.7s ease-out .8s infinite alternate both',
-        'type-reverse': 'type 1.8s ease-out 0s infinite alternate-reverse both',
-        wiggle: 'wiggle 200ms ease-in-out',
-        ping: 'ping 1000ms ease-in-out infinite',
-        popup: 'popup 300ms ease-in-out',
-        popdown: 'popdown 300ms ease-in-out',
-        popright: 'popright 100ms ease-in-out',
-        popleft: 'popleft 100ms ease-in-out'
+        bounce: "bounce 1000ms ease-in-out infinite",
+        spin: "spin 4000ms ease-in-out infinite",
+        cursor: "cursor .6s linear infinite alternate",
+        type: "type 2.7s ease-out .8s infinite alternate both",
+        "type-reverse": "type 1.8s ease-out 0s infinite alternate-reverse both",
+        wiggle: "wiggle 200ms ease-in-out",
+        ping: "ping 1000ms ease-in-out infinite",
+        popup: "popup 300ms ease-in-out",
+        popdown: "popdown 300ms ease-in-out",
+        popright: "popright 100ms ease-in-out",
+        popleft: "popleft 100ms ease-in-out"
       }
     },
     fontSize: {
-      xxxs: '.23rem',
-      xxs: '.5rem',
-      xs: '.75rem',
-      sm: '.875rem',
-      base: '1rem',
-      lg: '1.125rem',
-      xl: '1.25rem',
-      '2xl': '1.5rem',
-      '3xl': '1.875rem',
-      '4xl': '2.25rem',
-      '5xl': '3rem',
-      '6xl': '4rem',
-      '7xl': '5rem',
-      '8xl': '6rem',
-      '9xl': '7rem'
+      xxxs: ".23rem",
+      xxs: ".5rem",
+      xs: ".75rem",
+      sm: ".875rem",
+      base: "1rem",
+      lg: "1.125rem",
+      xl: "1.25rem",
+      "2xl": "1.5rem",
+      "3xl": "1.875rem",
+      "4xl": "2.25rem",
+      "5xl": "3rem",
+      "6xl": "4rem",
+      "7xl": "5rem",
+      "8xl": "6rem",
+      "9xl": "7rem"
     },
     typography: (theme) => ({
       DEFAULT: {
         css: [
           {
-            color: 'var(--tw-prose-body)',
-            maxWidth: '65ch',
+            color: "var(--tw-prose-body)",
+            maxWidth: "65ch",
             '[class~="lead"]': {
-              color: 'var(--tw-prose-lead)'
+              color: "var(--tw-prose-lead)"
             },
             a: {
               color: colors.gray[200],
-              textDecoration: 'underline',
-              fontWeight: '500'
+              textDecoration: "underline",
+              fontWeight: "500"
             },
             strong: {
               color: colors.gray[200],
-              fontWeight: '600'
+              fontWeight: "600"
             },
-            'a strong': {
-              color: 'inherit'
+            "a strong": {
+              color: "inherit"
             },
-            'blockquote strong': {
-              color: 'inherit'
+            "blockquote strong": {
+              color: "inherit"
             },
-            'thead th strong': {
-              color: 'inherit'
+            "thead th strong": {
+              color: "inherit"
             },
             ol: {
-              listStyleType: 'decimal'
+              listStyleType: "decimal"
             },
             'ol[type="A"]': {
-              listStyleType: 'upper-alpha'
+              listStyleType: "upper-alpha"
             },
             'ol[type="a"]': {
-              listStyleType: 'lower-alpha'
+              listStyleType: "lower-alpha"
             },
             'ol[type="A" s]': {
-              listStyleType: 'upper-alpha'
+              listStyleType: "upper-alpha"
             },
             'ol[type="a" s]': {
-              listStyleType: 'lower-alpha'
+              listStyleType: "lower-alpha"
             },
             'ol[type="I"]': {
-              listStyleType: 'upper-roman'
+              listStyleType: "upper-roman"
             },
             'ol[type="i"]': {
-              listStyleType: 'lower-roman'
+              listStyleType: "lower-roman"
             },
             'ol[type="I" s]': {
-              listStyleType: 'upper-roman'
+              listStyleType: "upper-roman"
             },
             'ol[type="i" s]': {
-              listStyleType: 'lower-roman'
+              listStyleType: "lower-roman"
             },
             'ol[type="1"]': {
-              listStyleType: 'decimal'
+              listStyleType: "decimal"
             },
             ul: {
-              listStyleType: 'disc'
+              listStyleType: "disc"
             },
-            'ol > li::marker': {
-              fontWeight: '400',
-              color: 'var(--tw-prose-counters)'
+            "ol > li::marker": {
+              fontWeight: "400",
+              color: "var(--tw-prose-counters)"
             },
-            'ul > li::marker': {
-              color: 'var(--tw-prose-bullets)'
+            "ul > li::marker": {
+              color: "var(--tw-prose-bullets)"
             },
             hr: {
-              borderColor: 'var(--tw-prose-hr)',
+              borderColor: "var(--tw-prose-hr)",
               borderTopWidth: 1
             },
             blockquote: {
-              fontWeight: '500',
-              fontStyle: 'italic',
-              color: 'var(--tw-prose-quotes)',
-              borderLeftWidth: '0.25rem',
-              borderLeftColor: 'var(--tw-prose-quote-borders)',
+              fontWeight: "500",
+              fontStyle: "italic",
+              color: "var(--tw-prose-quotes)",
+              borderLeftWidth: "0.25rem",
+              borderLeftColor: "var(--tw-prose-quote-borders)",
               quotes: '"\\201C""\\201D""\\2018""\\2019"'
             },
-            'blockquote p:first-of-type::before': {
-              content: 'open-quote'
+            "blockquote p:first-of-type::before": {
+              content: "open-quote"
             },
-            'blockquote p:last-of-type::after': {
-              content: 'close-quote'
+            "blockquote p:last-of-type::after": {
+              content: "close-quote"
             },
             h1: {
               color: colors.gray[200],
-              fontWeight: '800'
+              fontWeight: "800"
             },
-            'h1 strong': {
-              fontWeight: '900',
-              color: 'inherit'
+            "h1 strong": {
+              fontWeight: "900",
+              color: "inherit"
             },
             h2: {
               color: colors.gray[200],
-              fontWeight: '700'
+              fontWeight: "700"
             },
-            'h2 strong': {
-              fontWeight: '800',
-              color: 'inherit'
+            "h2 strong": {
+              fontWeight: "800",
+              color: "inherit"
             },
             h3: {
               color: colors.gray[300],
-              fontWeight: '600'
+              fontWeight: "600"
             },
-            'h3 strong': {
-              fontWeight: '700',
-              color: 'inherit'
+            "h3 strong": {
+              fontWeight: "700",
+              color: "inherit"
             },
             h4: {
               color: colors.gray[400],
-              fontWeight: '600'
+              fontWeight: "600"
             },
-            'h4 strong': {
-              fontWeight: '700',
-              color: 'inherit'
+            "h4 strong": {
+              fontWeight: "700",
+              color: "inherit"
             },
             // TODO: Figure out how to not need these, it's a merging issue
             img: {},
-            'figure > *': {},
+            "figure > *": {},
             figcaption: {
-              color: 'var(--tw-prose-captions)'
+              color: "var(--tw-prose-captions)"
             },
             code: {
-              color: 'var(--tw-prose-code)',
-              fontWeight: '600'
+              color: "var(--tw-prose-code)",
+              fontWeight: "600"
             },
-            'code::before': {
+            "code::before": {
               content: '"`"'
             },
-            'code::after': {
+            "code::after": {
               content: '"`"'
             },
-            'a code': {
-              color: 'inherit'
+            "a code": {
+              color: "inherit"
             },
-            'h1 code': {
-              color: 'inherit'
+            "h1 code": {
+              color: "inherit"
             },
-            'h2 code': {
-              color: 'inherit'
+            "h2 code": {
+              color: "inherit"
             },
-            'h3 code': {
-              color: 'inherit'
+            "h3 code": {
+              color: "inherit"
             },
-            'h4 code': {
-              color: 'inherit'
+            "h4 code": {
+              color: "inherit"
             },
-            'blockquote code': {
-              color: 'inherit'
+            "blockquote code": {
+              color: "inherit"
             },
-            'thead th code': {
-              color: 'inherit'
+            "thead th code": {
+              color: "inherit"
             },
             pre: {
-              color: 'var(--tw-prose-pre-code)',
+              color: "var(--tw-prose-pre-code)",
               backgroundColor: colors.gray[800],
-              overflowX: 'auto',
-              fontWeight: '400'
+              overflowX: "auto",
+              fontWeight: "400"
             },
-            'pre code': {
-              backgroundColor: 'transparent',
-              borderWidth: '0',
-              borderRadius: '0',
-              padding: '0',
-              fontWeight: 'inherit',
-              color: 'inherit',
-              fontSize: 'inherit',
-              fontFamily: 'inherit',
-              lineHeight: 'inherit'
+            "pre code": {
+              backgroundColor: "transparent",
+              borderWidth: "0",
+              borderRadius: "0",
+              padding: "0",
+              fontWeight: "inherit",
+              color: "inherit",
+              fontSize: "inherit",
+              fontFamily: "inherit",
+              lineHeight: "inherit"
             },
-            'pre code::before': {
-              content: 'none'
+            "pre code::before": {
+              content: "none"
             },
-            'pre code::after': {
-              content: 'none'
+            "pre code::after": {
+              content: "none"
             },
             table: {
-              width: '100%',
-              tableLayout: 'auto',
-              textAlign: 'left',
+              width: "100%",
+              tableLayout: "auto",
+              textAlign: "left",
               marginTop: em(32, 16),
               marginBottom: em(32, 16)
             },
             thead: {
-              borderBottomWidth: '1px',
-              borderBottomColor: 'var(--tw-prose-th-borders)'
+              borderBottomWidth: "1px",
+              borderBottomColor: "var(--tw-prose-th-borders)"
             },
-            'thead th': {
-              color: 'var(--tw-prose-headings)',
-              fontWeight: '600',
-              verticalAlign: 'bottom'
+            "thead th": {
+              color: "var(--tw-prose-headings)",
+              fontWeight: "600",
+              verticalAlign: "bottom"
             },
-            'tbody tr': {
-              borderBottomWidth: '1px',
-              borderBottomColor: 'var(--tw-prose-td-borders)'
+            "tbody tr": {
+              borderBottomWidth: "1px",
+              borderBottomColor: "var(--tw-prose-td-borders)"
             },
-            'tbody tr:last-child': {
-              borderBottomWidth: '0'
+            "tbody tr:last-child": {
+              borderBottomWidth: "0"
             },
-            'tbody td': {
-              verticalAlign: 'baseline'
+            "tbody td": {
+              verticalAlign: "baseline"
             },
             tfoot: {
-              borderTopWidth: '1px',
-              borderTopColor: 'var(--tw-prose-th-borders)'
+              borderTopWidth: "1px",
+              borderTopColor: "var(--tw-prose-th-borders)"
             },
-            'tfoot td': {
-              verticalAlign: 'top'
+            "tfoot td": {
+              verticalAlign: "top"
             }
-          },
-          defaultModifiers.gray.css,
-          ...defaultModifiers.base.css
+          }
         ]
-      },
-      ...defaultModifiers
+      }
     })
   },
   plugins: [
     plugin(function ({ addUtilities }) {
       addUtilities({
-        '.no-scrollbar::-webkit-scrollbar': {
-          display: 'none'
+        ".no-scrollbar::-webkit-scrollbar": {
+          display: "none"
         },
-        '.no-scrollbar': {
-          '-ms-overflow-style': 'none',
-          'scrollbar-width': 'none'
+        ".no-scrollbar": {
+          "-ms-overflow-style": "none",
+          "scrollbar-width": "none"
         }
       });
     }),
-    require('@tailwindcss/typography')
+    require("@tailwindcss/typography")
   ]
 };