Box Shadow

Elevate components with drop shadows to create hierarchy and emphasis.

Here are some early guidelines on what elements should receive which drop shadows:

• 2 extra small (2xs) tokens are for text, icons and borders.
• Extra small (xs) tokens are for cards and buttons
• Small (sm) tokens are for hover states for cards and buttons.
• Medium (md) tokens are navigational drawers and bars.
• Large (lg) tokens are for floating action buttons.
• Extra large (xl) tokens are for modals.
• 2 extra large (2xl) tokens are for dialogs.

Components in the design system will ultimately have drop shadows automatically applied to them.