Spacing principles

SGDS spacing helps create consistent rhythm, hierarchy, and alignment across layouts and components.

Principles

Alignment

Ensure proper alignment of elements with consistent spacing to create a clean and organised layout, reinforcing the overall structure and flow of the design.

Flexibility

Allow adaptable spacing to accommodate different screen sizes and contexts while maintaining a harmonious design, enabling the system to scale effectively across various devices.

Uniformity

Use a standardised spacing scale across the design system to ensure uniformity and coherence in layouts, making the interface predictable and easier to navigate.

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.