Visual hierarchy
Use elevation to show importance and help users prioritise content.
Principles and characteristics for using elevation to show hierarchy, separate surfaces, and focus layered content.
Use elevation to show importance and help users prioritise content.
Keep elevation subtle so it adds depth without taking focus from content.
Use opacity backgrounds to focus layered surfaces, such as modals and sheets.
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.
An 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.