Purpose

Document the visual pattern used in the Generated content tab of the Products Workspace, so the effect can be reused consistently in other MerchantDrafts surfaces.

Goal

Help operators identify a product at a glance without needing to read the full title first, while keeping generated content readable.

Pattern

The card uses three visual layers, implemented as real child elements instead of pseudo-elements so placement is easier to inspect and tune:

1. Image layer

• Product image sits in the lower-right area of the card.
• The image is decorative, not primary content.
• The image should remain recognizable, but not dominate the text.

1. Fade layer

• A white fade protects the text side of the card.
• Desired direction:
• left: solid white fading toward transparency to the right
• top: solid white fading downward
• bottom: solid white fading upward
• The image should stay strongest on the right side.
• The image should fade as it moves left into the text area.

1. Content layer

• Title, status pills, timestamps, sections, and tags sit above both image and fade layers.
• Readability always wins over decorative effect.

Design intent

• The image is a recognition aid.
• The fade is a readability aid.
• The text must never feel like it is fighting the image.

Recommended defaults

• Keep the decorative image optional via a setting.
• Hide the debug control when decorative images are disabled.
• Use tighter content copy for review cards:
• font-size: 11px
• line-height: 1.4

When the effect works well

• Products with clean silhouettes
• Plants and shaped objects with recognizable outlines
• Images that remain legible when reduced and partially blended

When the effect works poorly

• Placeholder images
• No-photo images
• Busy rectangular images with strong baked backgrounds
• Very pale product photography with weak separation from white UI

Future reuse

Potential reuse areas:

• Products Workspace main tab, especially in a right-side info area
• Info tab inside the product editor panel
• other MerchantDrafts review surfaces where quick product recognition helps

Brand touch

The same surface could later include the store brand identity for personalization.

Preferred WordPress sources:

1. get_custom_logo()
2. get_theme_mod( 'custom_logo' )
3. fallback: get_site_icon_url()

Use this carefully:

• subtle placement
• owner/store identity, not plugin branding overload
• avoid competing with the generated-content review itself

Implementation note

Current reuse points:

• Products Workspace Generated content cards:
• real child layers for art + fade
• decorative product image stays bottom-right
• subtle store-brand badge can sit above the layers
• product editor Info panel:
• lighter version of the same pattern
• product featured image remains decorative
• store-brand logo remains secondary

Debug principle

If the decorative effect becomes hard to tune visually:

• use a dedicated debug toggle
• make the image layer intentionally stronger
• tune placement first
• tune fades second
• soften only after placement is clearly correct