Inverse Tokens

The problem

In a light theme (direction "down"), content is pushed to darker tones for contrast. But when a surface's tone crosses below 50 (dark enough to be "dark-mode-like"), dark content on a dark surface loses readability. The same happens in reverse for dark themes.

The solution

Systema generates inverse versions for every content and container entity:

• inv-content -- uses the base direction's hue (so the color character stays the same) but the flipped direction's tone. If normal content goes darker, inv-content goes lighter.
• inv-containers -- same principle applied to container backgrounds.

When to use inversions

Scenario	Use
Light card on a dark surface	inv-containers for the card background
White text on a dark button	inv-content for the text color
Dark overlay with light UI elements	inv-content on overlays
Accessibility mode with forced high contrast	inv tokens naturally provide the opposite contrast direction

Inverse collection merging

Direct and inverse tokens now live in the same Figma variable collection, cutting the total number of collections in half. Inverse tokens are distinguished by a path prefix:

Prefix	Meaning
inv/	Inverse container or content
on-inv/	Content computed on an inverse container
inv-on-inv/	Inverse content on an inverse container

For example, in the collection default/containers/surfaces-0:

idle/c-0/brand          -- direct container token
inv/idle/c-0/brand      -- inverse container token (same collection)

Contrast values

Inverse tokens may show different WCAG contrast ratios than their direct counterparts. This is because the flipped tone direction may hit the gamut ceiling (tone 0 or 100) sooner. The preview shows real measured WCAG contrast for both direct and inverse swatches using Material's Contrast.ratioOfTones().

---