diff --git a/packages/tailwind-config/index.cjs b/packages/tailwind-config/index.cjs
index 1564454d8..03c358dc3 100644
--- a/packages/tailwind-config/index.cjs
+++ b/packages/tailwind-config/index.cjs
@@ -45,6 +45,11 @@ module.exports = {
           DEFAULT: 'hsl(var(--card))',
           foreground: 'hsl(var(--card-foreground))',
         },
+        'field-card': {
+          DEFAULT: 'hsl(var(--field-card))',
+          border: 'hsl(var(--field-card-border))',
+          foreground: 'hsl(var(--field-card-foreground))',
+        },
         widget: {
           DEFAULT: 'hsl(var(--widget))',
           // foreground: 'hsl(var(--widget-foreground))',
diff --git a/packages/ui/primitives/document-flow/add-fields.tsx b/packages/ui/primitives/document-flow/add-fields.tsx
index 9e3ba682e..8a7458585 100644
--- a/packages/ui/primitives/document-flow/add-fields.tsx
+++ b/packages/ui/primitives/document-flow/add-fields.tsx
@@ -316,9 +316,9 @@ export const AddFieldsFormPartial = ({
           {selectedField && (
             <Card
               className={cn(
-                'bg-documenso pointer-events-none fixed z-50 cursor-pointer border-2 bg-opacity-20 backdrop-blur-[1.2px]',
+                'bg-field-card/80 pointer-events-none fixed z-50 cursor-pointer border-2 backdrop-blur-[1px]',
                 {
-                  'border-primary': isFieldWithinBounds,
+                  'border-field-card-border': isFieldWithinBounds,
                   'opacity-50': !isFieldWithinBounds,
                 },
               )}
@@ -329,7 +329,7 @@ export const AddFieldsFormPartial = ({
                 width: fieldBounds.current.width,
               }}
             >
-              <CardContent className="text-foreground flex h-full w-full items-center justify-center p-2">
+              <CardContent className="text-field-card-foreground flex h-full w-full items-center justify-center p-2">
                 {FRIENDLY_FIELD_TYPE[selectedField]}
               </CardContent>
             </Card>
diff --git a/packages/ui/primitives/document-flow/field-item.tsx b/packages/ui/primitives/document-flow/field-item.tsx
index f8e8d8404..9c2d5092c 100644
--- a/packages/ui/primitives/document-flow/field-item.tsx
+++ b/packages/ui/primitives/document-flow/field-item.tsx
@@ -128,16 +128,16 @@ export const FieldItem = ({
       )}
 
       <Card
-        className={cn('bg-documenso h-full w-full bg-opacity-20 backdrop-blur-[1.2px]', {
-          'border-primary': !disabled,
-          'border-primary/80': active,
+        className={cn('bg-field-card/80 h-full w-full backdrop-blur-[1px]', {
+          'border-field-card-border': !disabled,
+          'border-field-card-border/80': active,
         })}
       >
         <CardContent
           className={cn(
-            'text-foreground flex h-full w-full flex-col items-center justify-center p-2',
+            'text-field-card-foreground flex h-full w-full flex-col items-center justify-center p-2',
             {
-              'text-muted-foreground/50': disabled,
+              'text-field-card-foreground/50': disabled,
             },
           )}
         >
diff --git a/packages/ui/styles/theme.css b/packages/ui/styles/theme.css
index fe7bfa087..5596f98f4 100644
--- a/packages/ui/styles/theme.css
+++ b/packages/ui/styles/theme.css
@@ -18,6 +18,10 @@
     --card-border-tint: 112 205 159;
     --card-foreground: 222.2 47.4% 11.2%;
 
+    --field-card: 95 74% 90%;
+    --field-card-border: 95.08 71.08% 67.45%;
+    --field-card-foreground: 222.2 47.4% 11.2%;
+
     --widget: 0 0% 97%;
 
     --border: 214.3 31.8% 91.4%;