From 3b73273629ea718d5b60d08eb8d41a76bdb61fad Mon Sep 17 00:00:00 2001
From: Dries Augustyns <inbox@driaug.com>
Date: Thu, 4 Dec 2025 09:45:03 +0100
Subject: [PATCH] Remove gray colours

---
 apps/web/src/pages/campaigns/index.tsx | 466 +++++++++++++------------
 apps/web/src/pages/settings/index.tsx  |  12 +-
 apps/web/src/pages/workflows/[id].tsx  |   6 +-
 apps/web/src/pages/workflows/index.tsx |   2 +-
 apps/web/src/styles/globals.css        |   2 +-
 5 files changed, 245 insertions(+), 243 deletions(-)

diff --git a/apps/web/src/pages/campaigns/index.tsx b/apps/web/src/pages/campaigns/index.tsx
index aac0cae..4713274 100644
--- a/apps/web/src/pages/campaigns/index.tsx
+++ b/apps/web/src/pages/campaigns/index.tsx
@@ -108,252 +108,254 @@ export default function CampaignsPage() {
       <NextSeo title="Campaigns" />
       <DashboardLayout>
         <div className="space-y-6">
-        {/* Header */}
-        <div className="flex items-center justify-between">
-          <div>
-            <h1 className="text-3xl font-bold text-neutral-900">Campaigns</h1>
-            <p className="text-neutral-500 mt-2">
-              Send one-time email broadcasts to your contacts. {data?.total ? `${data.total} total campaigns` : ''}
-            </p>
-          </div>
-          <Link href="/campaigns/create">
-            <Button>
-              <Plus className="h-4 w-4" />
-              Create Campaign
-            </Button>
-          </Link>
-        </div>
-
-        {/* Filters */}
-        <Card>
-          <CardContent className="pt-6">
-            <div className="flex gap-4">
-              <div className="flex-1">
-                <Select value={statusFilter} onValueChange={setStatusFilter}>
-                  <SelectTrigger>
-                    <SelectValue placeholder="All Statuses" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="ALL">All Statuses</SelectItem>
-                    <SelectItem value="DRAFT">Draft</SelectItem>
-                    <SelectItem value="SCHEDULED">Scheduled</SelectItem>
-                    <SelectItem value="SENDING">Sending</SelectItem>
-                    <SelectItem value="SENT">Sent</SelectItem>
-                    <SelectItem value="CANCELLED">Cancelled</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
+          {/* Header */}
+          <div className="flex items-center justify-between">
+            <div>
+              <h1 className="text-3xl font-bold text-neutral-900">Campaigns</h1>
+              <p className="text-neutral-500 mt-2">
+                Send one-time email broadcasts to your contacts. {data?.total ? `${data.total} total campaigns` : ''}
+              </p>
             </div>
-          </CardContent>
-        </Card>
+            <Link href="/campaigns/create">
+              <Button>
+                <Plus className="h-4 w-4" />
+                Create Campaign
+              </Button>
+            </Link>
+          </div>
 
-        {/* Campaigns List */}
-        <div className="space-y-4">
-          {isLoading && (
-            <Card>
-              <CardContent className="py-8 text-center text-neutral-500">Loading campaigns...</CardContent>
-            </Card>
-          )}
-
-          {!isLoading && data?.campaigns.length === 0 && (
-            <Card className="border-2 border-dashed">
-              <CardContent className="py-16 text-center">
-                <div className="max-w-md mx-auto">
-                  <div className="bg-primary/10 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
-                    <Mail className="h-8 w-8 text-primary" />
-                  </div>
-                  <h3 className="text-xl font-semibold text-neutral-900 mb-2">
-                    {statusFilter !== 'ALL' ? `No ${statusFilter.toLowerCase()} campaigns` : 'No campaigns yet'}
-                  </h3>
-                  <p className="text-neutral-500 mb-6">
-                    {statusFilter !== 'ALL'
-                      ? 'Try adjusting your filters or create a new campaign.'
-                      : 'Create your first campaign to send emails to your contacts.'}
-                  </p>
-                  <Link href="/campaigns/create">
-                    <Button size="lg">
-                      <Plus className="h-4 w-4" />
-                      Create Your First Campaign
-                    </Button>
-                  </Link>
+          {/* Filters */}
+          <Card>
+            <CardContent className="pt-6">
+              <div className="flex gap-4">
+                <div className="flex-1">
+                  <Select value={statusFilter} onValueChange={setStatusFilter}>
+                    <SelectTrigger>
+                      <SelectValue placeholder="All Statuses" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="ALL">All Statuses</SelectItem>
+                      <SelectItem value="DRAFT">Draft</SelectItem>
+                      <SelectItem value="SCHEDULED">Scheduled</SelectItem>
+                      <SelectItem value="SENDING">Sending</SelectItem>
+                      <SelectItem value="SENT">Sent</SelectItem>
+                      <SelectItem value="CANCELLED">Cancelled</SelectItem>
+                    </SelectContent>
+                  </Select>
                 </div>
-              </CardContent>
-            </Card>
-          )}
+              </div>
+            </CardContent>
+          </Card>
 
-          {data?.campaigns.map(campaign => {
-            const openRate = campaign.sentCount > 0 ? (campaign.openedCount / campaign.sentCount) * 100 : 0;
-            const clickRate = campaign.sentCount > 0 ? (campaign.clickedCount / campaign.sentCount) * 100 : 0;
-            const deliveryProgress =
-              campaign.totalRecipients > 0 ? (campaign.sentCount / campaign.totalRecipients) * 100 : 0;
+          {/* Campaigns List */}
+          <div className="space-y-4">
+            {isLoading && (
+              <Card>
+                <CardContent className="py-8 text-center text-neutral-500">Loading campaigns...</CardContent>
+              </Card>
+            )}
 
-            return (
-              <Card key={campaign.id} className="hover:shadow-lg transition-all hover:border-primary/20">
-                <CardHeader className="pb-4">
-                  <div className="flex items-start justify-between gap-4">
-                    <div className="flex-1 min-w-0">
-                      <div className="flex items-center gap-3 mb-2">
-                        <Link
-                          href={`/campaigns/${campaign.id}`}
-                          className="hover:text-primary transition-colors flex-1 min-w-0"
-                        >
-                          <CardTitle className="text-xl truncate">{campaign.name}</CardTitle>
-                        </Link>
-                        {getStatusBadge(campaign.status)}
-                      </div>
-                      {campaign.description && (
-                        <CardDescription className="line-clamp-2">{campaign.description}</CardDescription>
-                      )}
+            {!isLoading && data?.campaigns.length === 0 && (
+              <Card>
+                <CardContent className="py-16 text-center">
+                  <div className="max-w-md mx-auto">
+                    <div className="bg-primary/10 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
+                      <Mail className="h-8 w-8 text-primary" />
                     </div>
-                  </div>
-                </CardHeader>
-                <CardContent className="space-y-4">
-                  {/* Stats Grid */}
-                  <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
-                    {/* Recipients */}
-                    <div className="bg-blue-50 border border-blue-100 rounded-lg p-3">
-                      <div className="flex items-center gap-2 mb-1">
-                        <Users className="h-3.5 w-3.5 text-blue-600" />
-                        <span className="text-xs font-medium text-blue-900">Recipients</span>
-                      </div>
-                      <p className="text-lg font-bold text-blue-900">{campaign.totalRecipients.toLocaleString()}</p>
-                      {campaign.totalRecipients > 0 && (
-                        <p className="text-xs text-blue-700 mt-1">{deliveryProgress.toFixed(0)}% sent</p>
-                      )}
-                    </div>
-
-                    {/* Open Rate */}
-                    {campaign.sentCount > 0 && (
-                      <div className="bg-purple-50 border border-purple-100 rounded-lg p-3">
-                        <div className="flex items-center gap-2 mb-1">
-                          <Mail className="h-3.5 w-3.5 text-purple-600" />
-                          <span className="text-xs font-medium text-purple-900">Opens</span>
-                        </div>
-                        <p className="text-lg font-bold text-purple-900">{openRate.toFixed(1)}%</p>
-                        <p className="text-xs text-purple-700 mt-1">{campaign.openedCount.toLocaleString()} opened</p>
-                      </div>
-                    )}
-
-                    {/* Click Rate */}
-                    {campaign.clickedCount > 0 && (
-                      <div className="bg-orange-50 border border-orange-100 rounded-lg p-3">
-                        <div className="flex items-center gap-2 mb-1">
-                          <Mail className="h-3.5 w-3.5 text-orange-600" />
-                          <span className="text-xs font-medium text-orange-900">Clicks</span>
-                        </div>
-                        <p className="text-lg font-bold text-orange-900">{clickRate.toFixed(1)}%</p>
-                        <p className="text-xs text-orange-700 mt-1">{campaign.clickedCount.toLocaleString()} clicked</p>
-                      </div>
-                    )}
-
-                    {/* Scheduled For */}
-                    {campaign.scheduledFor && (
-                      <div className="bg-green-50 border border-green-100 rounded-lg p-3 md:col-span-2">
-                        <div className="flex items-center gap-2 mb-1">
-                          <Calendar className="h-3.5 w-3.5 text-green-600" />
-                          <span className="text-xs font-medium text-green-900">Scheduled</span>
-                        </div>
-                        <p className="text-sm font-semibold text-green-900">
-                          {new Date(campaign.scheduledFor).toLocaleDateString(undefined, {
-                            month: 'short',
-                            day: 'numeric',
-                            year: 'numeric',
-                          })}
-                        </p>
-                        <p className="text-xs text-green-700 mt-1">
-                          {new Date(campaign.scheduledFor).toLocaleTimeString(undefined, {
-                            hour: 'numeric',
-                            minute: '2-digit',
-                          })}
-                        </p>
-                      </div>
-                    )}
-                  </div>
-
-                  {/* Actions */}
-                  <div className="flex gap-2 pt-2 border-t border-neutral-100">
-                    <Link href={`/campaigns/${campaign.id}`} className="flex-1">
-                      <Button variant="outline" size="sm" className="w-full">
-                        {campaign.status === 'DRAFT' ? 'Edit Campaign' : 'View Details'}
+                    <h3 className="text-xl font-semibold text-neutral-900 mb-2">
+                      {statusFilter !== 'ALL' ? `No ${statusFilter.toLowerCase()} campaigns` : 'No campaigns yet'}
+                    </h3>
+                    <p className="text-neutral-500 mb-6">
+                      {statusFilter !== 'ALL'
+                        ? 'Try adjusting your filters or create a new campaign.'
+                        : 'Create your first campaign to send emails to your contacts.'}
+                    </p>
+                    <Link href="/campaigns/create">
+                      <Button size="lg">
+                        <Plus className="h-4 w-4" />
+                        Create Your First Campaign
                       </Button>
                     </Link>
-
-                    <Button variant="outline" size="sm" onClick={() => handleDuplicate(campaign.id)}>
-                      <Copy className="h-4 w-4" />
-                    </Button>
-
-                    {campaign.status === 'DRAFT' && (
-                      <Button
-                        variant="destructive"
-                        size="sm"
-                        onClick={() => {
-                          setCampaignToDelete(campaign.id);
-                          setShowDeleteDialog(true);
-                        }}
-                      >
-                        <Trash2 className="h-4 w-4" />
-                      </Button>
-                    )}
-
-                    {(campaign.status === 'SCHEDULED' || campaign.status === 'SENDING') && (
-                      <Button
-                        variant="destructive"
-                        size="sm"
-                        onClick={() => {
-                          setCampaignToCancel(campaign.id);
-                          setShowCancelDialog(true);
-                        }}
-                      >
-                        Cancel
-                      </Button>
-                    )}
                   </div>
                 </CardContent>
               </Card>
-            );
-          })}
+            )}
+
+            {data?.campaigns.map(campaign => {
+              const openRate = campaign.sentCount > 0 ? (campaign.openedCount / campaign.sentCount) * 100 : 0;
+              const clickRate = campaign.sentCount > 0 ? (campaign.clickedCount / campaign.sentCount) * 100 : 0;
+              const deliveryProgress =
+                campaign.totalRecipients > 0 ? (campaign.sentCount / campaign.totalRecipients) * 100 : 0;
+
+              return (
+                <Card key={campaign.id} className="hover:shadow-lg transition-all hover:border-primary/20">
+                  <CardHeader className="pb-4">
+                    <div className="flex items-start justify-between gap-4">
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-3 mb-2">
+                          <Link
+                            href={`/campaigns/${campaign.id}`}
+                            className="hover:text-primary transition-colors flex-1 min-w-0"
+                          >
+                            <CardTitle className="text-xl truncate">{campaign.name}</CardTitle>
+                          </Link>
+                          {getStatusBadge(campaign.status)}
+                        </div>
+                        {campaign.description && (
+                          <CardDescription className="line-clamp-2">{campaign.description}</CardDescription>
+                        )}
+                      </div>
+                    </div>
+                  </CardHeader>
+                  <CardContent className="space-y-4">
+                    {/* Stats Grid */}
+                    <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+                      {/* Recipients */}
+                      <div className="bg-blue-50 border border-blue-100 rounded-lg p-3">
+                        <div className="flex items-center gap-2 mb-1">
+                          <Users className="h-3.5 w-3.5 text-blue-600" />
+                          <span className="text-xs font-medium text-blue-900">Recipients</span>
+                        </div>
+                        <p className="text-lg font-bold text-blue-900">{campaign.totalRecipients.toLocaleString()}</p>
+                        {campaign.totalRecipients > 0 && (
+                          <p className="text-xs text-blue-700 mt-1">{deliveryProgress.toFixed(0)}% sent</p>
+                        )}
+                      </div>
+
+                      {/* Open Rate */}
+                      {campaign.sentCount > 0 && (
+                        <div className="bg-purple-50 border border-purple-100 rounded-lg p-3">
+                          <div className="flex items-center gap-2 mb-1">
+                            <Mail className="h-3.5 w-3.5 text-purple-600" />
+                            <span className="text-xs font-medium text-purple-900">Opens</span>
+                          </div>
+                          <p className="text-lg font-bold text-purple-900">{openRate.toFixed(1)}%</p>
+                          <p className="text-xs text-purple-700 mt-1">{campaign.openedCount.toLocaleString()} opened</p>
+                        </div>
+                      )}
+
+                      {/* Click Rate */}
+                      {campaign.clickedCount > 0 && (
+                        <div className="bg-orange-50 border border-orange-100 rounded-lg p-3">
+                          <div className="flex items-center gap-2 mb-1">
+                            <Mail className="h-3.5 w-3.5 text-orange-600" />
+                            <span className="text-xs font-medium text-orange-900">Clicks</span>
+                          </div>
+                          <p className="text-lg font-bold text-orange-900">{clickRate.toFixed(1)}%</p>
+                          <p className="text-xs text-orange-700 mt-1">
+                            {campaign.clickedCount.toLocaleString()} clicked
+                          </p>
+                        </div>
+                      )}
+
+                      {/* Scheduled For */}
+                      {campaign.scheduledFor && (
+                        <div className="bg-green-50 border border-green-100 rounded-lg p-3 md:col-span-2">
+                          <div className="flex items-center gap-2 mb-1">
+                            <Calendar className="h-3.5 w-3.5 text-green-600" />
+                            <span className="text-xs font-medium text-green-900">Scheduled</span>
+                          </div>
+                          <p className="text-sm font-semibold text-green-900">
+                            {new Date(campaign.scheduledFor).toLocaleDateString(undefined, {
+                              month: 'short',
+                              day: 'numeric',
+                              year: 'numeric',
+                            })}
+                          </p>
+                          <p className="text-xs text-green-700 mt-1">
+                            {new Date(campaign.scheduledFor).toLocaleTimeString(undefined, {
+                              hour: 'numeric',
+                              minute: '2-digit',
+                            })}
+                          </p>
+                        </div>
+                      )}
+                    </div>
+
+                    {/* Actions */}
+                    <div className="flex gap-2 pt-2 border-t border-neutral-100">
+                      <Link href={`/campaigns/${campaign.id}`} className="flex-1">
+                        <Button variant="outline" size="sm" className="w-full">
+                          {campaign.status === 'DRAFT' ? 'Edit Campaign' : 'View Details'}
+                        </Button>
+                      </Link>
+
+                      <Button variant="outline" size="sm" onClick={() => handleDuplicate(campaign.id)}>
+                        <Copy className="h-4 w-4" />
+                      </Button>
+
+                      {campaign.status === 'DRAFT' && (
+                        <Button
+                          variant="destructive"
+                          size="sm"
+                          onClick={() => {
+                            setCampaignToDelete(campaign.id);
+                            setShowDeleteDialog(true);
+                          }}
+                        >
+                          <Trash2 className="h-4 w-4" />
+                        </Button>
+                      )}
+
+                      {(campaign.status === 'SCHEDULED' || campaign.status === 'SENDING') && (
+                        <Button
+                          variant="destructive"
+                          size="sm"
+                          onClick={() => {
+                            setCampaignToCancel(campaign.id);
+                            setShowCancelDialog(true);
+                          }}
+                        >
+                          Cancel
+                        </Button>
+                      )}
+                    </div>
+                  </CardContent>
+                </Card>
+              );
+            })}
+          </div>
+
+          {/* Pagination */}
+          {data && data.totalPages > 1 && (
+            <div className="flex justify-center gap-2">
+              <Button variant="outline" onClick={() => setPage(p => Math.max(1, p - 1))} disabled={page === 1}>
+                Previous
+              </Button>
+              <span className="flex items-center px-4 text-sm text-neutral-600">
+                Page {page} of {data.totalPages}
+              </span>
+              <Button
+                variant="outline"
+                onClick={() => setPage(p => Math.min(data.totalPages, p + 1))}
+                disabled={page === data.totalPages}
+              >
+                Next
+              </Button>
+            </div>
+          )}
         </div>
 
-        {/* Pagination */}
-        {data && data.totalPages > 1 && (
-          <div className="flex justify-center gap-2">
-            <Button variant="outline" onClick={() => setPage(p => Math.max(1, p - 1))} disabled={page === 1}>
-              Previous
-            </Button>
-            <span className="flex items-center px-4 text-sm text-neutral-600">
-              Page {page} of {data.totalPages}
-            </span>
-            <Button
-              variant="outline"
-              onClick={() => setPage(p => Math.min(data.totalPages, p + 1))}
-              disabled={page === data.totalPages}
-            >
-              Next
-            </Button>
-          </div>
-        )}
-      </div>
+        <ConfirmDialog
+          open={showCancelDialog}
+          onOpenChange={setShowCancelDialog}
+          onConfirm={handleCancel}
+          title="Cancel Campaign"
+          description="Are you sure you want to cancel this campaign?"
+          confirmText="Cancel Campaign"
+          variant="destructive"
+        />
 
-      <ConfirmDialog
-        open={showCancelDialog}
-        onOpenChange={setShowCancelDialog}
-        onConfirm={handleCancel}
-        title="Cancel Campaign"
-        description="Are you sure you want to cancel this campaign?"
-        confirmText="Cancel Campaign"
-        variant="destructive"
-      />
-
-      <ConfirmDialog
-        open={showDeleteDialog}
-        onOpenChange={setShowDeleteDialog}
-        onConfirm={handleDelete}
-        title="Delete Campaign"
-        description="Are you sure you want to delete this draft campaign? This action cannot be undone."
-        confirmText="Delete Campaign"
-        variant="destructive"
-      />
-    </DashboardLayout>
+        <ConfirmDialog
+          open={showDeleteDialog}
+          onOpenChange={setShowDeleteDialog}
+          onConfirm={handleDelete}
+          title="Delete Campaign"
+          description="Are you sure you want to delete this draft campaign? This action cannot be undone."
+          confirmText="Delete Campaign"
+          variant="destructive"
+        />
+      </DashboardLayout>
     </>
   );
 }
diff --git a/apps/web/src/pages/settings/index.tsx b/apps/web/src/pages/settings/index.tsx
index 996c95d..4d998c4 100644
--- a/apps/web/src/pages/settings/index.tsx
+++ b/apps/web/src/pages/settings/index.tsx
@@ -483,17 +483,17 @@ export default function Settings() {
                 <CardContent className="pt-6 space-y-6">
                   {/* Reset Project */}
                   <div className="group">
-                    <div className="flex items-start justify-between gap-4 p-5 rounded-lg border border-gray-200 bg-white transition-all">
+                    <div className="flex items-start justify-between gap-4 p-5 rounded-lg border border-neutral-200 bg-white transition-all">
                       <div className="flex-1">
                         <div className="flex items-center gap-2 mb-2">
                           <Database className="h-4 w-4 text-orange-600" />
-                          <h4 className="font-semibold text-gray-900">Reset Project Data</h4>
+                          <h4 className="font-semibold text-neutral-900">Reset Project Data</h4>
                         </div>
-                        <p className="text-sm text-gray-600 mb-3">
+                        <p className="text-sm text-neutral-600 mb-3">
                           Clear all campaigns, contacts, workflows, templates, and events. This gives you a blank
                           project to start fresh.
                         </p>
-                        <div className="flex items-start gap-2 text-xs text-gray-500">
+                        <div className="flex items-start gap-2 text-xs text-neutral-500">
                           <span className="font-medium">Preserved:</span>
                           <span>API keys, domains, billing information</span>
                         </div>
@@ -701,7 +701,7 @@ export default function Settings() {
             </DialogHeader>
 
             <div className="py-4">
-              <label className="text-sm font-medium text-gray-700 block mb-2 text-center">
+              <label className="text-sm font-medium text-neutral-700 block mb-2 text-center">
                 Type{' '}
                 <span className="font-mono font-semibold text-orange-600 bg-orange-50 px-2 py-0.5 rounded">RESET</span>{' '}
                 to confirm
@@ -759,7 +759,7 @@ export default function Settings() {
             </DialogHeader>
 
             <div className="py-4">
-              <label className="text-sm font-medium text-gray-700 block mb-2 text-center">
+              <label className="text-sm font-medium text-neutral-700 block mb-2 text-center">
                 Type <span className="font-mono font-semibold text-red-600 bg-red-50 px-2 py-0.5 rounded">DELETE</span>{' '}
                 to confirm
               </label>
diff --git a/apps/web/src/pages/workflows/[id].tsx b/apps/web/src/pages/workflows/[id].tsx
index 4859696..cb4825b 100644
--- a/apps/web/src/pages/workflows/[id].tsx
+++ b/apps/web/src/pages/workflows/[id].tsx
@@ -395,7 +395,7 @@ export default function WorkflowEditorPage() {
                 <h1 className="text-3xl font-bold text-neutral-900">{workflow.name}</h1>
                 <span
                   className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
-                    workflow.enabled ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'
+                    workflow.enabled ? 'bg-green-100 text-green-800' : 'bg-neutral-100 text-neutral-800'
                   }`}
                 >
                   {workflow.enabled ? (
@@ -618,8 +618,8 @@ export default function WorkflowEditorPage() {
                                       : execution.status === 'FAILED'
                                         ? 'bg-red-100 text-red-800'
                                         : execution.status === 'CANCELLED'
-                                          ? 'bg-gray-100 text-gray-800'
-                                          : 'bg-gray-100 text-gray-800'
+                                          ? 'bg-neutral-100 text-neutral-800'
+                                          : 'bg-neutral-100 text-neutral-800'
                               }`}
                             >
                               {execution.status}
diff --git a/apps/web/src/pages/workflows/index.tsx b/apps/web/src/pages/workflows/index.tsx
index 2686560..7e7d533 100644
--- a/apps/web/src/pages/workflows/index.tsx
+++ b/apps/web/src/pages/workflows/index.tsx
@@ -189,7 +189,7 @@ export default function WorkflowsPage() {
                           <CardTitle>{workflow.name}</CardTitle>
                           <span
                             className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
-                              workflow.enabled ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'
+                              workflow.enabled ? 'bg-green-100 text-green-800' : 'bg-neutral-100 text-neutral-800'
                             }`}
                           >
                             {workflow.enabled ? (
diff --git a/apps/web/src/styles/globals.css b/apps/web/src/styles/globals.css
index 76d6c6d..e06fc07 100644
--- a/apps/web/src/styles/globals.css
+++ b/apps/web/src/styles/globals.css
@@ -64,7 +64,7 @@
     ::before,
     ::backdrop,
     ::file-selector-button {
-        border-color: var(--color-gray-200, currentcolor);
+        border-color: var(--color-neutral-200, currentcolor);
     }
 }