Elevation
Semantic tokens for elevation provide a consistent way to define and apply shadow effects across components in the design system. These tokens represent various levels of depth and hierarchy, enhancing the visual structure and interaction feedback within the user interface.
Is inherited by the box-shadow or text-shadow property.
| Sample | Token | Base token value |
|---|---|---|
| $cds-elevation-low | $cdsbt-shadow-1 0 0.0625rem 0.0625rem rgba(0, 0, 0, 0.1) | |
| $cds-elevation-subtle | $cdsbt-shadow-2 0 0.125rem 0.125rem rgba(0, 0, 0, 0.1) | |
| $cds-elevation-medium | $cdsbt-shadow-4 0 0.25rem 0.25rem rgba(0, 0, 0, 0.1) | |
| $cds-elevation-raised | $cdsbt-shadow-8 0 0.5rem 0.5rem rgba(0, 0, 0, 0.1) | |
| $cds-elevation-high | $cdsbt-shadow-16 0 1rem 1rem rgba(0, 0, 0, 0.1) |
Using shadows in dark mode is generally discouraged, as they can be difficult to perceive and may not provide sufficient contrast against dark backgrounds. Instead, it is recommended to use background shades or subtle highlights to create depth and separation.This approach ensures better visibility and a more accessible design. This recommendation is under development and may evolve as we refine best practices for dark mode.