Operational icons on color backgrounds

Summary

The color-background counterpart to the previous icon page: the same operational icon set reversed to white inside a large orange panel, with a left column spelling out when icons flip to white and how the cheese and spicy icons get special highlight treatment.

Visual description

Warm cream background with the running header and page "115." The left column has a two-line bold brown heading "Operational Icons on Color Backgrounds" and several serif paragraphs describing the reversal rule (icons go white on any color packaging), the special white-circle highlight for the Cheese and Spicy icons, the Flaming Orange vs Melty Yellow cheese variants, and the same 24-84pt size limits. The right two-thirds is a single large orange rectangle holding the same six-column icon grid as page 114 but rendered in white, with faint white captions. The bottom three positions add highlighted variants: a Flaming Orange cheese, a Melty Yellow cheese, and a Fiery Red spicy icon shown inside white circles. A two-line legal note sits in the footer.

Key takeaway

Pairing a light-background icon page with a dark-panel reversal page so the system's two contexts sit side by side in the deck and are read as one rule. Dropping the entire grid into a single brand-color panel is a fast, legible way to prove every icon survives reversal, and the white-circle highlight for two special icons is a neat exception-handling pattern.

Reuse notes

Reuse as the "icons on color" half of any two-page icon spec. The single large color panel is cleaner than tinting each icon cell individually. Note the captions go low-contrast white-on-orange here, which is acceptable for a reference but would fail accessibility if reused as live UI labels.