Shadow Values

Consistent elevation system using subtle shadows and borders for clarity

The design system employs a tiered shadow approach – none, low, medium, high – to create visual hierarchy. Combining these tiers with subtle borders reduces the need for excessive blurring to achieve separation.

Shadow Values (Light Mode) - This section details specific shadow value configurations.

Dark mode: reduce opacity ~20% and use lighter spread: e.g., shadow-2

In dark mode, a reduced opacity of approximately 20% is recommended for shadows to maintain legibility. Utilizing lighter shadow spreads, such as ‘shadow-2’, further enhances contrast.

Combining these adjustments with 1px borders (#e1e8f0 light, #1f2937 dark) significantly improves visual clarity and reduces reliance on blur effects.

Use no shadow for data-heavy tables to reduce noise

For data-rich tables, it’s best practice to avoid using shadows altogether. Shadows should never be the sole indicator of focus; visible rings provide a more reliable visual cue.

Ensure sufficient contrast between surfaces when utilizing shadows – they must not obscure text or other crucial design elements. Prioritize GPU-friendly shadow implementations with limited blur radii.

Frequently asked questions