Complete reference of all elevation CSS tokens and their values.
Elevation should clearly indicate the importance of elements, helping users prioritize content and navigate the interface effectively.
Elevation effects should be subtle and natural, adding depth without overwhelming the design or drawing unnecessary attention to themselves.
Default elevation level that elevates navigation or information temporarily appearing in front of other surfaces, such as dropdown menu and tooltips. The elevation level is also applied to actionable elements after hovering over like cards and tiles.
A drop shadow on the edge of a top or bottom component, allowing surfaces to move behind when scrolled such as header and action bar.
A opacity background can bring focus by increasing the visual contrast of a layered surface like modals and sheets.
The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.