Intro

On this page we present the design system created for the Italian Public Administration and the Designers Italia tools available to developers.

The goal is to provide kits - documents, guides, or software - that can save time and money to the Public Administration and that constitute a solid starting point for the design and development of modern, inclusive and maintainable apps and websites. Some of these projects are already active, while others are foreseen by the roadmap. To stay up-to-date with the evolution of the projects, we recommend registering with the Designers Italia newsletter.

The site designers.italia.it contains:

References to the current version of the Design guidelines.
Design templates for websites and services of public entities, such as municipalities and schools.
A design system including foundations, components, patterns and showcase.
A series of kits for the design of services of the Public Administration.
The blog with use cases of the above tools and articles from the community.
The activity plan, containing a roadmap of the activities and the main results by the Designers Italia project, future actions and goals to be achieved.

The source code of the site itself is hosted in a GitHub repository, open to any type of contribution.

Design system

Since 2022, a unique and coherent desing system has been established by building on and evolving the different kits listed below:

Introduction to the current version of the Design System.
Kickstart guide.
Contribution model.
Foundations.
Components.

UI kit

The UI Kit is a set of ready-made visual components to build the interface of a site or an app, following the guidelines for the digital services of the Public Administration, national and international best practices.

The kit, built in Figma, is defined in open and collaborative way on Github, together with the designers community. Figma releases are versioned in Sketch to maintain compatibility with open file formats. It is defined in an open and collaborative way on GitHub, together with the designers community. The UI Kit is the reference point for patterns and components to be implemented with the web development kits listed below.

Many Public Administration projects are using the UI Kit to define their own interfaces, including templates for sites of the municipalities and sites of schools.

For questions and discussions about the UI Kit, on Developers Italia Slack, you can refer to the channel #design-system-ui-kit {:target=”_blank”}.

Web Development Kit

The Web Development Kits are a set of tools for the front end development of websites and web applications. They are HTML, CSS and Javascript libraries that allow you to create sites that comply with the design guidelines and code the provisions of the UI Kit. As of today, the most stable, updated and mature web development kit is Bootstrap Italia, based on the open-source library Bootstrap 4. They all have been included as part of the design system since 2022.

Bootstrap Italia

The Bootstrap 4 based kit is the reference point for the development of Public Administration projects. The main purpose is to make available to the community of developers, in line with the Design Guidelines, syntax, tools, plugins and conventions of an instrument already known and used by many, such as Bootstrap 4.

Contribute to the design system’s growth by reporting a site, an app or a theme created with Bootstrap Italia. You can open an issue on the Bootstrap Italia repository or write a post on the forum!

Design React Kit

The project aims at building a set of components and a common presentation layer based on React. The focus of the project was, at least at this early stage, web apps and hybrid mobile applications based on React Native. The React Kit is not yet complete because many of the components present on Bootstrap Italia have not yet been converted for use as React components.

Design Angular Kit

The project aims to build a set of components and a common presentation layer based on Angular. The kit is not yet complete.

The contributions on the kits are very important and welcome. Discover how to contribute with your feedbacks, useful information, bug reports or code.

Deprecated kits

The Web Toolkit was the first project meant to help the creation of websites for the PA: it is already used by many websites, especially some municipalities and ministries. The feedback received on the use of the Web Toolkit by organizations and suppliers contributed to the definition and creation of the Bootstrap Italia reference kit first, and the design system later.

For this reason, the Web Toolkit is no longer the subject of significant updates since 2017.

Web Toolkit

For this reason, the Web Toolkit is no longer the subject of significant updates since 2017.

Other useful design kits

Web development is only part of the service processing cycle according to the Design Guidelines. Designers Italia provides kits covering the entire design cycle of a service, from research to information architecture, passing through tests with users. For more information, you can start from the Kit page on the Designers Italia website.

For questions and discussions on these design kits, you can refer to the channel #design-service.

Resources

The Design System for the Italian Public Administration
Resources and guidelines to build high quality, efficient and accessible websites and digital services
Primer
From the first step to design with the UI kit in Figma and Sketch and development libraries.
UI kit
Available in Figma and Sketch conversion
Figma UI Kit preview
If you want to see all components before using it
Repository Bootstrap Italia
The Bootstrap Italia library is the easier and safest to way to build modern, inclusive and easy to maintein public interfaces.
Repository React Design Kit
A set of open-source React components, based on the UI Kit and the Bootstrap Italia library
Repository Angular Design Kit
A set of open-source Angular components, based on the UI Kit and the Bootstrap Italia library