Feat: Configure colors according to the design draft#3221 (#9301)

### What problem does this PR solve?

Feat: Configure colors according to the design draft#3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/components/ui/card.tsx

@@ -8,10 +8,7 @@ const Card = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn(
-      'rounded-lg  bg-background-card  text-card-foreground shadow-sm',
-      className,
-    )}
+    className={cn('rounded-lg  bg-bg-card  shadow-sm', className)}
     {...props}
   />
 ));