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

Component gap

Component gap tokens for spacing between elements within a component.

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.

Component gap

Use for spacing between elements within a component. Utility: sgds:gap-component-{size}.

CSS variable

Figma token

CSS variable

Mobile

≥ 1024px

≥ 1440px

Usage

--sgds-component-gap-xs

8px

16px

20px

Between tightly grouped elements inside a component

--sgds-component-gap-sm

12px

20px

24px

Default gap for most component internals

--sgds-component-gap-md

Base

16px

24px

32px

Between larger sub-sections within a component

--sgds-component-gap-lg

20px

32px

48px

Spacious component layouts, e.g. card groups

--sgds-component-gap-xl

24px

48px

64px

Maximum separation within expansive component regions

Singapore Government Design System

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