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

Letter spacing

Understand the letter spacing tokens that tune character spacing across SGDS text styles.

Storybook

Letter spacing tokens

Letter spacing tokens tune the horizontal rhythm of typography. SGDS pairs tighter values with larger headings and wider values with compact overline labels.

TokenValueUsage
sgds-letter-spacing-tighter
-1px / -0.0625rem

Display large

Display medium

Display small

sgds-letter-spacing-tight
-0.4px / -0.025rem

H1

H2

H3

H4

sgds-letter-spacing-normalDefault
0px / 0rem

Body text

Label

Caption

Link
sgds-letter-spacing-wide
1px / 0.0625rem

Overline

Category label

sgds-letter-spacing-wider
2px / 0.125rem

Decorative label

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