Singapore Government Design SystemFeatures
A collection of open-source, front-end components that you can reuse or customise to build websites quickly while not compromising on specific needs. All components have been checked to ensure they adhere to accessibility standards.
A collection of frameworks, best practices, and guidelines. Guides are organised into categories for Developers, Designers, and Writers.
To jump-start website development.
To customise components and colours according to your needs. It also features a built-in colour contrast checker to help with accessibility checks.
For common use cases rather than having to build them on your own. All patterns have been checked to ensure they adhere to accessibility standards.
For Figma and Sketch are provided to help designers start designing without having to set everything up from scratch.
Roadmap
Consolidate all supported frameworks' documentation into a single Storybook, serving as the definitive source of truth.
Improve SGDS components documentation to provide better guidelines for designers and developers.
Add dark mode compatibility to enhance user experience across various applications.
Introduce a layer of SGDS styling for popular third-party JavaScript component libraries, such as react-select.
Make improvements to the SGDS Figma design files for better usability and accessibility.
Techstack
Typescript, ReactJS, Lit, Jekyll, Bootstrap 5.1+, GCC 2.0 (AWS Amplify), Atlassian
