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

Breakpoint

Breakpoints maintain layout integrity across screen sizes. Each breakpoint range determines the number of columns, recommended margins and gutters for each display size.

Storybook

Screen sizes

Designers should create outputs for at least three key sizes: mobile (320px), tablet (768px), and desktop (1440px) for development.

small
medium
large
extra large
320(min)
360
400
512
768
1024
1280
1440(max)

Breakpoint tokens

Breakpoints maintain layout integrity across screen sizes. Each breakpoint range determines the number of columns, recommended margins and gutters for each display size.

Standard breakpoint

TokenScreen sizeContainer widthColumnsGuttersOuter marginssgds-breakpoint-xs320 to 511auto41620sgds-breakpoint-sm512 to 767auto81624sgds-breakpoint-md768 to 1023auto82428sgds-breakpoint-lg1024 to 12798881224autosgds-breakpoint-xl1280 to 143911681232autosgds-breakpoint-2-xl1440 and above13121232auto

Breakpoint with sticky sidebar

TokenScreen sizeContainer widthColumnsGuttersOuter marginsSide nav widthsgds-breakpoint-sbar-md768 to 1023auto8244872 (collapse)sgds-breakpoint-sbar-lg1024 to 12798401224auto72 (collapse)sgds-breakpoint-sbar-xl1280 to 14398881224auto272 (expand)sgds-breakpoint-sbar-2-xl1440 and above10241232auto272 (expand)

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