Get startedFoundationsComponentsTemplatesBlocksAIStories
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

Letter spacing

Apply SGDS letter spacing utilities to tune display text, headings, body text, and compact labels.

Letter spacing utilities

Letter spacing (tracking) controls the horizontal space between characters. SGDS pairs specific tracking values with typographic roles — tighter for large display text, normal for body and UI text, and wider for overlines.

SGDS tailwind tokenValueUsagePreview
sgds:tracking-tighter
-1pxLarge display headings

Typography

sgds:tracking-tight
-0.4pxSection headings (H1–H4)

Typography

sgds:tracking-normal
0pxBody, labels, captions, links

Typography

sgds:tracking-wide
1pxOverlines (uppercase small text)

Typography

sgds:tracking-wider
2pxDecorative or spaced-out labels

Typography

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