Skip to content

INPS-it/sirio-design-token

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

50 Commits
 
 
 
 
 
 

Repository files navigation

Riferimento alla Versione 6.0.0 di Sirio

UX@INPS

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

🚀 Vision

Progettare servizi digitali che migliorano la qualità della vita del cittadino.

🎾 Mission

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.

💎 Valori

  1. PERSONE AL CENTRO
  2. COLLABORAZIONE E DIVERSITÀ
  3. VALORE DEL RIUTILIZZO
  4. VALORE DELLA CONDIVISIONE
  5. COERENZA E STANDARDIZZAZIONE
  6. MISURAZIONE DELL'IMPATTO PER I CITTADINI
  7. MIGLIORAMENTO CONTINUO
  8. RICERCA DELLE EVIDENZE OGGETTIVE
Esplora il nostro Manifesto

🔗 inps.design/manifesto


Sirio Design System

👋 Ciao sono Sirio. Sono il linguaggio visivo e di interazione dell'Istituto! Progettare per il Cittadino con me da oggi è più semplice.

I miei obiettivi

  • 👨‍💼👩🏻‍💼👩🏽‍🔧🧑🏼‍🏫 Semplificare e migliorare l’esperienza degli utenti
  • 🚁 Comunicare il brand in modo univoco
  • 🎢 Semplificare ed efficientare la realizzazione e l’evoluzione dei prodotti digitali
  • 👨‍👨‍👦‍👦 Rafforzare la collaborazione interna e la standardizzazione dei flussi operativi

Segui le mie linee guida e progetta in modo sicuro

🔗 inps.design/sirio-design-system

................................................................................................................................................................................

🟡 🟣 🔵 Sirio Design Token

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.

Segui le mie linee guida e progetta in modo sicuro

🔗 inps.design/sirio-design-token

🟡 Design Token Globali

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.

Obiettivo token globali

  • Definiamo i token globali per costituire le radici da cui verranno discenderanno i token alias e i token specifici di componente
Regole Name Convention token-globale

🟡 primary-000 { attributo } - { valore numerico in ordine crescente }

................................................................................................................................................................................

🟣 Design Token Alias

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.

Obiettivo Token Alias

  • Definiamo i token alias per fornire informazioni relative al contesto di utilizzo di ciascun token, specifichiamo il loro scopo e cerchiamo di renderli “riutilizzabili” in più casi d’uso.
Regole Name Convention token-alias

🟣 interactive-accent-default { contesto } - { attributo } - { informazione aggiuntiva }

................................................................................................................................................................................

🔵 Design Token Specifico di componente

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.

Obiettivo Token Specifico di componente

  • Definiamo i token specifici di componente con l’obiettivo di fornire un’informazione relativa alle proprietà associate ad un elemento.
Regole Name Convention token-specifico-di-componente

🔵 interactive-accent-default { contesto } - { attributo } - { informazione aggiuntiva }


🛠 Strumenti per Developer

1. Scaricare o clonare il repo sul proprio computer

Puoi 🔗 scaricare questo pacchetto o clonarlo tramite il terminale. Abbiamo trasformato i nostri token tramite la libreria 🔗 Amazon style dictionary.

👩‍🎨 Strumenti per Designer

1. Scaricare e installare il tool Figma (tool per la progettazione)

Puoi 🔗 scaricare Figma da questo link.

2. Scaricare e installare il plugin Figma Token (plugin utile per la gestione dei Design Token)

Puoi 🔗 scaricare il plugin da questo link.