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

Spacer scale

Primitive spacer tokens that define the base SGDS spacing scale.

Spacer scale

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.

CSS variableFigma tokenCSS variablerempxVisual
--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-5
Base
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.