Drop shadows cast a shadow behind objects, and their strength expresses depth. We define five elevation levels from Level1 to Level5.

Level0 is the body (surface), and most UI components sit at Level0. Align levels with common UI behavior—for example, the open menu of a DropdownMenu is Level1, Toast is Level3, and Modal Dialog and Drawer are Level5.

Notes for use in Figma

Drop shadows are composed of several values, such as shadow color, position, and blur. Figma Variables do not yet support grouped tokens (called Composite Tokens). Therefore, shadows are defined as Effect Styles rather than Variables, so the application method differs from other tokens.

z-index is the CSS property that controls stacking order; higher values mean higher layers. We define z-index values as system tokens, but because they are implementation tokens, you do not need to consider them in Figma.

Shadows represent visual elevation, while z-index represents implementation elevation. Carefully controlling z-index values is important for robust UI, so token names carry strong semantic meaning. See the System Token list for details.