Dal brand storico
a un sistema coerente.
Cardioritmon ha costruito negli anni un'identità riconoscibile nel settore degli integratori cardiovascolari. Il bordeaux, il rigore scientifico, la credibilità Dompé sono asset reali che non vanno dispersi.
Questo documento descrive l'evoluzione — non la rivoluzione — del design language. L'obiettivo è costruire un sistema scalabile che mantenga le radici del brand e lo proietti verso un pubblico più ampio, su più touchpoint, con più coerenza.
Questo documento copre palette, tipografia, spacing, componenti e motion.
Sito, app, social, farmacisti, packaging, materiali medici.
Design token system: un cambio si propaga su tutti i touchpoint.
Dove siamo oggi.
Il brand Cardioritmon ha una storia solida. Il bordeaux è immediatamente riconoscibile nel settore. La comunicazione scientifica è credibile. Tuttavia, l'analisi dei touchpoint attuali rivela alcune tensioni che limitano la scalabilità del sistema.
- —Bordeaux riconoscibile nel settore farmaceutico
- —Credibilità scientifica consolidata
- —Associazione forte con Dompé
- —Logo leggibile e versatile
- —Palette percepita come 'clinica' dal target wellness
- —Sistema tipografico non codificato
- —Inconsistenza tra touchpoint digitali
- —Mancanza di un design token system
Cosa manca al sistema.
L'analisi comparativa dei touchpoint attuali (sito, app, materiali farmacisti, social) rivela sei aree di discontinuità che riducono la coerenza percepita del brand e aumentano il costo di sviluppo di nuovi materiali.
Il bordeaux storico (#8B1A4A) è associato al settore farmaceutico tradizionale. Il bianco dominante crea una percezione 'ospedaliera' che allontana il consumatore wellness.
Carmine Profondo (#5B1A3A) più caldo e raffinato. Sfondo Nebbia (#F7F5F2) che evoca carta pregiata, non corsia d'ospedale.
Font system non coerente tra sito, app e materiali. Mancanza di una gerarchia visiva chiara. Il serif usato in alcuni contesti crea discontinuità.
Sistema bipartito TikTok Sans (display) + DM Sans (body). Gerarchia rigida: 3 livelli di titolo, 2 di corpo. Tracking e line-height codificati.
Spaziatura variabile tra le pagine. Densità informativa alta sulle pagine prodotto. Mancanza di respiro visivo che comunica premium.
Sistema a 8pt grid. Margini generosi (min 24px mobile, 48px desktop). White space come elemento di design, non come spazio vuoto.
Mix di stili iconografici (filled, outline, custom) senza un sistema unificato. Dimensioni variabili. Nessuna coerenza tra app e sito.
Set unico outline 1.5px stroke, corner radius 2px. Dimensioni: 16/20/24px. Metafore visive legate alla salute cardiovascolare.
Button, card e form non seguono un design token system. Ogni touchpoint è stato sviluppato indipendentemente, con variazioni non intenzionali.
Design token system: colori, tipografia, spacing, radius, shadow tutti come variabili. Un cambio nel token si propaga su tutti i touchpoint.
Transizioni assenti o inconsistenti. L'app usa animazioni diverse dal sito. Nessuna linea guida su durata, easing, trigger.
Motion system: 150ms micro (hover), 250ms standard (slide-in), 400ms macro (page transition). Easing: ease-out per entrate, ease-in per uscite.
I quattro principi
che guidano ogni scelta.
Prima di definire colori, font e componenti, è necessario stabilire i principi che governano le scelte. Ogni decisione di design deve poter essere giustificata rispetto a questi quattro principi.
Ogni scelta visiva deve comunicare rigore scientifico senza diventare fredda. Il paziente non è un numero clinico — è Marco, Simona, Anna. Il design deve rispecchiare questa dualità.
Cardioritmon è un prodotto Dompé — ha credenziali premium. Ma il premium non deve creare distanza. Deve comunicare: 'ci siamo presi cura di questo per te', non 'questo è per pochi eletti'.
Un utente che vede un post Instagram, visita il sito e apre l'app deve percepire lo stesso brand. Non tre brand diversi che condividono un logo. Il design system è il garante di questa coerenza.
Il target primario ha 45-65 anni. Testo piccolo, contrasto basso, gerarchia confusa non sono problemi estetici — sono barriere all'accesso. Leggibilità è rispetto per l'utente.
Sei colori.
Un sistema.
La nuova palette mantiene il DNA del brand (il carmine, il calore) e lo evolve verso un sistema più sofisticato. Ogni colore ha un ruolo preciso e non è intercambiabile con gli altri.
Primario — autorevolezza medica, radici nel brand
Accento — calore, scientificità, premium
Testo principale — leggibilità massima
Sfondo — calore vs. bianco clinico
Bordi e divisori — eleganza senza peso
Accento secondario — natura, benessere
Carmine Profondo (#5B1A3A) è una versione più calda e raffinata del bordeaux storico. Mantiene il riconoscimento del brand ma elimina la percezione 'ospedaliera'. Il delta percettivo è minimo per chi conosce il brand, ma significativo per i nuovi utenti.
Oro Antico (#C4703F) sostituisce l'arancio CTA attuale. È meno aggressivo, più premium. Comunica calore, scientificità, artigianalità — valori coerenti con un integratore di qualità. Funziona perfettamente come accento su sfondo Nebbia.
Due font.
Una gerarchia.
Il sistema tipografico è bipartito: TikTok Sans per tutto ciò che deve comunicare identità (titoli, label, navigation), DM Sans per tutto ciò che deve facilitare la lettura (body, descrizioni, tooltip). I due font non si sovrappongono mai.
Il colesterolo si gestisce.
Geometrico, moderno, ad alta leggibilità anche a dimensioni piccole. Rompe il cliché del farmaceutico serif senza perdere autorevolezza. Usato per titoli, label, navigation.
Berberina 500mg · Riso Rosso Fermentato · CoQ10 · Acido Folico · Vitamina B12
Umanista, caldo, ottimizzato per la lettura a schermo. Complementa TikTok Sans senza competere. Usato per body copy, descrizioni, tooltip.
Il colesterolo si gestisce.
7 scenari. 7 persone reali.
App Cardioritmon
Berberina 500mg, formula a 5 meccanismi d'azione sviluppata con RITMON COLESYSTEM.
Dashboard LDL, reminder, badge, report medico. L'esperienza completa in 90 giorni.
PROTOTIPO · 90 GIORNI · LDL TRACKER
Il respiro
è parte del design.
Il sistema di spacing è basato su una griglia a 8pt. Ogni margine, padding e gap è un multiplo di 8 (o 4 per i casi micro). Questo garantisce coerenza visiva e facilita la collaborazione tra design e sviluppo.
I mattoni
del sistema.
I componenti sono la materializzazione del design system. Ogni componente è costruito con i token definiti nelle sezioni precedenti. La coerenza non è un obiettivo estetico — è una conseguenza dell'uso corretto dei token.
Tutti i button usano border-radius pill (999px). Il tracking di 0.18em garantisce leggibilità anche a 10px. L'altezza minima è 44px per accessibilità touch.
I tag usano outline per ridurre il peso visivo. Il filled è riservato ai badge di stato (Demo, Attivo). Dimensione fissa 9px uppercase con tracking 0.16em.
Sfondo Nebbia (#F7F5F2) invece del bianco: più caldo, meno clinico. Focus state con ring 3px a bassa opacità. Border-radius 12px coerente con il sistema.
L'evoluzione
in tre componenti.
Il confronto diretto mostra che l'evoluzione è calibrata: il brand rimane riconoscibile, ma ogni componente guadagna in raffinatezza, coerenza e accessibilità.
Razionale: Border-radius pill: più moderno, più accessibile al tocco. Tracking aumentato: più leggibile a dimensioni piccole. Shadow: profondità senza peso.
Formula a 5 meccanismi d'azione.
Formula a 5 meccanismi d'azione.
Razionale: Sfondo Nebbia vs. bianco: percepito come più premium. Radius 16px: coerente con il sistema. Shadow più diffusa e meno opaca: eleganza.
Razionale: Da filled a outline: meno peso visivo, più eleganza. Testo uppercase con tracking: coerente con il sistema tipografico.
Un sistema, non uno stile.
Il design language proposto non è un restyling estetico. È un'infrastruttura visiva che garantisce coerenza su tutti i touchpoint, riduce il costo di produzione di nuovi materiali e costruisce un brand che scala con il prodotto.