The Badge component with intent="none" (the default) uses --wpds-color-bg-surface-neutral (#f8f8f8) as its background color. When this badge is rendered inside a container that also uses surface-neutral as its background, the badge becomes visually indistinguishable from its surroundings because the background values are identical.

/* Badge none intent */
.is-none-intent {
    background-color: var(--wpds-color-bg-surface-neutral); /* #f8f8f8 */
    color: var(--wpds-color-fg-content-neutral-weak); /* #6d6d6d */
}

The badge text (#6d6d6d) is still readable, but without any visible badge boundary, it just looks like floating gray text rather than a badge element. The pill shape and visual containment that a badge is supposed to provide are lost.

Steps to reproduce

1. Render a Badge with intent="none" (or no intent, since none is the default) inside a container with a surface-neutral background.
2. Observe that the badge background is indistinguishable from the container background.

Expected behavior

The badge should be visually distinct from its container regardless of the background it's placed on. The pill shape should be perceivable.

Possible solutions

A few options to consider:

• Use a slightly darker/different background token for the none intent (e.g. --wpds-color-bg-surface-neutral-weak at #f0f0f0). The trade-off here is that the problem will still occur when badges are rendered on neutral-weak, so I'd rule this out.
• Add a subtle border (e.g. using a neutral border token) so the badge boundary is visible even when the backgrounds match. (We'll need a solution to this issue if we go this route).
• Any other ideas? :)

cc @WordPress/gutenberg-components