diff --git a/.github/workflows/deploy-vercel.yml b/.github/workflows/deploy-vercel.yml
deleted file mode 100644
index 2e0278f..0000000
--- a/.github/workflows/deploy-vercel.yml
+++ /dev/null
@@ -1,26 +0,0 @@
-name: deploy
-
-on:
-  push:
-    branches:
-      - main
-  workflow_call: {}
-  workflow_dispatch:
-    inputs:
-      environment:
-        description: "Environment to run tests against"
-        type: environment
-        required: true
-
-run-name: deploy-${{ github.ref_name }}-${{ github.run_number }}
-
-permissions: read-all
-
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Trigger Vercel Deployment
-        env:
-          VERCEL_DEPLOY_TOKEN: ${{ secrets.VERCEL_DEPLOY_TOKEN }}
-        run: curl -X POST https://api.vercel.com/v1/integrations/deploy/${{ env.VERCEL_DEPLOY_TOKEN }}
\ No newline at end of file
diff --git a/index.css b/index.css
index df59a87..6b5102e 100644
--- a/index.css
+++ b/index.css
@@ -18,16 +18,16 @@
 
     0%,
     33% {
-        box-shadow: inset 1px 0px 3px 0px rgba(255, 255, 255, 0.329),
-            inset -1px 0px 3px 0px rgba(78, 78, 78, 0.301),
+        box-shadow: inset 1px 0px 3px 0px rgba(255, 255, 255, 0.20),
+            inset -1px 0px 3px 0px rgba(78, 78, 78, 0.15),
             0px 0px 0px 2px #a5ffc075;
 
     }
 
     33%,
     66% {
-        box-shadow: inset 1px 0px 3px 0px rgba(255, 255, 255, 0.329),
-            inset -1px 0px 3px 0px rgba(78, 78, 78, 0.301);
+        box-shadow: inset 1px 0px 3px 0px rgba(255, 255, 255, 0.20),
+            inset -1px 0px 3px 0px rgba(78, 78, 78, 0.15);
     }
 }
 
@@ -35,15 +35,15 @@
 
     0%,
     33% {
-        box-shadow: inset 1px 0px 3px 0px rgba(255, 255, 255, 0.329),
-            inset -1px 0px 3px 0px rgba(78, 78, 78, 0.301),
+        box-shadow: inset 1px 0px 3px 0px rgba(255, 255, 255, 0.20),
+            inset -1px 0px 3px 0px rgba(78, 78, 78, 0.15),
             0px 0px 0px 2px #f7f3c275;
     }
 
     33%,
     66% {
-        box-shadow: inset 1px 0px 3px 0px rgba(255, 255, 255, 0.329),
-            inset -1px 0px 3px 0px rgba(78, 78, 78, 0.301);
+        box-shadow: inset 1px 0px 3px 0px rgba(255, 255, 255, 0.20),
+            inset -1px 0px 3px 0px rgba(78, 78, 78, 0.15);
     }
 }
 
@@ -51,15 +51,15 @@
 
     0%,
     33% {
-        box-shadow: inset 1px 0px 3px 0px rgba(255, 255, 255, 0.329),
-            inset -1px 0px 3px 0px rgba(78, 78, 78, 0.301),
+        box-shadow: inset 1px 0px 3px 0px rgba(255, 255, 255, 0.20),
+            inset -1px 0px 3px 0px rgba(78, 78, 78, 0.15),
             0px 0px 0px 2px #a5d8ff75;
     }
 
     33%,
     66% {
-        box-shadow: inset 1px 0px 3px 0px rgba(255, 255, 255, 0.329),
-            inset -1px 0px 3px 0px rgba(78, 78, 78, 0.301);
+        box-shadow: inset 1px 0px 3px 0px rgba(255, 255, 255, 0.20),
+            inset -1px 0px 3px 0px rgba(78, 78, 78, 0.15);
     }
 }
 
@@ -67,15 +67,15 @@
 
     0%,
     33% {
-        box-shadow: inset 1px 0px 3px 0px rgba(255, 255, 255, 0.329),
-            inset -1px 0px 3px 0px rgba(78, 78, 78, 0.301),
+        box-shadow: inset 1px 0px 3px 0px rgba(255, 255, 255, 0.20),
+            inset -1px 0px 3px 0px rgba(78, 78, 78, 0.15),
             0px 0px 0px 2px #f63d6875;
     }
 
     33%,
     66% {
-        box-shadow: inset 1px 0px 3px 0px rgba(255, 255, 255, 0.329),
-            inset -1px 0px 3px 0px rgba(78, 78, 78, 0.301);
+        box-shadow: inset 1px 0px 3px 0px rgba(255, 255, 255, 0.20),
+            inset -1px 0px 3px 0px rgba(78, 78, 78, 0.15);
     }
 }
 
@@ -91,32 +91,32 @@
 
 .blinkLightBlue {
     animation-name: blinkLightBlue;
-    box-shadow    : inset 1px 0px 3px 0px rgba(255, 255, 255, 0.329),
-        inset -1px 0px 3px 0px rgba(78, 78, 78, 0.301),
+    box-shadow    : inset 1px 0px 3px 0px rgba(255, 255, 255, 0.20),
+        inset -1px 0px 3px 0px rgba(78, 78, 78, 0.15),
         0px 0px 0px 2px #a5d8ff75;
     border: solid 1px #54c2e456;
 }
 
 .blinkLightGreen {
     animation-name: blinkLightGreen;
-    box-shadow    : inset 1px 0px 3px 0px rgba(255, 255, 255, 0.329),
-        inset -1px 0px 3px 0px rgba(78, 78, 78, 0.301),
+    box-shadow    : inset 1px 0px 3px 0px rgba(255, 255, 255, 0.20),
+        inset -1px 0px 3px 0px rgba(78, 78, 78, 0.15),
         0px 0px 0px 2px #a5ffc075;
     border: solid 1px rgba(187, 248, 185, 0.31);
 }
 
 .blinkLightRed {
     animation-name: blinkLightRed;
-    box-shadow    : inset 1px 0px 3px 0px rgba(255, 255, 255, 0.329),
-        inset -1px 0px 3px 0px rgba(78, 78, 78, 0.301),
+    box-shadow    : inset 1px 0px 3px 0px rgba(255, 255, 255, 0.20),
+        inset -1px 0px 3px 0px rgba(78, 78, 78, 0.15),
         0px 0px 0px 2px #f63d6875;
     border: solid 1px #e4547656;
 }
 
 .blinkLightYellow {
     animation-name: blinkLightYellow;
-    box-shadow    : inset 1px 0px 3px 0px rgba(255, 255, 255, 0.329),
-        inset -1px 0px 3px 0px rgba(78, 78, 78, 0.301),
+    box-shadow    : inset 1px 0px 3px 0px rgba(255, 255, 255, 0.20),
+        inset -1px 0px 3px 0px rgba(78, 78, 78, 0.15),
         0px 0px 0px 2px #f7f3c275;
     border: solid 1px #e4e25456;
 }
@@ -126,8 +126,8 @@
 }
 
 .blinkLightEmpty {
-    box-shadow: inset 1px 0px 3px 0px rgba(255, 255, 255, 0.329),
-        inset -1px 0px 3px 0px rgba(78, 78, 78, 0.301);
+    box-shadow: inset 1px 0px 3px 0px rgba(255, 255, 255, 0.20),
+        inset -1px 0px 3px 0px rgba(78, 78, 78, 0.15);
     animation       : none !important;
     border          : none !important;
     background-color: var(--Neutrals-NeutralSlate400)
diff --git a/src/components/CompanyWiki/CompanyWikiCompletedState.tsx b/src/components/CompanyWiki/CompanyWikiCompletedState.tsx
index ebe5664..5eca600 100644
--- a/src/components/CompanyWiki/CompanyWikiCompletedState.tsx
+++ b/src/components/CompanyWiki/CompanyWikiCompletedState.tsx
@@ -57,7 +57,7 @@ export const CompanyWikiCompletedState: React.FC<CompanyWikiCompletedStateProps>
     return (
         <div className="flex-1 self-stretch inline-flex justify-start items-center">
             {/* Table of Contents */}
-            <div className="flex-1 self-stretch max-w-64 min-w-64 border-r border-Outline-Outline-Gray-200 dark:border-Neutrals-NeutralSlate200 inline-flex flex-col justify-start items-start">
+            <div className="flex-1 self-stretch max-w-64 min-w-64 border-r border-Outline-Outline-Gray-200 dark:border-[--$1] inline-flex flex-col justify-start items-start">
                 <div className="self-stretch p-5 inline-flex justify-start items-center gap-2.5">
                     <div className="flex-1 justify-start text-[--Neutrals-NeutralSlate950] dark:text-[--Neutrals-NeutralSlate950] text-base font-medium font-['Inter'] leading-normal">Table of contents</div>
                 </div>
diff --git a/src/components/CompanyWiki/CompanyWikiEmptyStateDark.tsx b/src/components/CompanyWiki/CompanyWikiEmptyStateDark.tsx
index cb99a18..07431f9 100644
--- a/src/components/CompanyWiki/CompanyWikiEmptyStateDark.tsx
+++ b/src/components/CompanyWiki/CompanyWikiEmptyStateDark.tsx
@@ -27,7 +27,7 @@ export const CompanyWikiEmptyState: React.FC<CompanyWikiEmptyStateProps> = ({
     return (
         <div className="flex-1 self-stretch inline-flex justify-start items-center">
             {/* Table of Contents */}
-            <div className="flex-1 self-stretch max-w-64 min-w-64 border-r border-Outline-Outline-Gray-200 dark:border-Neutrals-NeutralSlate200 inline-flex flex-col justify-start items-start">
+            <div className="flex-1 self-stretch max-w-64 min-w-64 border-r border-Outline-Outline-Gray-200 dark:border-[--$1] inline-flex flex-col justify-start items-start">
                 <div className="self-stretch p-5 inline-flex justify-start items-center gap-2.5">
                     <div className="flex-1 justify-start text-[--Neutrals-NeutralSlate950] dark:text-[--Neutrals-NeutralSlate950] text-base font-medium font-['Inter'] leading-normal">Table of contents</div>
                 </div>
diff --git a/src/components/CompanyWiki/InviteEmployeesModal.tsx b/src/components/CompanyWiki/InviteEmployeesModal.tsx
index e962ea6..3c36816 100644
--- a/src/components/CompanyWiki/InviteEmployeesModal.tsx
+++ b/src/components/CompanyWiki/InviteEmployeesModal.tsx
@@ -49,7 +49,7 @@ export const InviteEmployeesModal: React.FC<InviteEmployeesModalProps> = ({
                         <div className="self-stretch justify-start text-[--Neutrals-NeutralSlate950] dark:text-[--Neutrals-NeutralSlate950] text-sm font-medium font-['Inter'] leading-tight">
                             Email
                         </div>
-                        <div className="self-stretch h-10 px-3 py-2 bg-[--Neutrals-NeutralSlate0] dark:bg-[--Neutrals-NeutralSlate0] rounded-lg border border-Outline-Outline-Gray-300 dark:border-Neutrals-NeutralSlate600 inline-flex justify-start items-center gap-2">
+                        <div className="self-stretch h-10 px-3 py-2 bg-[--Neutrals-NeutralSlate0] dark:bg-[--Neutrals-NeutralSlate0] rounded-lg border border-Outline-Outline-Gray-300 dark:border-[--$1] inline-flex justify-start items-center gap-2">
                             <input
                                 type="email"
                                 value={email}
@@ -73,7 +73,7 @@ export const InviteEmployeesModal: React.FC<InviteEmployeesModalProps> = ({
                     <div className="flex justify-start items-start gap-3">
                         <button
                             onClick={onClose}
-                            className="px-4 py-2 bg-[--Neutrals-NeutralSlate0] dark:bg-[--Neutrals-NeutralSlate0] rounded-lg border border-Outline-Outline-Gray-300 dark:border-Neutrals-NeutralSlate600 text-[--Neutrals-NeutralSlate700] dark:text-[--Neutrals-NeutralSlate700] text-sm font-medium font-['Inter'] leading-tight hover:bg-[--Neutrals-NeutralSlate50] dark:hover:bg-[--Neutrals-NeutralSlate0]"
+                            className="px-4 py-2 bg-[--Neutrals-NeutralSlate0] dark:bg-[--Neutrals-NeutralSlate0] rounded-lg border border-Outline-Outline-Gray-300 dark:border-[--$1] text-[--Neutrals-NeutralSlate700] dark:text-[--Neutrals-NeutralSlate700] text-sm font-medium font-['Inter'] leading-tight hover:bg-[--Neutrals-NeutralSlate50] dark:hover:bg-[--Neutrals-NeutralSlate0]"
                         >
                             Cancel
                         </button>
diff --git a/src/components/figma/FigmaEmployeeForms.tsx b/src/components/figma/FigmaEmployeeForms.tsx
index d331558..4598f5f 100644
--- a/src/components/figma/FigmaEmployeeForms.tsx
+++ b/src/components/figma/FigmaEmployeeForms.tsx
@@ -264,8 +264,8 @@ export const TextAreaQuestion: React.FC<{
                             rows={6}
                         />
                         <div className="w-3 h-3 absolute right-5 bottom-5">
-                            <div className="w-2 h-2 absolute top-0.5 left-0.5 outline outline-1 outline-offset-[-0.50px] outline-Neutrals-NeutralSlate500" />
-                            <div className="w-1 h-1 absolute bottom-0 right-0 outline outline-1 outline-offset-[-0.50px] outline-Neutrals-NeutralSlate500" />
+                            <div className="w-2 h-2 absolute top-0.5 left-0.5 outline outline-1 outline-offset-[-0.50px] outline-[--$1]" />
+                            <div className="w-1 h-1 absolute bottom-0 right-0 outline outline-1 outline-offset-[-0.50px] outline-[--$1]" />
                         </div>
                     </div>
                 </div>
diff --git a/src/components/figma/FigmaQuestion.tsx b/src/components/figma/FigmaQuestion.tsx
index 8b775bf..ea96f7a 100644
--- a/src/components/figma/FigmaQuestion.tsx
+++ b/src/components/figma/FigmaQuestion.tsx
@@ -28,7 +28,7 @@ export const FigmaQuestion: React.FC<FigmaQuestionProps> = ({
     className = ''
 }) => {
     return (
-        <div className={`w-[600px] px-5 pt-5 pb-6 bg-Other-White rounded-2xl outline outline-1 outline-offset-[-1px] outline-Neutrals-NeutralSlate200 inline-flex flex-col justify-end items-end gap-4 ${className}`}>
+        <div className={`w-[600px] px-5 pt-5 pb-6 bg-Other-White rounded-2xl outline outline-1 outline-offset-[-1px] outline-[--$1] inline-flex flex-col justify-end items-end gap-4 ${className}`}>
             {/* Question Header */}
             <div className="self-stretch inline-flex justify-start items-start gap-3">
                 <div className="justify-start text-zinc-300 text-xl font-medium font-['Inter'] leading-loose">
@@ -206,8 +206,8 @@ export const FigmaTextArea: React.FC<{
                             rows={6}
                         />
                         <div className="w-3 h-3 absolute right-5 bottom-5">
-                            <div className="w-2 h-2 absolute top-0.5 left-0.5 outline outline-1 outline-offset-[-0.50px] outline-Neutrals-NeutralSlate500" />
-                            <div className="w-1 h-1 absolute bottom-0 right-0 outline outline-1 outline-offset-[-0.50px] outline-Neutrals-NeutralSlate500" />
+                            <div className="w-2 h-2 absolute top-0.5 left-0.5 outline outline-1 outline-offset-[-0.50px] outline-[--$1]" />
+                            <div className="w-1 h-1 absolute bottom-0 right-0 outline outline-1 outline-offset-[-0.50px] outline-[--$1]" />
                         </div>
                     </div>
                 </div>
diff --git a/src/components/onboarding/FigmaOnboardingComponents.tsx b/src/components/onboarding/FigmaOnboardingComponents.tsx
index 7c8f2e4..aa5d2bd 100644
--- a/src/components/onboarding/FigmaOnboardingComponents.tsx
+++ b/src/components/onboarding/FigmaOnboardingComponents.tsx
@@ -173,8 +173,8 @@ export const FigmaOnboardingQuestion: React.FC<FigmaOnboardingQuestionProps> = (
               rows={rows}
             />
             <div className="w-3 h-3 absolute right-3 bottom-3">
-              <div className="w-2 h-2 absolute top-0.5 left-0.5 outline outline-1 outline-offset-[-0.50px] outline-Neutrals-NeutralSlate500" />
-              <div className="w-1 h-1 absolute top-2 left-2 outline outline-1 outline-offset-[-0.50px] outline-Neutrals-NeutralSlate500" />
+              <div className="w-2 h-2 absolute top-0.5 left-0.5 outline outline-1 outline-offset-[-0.50px] outline-[--$1]" />
+              <div className="w-1 h-1 absolute top-2 left-2 outline outline-1 outline-offset-[-0.50px] outline-[--$1]" />
             </div>
           </div>
         </div>
@@ -379,7 +379,7 @@ export const FigmaOnboardingForm: React.FC<FigmaOnboardingFormProps> = ({
               <div className="self-stretch inline-flex justify-start items-center gap-0.5">
                 <div className="justify-start text-[--Neutrals-NeutralSlate950] text-sm font-normal font-['Inter'] leading-tight">Company Logo</div>
               </div>
-              <div className="self-stretch p-4 rounded-3xl outline outline-1 outline-offset-[-1px] outline-Neutrals-NeutralSlate200 inline-flex justify-start items-center gap-4">
+              <div className="self-stretch p-4 rounded-3xl outline outline-1 outline-offset-[-1px] outline-[--$1] inline-flex justify-start items-center gap-4">
                 <div className="w-16 h-16 relative bg-gray-200 rounded-[250px]">
                   <div className="w-16 h-16 left-0 top-0 absolute opacity-10 rounded-[250px]" />
                   {companyLogo && (
diff --git a/src/pages/CompanyWiki.tsx b/src/pages/CompanyWiki.tsx
index 4463f1f..9765dc2 100644
--- a/src/pages/CompanyWiki.tsx
+++ b/src/pages/CompanyWiki.tsx
@@ -210,7 +210,7 @@ const CompanyWiki: React.FC = () => {
             <div className="flex-1 flex items-center justify-center">
                 <div className="text-center">
                     <div className="animate-spin w-8 h-8 border-2 border-Brand-Orange border-t-transparent rounded-full mx-auto mb-4"></div>
-                    <p className="text-Neutrals-NeutralSlate600">Loading company wiki...</p>
+                    <p className="text-[--$1]">Loading company wiki...</p>
                 </div>
             </div>
         );
@@ -245,19 +245,19 @@ const CompanyWiki: React.FC = () => {
                     {/* Table of Contents Sidebar */}
                     <div className="flex-1 self-stretch max-w-64 min-w-64 border-r border-[--Neutrals-NeutralSlate200] inline-flex flex-col justify-start items-start">
                         <div className="self-stretch p-5 inline-flex justify-start items-center gap-2.5">
-                            <div className="flex-1 justify-start text-Neutrals-NeutralSlate950 text-base font-medium font-['Inter'] leading-normal">Table of contents</div>
+                            <div className="flex-1 justify-start text-[--$1] text-base font-medium font-['Inter'] leading-normal">Table of contents</div>
                         </div>
                         <div className="self-stretch px-3 flex flex-col justify-start items-start gap-1.5">
                             {[1, 2, 3, 4, 5, 6, 7].map((section, index) => (
                                 <div
                                     key={section}
-                                    className={`self-stretch p-2 ${activeSection === section ? 'bg-Main-BG-Gray-100 rounded-full shadow-[0px_1px_2px_0px_rgba(10,13,20,0.03)]' : 'rounded-[10px]'} inline-flex justify-start items-center gap-2 overflow-hidden cursor-pointer`}
+                                    className={`self-stretch p-2 ${activeSection === section ? 'bg-[--Neutrals-NeutralSlate100] rounded-full shadow-[0px_1px_2px_0px_rgba(10,13,20,0.03)]' : 'rounded-[10px]'} inline-flex justify-start items-center gap-2 overflow-hidden cursor-pointer`}
                                     onClick={() => setActiveSection(section)}
                                 >
-                                    <div className={`h-5 p-0.5 ${activeSection === section ? 'bg-Brand-Orange' : 'bg-Text-Gray-100'} rounded-[999px] inline-flex flex-col justify-center items-center gap-0.5 overflow-hidden`}>
-                                        <div className={`w-4 text-center justify-start ${activeSection === section ? 'text-Neutrals-NeutralSlate0' : 'text-Text-Dark-950'} text-xs ${activeSection === section ? 'font-medium' : 'font-normal'} font-['Inter'] leading-none`}>{section}</div>
+                                    <div className={`h-5 p-0.5 ${activeSection === section ? 'bg-[--Brand-Orange]' : 'bg-[--Neutrals-NeutralSlate100]'} rounded-[999px] inline-flex flex-col justify-center items-center gap-0.5 overflow-hidden`}>
+                                        <div className={`w-4 text-center justify-start ${activeSection === section ? 'text-[--Neutrals-NeutralSlate0]' : 'text-[--Neutrals-NeutralSlate950]'} text-xs ${activeSection === section ? 'font-medium' : 'font-normal'} font-['Inter'] leading-none`}>{section}</div>
                                     </div>
-                                    <div className={`flex-1 justify-start ${activeSection === section ? 'text-Neutrals-NeutralSlate800' : 'text-Text-Gray-500'} text-xs font-medium font-['Inter'] leading-none`}>
+                                    <div className={`flex-1 justify-start ${activeSection === section ? 'text-[--Neutrals-NeutralSlate800]' : 'text-[--Neutrals-NeutralSlate500]'} text-xs font-medium font-['Inter'] leading-none`}>
                                         {getSectionTitle(section)}
                                     </div>
                                 </div>
@@ -268,7 +268,7 @@ const CompanyWiki: React.FC = () => {
                     {/* Questions Content */}
                     <div className="flex-1 self-stretch inline-flex flex-col justify-start items-start">
                         <div className="self-stretch p-5 inline-flex justify-start items-center gap-2.5">
-                            <div className="flex-1 justify-start text-Neutrals-NeutralSlate800 text-base font-medium font-['Inter'] leading-normal">
+                            <div className="flex-1 justify-start text-[--Neutrals-NeutralSlate800] text-base font-medium font-['Inter'] leading-normal">
                                 {getSectionTitle(activeSection)}
                             </div>
                         </div>
@@ -277,16 +277,16 @@ const CompanyWiki: React.FC = () => {
                                 <div key={qa.field} className="self-stretch p-3 bg-[--Neutrals-NeutralSlate100] rounded-2xl shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] flex flex-col justify-center items-start gap-2 overflow-hidden">
                                     <div className="self-stretch px-3 py-px inline-flex justify-start items-center gap-2.5">
                                         <div className="flex-1 flex justify-center items-center gap-3">
-                                            <div className="w-3 self-stretch justify-start text-Neutrals-NeutralSlate300 text-base font-semibold font-['Inter'] leading-normal">Q</div>
-                                            <div className="flex-1 justify-start text-Neutrals-NeutralSlate600 text-sm font-medium font-['Inter'] leading-tight">
+                                            <div className="w-3 self-stretch justify-start text-[--Neutrals-NeutralSlate300] text-base font-semibold font-['Inter'] leading-normal">Q</div>
+                                            <div className="flex-1 justify-start text-[--Neutrals-NeutralSlate600] text-sm font-medium font-['Inter'] leading-tight">
                                                 {qa.question}
                                             </div>
                                         </div>
                                     </div>
                                     <div className="self-stretch px-3 py-2 bg-[--Neutrals-NeutralSlate0] rounded-[10px] inline-flex justify-between items-center">
                                         <div className="flex-1 flex justify-start items-start gap-3">
-                                            <div className="w-3.5 h-6 justify-center text-Neutrals-NeutralSlate300 text-base font-semibold font-['Inter'] leading-normal">A</div>
-                                            <div className="flex-1 justify-start text-Neutrals-NeutralSlate800 text-base font-normal font-['Inter'] leading-normal whitespace-pre-wrap">
+                                            <div className="w-3.5 h-6 justify-center text-[--$1] text-base font-semibold font-['Inter'] leading-normal">A</div>
+                                            <div className="flex-1 justify-start text-[--$1] text-base font-normal font-['Inter'] leading-normal whitespace-pre-wrap">
                                                 {qa.answer}
                                             </div>
                                         </div>
diff --git a/src/pages/CompanyWikiNew.tsx b/src/pages/CompanyWikiNew.tsx
index 44e7aa1..4fecc3c 100644
--- a/src/pages/CompanyWikiNew.tsx
+++ b/src/pages/CompanyWikiNew.tsx
@@ -119,7 +119,7 @@ const CompanyWiki: React.FC = () => {
             <div className="flex-1 flex items-center justify-center">
                 <div className="text-center">
                     <div className="animate-spin w-8 h-8 border-2 border-Brand-Orange border-t-transparent rounded-full mx-auto mb-4"></div>
-                    <p className="text-Neutrals-NeutralSlate600">Loading company wiki...</p>
+                    <p className="text-[--$1]">Loading company wiki...</p>
                 </div>
             </div>
         );
@@ -149,10 +149,10 @@ const CompanyWiki: React.FC = () => {
         <div className="w-[1440px] h-[810px] p-4 bg-[--Neutrals-NeutralSlate200] inline-flex justify-start items-start overflow-hidden">
             <div className="flex-1 self-stretch rounded-3xl shadow-[0px_0px_15px_0px_rgba(0,0,0,0.08)] flex justify-between items-start overflow-hidden">
                 {/* Left Sidebar - Company Navigation */}
-                <div className="w-64 self-stretch max-w-64 min-w-64 px-3 pt-4 pb-3 bg-[--Neutrals-NeutralSlate0] border-r border-Neutrals-NeutralSlate200 inline-flex flex-col justify-between items-center overflow-hidden">
+                <div className="w-64 self-stretch max-w-64 min-w-64 px-3 pt-4 pb-3 bg-[--Neutrals-NeutralSlate0] border-r border-[--$1] inline-flex flex-col justify-between items-center overflow-hidden">
                     {/* Company Header */}
                     <div className="self-stretch flex flex-col justify-start items-start gap-5">
-                        <div className="w-60 pl-2 pr-4 py-2 bg-[--Neutrals-NeutralSlate0] rounded-3xl outline outline-1 outline-offset-[-1px] outline-Neutrals-NeutralSlate200 inline-flex justify-between items-center overflow-hidden">
+                        <div className="w-60 pl-2 pr-4 py-2 bg-[--Neutrals-NeutralSlate0] rounded-3xl outline outline-1 outline-offset-[-1px] outline-[--$1] inline-flex justify-between items-center overflow-hidden">
                             <div className="flex-1 flex justify-start items-center gap-2">
                                 <div className="w-8 h-8 rounded-full flex justify-start items-center gap-2.5">
                                     <div className="w-8 h-8 relative bg-Brand-Orange rounded-full outline outline-[1.60px] outline-offset-[-1.60px] outline-white/10 overflow-hidden">
@@ -160,7 +160,7 @@ const CompanyWiki: React.FC = () => {
                                     </div>
                                 </div>
                                 <div className="flex-1 inline-flex flex-col justify-start items-start gap-0.5">
-                                    <div className="self-stretch justify-start text-Neutrals-NeutralSlate950 text-base font-medium font-['Inter'] leading-normal">
+                                    <div className="self-stretch justify-start text-[--$1] text-base font-medium font-['Inter'] leading-normal">
                                         {onboardingData?.companyName || 'Company Name'}
                                     </div>
                                 </div>
@@ -171,19 +171,19 @@ const CompanyWiki: React.FC = () => {
                         <div className="self-stretch flex flex-col justify-start items-start gap-5">
                             <div className="self-stretch flex flex-col justify-start items-start gap-1.5">
                                 <div className="w-60 px-4 py-2.5 bg-[--Neutrals-NeutralSlate100] rounded-[34px] inline-flex justify-start items-center gap-2">
-                                    <div className="justify-start text-Neutrals-NeutralSlate950 text-sm font-medium font-['Inter'] leading-tight">Company Wiki</div>
+                                    <div className="justify-start text-[--$1] text-sm font-medium font-['Inter'] leading-tight">Company Wiki</div>
                                 </div>
                                 <div className="w-60 px-4 py-2.5 rounded-[34px] inline-flex justify-start items-center gap-2">
-                                    <div className="justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] leading-tight">Submissions</div>
+                                    <div className="justify-start text-[--$1] text-sm font-medium font-['Inter'] leading-tight">Submissions</div>
                                 </div>
                                 <div className="w-60 px-4 py-2.5 rounded-[34px] inline-flex justify-start items-center gap-2">
-                                    <div className="justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] leading-tight">Reports</div>
+                                    <div className="justify-start text-[--$1] text-sm font-medium font-['Inter'] leading-tight">Reports</div>
                                 </div>
                                 <div className="w-60 px-4 py-2.5 rounded-[34px] inline-flex justify-start items-center gap-2">
-                                    <div className="justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] leading-tight">Chat</div>
+                                    <div className="justify-start text-[--$1] text-sm font-medium font-['Inter'] leading-tight">Chat</div>
                                 </div>
                                 <div className="w-60 px-4 py-2.5 rounded-[34px] inline-flex justify-start items-center gap-2">
-                                    <div className="justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] leading-tight">Help</div>
+                                    <div className="justify-start text-[--$1] text-sm font-medium font-['Inter'] leading-tight">Help</div>
                                 </div>
                             </div>
                         </div>
@@ -192,7 +192,7 @@ const CompanyWiki: React.FC = () => {
                     {/* Bottom Section */}
                     <div className="self-stretch flex flex-col justify-start items-start gap-3">
                         <div className="w-60 px-4 py-2.5 rounded-[34px] inline-flex justify-start items-center gap-2">
-                            <div className="flex-1 justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] leading-tight">Settings</div>
+                            <div className="flex-1 justify-start text-[--$1] text-sm font-medium font-['Inter'] leading-tight">Settings</div>
                         </div>
                     </div>
                 </div>
@@ -203,7 +203,7 @@ const CompanyWiki: React.FC = () => {
                         {/* Table of Contents Sidebar */}
                         <div className="flex-1 self-stretch max-w-64 min-w-64 border-r border-Outline-Outline-Gray-200 inline-flex flex-col justify-start items-start">
                             <div className="self-stretch p-5 inline-flex justify-start items-center gap-2.5">
-                                <div className="flex-1 justify-start text-Neutrals-NeutralSlate950 text-base font-medium font-['Inter'] leading-normal">Table of contents</div>
+                                <div className="flex-1 justify-start text-[--$1] text-base font-medium font-['Inter'] leading-normal">Table of contents</div>
                             </div>
                             <div className="self-stretch px-3 flex flex-col justify-start items-start gap-1.5">
                                 {[1, 2, 3, 4, 5, 6, 7].map((section, index) => (
@@ -213,9 +213,9 @@ const CompanyWiki: React.FC = () => {
                                         onClick={() => setActiveSection(section)}
                                     >
                                         <div className={`h-5 p-0.5 ${activeSection === section ? 'bg-Brand-Orange' : 'bg-Text-Gray-100'} rounded-[999px] inline-flex flex-col justify-center items-center gap-0.5 overflow-hidden`}>
-                                            <div className={`w-4 text-center justify-start ${activeSection === section ? 'text-Neutrals-NeutralSlate0' : 'text-Text-Dark-950'} text-xs ${activeSection === section ? 'font-medium' : 'font-normal'} font-['Inter'] leading-none`}>{section}</div>
+                                            <div className={`w-4 text-center justify-start ${activeSection === section ? 'text-[--$1]' : 'text-Text-Dark-950'} text-xs ${activeSection === section ? 'font-medium' : 'font-normal'} font-['Inter'] leading-none`}>{section}</div>
                                         </div>
-                                        <div className={`flex-1 justify-start ${activeSection === section ? 'text-Neutrals-NeutralSlate800' : 'text-Text-Gray-500'} text-xs font-medium font-['Inter'] leading-none`}>
+                                        <div className={`flex-1 justify-start ${activeSection === section ? 'text-[--$1]' : 'text-Text-Gray-500'} text-xs font-medium font-['Inter'] leading-none`}>
                                             {getSectionTitle(section)}
                                         </div>
                                     </div>
@@ -226,7 +226,7 @@ const CompanyWiki: React.FC = () => {
                         {/* Questions Content */}
                         <div className="flex-1 self-stretch inline-flex flex-col justify-start items-start">
                             <div className="self-stretch p-5 inline-flex justify-start items-center gap-2.5">
-                                <div className="flex-1 justify-start text-Neutrals-NeutralSlate800 text-base font-medium font-['Inter'] leading-normal">
+                                <div className="flex-1 justify-start text-[--$1] text-base font-medium font-['Inter'] leading-normal">
                                     {getSectionTitle(activeSection)}
                                 </div>
                             </div>
@@ -235,16 +235,16 @@ const CompanyWiki: React.FC = () => {
                                     <div key={qa.field} className="self-stretch p-3 bg-[--Neutrals-NeutralSlate100] rounded-2xl shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] flex flex-col justify-center items-start gap-2 overflow-hidden">
                                         <div className="self-stretch px-3 py-px inline-flex justify-start items-center gap-2.5">
                                             <div className="flex-1 flex justify-center items-center gap-3">
-                                                <div className="w-3 self-stretch justify-start text-Neutrals-NeutralSlate300 text-base font-semibold font-['Inter'] leading-normal">Q</div>
-                                                <div className="flex-1 justify-start text-Neutrals-NeutralSlate600 text-sm font-medium font-['Inter'] leading-tight">
+                                                <div className="w-3 self-stretch justify-start text-[--$1] text-base font-semibold font-['Inter'] leading-normal">Q</div>
+                                                <div className="flex-1 justify-start text-[--$1] text-sm font-medium font-['Inter'] leading-tight">
                                                     {qa.question}
                                                 </div>
                                             </div>
                                         </div>
                                         <div className="self-stretch px-3 py-2 bg-[--Neutrals-NeutralSlate0] rounded-[10px] inline-flex justify-between items-center">
                                             <div className="flex-1 flex justify-start items-start gap-3">
-                                                <div className="w-3.5 h-6 justify-center text-Neutrals-NeutralSlate300 text-base font-semibold font-['Inter'] leading-normal">A</div>
-                                                <div className="flex-1 justify-start text-Neutrals-NeutralSlate800 text-base font-normal font-['Inter'] leading-normal whitespace-pre-wrap">
+                                                <div className="w-3.5 h-6 justify-center text-[--$1] text-base font-semibold font-['Inter'] leading-normal">A</div>
+                                                <div className="flex-1 justify-start text-[--$1] text-base font-normal font-['Inter'] leading-normal whitespace-pre-wrap">
                                                     {qa.answer}
                                                 </div>
                                             </div>
diff --git a/src/pages/EmployeeQuestionnaire.tsx b/src/pages/EmployeeQuestionnaire.tsx
index dc0b6ad..0d33ddb 100644
--- a/src/pages/EmployeeQuestionnaire.tsx
+++ b/src/pages/EmployeeQuestionnaire.tsx
@@ -1127,8 +1127,8 @@ const EmployeeFormStep35: React.FC<{ onNext: () => void; onBack: () => void }> =
                             rows={6}
                         />
                         <div className="w-3 h-3 absolute right-5 bottom-5">
-                            <div className="w-2 h-2 absolute top-0.5 left-0.5 outline outline-1 outline-offset-[-0.50px] outline-Neutrals-NeutralSlate500" />
-                            <div className="w-1 h-1 absolute bottom-0 right-0 outline outline-1 outline-offset-[-0.50px] outline-Neutrals-NeutralSlate500" />
+                            <div className="w-2 h-2 absolute top-0.5 left-0.5 outline outline-1 outline-offset-[-0.50px] outline-[--$1]" />
+                            <div className="w-1 h-1 absolute bottom-0 right-0 outline outline-1 outline-offset-[-0.50px] outline-[--$1]" />
                         </div>
                     </div>
                 </div>
@@ -1219,8 +1219,8 @@ const EmployeeFormStep36: React.FC<{ onNext: () => void; onBack: () => void }> =
                             rows={6}
                         />
                         <div className="w-3 h-3 absolute right-5 bottom-5">
-                            <div className="w-2 h-2 absolute top-0.5 left-0.5 outline outline-1 outline-offset-[-0.50px] outline-Neutrals-NeutralSlate500" />
-                            <div className="w-1 h-1 absolute bottom-0 right-0 outline outline-1 outline-offset-[-0.50px] outline-Neutrals-NeutralSlate500" />
+                            <div className="w-2 h-2 absolute top-0.5 left-0.5 outline outline-1 outline-offset-[-0.50px] outline-[--$1]" />
+                            <div className="w-1 h-1 absolute bottom-0 right-0 outline outline-1 outline-offset-[-0.50px] outline-[--$1]" />
                         </div>
                     </div>
                 </div>
@@ -1311,8 +1311,8 @@ const EmployeeFormStep37: React.FC<{ onNext: () => void; onBack: () => void }> =
                             rows={6}
                         />
                         <div className="w-3 h-3 absolute right-5 bottom-5">
-                            <div className="w-2 h-2 absolute top-0.5 left-0.5 outline outline-1 outline-offset-[-0.50px] outline-Neutrals-NeutralSlate500" />
-                            <div className="w-1 h-1 absolute bottom-0 right-0 outline outline-1 outline-offset-[-0.50px] outline-Neutrals-NeutralSlate500" />
+                            <div className="w-2 h-2 absolute top-0.5 left-0.5 outline outline-1 outline-offset-[-0.50px] outline-[--$1]" />
+                            <div className="w-1 h-1 absolute bottom-0 right-0 outline outline-1 outline-offset-[-0.50px] outline-[--$1]" />
                         </div>
                     </div>
                 </div>
diff --git a/src/pages/HelpNew.tsx b/src/pages/HelpNew.tsx
index de63e38..033dfd7 100644
--- a/src/pages/HelpNew.tsx
+++ b/src/pages/HelpNew.tsx
@@ -96,7 +96,7 @@ const HelpNew: React.FC = () => {
                                     <div className="w-5 h-5 opacity-0 border border-zinc-800" />
                                 </div>
                                 {item.isOpen && (
-                                    <div className="self-stretch p-6 bg-[--Neutrals-NeutralSlate0] rounded-2xl outline outline-1 outline-offset-[-1px] outline-Neutrals-NeutralSlate200 flex flex-col justify-start items-start gap-4">
+                                    <div className="self-stretch p-6 bg-[--Neutrals-NeutralSlate0] rounded-2xl outline outline-1 outline-offset-[-1px] outline-[--$1] flex flex-col justify-start items-start gap-4">
                                         <div className="self-stretch justify-start text-[--Neutrals-NeutralSlate800] text-base font-normal font-['Inter'] leading-normal">
                                             {item.answer}
                                         </div>
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index 16a3fdb..d1b9911 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -264,9 +264,9 @@ const ModernLogin: React.FC = () => {
                                     <div className="justify-center text-[--Neutrals-NeutralSlate800] text-sm font-medium font-['Inter'] leading-tight cursor-pointer" onClick={handleGoogleAuth}>Continue with Google</div>
                                 </div>
                                 <div className="self-stretch inline-flex justify-center items-center gap-3">
-                                    <div className="flex-1 h-0 outline outline-1 outline-offset-[-0.50px] outline-Neutrals-NeutralSlate200"></div>
+                                    <div className="flex-1 h-0 outline outline-1 outline-offset-[-0.50px] outline-[--$1]"></div>
                                     <div className="justify-start text-[--Neutrals-NeutralSlate400] text-sm font-normal font-['Inter'] leading-tight">or</div>
-                                    <div className="flex-1 h-0 outline outline-1 outline-offset-[-0.50px] outline-Neutrals-NeutralSlate200"></div>
+                                    <div className="flex-1 h-0 outline outline-1 outline-offset-[-0.50px] outline-[--$1]"></div>
                                 </div>
                                 <div className="self-stretch flex flex-col justify-center items-end gap-2">
                                     <div className="self-stretch inline-flex justify-end items-end gap-2">
diff --git a/src/pages/figma/ChatAIResponse.tsx b/src/pages/figma/ChatAIResponse.tsx
index 7ef45ae..6abae8a 100644
--- a/src/pages/figma/ChatAIResponse.tsx
+++ b/src/pages/figma/ChatAIResponse.tsx
@@ -5,10 +5,10 @@ const ChatAIResponse: React.FC = () => {
         <div className="w-full h-[810px] p-4 bg-[--Neutrals-NeutralSlate200] inline-flex justify-start items-start overflow-hidden">
             <div className="flex-1 self-stretch rounded-3xl shadow-[0px_0px_15px_0px_rgba(0,0,0,0.08)] flex justify-between items-start overflow-hidden">
                 {/* Sidebar */}
-                <div className="w-64 self-stretch max-w-64 min-w-64 px-3 pt-4 pb-3 bg-[--Neutrals-NeutralSlate0] border-r border-Neutrals-NeutralSlate200 inline-flex flex-col justify-between items-center overflow-hidden">
+                <div className="w-64 self-stretch max-w-64 min-w-64 px-3 pt-4 pb-3 bg-[--Neutrals-NeutralSlate0] border-r border-[--$1] inline-flex flex-col justify-between items-center overflow-hidden">
                     <div className="self-stretch flex flex-col justify-start items-start gap-5">
                         {/* Company Selector */}
-                        <div className="w-60 pl-2 pr-4 py-2 bg-[--Neutrals-NeutralSlate0] rounded-3xl outline outline-1 outline-offset-[-1px] outline-Neutrals-NeutralSlate200 inline-flex justify-between items-center overflow-hidden">
+                        <div className="w-60 pl-2 pr-4 py-2 bg-[--Neutrals-NeutralSlate0] rounded-3xl outline outline-1 outline-offset-[-1px] outline-[--$1] inline-flex justify-between items-center overflow-hidden">
                             <div className="flex-1 flex justify-start items-center gap-2">
                                 <div className="w-8 h-8 rounded-full flex justify-start items-center gap-2.5">
                                     <div className="w-8 h-8 relative bg-[--Brand-Orange] rounded-full outline outline-[1.60px] outline-offset-[-1.60px] outline-white/10 overflow-hidden">
@@ -110,11 +110,11 @@ const ChatAIResponse: React.FC = () => {
                         </div>
 
                         {/* Company Report Card */}
-                        <div className="self-stretch bg-[--Neutrals-NeutralSlate0] rounded-[20px] shadow-[0px_1px_4px_0px_rgba(14,18,27,0.04)] outline outline-1 outline-offset-[-1px] outline-Neutrals-NeutralSlate200 flex flex-col justify-start items-start overflow-hidden">
+                        <div className="self-stretch bg-[--Neutrals-NeutralSlate0] rounded-[20px] shadow-[0px_1px_4px_0px_rgba(14,18,27,0.04)] outline outline-1 outline-offset-[-1px] outline-[--$1] flex flex-col justify-start items-start overflow-hidden">
                             <div className="self-stretch h-24 relative">
                                 <div className="w-60 h-32 left-0 top-[-0.50px] absolute bg-gradient-to-b from-black to-black/0" />
-                                <div className="w-60 p-3 left-[18.12px] top-[42.52px] absolute origin-top-left rotate-[-28.34deg] bg-[--Neutrals-NeutralSlate0] rounded-xl shadow-[0px_10px_20px_4px_rgba(14,18,27,0.08)] outline outline-1 outline-offset-[-1px] outline-Neutrals-NeutralSlate200 inline-flex flex-col justify-start items-start gap-3 overflow-hidden" />
-                                <div className="w-60 p-3 left-[31.44px] top-[22px] absolute origin-top-left rotate-[-28.34deg] bg-[--Neutrals-NeutralSlate0] rounded-xl shadow-[0px_10px_20px_4px_rgba(14,18,27,0.08)] outline outline-1 outline-offset-[-1px] outline-Neutrals-NeutralSlate200 inline-flex flex-col justify-start items-start gap-3 overflow-hidden" />
+                                <div className="w-60 p-3 left-[18.12px] top-[42.52px] absolute origin-top-left rotate-[-28.34deg] bg-[--Neutrals-NeutralSlate0] rounded-xl shadow-[0px_10px_20px_4px_rgba(14,18,27,0.08)] outline outline-1 outline-offset-[-1px] outline-[--$1] inline-flex flex-col justify-start items-start gap-3 overflow-hidden" />
+                                <div className="w-60 p-3 left-[31.44px] top-[22px] absolute origin-top-left rotate-[-28.34deg] bg-[--Neutrals-NeutralSlate0] rounded-xl shadow-[0px_10px_20px_4px_rgba(14,18,27,0.08)] outline outline-1 outline-offset-[-1px] outline-[--$1] inline-flex flex-col justify-start items-start gap-3 overflow-hidden" />
                             </div>
                             <div className="self-stretch p-3 flex flex-col justify-start items-start gap-1">
                                 <div className="self-stretch justify-start text-[--Neutrals-NeutralSlate800] text-sm font-semibold font-['Inter'] leading-tight">Build [Company]'s Report</div>
diff --git a/src/pages/figma/ChatLight.tsx b/src/pages/figma/ChatLight.tsx
index 43cae93..5beda74 100644
--- a/src/pages/figma/ChatLight.tsx
+++ b/src/pages/figma/ChatLight.tsx
@@ -5,10 +5,10 @@ const ChatLight: React.FC = () => {
         <div className="w-full h-[810px] p-4 bg-[--Neutrals-NeutralSlate200] inline-flex justify-start items-start overflow-hidden">
             <div className="flex-1 self-stretch rounded-3xl shadow-[0px_0px_15px_0px_rgba(0,0,0,0.08)] flex justify-between items-start overflow-hidden">
                 {/* Sidebar */}
-                <div className="w-64 self-stretch max-w-64 min-w-64 px-3 pt-4 pb-3 bg-[--Neutrals-NeutralSlate0] border-r border-Neutrals-NeutralSlate200 inline-flex flex-col justify-between items-center overflow-hidden">
+                <div className="w-64 self-stretch max-w-64 min-w-64 px-3 pt-4 pb-3 bg-[--Neutrals-NeutralSlate0] border-r border-[--$1] inline-flex flex-col justify-between items-center overflow-hidden">
                     <div className="self-stretch flex flex-col justify-start items-start gap-5">
                         {/* Company Selector */}
-                        <div className="w-60 pl-2 pr-4 py-2 bg-[--Neutrals-NeutralSlate0] rounded-3xl outline outline-1 outline-offset-[-1px] outline-Neutrals-NeutralSlate200 inline-flex justify-between items-center overflow-hidden">
+                        <div className="w-60 pl-2 pr-4 py-2 bg-[--Neutrals-NeutralSlate0] rounded-3xl outline outline-1 outline-offset-[-1px] outline-[--$1] inline-flex justify-between items-center overflow-hidden">
                             <div className="flex-1 flex justify-start items-center gap-2">
                                 <div className="w-8 h-8 rounded-full flex justify-start items-center gap-2.5">
                                     <div className="w-8 h-8 relative bg-[--Brand-Orange] rounded-full outline outline-[1.60px] outline-offset-[-1.60px] outline-white/10 overflow-hidden">
@@ -105,11 +105,11 @@ const ChatLight: React.FC = () => {
                         </div>
 
                         {/* Company Report Card */}
-                        <div className="self-stretch bg-[--Neutrals-NeutralSlate0] rounded-[20px] shadow-[0px_1px_4px_0px_rgba(14,18,27,0.04)] outline outline-1 outline-offset-[-1px] outline-Neutrals-NeutralSlate200 flex flex-col justify-start items-start overflow-hidden">
+                        <div className="self-stretch bg-[--Neutrals-NeutralSlate0] rounded-[20px] shadow-[0px_1px_4px_0px_rgba(14,18,27,0.04)] outline outline-1 outline-offset-[-1px] outline-[--$1] flex flex-col justify-start items-start overflow-hidden">
                             <div className="self-stretch h-24 relative">
                                 <div className="w-60 h-32 left-0 top-[-0.50px] absolute bg-gradient-to-b from-black to-black/0" />
-                                <div className="w-60 p-3 left-[18.12px] top-[42.52px] absolute origin-top-left rotate-[-28.34deg] bg-[--Neutrals-NeutralSlate0] rounded-xl shadow-[0px_10px_20px_4px_rgba(14,18,27,0.08)] outline outline-1 outline-offset-[-1px] outline-Neutrals-NeutralSlate200 inline-flex flex-col justify-start items-start gap-3 overflow-hidden" />
-                                <div className="w-60 p-3 left-[31.44px] top-[22px] absolute origin-top-left rotate-[-28.34deg] bg-[--Neutrals-NeutralSlate0] rounded-xl shadow-[0px_10px_20px_4px_rgba(14,18,27,0.08)] outline outline-1 outline-offset-[-1px] outline-Neutrals-NeutralSlate200 inline-flex flex-col justify-start items-start gap-3 overflow-hidden" />
+                                <div className="w-60 p-3 left-[18.12px] top-[42.52px] absolute origin-top-left rotate-[-28.34deg] bg-[--Neutrals-NeutralSlate0] rounded-xl shadow-[0px_10px_20px_4px_rgba(14,18,27,0.08)] outline outline-1 outline-offset-[-1px] outline-[--$1] inline-flex flex-col justify-start items-start gap-3 overflow-hidden" />
+                                <div className="w-60 p-3 left-[31.44px] top-[22px] absolute origin-top-left rotate-[-28.34deg] bg-[--Neutrals-NeutralSlate0] rounded-xl shadow-[0px_10px_20px_4px_rgba(14,18,27,0.08)] outline outline-1 outline-offset-[-1px] outline-[--$1] inline-flex flex-col justify-start items-start gap-3 overflow-hidden" />
                             </div>
                             <div className="self-stretch p-3 flex flex-col justify-start items-start gap-1">
                                 <div className="self-stretch justify-start text-[--Neutrals-NeutralSlate800] text-sm font-semibold font-['Inter'] leading-tight">Build [Company]'s Report</div>