Skip to content
SPECIFICTION
Get listed

Singapore Government Design System

designsystem.tech.gov.sg

Free plan WebAPI
Visit designsystem.tech.gov.sg
Spec score 8.0 #7 of 26 in UI Kit Libraries

What it is

Singapore Government Design System (SGDS) is a shared toolkit for teams creating digital services for Singapore government. Its foundations cover 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; blocks are reusable sections that teams can compose 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. The guide includes integration instructions for React, Vue, Angular, and Next.js, but utility classes require Tailwind CSS v4. GovTech Figma Enterprise users can enable SGDS v3 libraries, while agencies outside GovTech and partners can access the UI Kit through Figma Community. Components are designed to meet government accessibility standards by default. The system also provides guidance and agent skills for AI tools. All .gov.sg digital services must adopt the Official Government Banner and Global Footer. SGDS is free and open source.

Spec sheet

Purpose
SGDS provides a shared foundation of colour, typography, and components to help teams create consistent, accessible, and reliable government services.Read 7 Oct 2026 · designsystem.tech.gov.sg
Intended users
SGDS was developed to help teams create fast, accessible, and mobile-friendly digital services.Read 7 Oct 2026 · designsystem.tech.gov.sg
Compliance
The design guide states that all .gov.sg digital services must adopt the Official Government Banner and Global Footer.Read 7 Oct 2026 · designsystem.tech.gov.sg
Support
The component documentation directs feedback to the SGDS Slack channel and bug reports to GitHub issues.Read 7 Oct 2026 · designsystem.tech.gov.sg
Headquarters
SingaporeRead 28 Sep 2026 · designsystem.tech.gov.sg
Maker
The SGDS website is owned and operated by the Government Technology Agency of Singapore (GovTech).Read 7 Oct 2026 · designsystem.tech.gov.sg
Accessibility
SGDS says its components are designed to meet government accessibility standards by default.Read 7 Oct 2026 · designsystem.tech.gov.sg
AI guidance
SGDS provides agent skills and guidance to help AI tools produce interfaces aligned with its components, tokens, patterns, and standards.Read 7 Oct 2026 · designsystem.tech.gov.sg
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.Read 7 Oct 2026 · v3.designsystem.tech.gov.sg
Blocks
Blocks are reusable page sections that can be composed into templates and product experiences.Read 7 Oct 2026 · designsystem.tech.gov.sg
Components
SGDS provides reusable interface components for common interaction needs.Read 7 Oct 2026 · designsystem.tech.gov.sg
Core toolkit
The system provides shared foundations including colour, typography, spacing, and design tokens.Read 7 Oct 2026 · designsystem.tech.gov.sg
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.Read 7 Oct 2026 · designsystem.tech.gov.sg
Development
The developer guide links to GitHub and Storybook, and describes SGDS as installable for building interfaces with shared foundations.Read 7 Oct 2026 · designsystem.tech.gov.sg
Feedback and bug reports
The component documentation directs users to Slack for feedback and GitHub for bug reports.Read 7 Oct 2026 · designsystem.tech.gov.sg
Figma access
GovTech Figma Enterprise users can enable SGDS v3 libraries, while GovTech employees need a corporate email address for private libraries.Read 7 Oct 2026 · designsystem.tech.gov.sg
Foundations
Its foundations cover colour, typography, spacing, and design tokens.Read 7 Oct 2026 · designsystem.tech.gov.sg
Framework support
The development guide provides integration instructions for React, Vue, Angular, and Next.js.Read 7 Oct 2026 · designsystem.tech.gov.sg
Government requirement
All .gov.sg digital services must adopt the Official Government Banner and Global Footer.Read 7 Oct 2026 · designsystem.tech.gov.sg
Reusable blocks
SGDS blocks are reusable page sections that can be composed into templates and product experiences.Read 7 Oct 2026 · designsystem.tech.gov.sg
Styling requirement
SGDS utility classes require Tailwind CSS v4.Read 7 Oct 2026 · designsystem.tech.gov.sg
Templates
SGDS templates combine foundations, components, and utilities into reusable page layouts for common product needs.Read 7 Oct 2026 · designsystem.tech.gov.sg
Theming
SGDS v3 supports sub-brands and agency-specific requirements while maintaining a One Government feel.Read 7 Oct 2026 · designsystem.tech.gov.sg
Web package
Developers can install the web component package with npm, pnpm, yarn, or bun.Read 7 Oct 2026 · designsystem.tech.gov.sg

Plans and prices

Singapore Government Design System Free Shared design foundations · components · templates · blocks Read 7 Oct 2026 · designsystem.tech.gov.sg

Every Singapore Government Design System plan and price →

Strong points and limits

Strong points

  • Provides foundations, components, templates, and blocks.
  • Integration guidance covers four web frameworks.
  • Components are designed for government accessibility standards.
  • Supports agency-specific requirements and sub-brands.

Limits

  • Utility classes require Tailwind CSS v4.
  • .gov.sg services must adopt the Official Government Banner and Global Footer.
  • GovTech private libraries require a corporate email address.

Who it suits

SGDS is for teams building digital services for Singapore government that need shared design foundations and reusable interface elements. It also provides implementation guidance for common web frameworks and Figma access options.

Verdict

SGDS offers a free, open source foundation for consistent government interfaces, with developer and design resources. Teams using its utility classes need Tailwind CSS v4, and .gov.sg services have specified banner and footer requirements.

Where Specifiction places it

Alternatives to Singapore Government Design SystemAll alternatives →