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 size

Understand the primitive font size tokens that form the SGDS type scale.

Storybook

Font size tokens

Font size tokens define every step of the type scale. Use these tokens to build custom text styles that remain in sync with system typography.

TokenValue (px/rem)Preview
sgds-font-size-12
12px / 0.75rem
Ag
sgds-font-size-14
14px / 0.875rem
Ag
sgds-font-size-16Base
16px / 1rem
Ag
sgds-font-size-18Responsive
18px / 1.125rem
Ag
sgds-font-size-20
20px / 1.25rem
Ag
sgds-font-size-22Responsive
22px / 1.375rem
Ag
sgds-font-size-24
24px / 1.5rem
Ag
sgds-font-size-26Responsive
26px / 1.625rem
Ag
sgds-font-size-28
28px / 1.75rem
Ag
sgds-font-size-30Responsive
30px / 1.875rem
Ag
sgds-font-size-32
32px / 2rem
Ag
sgds-font-size-36Responsive
36px / 2.25rem
Ag
sgds-font-size-40
40px / 2.5rem
Ag
sgds-font-size-44Responsive
44px / 2.75rem
Ag
sgds-font-size-48
48px / 3rem
Ag
sgds-font-size-52Responsive
52px / 3.25rem
Ag
sgds-font-size-56
56px / 3.5rem
Ag

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