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

Margin

Margin tokens that map directly to the SGDS spacer scale for consistent element offset.

Storybook

Margin tokens

Margin tokens map directly to fixed spacer primitives. Unlike gap and padding tokens, margin values do not change across breakpoints.

Token nameValueAlias token
sgds-margin-none
0pxsgds-spacer-0
sgds-margin-3-xs
2pxsgds-spacer-1
sgds-margin-2-xs
4pxsgds-spacer-2
sgds-margin-xs
8pxsgds-spacer-3
sgds-margin-sm
12pxsgds-spacer-4
sgds-margin-mdBase
16pxsgds-spacer-5
sgds-margin-lg
20pxsgds-spacer-6
sgds-margin-xl
24pxsgds-spacer-7
sgds-margin-2-xl
32pxsgds-spacer-8
sgds-margin-3-xl
48pxsgds-spacer-9
sgds-margin-4-xl
64pxsgds-spacer-10
sgds-margin-5-xl
96pxsgds-spacer-11

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