Attivo
Ritrovare un dialogo autentico
Tre obiettivi attivi e una nuova attività da completare questa settimana.
Avanzamento62%
Design System ufficiale
Calma, chiarezza e qualità in ogni dettaglio.
Una grammatica visiva elegante e rassicurante, progettata per rendere semplici i Percorsi e dare valore alle relazioni.
01 — Fondazioni
Identità visiva
Neutrali caldi, salvia profondo e una tipografia precisa costruiscono un ambiente professionale ma umano.
Palette essenziale
Ink
#191C1A
Sage
#385343
Sage soft
#EAF1EC
Warm
#FBFAF7
Success
#397255
Warning
#D99A2B
Danger
#A04444
Info
#2D628D
Tipografia
Crescere con intenzione
Display · Inter Semibold
Il tuo Percorso, con chiarezza
Heading · Inter Semibold
Un sistema leggibile e ordinato aiuta a riconoscere priorità, progressi e prossimi passi senza sovraccaricare l'attenzione.
Spaziatura e raggi
8
16
24
32
48
64
8px
12px
16px
24px
02 — Azioni
Pulsanti e icone
Le azioni hanno gerarchia netta, target generosi e stati riconoscibili senza introdurre rumore.
Varianti
Dimensioni e loading
03 — Form
Controlli chiari e gentili
Etichette persistenti, suggerimenti utili ed errori correggibili rendono ogni inserimento prevedibile.
Input, select e textarea
Checkbox e radio
04 — Feedback
Stati che orientano
Badge e alert comunicano cosa sta accadendo e cosa fare, sempre con testo e non soltanto colore.
Badge
Bozza AttivoIn attesaDa verificareProgrammatoNuovo
Alert
Il prossimo check-in sarà disponibile lunedì.
Le modifiche sono state salvate.
Il pacchetto ha una sola sessione residua.
Non è stato possibile completare l'azione.
05 — Contenuti
Card, avatar e tabelle
Superfici pulite organizzano informazioni complesse mantenendo leggibile la gerarchia.
Card Percorso
Avatar e persone
GC
Giulia Conti
Cliente
ER
Elena Riva
Psicologa
AM
Andrea Moretti
Coach/Admin
Tabella
Su schermi piccoli la tabella mantiene uno scroll orizzontale esplicito.
| Cliente | Percorso | Prossima attività | Stato | Sessioni | Azioni |
|---|---|---|---|---|---|
| Giulia Conti | Dialogo autentico | Oggi | Attivo | 4 di 6 | |
| Luca Bianchi | Nuovi equilibri | Venerdì | In attesa | 2 di 5 | |
| Sara Romano | Scelte consapevoli | Completata | Completato | 8 di 8 |
06 — Navigazione
Orientamento stabile
Sidebar, topbar, breadcrumb e tabs mantengono sempre visibili contesto e prossima destinazione.
Sidebar
Il Coach Giusto
Area Psicologa
Topbar e breadcrumb
Percorso
Giulia Conti
Tabs interattive
Vista panoramica selezionata.
07 — Overlay
Interazioni contestuali
Modali, drawer e menu entrano in scena soltanto quando preservano il contesto e riducono la complessità.
Modale
Per decisioni brevi e focalizzate.
Drawer
Per dettagli o navigazione contestuale.
Menu contestuale
Per azioni secondarie su un oggetto.
08 — Stati
Vuoto, loading e conferma
Anche quando il contenuto manca o sta arrivando, l'interfaccia resta utile e rassicurante.
Stato vuoto
Nessun obiettivo ancora
Inizia definendo il primo passo concreto del Percorso.
Skeleton
Toast
Il toast appare in una regione live e può essere chiuso manualmente.
Iconografia
20px
20px
20px
20px
20px
20px
20px
20px