Singapore Government Design System (SGDS) is an open-source toolkit from GovTech for teams creating consistent, accessible government digital services. It supplies foundations for colour, typography, spacing, and design tokens, plus components including buttons, tabs, forms, cards, and tables. Utilities and components can be combined into reusable templates, while blocks provide composable page sections. SGDS v3 supports sub-brands and agency-specific needs while maintaining a shared government identity. Developers can install the web component package with npm, pnpm, yarn, or bun, with integration guidance for React, Vue, Angular, and Next.js. Its utility classes require Tailwind CSS v4. Figma Enterprise users at GovTech can enable SGDS v3 libraries; agencies and partners can use the UI Kit through Figma Community. Components are designed to meet government accessibility standards by default. All .gov.sg services must adopt the Official Government Banner and Global Footer.
Who it is for
SGDS suits teams building Singapore government web or API services that need shared design foundations and accessibility guidance. It also supports designers and developers working with Figma, supported JavaScript frameworks, or compatible AI coding tools.
What is good
- Shared foundations, components, templates, and blocks
- Integration guidance covers React, Vue, Angular, and Next.js
- Components target government accessibility standards by default
- Web package supports npm, pnpm, yarn, and bun
- Supports agency sub-brands within a common identity
What to know first
- Utility classes require Tailwind CSS v4
- .gov.sg services must use the official banner and footer
- Figma library access differs by organization
Verdict
SGDS offers a structured foundation for Singapore government interfaces, from tokens through reusable page sections. Teams should check Tailwind, framework, Figma-access, and government compliance requirements before adopting it.
Singapore Government Design System plans and pricing
All plansCompared on UI kit libraries
- Primary asset format
- figma
- Design-system ready
- Yes
- Responsive components
- Yes
- Accessibility guidance
- Yes
- License scope
- personal
