Un brand, un sito, un’app per web, iOS e Android, un desk per i contenuti e due film per un prodotto che investe la stessa cifra ogni mese. Un solo codice Next.js, composto con il nostro design system, con i testi nel nostro CMS.
- Anno
- 2026
- Ruolo
- Brand, product design and engineering
Il brief
Stilla vende un solo prodotto: un piano che ogni mese compra la stessa cifra di un mix di azioni, obbligazioni e oro, nel giorno scelto dal cliente. È un piano di accumulo, e funziona quando chi lo sottoscrive non fa niente. Il mese più difficile è quello in cui i prezzi scendono: il piano continua a comprare, e l’app deve far capire che il punto è proprio questo.
I fondatori sono arrivati da noi con il nome e i conti del piano, e niente che un cliente potesse vedere. Serviva un brand, un sito, un’app per web, iOS e Android, un desk dove il loro team scrive le guide e i documenti informativi, e i film per il lancio. Abbiamo costruito tutto sul nostro design system e sul nostro CMS, in un solo codice Next.js.
Un brand fatto di versamenti
Abbiamo dato al prodotto il nome di una goccia. Stilla è la goccia dell’italiano letterario, dal latino, e in inglese il piano di accumulo si chiama drip-feeding, investire a gocce. Il marchio è il puntino della i nel logotipo, disegnato come una goccia color lime: un versamento.
Tutto il resto parte da quel punto. Sul sito e nei film, dietro la prima schermata c’è un campo di puntini, ognuno un mese di piano: si infittiscono verso la luce e svaniscono prima di toccare una parola. La palette è un solo colore e i due fondi su cui vive.
Sul fondo scuro il lime regge 15,94:1 con l’etichetta nera, sulla carta scende a 1,2:1. Invece di schiarire il brand finché funzionasse ovunque, al fondo chiaro abbiamo dato un lime più profondo, con l’etichetta bianca a 4,99:1 a riposo e 8,05 alla pressione. Due valori per un colore, misurati in ogni stato prima di mostrare una schermata.
Un sito che mostra il piano al lavoro
La prima schermata dice in sei parole cosa fa il prodotto e lo mostra mentre lo fa: quanto vale un piano, i prossimi due versamenti e l’anno alle spalle, come li mostra l’app quella mattina. Abbiamo scritto un piano di esempio, con i conti fatti una volta sola, e lo abbiamo usato su ogni schermata del sito e dell’app: un totale sulla home è lo stesso totale nell’app.
L’argomento a favore di un piano mensile è un mese in calo, e gli abbiamo dato una sezione tutta sua. Ad aprile 2025 il mix è sceso del 7,3% e gli stessi 400 euro ne hanno comprato il 7,8% in più. Il grafico è la storia del piano.
Ogni numero del sito racconta il passato di un piano. Non abbiamo disegnato proiezioni di rendimento: sulla home di un prodotto d’investimento si leggono come una promessa.
Un’app Next.js per web, iOS e Android
L’app è lo stesso codice Next.js del sito. Su desktop si apre con una colonna di quattro sezioni; sotto i 64rem la colonna diventa una barra in basso, ed è l’app per il telefono. L’abbiamo pubblicata su App Store e Google Play dentro una shell nativa che fa in nativo le tre cose per cui esiste: Face ID o impronta per aprirla, una notifica la mattina del versamento, le chiavi custodite nel portachiavi del dispositivo.
Abbiamo valutato due app native. Avrebbero dato l’ultima parola a ogni gesto, e avrebbero voluto dire tre codici da tenere allineati per un prodotto che si apre poche volte al mese per controllare un piano. Abbiamo scelto un codice solo: una schermata corretta una volta è corretta sul web, su iOS e su Android nello stesso rilascio.
Today risponde a una domanda: come vanno i piani. La pagina di un piano risponde alla successiva: cosa contiene rispetto al suo mix, e cosa comprerà il prossimo versamento per riequilibrarlo. Aprire un piano sono quattro risposte in un passaggio.
Costruito sul nostro design system
Ogni schermata di questo case study è composta con il nostro design system: 42 suoi componenti, dalla prima sezione del sito all’editor del desk, e nessuno scritto apposta per Stilla. Quello che Stilla ha cambiato del sistema sta in sette valori di tema: il lime sui due fondi, i due caratteri, le forme arrotondate e il fondo scuro con cui si apre. Il suo aspetto, la luce e i puntini, è un foglio di stile appoggiato sui token del sistema.
È questo che permette a un prodotto di queste dimensioni di crescere senza un secondo codice per la grafica. Una schermata nuova è una composizione di parti che reggono già i due temi, ogni larghezza e ogni stato. Una correzione si fa una volta sola, nel sistema, e arriva insieme a sito, app e desk. Il tema chiaro è arrivato così: abbiamo cambiato tema, misurato il contrasto, e ogni schermata ha retto.
Il desk: i testi senza un rilascio
Il team di Stilla scrive nel nostro CMS. Le guide di Learn, le domande frequenti, le note di mercato e i documenti informativi sono record nel suo desk, in inglese, italiano e spagnolo, ogni lingua nella sua scheda, e sito e app li leggono appena vengono pubblicati. Cambiare una guida non richiede un rilascio.
Il desk è costruito sullo stesso design system del prodotto, così chi scrive vede le parole con i caratteri e i colori che avranno. Ogni articolo porta il nome di chi l’ha controllato prima della pubblicazione: i testi di un prodotto d’investimento li legge la compliance, oltre ai clienti.
Su cosa poggia
Stack
Next.js 16, React 19, TypeScript 5, Our design system, Our CMS, Capacitor, Supabase, Remotion, Vercel.