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

Layout padding

Layout padding tokens for page-level containers and layout regions.

Padding tokens

Padding tokens define the internal spacing of components and layout regions. Like gap tokens, they scale responsively across breakpoints. Apply them with shorthand utilities such as sgds:p-component-md, sgds:px-component-sm, or sgds:py-layout-lg.

Layout padding

Padding for page-level containers and layout regions. Utility: sgds:p-layout-{size}.

CSS variable

Figma token

CSS variable

Mobile

≥ 1024px

≥ 1440px

Usage

--sgds-layout-padding-xs

16px

20px

24px

Minimal page-level inset for compact views

--sgds-layout-padding-sm

20px

24px

32px

Default page margins on small screens

--sgds-layout-padding-md

Base

24px

32px

48px

Standard page inset padding

--sgds-layout-padding-lg

32px

48px

64px

Generous page-level padding for spacious layouts

--sgds-layout-padding-xl

48px

64px

96px

Maximum page inset for wide, focused content areas

Singapore Government Design System

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