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

Text gap

Text gap tokens for spacing between text elements and inline content.

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.

Text gap

Use for spacing between text elements and inline content. Utility: sgds:gap-text-{size}.

CSS variable

Figma token

CSS variable

Mobile

≥ 1024px

≥ 1440px

Usage

--sgds-text-gap-2-xs

4px

Tightest inline spacing, e.g. icon-and-label pairs

--sgds-text-gap-xs

8px

Between labels, badges, or tag clusters

--sgds-text-gap-sm

8px

12px

Between a heading and its immediately following text

--sgds-text-gap-md

Base

12px

16px

Between related body paragraphs or list items

--sgds-text-gap-lg

16px

20px

Between a heading group and the content below

--sgds-text-gap-xl

20px

24px

Between distinct content blocks within a prose section

--sgds-text-gap-2-xl

24px

32px

Between major typographic groups on the same surface

Singapore Government Design System

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