Inferse
For vendors
AdvertiseTop spots, featured rows, home sponsor Get listedAdd a product we don't cover yet Claim a listingFree: verify the domain, then correct your page Vendor dashboardNumbers, orders and placements
List your platform
Vendor dashboard

Singapore Government Design System

APIyesFREEyesDOCS5/5
SG7.3#1of 26
outWeb

Ranked in UI Kit Libraries·Free plan

Visit site Alternatives

About

Singapore Government Design System (SGDS) gives teams a shared toolkit for building digital services for Singapore government. Its foundations cover colour, typography, spacing and design tokens, alongside components such as buttons, tabs, forms, cards and tables. Templates combine foundations, components and utilities into reusable page layouts, while blocks are reusable sections that can be composed into templates and product experiences. SGDS v3 accommodates sub-brands and agency 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. 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, and agent skills and guidance help AI tools align interfaces with the system. All .gov.sg digital services must adopt the Official Government Banner and Global Footer.

Who it is for

SGDS suits teams building digital services for Singapore government, including developers working with its supported frameworks and designers using its Figma resources. Its required banner and footer are relevant to all .gov.sg digital services.

What is good

  • Provides shared design foundations and components
  • Includes reusable templates and page blocks
  • Integration guidance covers four frameworks
  • Components are designed for government accessibility standards

What to know first

  • Utility classes require Tailwind CSS v4
  • GovTech private libraries require a corporate email
  • .gov.sg services must adopt the official banner and footer

Verdict

SGDS supplies reusable design and development resources for a consistent government service experience. Teams should account for its Tailwind requirement and the banner and footer compliance rule where applicable.

Compared on UI kit libraries

Primary asset format
figmadesignsystem.tech.gov.sg
Design-system ready
Yesdesignsystem.tech.gov.sg
Responsive components
Yesdesignsystem.tech.gov.sg
Accessibility guidance
Yesdesignsystem.tech.gov.sg
License scope
personaldesignsystem.tech.gov.sg

Facts

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
Intended users
SGDS was developed to help teams create fast, accessible, and mobile-friendly digital services.designsystem.tech.gov.sg · 7 Oct 2026
Foundations
Its foundations cover colour, typography, spacing, and design tokens.designsystem.tech.gov.sg · 7 Oct 2026
Components
The component library includes interface elements such as buttons, tabs, forms, cards, and tables.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
Reusable blocks
SGDS blocks are reusable page sections that can be composed into templates and product experiences.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
Framework support
The development guide provides integration instructions for React, Vue, Angular, and Next.js.designsystem.tech.gov.sg · 7 Oct 2026
Styling requirement
SGDS utility classes require Tailwind CSS v4.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
Accessibility
SGDS says its components are designed to meet government accessibility standards by default.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
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
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
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
Core toolkit
The system provides shared foundations including colour, typography, spacing, and design tokens.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
Theming
SGDS v3 supports sub-brands and agency-specific requirements while maintaining a One Government feel.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
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
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
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
Support
The component documentation directs feedback to the SGDS Slack channel and bug reports to GitHub issues.designsystem.tech.gov.sg · 7 Oct 2026

Company

Headquarters
Singaporedesignsystem.tech.gov.sg · 28 Sept 2026

Best Singapore Government Design System alternatives

See all 20
GitHub Primer02 Free7.2Carbon Design System03 Free6.0GOV.UK Design System04 Free6.0Untitled UI05 Free6.0Ant Design Icons06 Free5.9Clarity Design System07 Free5.9

Where it ranks on Inferse

Sources