We use various techniques to convey depth in our user interface. Most importantly, we use background color and shadows.
In dark mode, lighter colors appear closer to the user. Use this to your advantage. If designing a floating element, like a modal, choose a lighter background color. This will help create a sense of elevation.
Elements with big shadows appear closer to the user. Choose shadows that appropriately conveys the right amount of depth.
To make Rerun consistent, use these tokens when possible.
Alias.Shadow.Menu
Used for menus, such as selects
0px 0px 0px 0px rgba(0, 0, 0, .2)
Alias.Shadow.Popover
Used for popovers and other semi-modal elements
0px 9px 18px 0px rgba(0, 0, 0, .2)
Alias.Shadow.Modal
Used for modal views
0px 21px 42px 0px rgba(0, 0, 0, .2)
If possible, avoid using these.
Global.Shadow.100
0px 0px 0px 0px rgba(0, 0, 0, .2)
Global.Shadow.200
0px 3px 6px 0px rgba(0, 0, 0, .2)
Global.Shadow.300
0px 6px 12px 0px rgba(0, 0, 0, .2)
Global.Shadow.400
0px 9px 18px 0px rgba(0, 0, 0, .2)
Global.Shadow.500
0px 12px 24px 0px rgba(0, 0, 0, .2)
Global.Shadow.600
0px 15px 30px 0px rgba(0, 0, 0, .2)
Global.Shadow.700
0px 18px 36px 0px rgba(0, 0, 0, .2)
Global.Shadow.800
0px 21px 42px 0px rgba(0, 0, 0, .2)
Global.Shadow.900
0px 24px 48px 0px rgba(0, 0, 0, .2)
Global.Shadow.1000
0px 27px 54px 0px rgba(0, 0, 0, .2)