Elevation

There are three different levels how UI Elements can overlap each other and which level of attention they required from the User.

Toast and Tooltips

Dropdowns

A thicker border helps the dropdown stand out more against other UI elements. We can see an immediate effect from each option as we select them from the dropdown. Because we can see the changes upon selection, there is no additional overlay used to darken the interface. Since dark borders and shadows don't work in a dark interface, we use a subtle lighter shade of grey to communicate the element is on top of others.

Modals

Modals have the same visual styling as Dropdowns but since they required immediate attention from the User, other UI elements get dimmed with a 30% black overlay.