This site is a work in progress as part of GovTech {build} hackathon. Content may be incomplete or subject to change.

Edge elevation

Edge elevation tokens for directional shadows on elements pinned to a viewport edge.

Edge shadows are directional and indicate that an element is pinned to a viewport edge, casting a shadow toward the content beneath.

CSS variable

Figma token

CSS variable

Preview

Description

Usage

--sgds-elevation-edge-top

Shadow cast upward for elements anchored to the bottom of the viewport.

Bottom navigation bars, bottom toolbars

--sgds-elevation-edge-bottom

Shadow cast downward for elements anchored to the top of the viewport.

Sticky headers, top navigation bars

Singapore Government Design System

The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.