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

Gap

Gap tokens for spacing between layout regions, component elements, and text content.

Storybook

Gap tokens

Gap tokens define the space between layout regions, component elements, and text content.

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

Responsive layout gap tokens

Use for spacing between page sections and major layout regions. Utility: sgds:gap-layout-{size}.

TokenMobileTabletDesktopUsage
sgds-layout-gap-2-xs
4px12px16pxMinimal separation between tightly related layout zones
sgds-layout-gap-xs
8px16px20pxCompact layout regions, e.g. dense dashboards
sgds-layout-gap-sm
12px20px24pxSmall section gaps in constrained layouts
sgds-layout-gap-mdBase
16px24px32pxStandard gap between page sections or content areas
sgds-layout-gap-lg
20px32px48pxLarge gaps between major page sections
sgds-layout-gap-xl
24px48px64pxMaximum layout gap for hero or feature sections

Responsive component gap tokens

Use for spacing between elements within a component. Utility: sgds:gap-component-{size}.

TokenMobileTabletDesktopUsage
sgds-component-gap-xs
8px16px20pxBetween tightly grouped elements inside a component
sgds-component-gap-sm
12px20px24pxDefault gap for most component internals
sgds-component-gap-mdBase
16px24px32pxBetween larger sub-sections within a component
sgds-component-gap-lg
20px32px48pxSpacious component layouts, e.g. card groups
sgds-component-gap-xl
24px48px64pxMaximum separation within expansive component regions

Responsive text gap tokens

Use for spacing between text elements and inline content. Utility: sgds:gap-text-{size}.

TokenMobileTabletDesktopUsage
sgds-text-gap-2-xs
4px4px4pxTightest inline spacing, e.g. icon-and-label pairs
sgds-text-gap-xs
8px8px8pxBetween labels, badges, or tag clusters
sgds-text-gap-sm
8px12px12pxBetween a heading and its immediately following text
sgds-text-gap-mdBase
12px16px16pxBetween related body paragraphs or list items
sgds-text-gap-lg
16px20px20pxBetween a heading group and the content below
sgds-text-gap-xl
20px24px24pxBetween distinct content blocks within a prose section
sgds-text-gap-2-xl
24px32px32pxBetween major typographic groups on the same surface

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