Look for a
lock () or https:// as an added precaution. Share sensitive
information only on official, secure websites.
Features
Components
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.
Guides
A collection of frameworks, best practices, and guidelines. Guides are organised into categories for Developers, Designers, and Writers.
Templates
To jump-start website development.
Theme Customiser
To customise components and colours according to your needs. It also features a built-in colour contrast checker to help with accessibility checks;
Patterns
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; and
Design files
For Figma and Sketch are provided to help designers start designing without having to set everything up from scratch.
Roadmap
Unify framework documentation
Consolidate all supported frameworks’ documentation into a single Storybook, serving as the definitive source of truth.
Enhance component documentation
Improve SGDS components documentation to provide better guidelines for designers and developers.
Integrated third-party libraries
Introduce a layer of SGDS styling for popular third-party JavaScript component libraries, such as react-select.
Implement dark mode support
Add dark mode compatibility to enhance user experience across various applications.
Refine figma design files
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
Thanks for letting us know that this page is useful for you!
If you've got a moment, please tell us what we did right so that we can do more of it.
Did this page help you? - No
Thanks for letting us know that this page still needs work to be done.
If you've got a moment, please tell us how we can make this page better.
Reusable Design Components That Helps the Government Deliver Effective Digital Services.