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 tokens for shadows that lift elements above the page surface.

Surface shadows lift elements above the page. Use progressively higher levels as elements sit further from the base surface.

CSS variable

Figma token

CSS variable

Preview

Description

Usage

--sgds-elevation-surface-1

Subtle lift for elements resting close to the page surface.

Chips, tags, input fields

--sgds-elevation-surface-2

Low elevation for cards and panels on a flat surface.

Cards, inline panels

--sgds-elevation-surface-3

Medium elevation for floating elements above content.

Popovers, floating toolbars

--sgds-elevation-surface-4

High elevation for overlays appearing above the main view.

Drawers, toasts, notifications

--sgds-elevation-surface-5

Maximum elevation for critical overlays requiring full focus.

Modals, dialogs

Singapore Government Design System

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