Shadows and glows are visual effects that add depth, emphasis, and interactivity to UI elements. This system provides a set of standardized shadows and focus glows for both light and dark modes, ensuring consistency and enhancing the user experience across the interface.

Key components

1. Shadows:

   • Four levels: S, M, L, XL

   • Progressively increasing depth and spread

   • Adapted for both light and dark modes

2. Focus Glows:

   • Three color variants: Primary, Red, Gray

   • Designed to highlight interactive elements

   • Visible in both light and dark modes

Good practices

1. Consistency: Use standardized shadow levels across the interface

2. Hierarchy: Leverage different shadow sizes to create depth and importance

3. Accessibility: Ensure sufficient contrast between shadows and backgrounds

4. Purpose: Use focus glows to enhance keyboard navigation and touch feedback

5. Performance: Be mindful of shadow rendering impact on performance

6. Responsiveness: Adjust shadow properties for different screen sizes if necessary

7. Documentation: Clearly define when to use each shadow level and focus glow