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

Surface elevation

Surface elevation utility classes for applying SGDS shadow depth in code.

Surface elevation

Use surface elevation when a component floats above the page or another surface. Pair elevation utilities with a surface background such as sgds:bg-surface-raised and an appropriate radius token so layers feel intentional.

SGDS tailwind tokenUsagePreview
sgds:shadow-1
Subtle elevation for elements resting close to the page surface.
1
sgds:shadow-2
Default raised treatment for cards, tiles, and small panels.
2
sgds:shadow-3
Use for active cards, expanded sections, and floating toolbars.
3
sgds:shadow-4
Prominent elevation for modals, dialogs, popovers, and overlays.
4
sgds:shadow-5
Maximum elevation for top-level overlays, drawers, and focused layers.
5

Singapore Government Design System

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