Il progetto

Attività

Descrizione

Fondamenta

Palette colori

Il punto di partenza è il Forest Green, colore identitario di Mywellness. Attorno a lui è stata costruita la palette semantica del sistema: ogni colore funzionale — dagli stati di successo agli errori — è stato scelto in relazione al verde principale, bilanciando coerenza visiva con tutti i touchpoint e accessibilità, nel rispetto delle linee guida WCAG.

Tipografia

La scala tipografica è definita su più livelli, e ognuno specifica dimensione, peso e interlinea in modo da garantire gerarchia leggibile su tutte le superfici — sia nel CRM desktop che nell’app mobile.

Spaziatura e griglie

Il sistema di spaziatura si basa su una scala a multipli di 4px. Le griglie adattive sono definite per tre breakpoint principali — desktop di grandi dimensioni, desktop di dimensioni standard e tablet — con colonne, margini e gap specifici per ciascuna superficie.

Componenti base

Button

Tre varianti principali — primary, secondary, outline — più una variante icon, link e delete per azioni irreversibili. Ogni variante espone stati di hover, pressed, selected e disabled. Il pulsante primary usa il colore brand come sfondo; le varianti restanti degradano progressivamente verso la trasparenza.

Input e form

Campi di testo, ricerca, selezione e dropdown. Ogni elemento espone vari stati: rest, hover, active, error, disabled e read-only. Gli input di ricerca integrano un’icona e il comportamento di clear in stato attivo. Altri campi utili e utilizzati nel sistema sono quello numerico e il combo per azioni multiple.

Badge e stati

I tag vengono utilizzati in varie situazioni, principalmente per comunicare lo stato dei contatti, abbonamenti, campagne e notifiche, ma anche all’interno dei campi select. Le varianti seguono i colori semantici del sistema in modo che il significato sia sempre leggibile indipendentemente dal contesto, ma possono anche essere utilizzati colori specifici in altre sezioni, come quella delle dashboard.

Toggle, checkbox e radio

Controlli per la selezione e la preferenza. Il toggle è utilizzato per stati binari immediati — attivare o disattivare una funzione senza conferma. La checkbox gestisce selezioni multiple all’interno di un gruppo, con stato indeterminato per le selezioni parziali. Il radio button è riservato a scelte mutualmente esclusive, dove una sola opzione può essere attiva alla volta.

Avatar

Rappresentazione visiva degli utenti — clienti, trainer, staff — tramite iniziali, foto profilo o con icona per le situazioni generiche.

Componenti composti

Cards

Le card aggregano le informazioni principali di un determinato contenuto, come un esercizio, una Journey, una classe. Sono cliccabili e hanno dei contenuti variabili in base alla sezione, spesso composte da un’immagine, un titolo, e altri riferimenti. L’intera superficie conduce alla vista di dettaglio.

Notifiche

Il sistema prevede due pattern distinti per la comunicazione con l’utente. I toast sono notifiche temporanee e non bloccanti, che compaiono in sovraimpressione per confermare un’azione appena completata o segnalare un errore contestuale — scompaiono autonomamente dopo un intervallo definito. Il notification panel raccoglie invece le notifiche persistenti del sistema e a differenza del toast richiedono una lettura attiva e possono includere azioni. Entrambi i pattern utilizzano i colori semantici del sistema per comunicare la natura della notifica — successo, warning, errore, informazione.

Data table

Componente strutturale per liste clienti, log attività, risultati di campagne e molto altro. Supporta ordinamento per colonna, selezione multipla, paginazione e righe espandibili. Le colonne sono configurabili per mostrare badge, avatar, azioni inline e valori numerici.

Data visualization

Charts

I grafici della dashboard costituiscono una categoria autonoma all’interno del sistema, con regole di design specifiche e una palette colori più ampia. La libreria definisce i tipi di grafico utilizzati nel CRM — line chart, bar chart, donut — insieme alle scale cromatiche dedicate, costruite per garantire leggibilità e distinzione tra serie di dati anche in condizioni di contrasto ridotto.