10 Awesome World Government Design Systems and UI Kits
Tags: design, webdev, uiweekly, designsystems
Published: 2020-01-10 15:21:00


Design systems are taking over the world. More and more tech companies, in the last few years, are creating visual design systems to unify their brand across all their products. For example, [Google's Material Design](https://material.io/), [AirBnB Design](https://airbnb.design/building-a-visual-language/), and [Microsoft's Fluent](https://www.microsoft.com/design/fluent/#/) provide style guides, icon packages, and UI kits that help designers and developers achieve visual consistency between services and teams.

World governments are now joining this trend to unify their national brand across all their online services and applications. Some countries even open source their components and design language, and allow users to download their assets. Other countries, like Estonia, seem to be use their design system to express their national identity in a similar way to flags and currency. Below are ten examples of excellent world government design systems with links to their documentation, Github, and components if available.

## 1. Argentina - Poncho

![Argentina Poncho Homepage](https://codinhood.com/static/c15850ea388756ae57a4b0017e67a609/14e05/argentina-poncho.png)

[Documentation](http://argob.github.io/poncho/) -
[Poncho Github](https://github.com/argob/poncho) - [NPM](https://www.npmjs.com/package/ar-poncho)

Poncho is a design system and set of UI components for Government of the Republic of Argentina. The system is based off of Bootstrap and uses Roboto as the main font. Although they make use of Font Awesome, Poncho also provides a large set of custom icons:

![Poncho Icons](https://codinhood.com/static/4e4365edb7d2622f9324337fa17afaa3/67270/poncho-icons.png)

They also have an amazing pixel art logo/mascot:

![Poncho Pixel Art](https://codinhood.com/6207cecfacce13ed3ffad9c4dfff8a06/poncho.gif)

## 2. Australia - Australian Government Design System

![Australia](https://codinhood.com/static/0c30ec14e78ad69f72407ba608ffd8d4/14e05/australia.png)

[Documentation](https://designsystem.gov.au/) - [Design System Components Github](https://github.com/govau/design-system-components/) - [NPM](https://www.npmjs.com/org/gov.au)

The Australian Government Design System contains a set of 30 UI components built with SASS and 3 premade templates. Their excellent documentation provides live examples of each component along with easy to copy snippets of SCSS, HTML, and React. Design assets for Sketch are also available

## 3. Canada - Aurora Design System

![Canada](https://codinhood.com/static/1971b921389884cefe44053167c12a28/14e05/canada.png)

[Documentation](https://design.gccollab.ca/) - [Aurora Components Github](https://github.com/gctools-outilsgc/aurora-design-system)

Aurora is a design system, set of UI components, and style guide for the Canadian Government. The documentation provides live examples, HTML snippets, as well as advice on best practices for designers. Uniquely, they have 8 pages of advice for data visualization. Aurora also provides some neat color themes that work well with their components, including Aurora Borealis, Thunder and Lightning, and Triad.

## 4. Estonia - Brand

![Estonia](https://codinhood.com/static/d5a01b24894709f74b2be7799e5d352d/14e05/estonia.png)

[Brand Website](https://brand.estonia.ee/)

The Estonia design system unifies the Estonia brand across the web. Unlike some of the other government design systems, the CSS components do not appear to be open source. However, the design kits for components are available for download as `pdf`s and as `ai`s for Adobe Illustrator. Additionally, illustrations, icons, animated icons, and other design assets are available for download.

![Estonia Boulder](https://codinhood.com/static/f8645c9537709219c7b3aef30e3c5593/14e05/estonia-boulders.png)

Estonia design has a lot of interesting aspects, chief among them, these awesome Boulder components.

## 5. Italy - Italian Design System

![Italy](https://codinhood.com/static/0c704a44ecdfe4fd61b8a90a28fbb6d1/14e05/italy.png)

[Italy Design](https://designers.italia.it/)

The Italian Design system is one of the most extensive government design systems on this list. For starters, there are guidelines for usability, analytics, accessibility, UI principles, service design principles, information architecture, and so on. There are kits for A/B testing, wireframes, SEO, web development, user stories, and so much more. Additionally, they have a Medium blog, Behance account, twitter account, and a dedicated forum.

The UI Kit for designers contains sketch files for all the components and themes used within the design system.

[UI Kit Docs](https://designers.italia.it/kit/ui-kit/) - [Design UI Kit Github](https://github.com/italia/design-ui-kit)

The UI Kit for developers is available as a Bootstrap theme or as Angular components or React components. The React components are also available to browse as live demos with Storybook.

**Bootstrap** [Bootstrap Theme](https://italia.github.io/bootstrap-italia/) - [Github](https://github.com/italia/bootstrap-italia)

**Angular** [Documentation](https://italia.github.io/design-angular-kit/#/componenti/checkbox) - [Github](https://github.com/italia/design-angular-kit/)

**React** [Storybook](https://italia.github.io/design-react-kit/?path=/story/introduzione-introduzione--benvenuto) -
[NPM](https://www.npmjs.com/package/design-react-kit) - [Github](https://github.com/italia/design-react-kit)

![Italy Storybook](https://codinhood.com/static/b0dd6a6151d19353922e6162e5a46041/14e05/italy-storybook.png)

The team working on the Italian Design System really went the extra mile.

## 6. New Zealand - New Zealand Government Design System

![newzealand](https://codinhood.com/static/37a2cc059859920a39508d057bea21a2/14e05/newzealand.png)

[Documentation](https://design-system-alpha.digital.govt.nz/) - [Github](https://github.com/GOVTNZ/govtnz-design-system) - [NPM](https://www.npmjs.com/package/@govtnz/ds)

The New Zealand Design System is based on the UK Design System and is still in alpha. Currently, the UI kit supports 9 components with two more coming soon. Each component is supports a surprisingly amount of technologies, including CSS, React, Vue, Mustache, TypeScript, and Styled Components.

## 7. Singapore - SGDS

![Singapore](https://codinhood.com/static/2880ee43645d862e866034ca90ab498e/14e05/singapore.png)

[Documentation](https://www.designsystem.gov.sg/) - [Github](https://github.com/govtechsg/sgds) - [NPM](https://www.npmjs.com/package/@govtnz/ds)

The Singapore Design System, or SGDS, provides a set of layout, helper, form, and general components for developers. These components are available as highly customizable SASS components, or as React and Vue components. The React components are also available as live demos with Storybook, similar to the Italian Design System.

**SASS** [Docs](https://www.designsystem.gov.sg/docs/installation/)

**React** [Storybook](https://govtechsg.github.io/sgds-govtech-react/?path=/story/*) - [Github](https://github.com/govtechsg/sgds-govtech-react)

**Vue** [Docs](https://govtechsg.github.io/sgds-govtech-vue/) - [Github](https://github.com/govtechsg/sgds-govtech-vue)

SGDS also provides a [Sketch Kit](https://www.designsystem.gov.sg/guides/designers-sketch-kit/) for designers.

## 8. Switzerland - Swiss Style Guide

![Switzerland](https://codinhood.com/static/180cd4da7987b999822ca7990628073d/14e05/switzerland.png)

[Documentation](https://swiss.github.io/styleguide/en/) - [Github](https://github.com/swiss/styleguide) - [NPM](https://www.npmjs.com/package/swiss-styleguide)

The Swiss Style Guide contains a very large set of components built on CSS and Javascript. The documentation is quite extensive, the Table component for example, has 16 different demos and variations. Additionally, each example has HTML, CSS, or Javascript snippets that can be easily copied.

## 9. United Kingdom - GOV.UK Design System

![UK Design System](https://codinhood.com/static/ef48c18e12785b2b21efec00027913c4/14e05/uk.png)

[Documentation](https://design-system.service.gov.uk/) - [Github](https://github.com/alphagov/govuk-frontend) - [NPM](https://www.npmjs.com/package/govuk-frontend)

The GOV.UK Design System provides a system of styles, components, and patterns built with SASS and Javascript. Each component page contains not only demos and code snippets, but instructions on how to use the component, when to use the component, and how the component works. Some of the patterns even come with videos to illustrate further. The components are also available in React.

[Govuk React](https://github.com/govuk-react/govuk-react#readme)

## 10. United States - United States Web Design System

![USA Design System](https://codinhood.com/static/923304cda9bacadbda7f8ddc1eaa27e9/14e05/usa.png)

[Documentation](https://designsystem.digital.gov/) - [Github](https://github.com/uswds/uswds) - [NPM](https://www.npmjs.com/package/uswds) - [Design Assets](https://designsystem.digital.gov/documentation/designers/)

The United States Web Design System (USWDS) provides components, utilities, design tokens, and templates for developers and design assets in Sketch and Adobe XD for designers. Many government agencies use the USWDS for their websites from NASA to White House to U.S Department of Agriculture, check out their [showcase](https://designsystem.digital.gov/getting-started/showcase/all/) to see the full list. Additionally, the USWDS Github Repo is quite active, with 7,812 commits.

The UI kit uses, as with most of the systems in this list, SASS, Javascript. The whole system is quite extensive, luckily their [Github Repo](https://github.com/uswds/uswds#using-the-uswds-package) gives some guidelines on installing and setting up all the SASS and Javascript files.

![USA Design System](https://codinhood.com/static/bb461d319142a699b837363031b17929/609e8/usa-components.png)

## Conclusion

From the large tech companies to whole countries, design systems are taking over the world because of their ability to unify a brand across many services, applications, and products.

_This was originally published on [codinhood.com](https://codinhood.com/post/world-government-design-systems)_