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

Layout gap

Layout gap tokens for spacing between page sections and major layout regions.

Gap tokens

Gap tokens control spacing between flex and grid children. SGDS provides three semantic categories that scale responsively across breakpoints: text gap for typography, layout gap for page structure, and component gap for spacing inside components.

Layout gap

Use for spacing between page sections and major layout regions. Utility: sgds:gap-layout-{size}.

CSS variable

Figma token

CSS variable

Mobile

≥ 1024px

≥ 1440px

Usage

--sgds-layout-gap-2-xs

4px

12px

16px

Minimal separation between tightly related layout zones

--sgds-layout-gap-xs

8px

16px

20px

Compact layout regions, e.g. dense dashboards

--sgds-layout-gap-sm

12px

20px

24px

Small section gaps in constrained layouts

--sgds-layout-gap-md

Base

16px

24px

32px

Standard gap between page sections or content areas

--sgds-layout-gap-lg

20px

32px

48px

Large gaps between major page sections

--sgds-layout-gap-xl

24px

48px

64px

Maximum layout gap for hero or feature sections

Singapore Government Design System

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