Split level background transition

How to use it

Change the background from one colour to another, but add a file folder tab shape to the transition.

When to use it

By making the background colours for two sections interact in this way, they stay connected. It looks as if the two areas are interlocked or fitting together. If you use straight line transitions above and below these two areas, it'll increase the effect even more, and make it look like they're two halves of a whole. This is a visually interesting way of giving two areas very different background colours, but still making them feel related to each other compared to the other content on the page. You can also use the "alcoves" created by the split level to add actions or titles to the relevant sections, if you don't like the wasted space.

What to watch out for

If you use this technique and the two areas aren't related, the user might still assume they are.

As mentioned above, you're losing space when you use this technique, so make sure it works for your default spacing, or it'll have the effect of moving the two areas too far apart.

Examples

Example