Element outline over different background

How to use it

Where an element overlaps with a different background, change from a fill to an outline, or vice versa.

When to use it

I most often see this when text is laid over a background image. But you could use it for other elements. It’s mainly useful when you don't want to cover up the background too much.

What to watch out for

With some combinations of background and foreground element, this might not work well visually.

Examples