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

Font size

Apply SGDS font size utilities for text that needs to follow the system type scale.

Font size utilities

Semantic font size utility classes control text size using tokens mapped to the SGDS type scale. These sizes are responsive by default, automatically scaling at tablet (1024px) and desktop (1440px) breakpoints to ensure consistent and readable typography across devices.

Display
SGDS tailwind tokenMobileTabletDesktopPreview
sgds:text-display-lg
40px52px56px

Display Large

sgds:text-display-md
36px44px48px

Display Medium

sgds:text-display-sm
32px36px40px

Display Small

Heading
SGDS tailwind tokenMobileTabletDesktopPreview
sgds:text-heading-xl
32px36px40px

Heading XL

sgds:text-heading-lg
28px30px32px

Heading Large

sgds:text-heading-md
24px26px28px

Heading Medium

sgds:text-heading-sm
20px22px24px

Heading Small

Subtitle
SGDS tailwind tokenMobileTabletDesktopPreview
sgds:text-subtitle-md
18px20px20px

Subtitle Medium

sgds:text-subtitle-sm
16px16px16px

Subtitle Small

Body
SGDS tailwind tokenMobileTabletDesktopPreview
sgds:text-body-lg
18px20px20px

Body Large

sgds:text-body-md
16px16px16px

Body Medium

sgds:text-body-sm
14px14px14px

Body Small

Label
SGDS tailwind tokenMobileTabletDesktopPreview
sgds:text-label-lg
18px20px20px

Label Large

sgds:text-label-md
16px16px16px

Label Medium

sgds:text-label-sm
14px14px14px

Label Small

sgds:text-label-xs
12px12px12px

Label XS

Caption
SGDS tailwind tokenMobileTabletDesktopPreview
sgds:text-caption-md
14px14px14px

Caption Medium

Overline
SGDS tailwind tokenMobileTabletDesktopPreview
sgds:text-overline-md
14px14px14px

Overline Medium

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