The journey of Design System .italia: Open design for digital public services
Three generations of guidelines, tools and processes to enhance accessibility, usability, and quality in Italy’s Public Administration digital services and websites.
Published on OpenSource.net on August 1st, 2024
Intro
In this age of digital transformation, a simple and high-quality user experience is a right for all users. Italy’s Public Administration (PA) websites and digital services must be built with accessibility at their core. This means ensuring everyone can use them, regardless of background, technical knowledge, or disability (whether temporary or permanent).
Design System .italia was created to empower Italy’s Public Administrations (PAs) and their IT suppliers to achieve this very goal. It directly addresses requirement 4.5 of the 2022 “Linee guida di design per i siti internet e i servizi digitali della Pubblica Amministrazione” (Design Guidelines for Public Administration Websites and Digital Services). This requirement mandates consistent interfaces in both style and user experience, with a preference for components offered through the Designers Italia project website.
Design System .italia is the Italian State’s Open Source Design System that provides guidance and tools to create quality public digital interfaces and experiences.
How did Design System .italia emerge?
Design system generation: A stable and sufficient core library of assets, docs, tools, and practices delivered for use by designers […] and/or developers […]
Taking this definition of “design system generation” as a reference — a stable and sufficient library of resources, documentation, tools and practices released for designers and developers — Italy’s design landscape evolved through three distinct phases from 2015 to the present.
Table of Contents
The Dawn of Design System: Alpha Version (2015–2017)
Building Consistency: the alpha version wasn’t a complete design system yet, but it marked the first effort to unify the visual identity, usability and user experience of thousands of Italian Public Administration websites. This phase emphasized a responsible and holistic approach to digital design for public services, a critical shift at the time.
As part of the “Italia Login” initiative, promoted by the Italian Government and curated by AGID (Agenzia per l’Italia Digitale – Agency for Digital Italy), the first “Linee guida di design per i siti web della PA” (Design Guidelines for PA Websites) (2015) were drafted by a large steering committee of experts. The alpha version, published on design.italia.it, introduced the first building blocks of a streamlined visual identity for digital Italy. These core elements, still in use today, include the institutional color Blu Italia (#0066cc), the Bootstrap grid system, and the Open Source typeface Titillium Web. Moreover, the open and participatory process for their drafting marked the beginning for the Italian PA of the use of repositories on the GitHub platform to discuss and collaborate.
With a technological system not updated for almost sixteen years, a geological era from a digital point of view, it was immediately clear that it would not be possible to continue updating the site only at the interface level as had been done until then.
In 2015, the government took a bold step by redesigning the governo.it website, making it the first pilot project in this initiative. This wasn’t just an interface refresh, it was a radical response to obsolescence, sparking a wave of similar transformations for central and local government websites across Italy.
In 2016, the governance of the project passed to the Digital Transformation Team, a structure of the then Special Commissioner for the implementation of the Digital Agenda in Italy.
Consolidation and Growth: Second Generation (2017–2021)
The Digital Transformation Team, with AGID’s support, established Designers Italia and Developers Italia as both vibrant communities and projects. In 2017, a significant step forward came with the release of the first stable version of the Design Guidelines for PA Websites. This wasn’t a minor update; it marked a comprehensive revision, extending the guidelines to cover the entire digital service design process. The “eGlu” protocol for usability testing was also integrated starting with version 2018.1. Designers Italia’s guidelines and tools solidified their role as the official “Design System” for Italy’s Public Administration.
Digital is neither right nor left, it’s not Real Madrid or Barcelona: good digital is transparency, efficiency, inclusion, fight against corruption, better healthcare and education, employment, and above all, the future.
Many new tools (e.g., Docs Italia to host the guidelines) and processes were defined, such as public consultations on Forum Italia to release new technical guidelines. Among the latter, the “Linee guida per l’acquisizione e il riuso di software per la PA” (Guidelines for the Acquisition and Reuse of Software for the PA), still a fundamental reference today in support of Articles 68 and 69 of the “Codice dell’amministrazione digitale” (CAD) (Digital Administration Code), mandating Italian public administrations to release software they develop or commission under an open license.
The designers.italia.it website (in Italian) underwent an information architecture upgrade during this generation. The designers.italia.it website upgrade transformed it into a powerful platform for showcasing the ideal five-phase design process supporting the design guidelines. The website upgrade was further bolstered by the release of new tools: a UI Kit for streamlined prototyping and design, and the framework Bootstrap Italia for efficient interface development. This generation also saw the launch of the first complete, reusable website templates for Italian schools and local governments. These templates encompassed the entire design process, from user research to service design, content planning, usage scenarios and interface development. Each step leveraged and extended the Designers Italia toolset, promoting consistent and efficient design practices across Italian public institutions. The community also began to guide the production of additional open tools, such as the React development kit.
The concept of a unified access point for all Italian digital services, a notion present even in the first generation, started to materialize with the release of the IO app (2020), led by PagoPA, winner in the following years of the 17th edition of the Compasso d’Oro Award (2022).
In 2019, the government established the Department for Digital Transformation, which inherited governance of the Designers Italia project.
The Innovation of .italia: Third Generation (2021–today)
In 2021, Italy’s Department for Digital Transformation revamped innovazione.gov.it, their digital home, with a focus on usability, accessibility and privacy. This marked the beginning of a new push to modernize the government’s digital infrastructure and make it more accessible. The project goes beyond just technology; it’s also about establishing a clear vision and management system for Italy’s national Design System, ensuring accessibility is built into everything they create.
To guide this ambitious project, two key resources were released in 2022: Guidelines outlining quality standards for digital public services and the “Linee guida di design per i siti internet e i servizi digitali della PA” (Design Guidelines for PA Websites and Digital Services) by AGID. By law, all government agencies (PAs) must follow the ‘Design Guidelines for PA Websites and Digital Services’. Designers Italia offers a toolkit and set of rules to support them in complying with this obligation. The arrival of new versions of UI Kit Italia, Bootstrap Italia (updated to Bootstrap 5), and Design Tokens Italia perfectly with the launch of the new Designers Italia website and service models, all driven by the PNRR (Italy’s National Recovery and Resilience Plan) to about 16,000 Italian schools and local governments with the initiative called M1C1.1.4.1 “Citizen Experience in Public Services.”
In spring 2023, after a beta phase with the code name “Prossima” (Next), the new Designers Italia website launched, with a refresh for both the content and technological stack, “making knowledge and tools available to create digital services” of the Italian PA. This website, in Italian only, showcases the application of Italy’s national Design System. Developed through a rigorous process – from user research to real-world validation – the site serves as an example of the Design System in action. All the relevant documentation can be found in the dedicated /design-system/ section.
The project also adopted semantic versioning and a detailed changelog. The documentation became the source of truth presenting the components as a whole: instructions, design and code. Through this development process, we created the Design System .italia you see today. It’s a comprehensive public Design System for Italy, offering everything from core principles and operational guidelines to UX writing fundamentals and components for building prototypes and final products.
The project fully upholds Open Source principles. This means continuous improvement through transparent processes and active community involvement. A new contribution model allows everyone to participate. Public project management boards provide clear visibility into reports, priorities and ongoing work, fostering discussions and collaboration.
This generation shifts the vision of digital accessibility in Italy from compliance to opportunity by integrating ‘accessibility by design‘ into every process and resource of the national Design System. Accessibility is no longer an ideal or just a regulatory response; it’s woven into the very fabric of the Design System: “Every design decision for a digital interface is a choice about who gets to participate. Our choices – from complexity to accessibility features – determine whether someone can use the service based on their background, skills, or even temporary limitations.”
The first few months of 2024 have been busy for the Design System. The Identity foundation has been solidified, laying a strong groundwork for future endeavors. The experimentation phase for the new Titillium Sans Pro typeface, detailed in the Typography foundation, is now underway. Collaboration with the community has yielded new development kits for Angular and React, further expanding the system’s capabilities. Designers Italia has gone a step further by publishing design models and templates specifically tailored for Italian Local Health Authorities (ASL) and Civic Museums. This demonstrates the Design System’s flexibility and its potential for even wider adoption.
Measuring the impact
Design System .italia’s third generation has seen explosive growth. The numbers tell the story:
Learning Resources:
- Three “How to Get Started” guides, four “How to Contribute” guides cater to projet managers, designers and developers.
- The system offers 16 “foundations” and 54 “components”, plus a designer kit and three developer frameworks.
Community Enganement:
- UI Kit Italia has been used by over 4,000 people in the Figma community within the past year.
- More than 390 Open Source software projects on GitHub list Bootstrap Italia as a dependency.
National Implementation (PNRR):
- As part of the PNRR initiative, 84% of Italian local governments and 81% of Italian schools (over 13,000 administrations in total) have joined to create their websites and digital services based on Design System .italia.
- Of these, about 38.5% have already implemented Design System .italia in their new websites. This translates to roughly 32% of all Italian local governments and schools.
Website Performance:
- The new designers.italia.it website, built with Design System .italia, has seen significant growth:
- Monthly visits have increased by 56.5% compared to the same period in 2023, reaching over 10,000 unique visits.
- Total visits have risen by *69.4% to over 16,000.
- Pageviews have jumped by 102.7% to 45,000.
- Average visit duration grew by 220.9% to around 3.5 minutes.
- The bounce rate decreased by 90% to just 4%.
What’s next
With a view to the continuous improvement typical of Open Source projects, Design System .italia has entered a new validation phase that involves verifying the accessibility and consistency of the 54 existing components, which will lead to the release of version 1.0.0 of the documentation.
Subsequently, research actions will be put in place in the coming months to create opportunities for discussion with those who use these resources firsthand, to continue shaping the future of .italia together with the entire Designers Italia community established over these years and which, to date, has more than 24,000 members.
This story wouldn’t be possible without the dedication and passion of a remarkable community. Designers, developers, public sector employees, industry professionals, enthusiasts, project managers, educators and students — from all over Italy — have contributed their ideas, expertise and commitment over the years. While we cannot name them all, we extend our heartfelt gratitude to this incredible collective force.
How to get involved
If you want to be part of this open and ever-evolving project, join the Designers Italia community.
- Discover how to use Design system .italia 🇮🇹 (in Italian)
- Discover how to contribute to Design system .italia 🇮🇹 (in Italian)
Chronology of Design System .italia resources
An overview of the main releases and resources of the Design System .italia in the three generations, for documentation 📚, design 📐 and development 💾 .
The current resources refer to the third generation.
Documentation 📚
Third generation .italia (2021–today):
- Design system .italia lives in a section of the Designers Italia website. To be preferred for creating interfaces consistent in style and user experience as prescribed by the “Linee guida di design” (Design Guidelines) (2022), issued ex Art 53 of the CAD. Versions from
1.0.0-alpha.1
(2022) to1.0.0-beta.2
of March 29, 2024 (documentation changelog).
Second generation (2017–2021):
- “User interface” chapter of the Design Guidelines, available on Docs Italia. Superseded by the Design Guidelines (2022) issued ex Art 53 of the CAD and by the publication of the “Manuale operativo di design” (Design Operational Manual). Versions from
2017.1
to2020.1
.
Prima generazione (2015–2017):
- “Linee guida di design per i siti web della PA” (Design Guidelines for PA Websites)
alpha
(2015), then available on the design.italia.it website.
Design 📐
Third generation .italia (2021–today):
- UI Kit Italia
v3
, native Figma, is available from the Figma community and, also converted to the open Sketch* format, from the /italia/design-ui-kit/ repository. Versions from3.0.0-alpha.1
(2023) to3.4.0
of March 7, 2024 (UI Kit Italia changelog). * The conversion is automated, launching the fig2sketch tool on release with a GitHub action also made available to the community. - Design Tokens Italia, exported from UI Kit Italia, the .italia design tokens are published in the /italia/design-tokens-italia/ repository available to designers and developers. Versione s from
1.0.0
(2023) to1.2.0
of December 12, 2023 (Design Tokens Italia changelog). - The high-definition layouts, prototypes, and component libraries of the Municipalities
v2
model (UI Kit Comuni changelog), and of the ASL (UI Kit ASL changelog) and Civic Museums (UI Kit Civic Museums changelog)v1
models are released in the Figma community and, also converted to the open Sketch format, in the respective repositories. They use and extend UI Kit Italiav3
.
Second generation (2017–2021):
- UI Kit
v2
, native Sketch, was available from the GitHub repository /italia/design-ui-kit/ and in preview on Invision. The “2” version, chosen then without a previous “1” release, indicated the awareness of a significant generational change. Deprecated since the release ofv3
in 2023, it is available for archival purposes from the “2.x” branch and from the repository of archived historical prototypes. - The hi-fi layouts and prototypes for the
v1
of the school and municipality models, native Sketch, are released on GitHub and in preview on Invision. They use and extend UI Kitv2
. Now deprecated, they are available for consultation from the repository of archived historical prototypes.
First generation (2015–2017):
- There were no dedicated kits, design specifications for some components were indicated in the
alpha
Design Guidelines.
Development 💾
Third generation .italia (2021–today):
- Bootstrap Italia
v2
is brought to Bootstrap 5 with extensive component, code, and technology stack refactoring. The focus of the work is on accessibility. New components are added (e.g., new Megamenu and Video player). Versions from2.0.0-rc.1
(2022 on dedicated-next
repository) tov2.8.5
of May 8, 2024 (Bootstrap Italia changelog). At the beginning of the third generation,v1
is also updated, with accessibility and dependency fixes as well as first evolutions. Versions from1.5.0
(2022) to1.6.4
of July 13, 2022, deprecated since 2023 in favor ofv2
. - The HTML templates for the
v2
of the school models (school templates changelog) and Municipalities (municipality templates changelog) are released on GitHub, they use and extend Bootstrap Italia. - React Kit
v5
is updated to Bootstrap Italiav2
, with important refactoring also by community. Versions from5.0.0-7
(2023) to5.0.4
of May 2, 2024 (React kit changelog). - Angular Kit
v1
, is updated to Bootstrap Italiav2
, with important refactoring also by community. Versions from1.0.0-0
(2022) to1.0.2
of April 8, 2024 (Angular kit changelog).
Seconda generazione (2017–2021):
- Bootstrap Italia
v1
is released, based on Bootstrap 4, with a dedicated documentation website. It immediately gathers a large community of contributors. Versions from0.0.1
(2018) to1.4.3
of May 28, 2021. - The HTML templates for the
v1
of the school and municipality models are released on GitHub, they use and extend Bootstrap Italia. - In parallel, the community pursues other open projects, among which the React Kit stands out, with its own documentation on Storybook. Versions up to
4.0.2
of December 27, 2021. n this generation, the first ideas for an Angular Kit with versions up to0.13.0
of September 14, 2018.
First generation (2015–2017):
- The HTML (and CSS) code for some components was downloadable from the
alpha
Design Guidelines. - Following the first applications, a first attempt is made to abstract a development kit, the Design web toolkit, with a dedicated documentation website. Maintained by a small community of practice, it is deprecated in 2019 in favor of Bootstrap Italia. Versions up to
1.0.0-alpha
of May 24, 2017.
Sources for the history of Design System .italia (Italian language)
Third generation .italia (2021–Today):
- Vabanesi, M. & Tabellini D. , Zaia, F. Dietro le quinte del sito MITD, dalla ricerca alla pubblicazione online (2a parte), March 16, 2021, Medium
- Zaia, F. & team Designers Italia. Ripartire da approccio e processo: la progettazione di servizi pubblici digitali, August 21, 2021, Medium
- Al via l’aggiornamento del design system del Paese, December 23, 2021, Designers Italia
- Tabellini, D., & Caccavello, F. Progettare con qualità: l’accessibilità al centro del design system del Paese, July 5, 2022, Medium
- Stagi, A. Bootstrap Italia per il design system del Paese, July 6, 2022, Medium
- Design system: pubblicata la versione ufficiale dello UI Kit Italia, May 4, 2023, Designers Italia
- Designers Italia si rinnova!, May 15, 2023, Designers Italia
- Prendi parte anche tu all’evoluzione del design system del Paese, September 25, 2023, Designers Italia
- Ciao .italia: la terza generazione del design system ha un nome ed entra in fase beta, March 8, 2024, Designers Italia
Second generation (2017–2021):
- Fabbri, L., & De Santi, M. Servizi pubblici a misura di cittadino, nasce la community dei designer, June 1, 2017, Medium
- De Blasis, D. Le griglie: alla scoperta dello UI kit di Designers Italia, partendo dalle basi, February 14, 2018, Medium
- De Santi, M. & Fabbri, L. Towards a new generation of public services: Designers Italia’s design kits, April 23, 2018
- Lucci, G. & Tabellini, D. Un progetto non comune: un prototipo di sito web per i Comuni italiani, January 15, 2019, Medium
- De Santi, M. Diario di bordo #1: l’app IO prende il largo, April 28, 2020, Medium
First generation (2015–2017):
- Online le Linee guida di design per i siti web della PA, November 21, 2015, AGID Maggio, R. Presentazione del nuovo sito governo.it, Reggia di Venaria, video on YouTube, November 21, 2015
- Sinni, G. Un carattere per l’identità italiana, January 18, 2016, Medium
- Quaratino, F. Eppur si Muove. Perché non è solo una questione di linee guida e perché è importante avere delle linee guida, April 4, 2016, Medium
- Sinni, G. La pubblica utilità è open source, Autumn 2016, magazin Progetto Grafico n. 30 “Tecnologie aperte”
Other useful references
- Propaedeutic readings in .italia: the Principles and Intentions foundation for the whys; Identity and Accessibility for the minimum references; How to Get Started to get you ahead, especially if you are a designer, developer, and/or project manager for the PA.
- People are at the center of the project: to create useful and effective experiences always start from research and people’s needs. You can use the Resources for Designing and the Designers Italia “Manuale operativo di design” (Design Operational Manual) to broaden the horizon to the entire design process, beyond the user experience and interface.
- The Design System .italia addresses two targets: the people who create experiences, in administrations and their suppliers; the people who use experiences, citizens and public employees, to be considered at the center of the project.
- The “matter” of digital is code, pixels, content, semantics, best practices, and compliance with standards, to be constantly cared for with a continuous improvement approach. Design System .italia deals precisely with this matter, down to the code of the components to compose the interfaces, available for multiple development frameworks.
- The open approach is a field choice: not only an obligation for the PA, open source, open design, and the correct open licenses are a choice for transparency, sharing, reuse, and openness to contributions from the entire community. Design System .italia is a public good.
- This story is inextricably linked to that of regulations and references: to the evolution of “Linee guida di design” (Design Guidelines), “Linee guida di accessibilità” (Accessibility Guidelines), CAD, European Accessibility Act, GDPR, “Piani triennali” (Three-year Plans), European indices on the quality of public services, and EN, UNI, WCAG reference technical standards or norms.
Translation note
Original Italian article on Designers Italia Medium blog: “Verso Design system .italia: dalle origini al design system aperto della Pubblica Amministrazione“. Published by Daniele Tabellini (@fupete) on May 22, 2024.
Translation reviewed and edited by Nicole Martinelli.
The original article, as this, is licensed under the Creative Commons Attribution 4.0 International (CC BY-SA 4.0) license.
The translation aims to make the content accessible to a wider, international audience. Some Italian terms and names of official guidelines and plans have been kept in their original form, with English translations provided in parentheses for clarity.