About
Background
The Singapore Government Design System (SGDS) was developed to unite teams in creating fast, accessible and mobile friendly digital services with a common set of UI components that comply to the Digital Service Standards. As the web constantly evolves, so do user expectations. The Government must do the same if it wants to maintain the highest standards in digital service delivery.
Where to use SGDS
Static Informational Websites
A static site is the most basic website, and the easiest to build. It requires no server-side processing, serving only client-side content in the form of HTML pages (and optionally CSS and JavaScript) to users' browsers or mobile phones.
Isomer is an informational website generator created by the Government Technology Agency of Singapore (GovTech). It provides templates for websites based on SGDS, allows users to easily edit website content, provides hosting and is compliant to applicable clauses in the Instruction Manual 8 (IM8), Design Service Standard (DSS) and Usability Checklist (UC).
Learn more about IsomerDynamic Informational Websites
Similar to static sites, dynamic websites serve client-side content. However, it uses a server and database to generate such client-side content on the fly before serving them to user devices.
For example, WordPress sites commonly make use of PHP programs together with MySQL as a database to serve dynamically-generated content to users. They also support user logins for content writers. For this reason, dynamic websites tend to be more complicated and costly to build.
Content Website Platform (CWP) is a common secured website building and serving platform. It provides a suite of standardised software for hosting content-based websites. It enables unclassified government websites to be centrally managed and operated in the public cloud.
Learn more about CWPTransactional Websites
A transactional website is a full-scale website that allows users to perform transactions, for example online banking or retail purchases. Government transactional sites typically allow users to interact with government services digitally, such as HDB or CPF.
Transactional sites are usually built by vendors, who are encouraged to leverage on SGDS to deliver the best user experience.
Download Design System packageHow Everything Fits
Our Core Principles
We constantly keep these core principles in mind when making design decisions at SGDS.
Clarity: Easy to understand and navigate. Elements highlight important content and improve interactivity.
Efficiency: Optimised workflows that help you to deliver the highest quality government websites to the public easily.
Consistency: A consistent and unified government branding implements familiar standards and strengthens intuition by using standard text styles, icons and interface elements.
Reusable: Eliminate the burden of recreating basic components and patterns for every new product. Components in Design System will be a comprehensive collection of tried-and-tested assets that reflect the industry best practices.
Why use a design system?
A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications. It enable teams to build better products more quickly at scale by making design reusable.
This concept can be explained better with the concept of Atomic Design from Brad Frost:
| Atoms | The basic building blocks, for e.g. form label, an icon or a button | |
| Molecules | Groups of atoms bonded together to do one thing | |
| Organisms | Groups of molecules joined together to form a complex section of an interface | |
| Templates | Groups of organisms stitched together to form pages | |
| Pages | Pages are specific instances of templates. These are what end users ultimately see |
Atomic design comprises designs spanning from abstract to concrete. Because of this, we can create products that are both visually consistent, yet have each retain distinct features. And by assembling rather than deconstructing, we are crafting a system right out of the gate instead of cherry picking patterns after the fact.