Il nostro team, attraverso l’approccio user-first, pone al centro il concetto di valore per l’utente, e promuove un approccio al Design collaborativo, efficiente e data driven
Progettare servizi digitali che migliorano la qualità della vita del cittadino.
Fornire al cittadino tutte e solo le informazioni e i servizi di cui ha bisogno per la propria protezione sociale, tramite una presenza digitale semplice, accessibile e costantemente ottimizzata sulla base delle sue esigenze.
👋 Ciao sono Sirio. Sono il linguaggio visivo e di interazione dell'Istituto! Progettare per il Cittadino con me da oggi è più semplice.
🔗 inps.design/sirio-design-system
................................................................................................................................................................................
I Design Token sono tutti i valori utili a costruire un sistema di progettazione. Definiti come gettoni poichè rispecchiano in maniera atomica tutti gli attributi estetici che costituiscono i componenti del Design system. Sono espressi in valori e fanno riferimento a: colori, tipografia, spaziature, animazioni e qualsiasi altro attributo di stile definito in fase di design.
🔗 inps.design/sirio-design-token
I token globali costituiscono tutti quei valori che sono “assoluti”, non dipendenti da nessun altro valore e da cui possono essere definiti token figli. Sono i valori primitivi e da questi vengono declinati i token alias. In genere si definiscono globali gli attributi primari come: colore, tipografia e valori delle animazioni.
🟡 primary-000 { attributo } - { valore numerico in ordine crescente }
................................................................................................................................................................................
I token alias costituiscono tutti quei token che discendono dai token globali e che hanno una specifica responsabilità. Possono far riferimento ad uno specifico contesto o azione. Sono utili per comunicare lo scopo del token e quindi rendere chiaro il contesto di utilizzo.
🟣 interactive-accent-default { contesto } - { attributo } - { informazione aggiuntiva }
................................................................................................................................................................................
I token specifici del componente costituiscono i token che rappresentano proprietà associate ad un componente. Anche se hanno lo stesso valore di un token alias il loro scopo è differente: ossia raccontare e definire una specifica proprietà di un componente. Spesso sono declinati da un token alias ma non sempre questa regola deve/può essere applicata. Nel nostro caso eviteremo dove possibile di innestare i token oltre il secondo livello di innesto.
🔵 interactive-accent-default { contesto } - { attributo } - { informazione aggiuntiva }
Puoi 🔗 scaricare questo pacchetto o clonarlo tramite il terminale. Abbiamo trasformato i nostri token tramite la libreria 🔗 Amazon style dictionary.
Puoi 🔗 scaricare Figma da questo link.
Puoi 🔗 scaricare il plugin da questo link.