Get startedFoundationsComponentsTemplatesBlocksAIStories
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 spacing helps create consistent rhythm, hierarchy, and alignment across layouts and components.

Principles

Alignment

Use consistent spacing to align elements and support the layout structure.

Flexibility

Let spacing adapt across screen sizes while keeping layouts balanced.

Uniformity

Use the spacing scale consistently so layouts stay predictable.

Spacing foundation

Base size

SGDS follows a 4-point system. This allows us to create consistency across the user interface while decreasing design complexity.

4-point

Progression

SGDS combines arithmetic progression (AP) and geometric progression (GP) into 12 spacing sizes. The 28 px and 256 px sizes are not included.

Arithmetic progression (AP)

Each step increases by 4.

Formula arithmetic progression (AP)
an = a1 + (n - 1) * d

a_n = nth terma_1 = first termd = common difference

Sample
481216
Geometric progression (GP)

Each step doubles.

Formula geometric progression (GP)
an = a1 * rn - 1

a_n = nth terma_1 = first termr = common ratio

Sample
24812
2
4
8
12
16
20
24
32
48
64
96
128

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