Singapore Government Design System
Visit Singapore Government Design System Alternatives Pricing
What Singapore Government Design System is
Singapore Government Design System (SGDS) is an open-source toolkit for teams creating digital services for Singapore government. It provides shared foundations for colour, typography, spacing, and design tokens, alongside interface components such as buttons, tabs, forms, cards, and tables. Templates combine foundations, components, and utilities into reusable page layouts, while blocks are sections that teams can assemble into templates and product experiences. SGDS v3 supports sub-brands and agency-specific requirements while retaining a shared government identity. Developers can install the web component package with npm, pnpm, yarn, or bun; integration guidance covers React, Vue, Angular, and Next.js. Utility classes require Tailwind CSS v4. Design access is through GovTech Figma Enterprise libraries or the SGDS UI Kit in Figma Community for agencies outside GovTech and partners. SGDS says components are designed to meet government accessibility standards by default and offers guidance for AI tools. All .gov.sg digital services must adopt the Official Government Banner and Global Footer. Feedback goes through Slack and bug reports through GitHub.
Who it suits
SGDS is suited to teams building digital services for Singapore government that need shared design foundations, components, templates, or reusable page sections. Its developer guidance covers several web frameworks, while designers can access its UI Kit through Figma Community or GovTech Figma Enterprise.
What it does well
- Shared colour, type, spacing, and design tokens.
- Includes components, templates, and reusable blocks.
- Framework guidance covers React, Vue, Angular, and Next.js.
- Components are designed for government accessibility standards.
- Free and open source.
What to know first
- Utility classes require Tailwind CSS v4.
- .gov.sg services must adopt the Official Government Banner and Global Footer.
- GovTech private Figma libraries require a corporate email.
Limits
SGDS utility classes require Tailwind CSS v4. All .gov.sg digital services must adopt the Official Government Banner and Global Footer.
Plans
| Plan | Billed and limits | Price |
|---|---|---|
| Singapore Government Design System | Shared design foundations · components · templates · blocks | Free |
As designsystem.tech.gov.sg lists them, read 7 Oct 2026. The maker's own page has the final word.
Getting started
- Open the SGDS website and review its design and development guides.
- For web components, install the package with npm, pnpm, yarn, or bun.
- Follow the integration instructions for React, Vue, Angular, or Next.js.
- Use Tailwind CSS v4 if using SGDS utility classes.
- For design work, enable SGDS v3 libraries through GovTech Figma Enterprise, or access the UI Kit through Figma Community if outside GovTech or a partner.
- For .gov.sg services, adopt the Official Government Banner and Global Footer.
Verdict
SGDS brings common design foundations and implementation guidance together for government service teams. Check the Tailwind CSS v4 requirement and required government banner and footer when planning a project.
Questions
How much does Singapore Government Design System cost?
The listed plan is free. The pricing note describes SGDS as open source.
What does SGDS include?
It provides design foundations, components, templates, and reusable blocks. Foundations include colour, typography, spacing, and design tokens.
Which frameworks are covered?
The development guide provides integration instructions for React, Vue, Angular, and Next.js.
How can I use SGDS in Figma?
GovTech Figma Enterprise users can enable SGDS v3 libraries. Agencies outside GovTech and partners can access the SGDS UI Kit through Figma Community; GovTech employees need a corporate email address for private libraries.
Who makes SGDS?
It is made by GovTech, the Government Technology Agency of Singapore.
What must .gov.sg digital services include?
They must adopt the Official Government Banner and Global Footer.
Facts from Singapore Government Design System's own pages
- Accessibility
- SGDS says its components are designed to meet government accessibility standards by default. · designsystem.tech.gov.sg, 7 Oct 2026
- AI guidance
- SGDS provides agent skills and guidance to help AI tools produce interfaces aligned with its components, tokens, patterns, and standards. · designsystem.tech.gov.sg, 7 Oct 2026
- AI tools
- The SGDS guide documents using its web component package and agent skills with compatible AI coding tools, including Codex, Cursor, and Claude Code. · v3.designsystem.tech.gov.sg, 7 Oct 2026
- Blocks
- Blocks are reusable page sections that can be composed into templates and product experiences. · designsystem.tech.gov.sg, 7 Oct 2026
- Compliance
- The design guide states that all .gov.sg digital services must adopt the Official Government Banner and Global Footer. · designsystem.tech.gov.sg, 7 Oct 2026
- Components
- SGDS provides reusable interface components for common interaction needs. · designsystem.tech.gov.sg, 7 Oct 2026
- Core toolkit
- The system provides shared foundations including colour, typography, spacing, and design tokens. · designsystem.tech.gov.sg, 7 Oct 2026
- Design integration
- GovTech Figma Enterprise users can enable SGDS v3 libraries, while agencies outside GovTech and partners can access the SGDS UI Kit through Figma Community. · designsystem.tech.gov.sg, 7 Oct 2026
- Development
- The developer guide links to GitHub and Storybook, and describes SGDS as installable for building interfaces with shared foundations. · designsystem.tech.gov.sg, 7 Oct 2026
- Feedback and bug reports
- The component documentation directs users to Slack for feedback and GitHub for bug reports. · designsystem.tech.gov.sg, 7 Oct 2026
- Figma access
- GovTech Figma Enterprise users can enable SGDS v3 libraries, while GovTech employees need a corporate email address for private libraries. · designsystem.tech.gov.sg, 7 Oct 2026
- Foundations
- Its foundations cover colour, typography, spacing, and design tokens. · designsystem.tech.gov.sg, 7 Oct 2026
- Framework support
- The development guide provides integration instructions for React, Vue, Angular, and Next.js. · designsystem.tech.gov.sg, 7 Oct 2026
- Government requirement
- All .gov.sg digital services must adopt the Official Government Banner and Global Footer. · designsystem.tech.gov.sg, 7 Oct 2026
- Headquarters
- Singapore · designsystem.tech.gov.sg, 28 Sept 2026
- Intended users
- SGDS was developed to help teams create fast, accessible, and mobile-friendly digital services. · designsystem.tech.gov.sg, 7 Oct 2026
- Maker
- GovTech's official site identifies it as the Government Technology Agency of Singapore and says it was formed in 2016. · tech.gov.sg, 7 Oct 2026
- Purpose
- SGDS provides a shared foundation of colour, typography, and components to help teams create consistent, accessible, and reliable government services. · designsystem.tech.gov.sg, 7 Oct 2026
- Reusable blocks
- SGDS blocks are reusable page sections that can be composed into templates and product experiences. · designsystem.tech.gov.sg, 7 Oct 2026
- Styling requirement
- SGDS utility classes require Tailwind CSS v4. · designsystem.tech.gov.sg, 7 Oct 2026
- Support
- The component documentation directs feedback to the SGDS Slack channel and bug reports to GitHub issues. · designsystem.tech.gov.sg, 7 Oct 2026
- Templates
- SGDS templates combine foundations, components, and utilities into reusable page layouts for common product needs. · designsystem.tech.gov.sg, 7 Oct 2026
- Theming
- SGDS v3 supports sub-brands and agency-specific requirements while maintaining a One Government feel. · designsystem.tech.gov.sg, 7 Oct 2026
- Web package
- Developers can install the web component package with npm, pnpm, yarn, or bun. · designsystem.tech.gov.sg, 7 Oct 2026
Where Singapore Government Design System stands on Freedom251
- UI Kit Libraries#14 of 26