Global layer
Use global layers to keep navigation, modals, and notifications in a consistent order.
Layer (z-index) controls the stacking order of UI elements. It determines which components appear above or below others on the screen.
Use global layers to keep navigation, modals, and notifications in a consistent order.
Use local layers so dropdowns, tooltips, and popovers stay within their parent context.
Show layers from highest to lowest z-index. Users see the top of the stack first.
Some components in the diagram show a small number in brackets — like Toast (3) or Main nav (2). That number is the component's position inside its layer. Add it to the layer's base value to get the final z-index.
For example, Toast (3) lives in the overlay layer (base value 800), so its actual z-index is 800 + 3 = 803. Main nav (2) lives in the floating layer (base value 400) at 402 — so Toast sits well above the nav.
Layers are shown from highest to lowest z-index — the top of each stack is what your user sees first. The scale runs from base (0) through raised (100), floating (400), overlay (800), up to modal (1600).
The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.