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

Padding

Padding tokens for internal component spacing and page-level layout regions.

Storybook

Padding tokens

Padding tokens map semantic padding sizes to the SGDS spacer scale.

Token nameValueAlias tokensgds-padding-none0pxsgds-spacer-0sgds-padding-3-xs2pxsgds-spacer-1sgds-padding-2-xs4pxsgds-spacer-2sgds-padding-xs8pxsgds-spacer-3sgds-padding-sm12pxsgds-spacer-4sgds-padding-md16pxsgds-spacer-5sgds-padding-lg20pxsgds-spacer-6sgds-padding-xl24pxsgds-spacer-7sgds-padding-2-xl32pxsgds-spacer-8sgds-padding-3-xl48pxsgds-spacer-9sgds-padding-4-xl64pxsgds-spacer-10sgds-padding-5-xl96pxsgds-spacer-11

Responsive layout padding tokens

Padding for page-level containers and layout regions. Utility: sgds:p-layout-{size}.

TokenMobileTabletDesktopUsage
sgds-layout-padding-xs
16px20px24pxMinimal page-level inset for compact views
sgds-layout-padding-sm
20px24px32pxDefault page margins on small screens
sgds-layout-padding-mdBase
24px32px48pxStandard page inset padding
sgds-layout-padding-lg
32px48px64pxGenerous page-level padding for spacious layouts
sgds-layout-padding-xl
48px64px96pxMaximum page inset for wide, focused content areas

Responsive component padding tokens

Internal padding for UI components. Utility: sgds:p-component-{size}.

TokenMobileTabletDesktopUsage
sgds-component-padding-xs
16px20px24pxCompact components, e.g. small cards or chips
sgds-component-padding-sm
20px24px32pxDefault padding for interactive components
sgds-component-padding-mdBase
24px32px48pxStandard content components, e.g. panels or modals
sgds-component-padding-lg
32px48px64pxSpacious components, e.g. feature cards or callouts
sgds-component-padding-xl
48px64px96pxMaximum padding for hero blocks or full-bleed sections

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