Fix

components/shopify/product-detail/product-detail-info.tsx

@@ -172,12 +172,22 @@ const ProductDetailInfo: React.FC<ProductDetailInfoProps> = ({
                           : 'ring-1 ring-border hover:ring-foreground/40'
                       } ${isSoldOut ? 'option-unavailable text-foreground/60 opacity-60' : ''}`}
                       style={{
-                        backgroundColor: background,
+                        // With no colour and no image the circle would be fully
+                        // transparent, leaving just a hairline ring that
+                        // antialiases unevenly and reads as a speckled border.
+                        // A neutral fill makes the initial-letter fallback look
+                        // deliberate. Set inline so it beats the ghost variant's
+                        // hover background.
+                        backgroundColor:
+                          background ??
+                          (image ? undefined : 'var(--color-muted)'),
                         backgroundImage: image ? `url(${image})` : undefined,
                       }}
                     >
                       {!background && !image && (
-                        <span className="text-[10px]">{value.name.at(0)}</span>
+                        <span className="text-[10px] font-medium uppercase text-muted-foreground">
+                          {value.name.at(0)}
+                        </span>
                       )}
                     </Button>
                   );

components/shopify/product-filters.tsx

@@ -208,10 +208,15 @@ const ProductFilters: React.FC<ProductFiltersProps> = ({
                                 ? 'ring-2 ring-foreground ring-offset-2'
                                 : 'ring-1 ring-border hover:ring-foreground/40'
                             }`}
-                            style={{ backgroundColor: color ?? undefined }}
+                            style={{
+                              // A colourless swatch would otherwise be a fully
+                              // transparent circle behind a hairline ring,
+                              // which antialiases into a speckled border.
+                              backgroundColor: color ?? 'var(--color-muted)',
+                            }}
                           >
                             {!color && (
-                              <span className="text-[10px]">
+                              <span className="text-[10px] font-medium uppercase text-muted-foreground">
                                 {value.label.at(0)}
                               </span>
                             )}