10 个很棒的世界政府设计系统和 UI 工具包

设计系统正在席卷全球。近年来，越来越多的科技公司正在创建视觉设计系统，以统一其所有产品的品牌形象。例如，谷歌的 Material Design、Airbnb Design和微软的 Fluent提供了样式指南、图标包和 UI 工具包，帮助设计师和开发者在不同的服务和团队之间实现视觉一致性。

世界各国政府正纷纷加入这一潮流，在其所有在线服务和应用程序中统一国家品牌。一些国家甚至开源其组件和设计语言，并允许用户下载其资源。其他国家，例如爱沙尼亚，似乎正在使用其设计系统来表达其国家认同，其方式类似于国旗和货币。以下是十个优秀的世界政府设计系统示例，并附上其文档、Github 和组件（如有）的链接。

1. 阿根廷 - 斗篷

文档-
Poncho Github - NPM

Poncho 是阿根廷共和国政府的一套设计系统和 UI 组件。该系统基于 Bootstrap，并使用 Roboto 作为主要字体。虽然他们使用了 Font Awesome，但 Poncho 也提供了大量的自定义图标：

他们还有一个令人惊叹的像素艺术标志/吉祥物：

2. 澳大利亚——澳大利亚政府设计体系

文档-设计系统组件 Github - NPM

澳大利亚政府设计系统包含一套由 SASS 构建的 30 个 UI 组件和 3 个预制模板。其优秀的文档提供了每个组件的实时示例，以及易于复制的 SCSS、HTML 和 React 代码片段。此外，还提供 Sketch 的设计资源。

3. 加拿大 - Aurora 设计系统

文档- Aurora 组件 Github

Aurora 是一套为加拿大政府设计的设计系统，包含一系列 UI 组件和样式指南。其文档提供了丰富的示例、HTML 代码片段以及针对设计师的最佳实践建议。独特的是，他们提供了长达 8 页的数据可视化建议。Aurora 还提供了一些与其组件（包括 Aurora Borealis、Thunder and Lightning 和 Triad）完美搭配的简洁配色主题。

4. 爱沙尼亚 - 品牌

品牌网站

爱沙尼亚设计系统在网络上统一了爱沙尼亚品牌。与其他一些政府设计系统不同，其 CSS 组件似乎并非开源。不过，组件的设计工具包可以下载为pdfs 和aiAdob​​e Illustrator 的 s 格式。此外，插图、图标、动画图标和其他设计资源也可供下载。

爱沙尼亚设计有很多有趣的方面，其中最主要的是这些令人敬畏的博尔德组件。

5. 意大利 - 意大利设计体系

意大利设计

意大利设计体系是本榜单上涵盖范围最广的政府设计体系之一。首先，它涵盖了可用性、分析、可访问性、UI 原则、服务设计原则、信息架构等方面的指南。此外，它还提供了 A/B 测试、线框图、SEO、Web 开发、用户故事等工具包。此外，他们还拥有 Medium 博客、Behance 账号、Twitter 账号和专门的论坛。

设计师的 UI 套件包含设计系统内使用的所有组件和主题的草图文件。

UI Kit 文档-设计 UI Kit Github

面向开发者的 UI 套件提供 Bootstrap 主题、Angular 组件或 React 组件等形式。此外，您还可以通过 Storybook 浏览 React 组件的现场演示。

Bootstrap Bootstrap 主题- Github

Angular 文档- Github

React Storybook -
NPM - Github

致力于意大利设计系统的团队确实付出了额外的努力。

6. 新西兰——新西兰政府设计体系

文档- Github - NPM

新西兰设计系统基于英国设计系统，目前仍处于 alpha 阶段。目前，该 UI 工具包支持 9 个组件，另有两个即将推出。每个组件都支持数量惊人的技术，包括 CSS、React、Vue、Mustache、TypeScript 和 Styled Components。

7. 新加坡 - SGDS

文档- Github - NPM

新加坡设计系统 (SGDS) 为开发者提供了一套布局、辅助、表单和通用组件。这些组件可以作为高度可定制的 SASS 组件，也可以作为 React 和 Vue 组件使用。与意大利设计系统类似，React 组件也可以通过 Storybook 进行现场演示。

SASS 文档

React Storybook - Github

Vue 文档- Github

SGDS 还为设计师提供了Sketch Kit 。

8. 瑞士 - 瑞士风格指南

文档- Github - NPM

Swiss 样式指南包含大量基于 CSS 和 JavaScript 构建的组件。其文档非常丰富，例如 Table 组件就有 16 个不同的演示和变体。此外，每个示例都包含 HTML、CSS 或 JavaScript 代码片段，可以轻松复制。

9. 英国 - GOV.UK 设计系统

文档- Github - NPM

GOV.UK 设计系统提供了一个由 SASS 和 JavaScript 构建的样式、组件和模式组成的系统。每个组件页面不仅包含演示和代码片段，还包含组件的使用方法、使用时机和工作原理的说明。部分模式甚至附带视频，方便进一步演示。这些组件也支持 React 开发。

Govuk 反应

10. 美国 - 美国网页设计系统

文档- Github - NPM -设计资产

美国网页设计系统 (USWDS) 为开发者提供组件、实用程序、设计令牌和模板，并为设计师提供 Sketch 和 Adob​​e XD 中的设计资源。从美国国家航空航天局 (NASA)、白宫到美国农业部，许多政府机构都使用 USWDS 来构建其网站。查看其完整列表，请访问其展示页面。此外，USWDS 的 Github 代码库也非常活跃，共有 7,812 次提交。

与本列表中的大多数系统一样，该 UI 工具包也使用了 SASS 和 Javascript。整个系统功能相当丰富，幸运的是，他们的Github Repo提供了一些关于安装和设置所有 SASS 和 Javascript 文件的指南。

结论

从大型科技公司到整个国家，设计系统正在占领世界，因为它们能够在许多服务、应用程序和产品中统一品牌。

本文最初发表于codinhood.com