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

Spacer scale

Primitive spacer tokens that define the base SGDS spacing scale.

Storybook

Spacer scale tokens

The spacer scale is the primitive foundation of the SGDS spacing system. Semantic spacing tokens reference these values. Use the numbered spacer tokens only when no semantic token fits the context.

TokenrempxVisual
sgds-spacer-0
0rem0px
sgds-spacer-1
0.125rem2px
sgds-spacer-2
0.25rem4px
sgds-spacer-3
0.5rem8px
sgds-spacer-4
0.75rem12px
sgds-spacer-5Base
1rem16px
sgds-spacer-6
1.25rem20px
sgds-spacer-7
1.5rem24px
sgds-spacer-8
2rem32px
sgds-spacer-9
3rem48px
sgds-spacer-10
4rem64px
sgds-spacer-11
6rem96px
sgds-spacer-12
8rem128px

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