Italiano

The journey of Design System .italia: Open design for digital public services

About 13 min reading time

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

The journey of Design System .italia: Open design for digital public services

Leggi in italiano…

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.

Timeline of the three evolutions: first from 2015 to 2017; second from 2017 to 2021; third from 2021 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.

For a design of public administration services. The site of the first Design Guidelines. Linee guida di design (Design Guidelines) alpha version (2015)

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.

The design of the interface. The 2020.1 version of the Design Guidelines. Linee guida di design (Design Guidelines) v2020.1

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.

We design digital public services to solve citizens' problems and restore good humour. The Designers Italia website, circa 2020. The designers.italia.it website at the end of 2020
UI Kit v2 preview, buttons and mockups. UI Kit v2, preview

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.”

Design Guidelines. The standard you have to comply with in any provision of digital sites and services for the public administration. From the standards and references section of the Designers Italia website. Linee guida di design (Design Guidelines, 2022), issued under Art. 53 of the CAD

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.

Participate in the digital transformation of PA. The homepage of the Designers Italia website in desktop and mobile formats. The new designers.italia.it website (2023)

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.

Discover and use the Italy's design system. The dedicated section on the Designers Italia website. Design system .italia: the docs
Accordion. An Accordion is a list of headings that can expand to show hidden content, useful for optimising page space and creating links to related content. From the documentation of .italy available from the Designers Italia site. Design system .italia: component detail

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.

Public board with reports and activities from the repositories of the design system .italy Design system .italia: the public board for project management

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:

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.

UI Kit Italy v3, overview of styles and components Design system .italia: UI Kit Italia v3 (Figma Community, GitHub Repo)

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) to 1.0.0-beta.2of 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 to 2020.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):

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 of v3 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 Kit v2. 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 from 2.0.0-rc.1 (2022 on dedicated -next repository) to v2.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 from 1.5.0 (2022) to 1.6.4 of July 13, 2022, deprecated since 2023 in favor of v2.
  • 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 Italia v2, with important refactoring also by community. Versions from 5.0.0-7 (2023) to 5.0.4 of May 2, 2024 (React kit changelog).
  • Angular Kit v1, is updated to Bootstrap Italia v2, with important refactoring also by community. Versions from 1.0.0-0 (2022) to 1.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 from 0.0.1 (2018) to 1.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 to 0.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):

Second generation (2017–2021):

First generation (2015–2017):

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.

Leggi in italiano…

Some rights reserved

Accessibility   A11y   Design System   Italia   Pubblica Amministrazione