Menu

Developers Italia We develop public services, together

Follow us

Designers Italia

The Design System for the Italian Public Administration

Designers Italia is the main source for design of Public Administration services: guidelines, tools, a design system and a community of designers to foster collaboration and promote the role of human-centered design during the development of public services.

Designers Italia

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:

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:

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

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 Desisgn System later.

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

back to contents