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

Foundations

Design tokensOverviewToken architectureToken namingBorderOverviewRadiusWidthColourOverviewBrand colourPrimitive colourSemantic colourElevationOverviewEdge elevationSurface elevationIconographyOverviewIcon sizeIcon libraryLayerOverviewZ-indexLayoutOverviewResponsive gridBreakpointMotionOverviewSpacingOverviewSpacer scaleGapPaddingMarginTypographyOverviewText stylesDisplayHeadingsSubtitlesParagraph bodyCaptionsLabelsLinksListsOverlineType systemFont familyFont sizeFont weightLetter spacingLine heightParagraph spacingText decorationText transform

Overview

SGDS layout principles help structure pages with consistent spacing, alignment, and hierarchy across devices.

Principles

Predictable

Use familiar regions and clear spatial organisation so users know where to look.

Consistent

Keep a steady visual rhythm so layouts feel consistent and easier to scale.

Hierarchical

Give elements a clear visual order so users can spot what matters first.

Singapore Government Design System

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

Past VersionsSGDS v1SGDS v2