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

Foundations

Design tokensOverviewToken architectureToken namingBorderOverviewRadiusWidthColourOverviewBrand colourPrimitive colourSemantic colourElevationOverviewEdge elevationSurface elevationIconographyOverviewIcon sizeIcon libraryLayerOverviewZ-indexLayoutOverviewResponsive gridBreakpointMotionOverviewSpacingOverviewSpacer scaleGapPaddingMarginTypographyOverviewText stylesDisplayHeadingsSubtitlesParagraph bodyCaptionsLabelsLinksListsOverlineType systemFont familyFont sizeFont weightLetter spacingLine heightParagraph spacingText decorationText transform

Paragraph spacing

Understand the paragraph spacing tokens that set consistent space after text blocks.

Paragraph spacing tokens

Paragraph spacing tokens control the vertical margin after text blocks. Use them to keep prose rhythm consistent instead of manually setting paragraph margins.

TokenValueUsage
sgds-paragraph-spacing-noneDefault
0px / 0rem
Used for all types

Body large

Body medium

Caption

sgds-paragraph-spacing-sm
8px / 0.5rem
-
sgds-paragraph-spacing-md
16px / 1rem
Used for Caption only

Caption

Next caption

sgds-paragraph-spacing-lg
24px / 1.5rem
Used for Body medium and small only

Body medium

Body small

sgds-paragraph-spacing-xl
32px / 2rem
Used for Body large only

Body large

Next body large paragraph

Singapore Government Design System

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

Past VersionsSGDS v1SGDS v2