Sirio, is an open and modular system.

The INPS recently introduced its new Design System, a new design “syntax” that means to improve the UX of the sites belonging to the institute. This Design System, called “Sirio” from the name of the brightest star visible in the sky by night, was created to provide users with interfaces that allow them to orient themselves smoothly in finding the information they may need. The ecosystem is composed of guidelines for the construction of the navigation of a site, the hierarchical organization of its contents and their coherent visual representation. It matches the highest standards of continuity and coherence within it and will become the standard for the visual and interacting language of the institution.

We think of the creation of an open system, so that users, and not just the main actors (such as the public administration), can suggest modifications and modules. It is a matter of providing a complex ecosystem with a standard language, which amalgamates the work of both external and internal collaborators. Based on these elements, new components will be released continuously, which will be systematically integrated into the main scheme, together with the modules which are still under development.

What is a Design System in practice? The DS is a system of rules and guidelines designed to ensure consistency and continuity within the entire digital ecosystem of a brand. It also aims to make the communication of the corporate brand to customers more solid and distinctive, for better recognition of the brand itself.

The primary purpose of the Sirio DS is to make the design and development process of user interfaces easier, faster and more replicable, making all the atomic elements available to build them.

rawfish Sirio DS

A focus on the implementation of new standards

Vincenzo Caridi, director of IT, Technology and Innovation of INPS, compares the birth of the new Design System to a highway code, as it performs the same functions for digital design that it performs for road traffic, managing the procedures interaction of the elements and their hierarchy so that the whole process is fluid and smooth. Most importantly, the new DS clearly defines the standards according to which we should reorganize the elements themselves of the reference sites, grouping them by similarity so that the user can immediately recognize the repeated elements and consequently memorize the repeated patterns more easily. The standardization of the rules will allow users to easily get used to them: for example, buttons that have the same function will always be the same colour, so that the user can recognize their function immediately.

The decomposition into elements allows the recombination of the sequences, so that also for the developers the process of construction of the same is simplified. Within Sirio, very simple and detailed guidelines are presented for how to manage service interfaces, how they must be designed, what we can do and what not, which graphic elements to use.

In the words of Caridi “Since it is a modular system, it is possible to create new products by ‘assembling’ interface parts which are already defined and designed to combine with each other, similarly to what is done with constructions. This approach guarantees speed and greater predictability of development times. Furthermore, the improvements that are made to individual components will benefit the whole notwithstanding the use we made of it, and for all its future uses ”.

rawfish Inps design system

The bricks which build the Design System: the design tokens.

Browsing the guidelines of the Sirio Design System, we can see that at the moment they may seem sparse, but the content level of the individual chapters are well described both for the use of a Designer and for Developers.

The Design System was developed with Figma, excellent software that in recent times has been gaining its way among the various competitors in the sector and in one of the first chapters it is explained how to download the component libraries, how to use them and all the resources are attached. including fonts, for the correct display and use of the same.

 

In the Design System, a page is dedicated specifically for the Changelog. This way, all the actors can know what was added, changed or deprecated within the latest version.

Although the DS was released on September 29, a new version was uploaded shortly after on November 19 (v1.1) which adds an essential element to the Design System: Design Tokens.

 

Design tokens are the essential elements of an interface. Salesforce defines them as the Single Source of Truth to use for all of their products. In the Atomic Design methodology, they are called atoms, i.e. the building blocks at the base of more complex elements such as molecules and organisms.

Here in Sirio, we see them divided into:

 

Global Tokens

Global tokens are all those values ​​that are “absolute”, not dependent on any other value and from which they can be defined as child tokens. These are the primitive values ​​and from these, the alias tokens are declined.

Primary attributes such as colour, typography and animation values ​​are generally defined as global.

Token Alias

Alias ​​tokens are all those tokens that descend from global tokens and have a specific responsibility. They can refer to a specific context or action.

They are useful for communicating the purpose of the token and thus making the usage context clear.

Specific Tokens

Component-specific tokens are tokens that represent the property associated with a component.

rawfish Sirio DS INPS

Even if they have the same value of an alias token, their purpose is different: that is to tell and define a specific property of a component. Often they are declined by an alias token but this rule does not always have to / can be applied.

 

Within the guide, we also find a framework for importing tokens, through a special Figma plugin (https://www.figma.com/community/plugin/843461159747178978/Figma-Tokens) and their use.

Given how recent this Design System is, we cannot expect to find any element ready for use, in fact, there is a chapter with the release planning of the rest of the Design Tokens. To date, the essential ones are present, such as colours, typography and gradients; but in the future, they will also release tokens for sizing, opacity, radius, shadow and z-index.

Honourable mention regarding the chapter concerning the foundations, very exhaustive and complete in all its parts, even if only one point is missing, namely the motion.

It is divided into:

 

Colour

Typography

Icons

Grill

Surfaces (Layout)

 

An eye has been paid to accessibility for each foundation, in fact, a page is available for each that explains the accessibility rules.

 

As for the components, however, you can see the absence of some elements, but given the still unripe nature of Sirio, they will certainly be added over time in the next versions.