Get startedFoundationsComponentsPatternsGuidelinesResourcesAI
This site is a work in progress as part of GovTech {build} hackathon. Content may be incomplete or subject to change.

Breakpoint

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

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

Breakpoint tokens

CSS variableFigma tokenCSS variableScreen sizeContainer widthColumnsGuttersOuter margins
--sgds-breakpoint-xs
320 to 511auto41620
--sgds-breakpoint-sm
512 to 767auto81624
--sgds-breakpoint-md
768 to 1023auto82428
--sgds-breakpoint-lg
1024 to 12798881224auto
--sgds-breakpoint-xl
1280 to 143911681232auto
--sgds-breakpoint-2-xl
1440 and above13121232auto

Breakpoint tokens with sticky sidebar

CSS variableFigma tokenCSS variableScreen sizeContainer widthColumnsGuttersOuter marginsSide nav width
--sgds-breakpoint-sbar-md
768 to 1023auto8244872 (collapse)
--sgds-breakpoint-sbar-lg
1024 to 12798401224auto72 (collapse)
--sgds-breakpoint-sbar-xl
1280 to 14398881224auto272 (expand)
--sgds-breakpoint-sbar-2-xl
1440 and above10241232auto272 (expand)

Screen sizes

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

Singapore Government Design System

The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.