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

Component padding

Component padding tokens for internal spacing in UI components.

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.

Component padding

Internal padding for UI components. Utility: sgds:p-component-{size}.

CSS variable

Figma token

CSS variable

Mobile

≥ 1024px

≥ 1440px

Usage

--sgds-component-padding-xs

16px

20px

24px

Compact components, e.g. small cards or chips

--sgds-component-padding-sm

20px

24px

32px

Default padding for interactive components

--sgds-component-padding-md

Base

24px

32px

48px

Standard content components, e.g. panels or modals

--sgds-component-padding-lg

32px

48px

64px

Spacious components, e.g. feature cards or callouts

--sgds-component-padding-xl

48px

64px

96px

Maximum padding for hero blocks or full-bleed sections

Singapore Government Design System

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