X Toasts

Summary

A sleek animated stack of X notification toasts floats on a black background.

Visual description

A dark grey rounded rectangle floats centered on a black background. It contains a vertical list of notifications featuring small circular avatars, white and light grey sans-serif text, and small colorful icons. The top notification is the most prominent with high-contrast white text, while the lower two are dimmed with reduced opacity.

Key takeaway

Use a descending opacity scale for list items to create a clear visual hierarchy of importance.

Reuse notes

Reach for this as a motion still reference. Pairs with clean, high contrast directions. Original by Benji Taylor.