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

Font weight

Understand the font weight tokens that control emphasis, hierarchy, and readability in SGDS text.

Storybook

Font weight tokens

Font weight tokens control text stroke thickness. Use the semantic weight that matches the role of the content instead of choosing arbitrary numeric weights.

TokenValuePreview
sgds-font-weight-light
300

Typography example

sgds-font-weight-regular
400

Typography example

sgds-font-weight-semibold
600

Typography example

sgds-font-weight-bold
700

Typography example

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