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

Spacing utilities

SGDS spacing utilities for applying margin and padding values in code.

Spacing utilities apply the SGDS spacing scale directly in code. Use them for margin, padding, axis-specific spacing, and one-off layout adjustments.

Multiplier

SGDS tailwind token

Value

sgds:m-1

4 px

sgds:m-2

8 px

sgds:m-3

12 px

sgds:m-4

16 px

sgds:m-5

20 px

sgds:m-6

24 px

sgds:m-8

32 px

sgds:m-12

48 px

sgds:m-16

64 px

sgds:m-24

96 px

Use a consistent scale: stick to named utilities rather than arbitrary values.
Layer spacing: combine axis-specific utilities for semantic meaning.
Maintain vertical rhythm: use sgds:my-* to keep vertical spacing consistent.
Use component padding: apply sgds:p-* for internal component spacing.
Set layout margins: use sgds:m-*, sgds:mx-*, and sgds:my-* for component spacing.

Singapore Government Design System

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