Sistema di design ispirato a Duolingo

Category: Produttività e SaaS Piattaforma di apprendimento delle lingue. Verde gufo brillante, ombre spesse, gioia gamificata.

1. Tema visivo e atmosfera

Duolingo è la gamificazione resa come linguaggio visivo. L’interfaccia è senza riserve luminosa, con il verde gufo (#58cc02) come colore primario del brand e una spessa ombra di 4px nella parte inferiore di ogni elemento interattivo, che si legge come un pulsante 3D in attesa di essere premuto. La pagina è bianca (#ffffff) con bordi spessi di 2–3px in grigio scuro (#e5e5e5), e l’intero sistema si legge come un’app iOS del 2015 rinata con una gerarchia migliore.

La tipografia usa Feather Bold (un sans-serif arrotondato personalizzato) per il chrome e Mona Sans (o Inter) per il corpo del testo. Le dimensioni display sono grandi e sicure — Duolingo non sussurra mai. I titoli portano spesso il tratto sottolineato verde o siedono su una pillola verde, e la mascotte Duo (un gufo verde) appare come un personaggio illustrativo attivo, non come un logo statico.

Il linguaggio delle forme è amichevole: raggi di 16–20px sulle schede, 12px sui pulsanti, 9999px su chip e barre di avanzamento. L’iconografia è piena, arrotondata e codificata per colore per competenza — ogni superficie di lezione ha una combinazione di colori immediatamente identificabile.

Caratteristiche principali:

• Verde gufo (#58cc02) come colore di brand dominante, usato in oltre il 30% della superficie
• Spessa ombra inferiore di 4px su ogni pulsante (l’affordance della “pressione tattile”)
• Bordi solidi di 2–3px, mai linee sottili
• Feather Bold (display arrotondato) + Mona Sans (corpo)
• Testo grande e sicuro — le dimensioni display partono da 48px e salgono
• Mascotte come personaggio: Duo il gufo appare nell’onboarding, negli errori, nelle serie
• Arancione serie (#ff9600) e rosa gemma (#ce82ff) come colori di brand secondari

2. Palette colori e ruoli

Primario

• Verde gufo (#58cc02): Primario brand, CTA principale, risposta corretta.
• Verde gufo scuro (#58a700): Colore di pressione/ombra per i pulsanti verdi.
• Verde gufo chiaro (#89e219): Hover, riempimenti morbidi.
• Verde gufo pallido (#dbf8c5): Superficie morbida, banner di successo.

Accenti secondari

• Arancione serie (#ff9600): Contatore serie, icona fiamma, energia premium.
• Arancione serie scuro (#cc7a00): Arancione premuto.
• Rosa gemma (#ce82ff): Valuta gemma, Super Duolingo.
• Blu anguilla (#1cb0f6): Pulsante suggerimento, link informativo.
• Rosso cardinale (#ff4b4b): Risposta errata, vita persa.
• Giallo ape (#ffc800): Badge pro, risultato.

Superficie

• Neve (#ffffff): Sfondo principale.
• Anguilla (#f7f7f7): Separazione sezione, superficie secondaria.
• Cigno (#e5e5e5): Sfondo disabilitato, blocco incorporato.
• Lupo (#777777): Divisore scuro, testo secondario.

Inchiostro e testo

• Nero anguilla (#3c3c3c): Testo principale.
• Lupo (#777777): Testo secondario, didascalie.
• Lepre (#afafaf): Disabilitato, segnaposto.

Bordo

• Cigno (#e5e5e5): Bordo standard 2px.
• Lepre (#afafaf): Bordo enfatizzato all’hover.

3. Regole tipografiche

Famiglia di font

• Display / UI / Titoli: Feather Bold, con fallback: 'DIN Round Pro', 'Helvetica Neue', sans-serif
• Corpo / Testo lungo: Mona Sans, con fallback: 'Helvetica Neue', system-ui, sans-serif
• Codice (raro, scuole/admin): JetBrains Mono, con fallback: ui-monospace, Menlo, monospace

Gerarchia

Principi

• 800 è il predefinito: Feather Bold gira a 800 su titoli e pulsanti. 700 risulta debole in questo sistema.
• Testo grande: le dimensioni dei titoli sono 25–40% più grandi rispetto ai brand di prodotto tipici — la sicurezza come identità.
• Forme delle lettere arrotondate: ogni glifo ha terminazioni morbide; le grazie taglienti romperebbero il contratto di amichevolezza.

4. Stile dei componenti

Pulsanti

Primario (Verde gufo)

• Sfondo: #58cc02
• Testo: #ffffff
• Spaziatura interna: 14px 24px
• Raggio: 16px
• Border-bottom: 4px solid #58a700 (l’ombra spessa)
• Hover: sfondo #89e219
• Attivo: translate-y 4px, border-bottom 0 (il pulsante “si preme”)
• Utilizzo: “Continua”, “Controlla”, CTA principale.

Secondario (Bianco con ombra inferiore)

• Sfondo: #ffffff
• Testo: #777777
• Bordo: 2px solid #e5e5e5
• Border-bottom: 4px solid #e5e5e5
• Raggio: 16px
• Spaziatura interna: 14px 24px
• Hover: testo #3c3c3c, bordo #afafaf

Arancione serie

• Sfondo: #ff9600
• Testo: #ffffff
• Border-bottom: 4px solid #cc7a00
• Utilizzo: obiettivo serie, “Inizia serie”

Errore (Rosso cardinale)

• Sfondo: #ff4b4b
• Testo: #ffffff
• Border-bottom: 4px solid #cc3b3b
• Utilizzo: feedback risposta errata.

Schede / Riquadri lezione

• Sfondo: #ffffff
• Bordo: 2px solid #e5e5e5
• Border-bottom: 4px solid #e5e5e5
• Raggio: 16px
• Spaziatura interna: 16px
• Hover: sollevare di 2px, ombra 0 4px 0 #d7d7d7

Nodo albero competenze (Bolla lezione)

• Dimensione: 80×72px
• Sfondo: tinta colore competenza (verde per attivo, grigio per bloccato)
• Border-bottom: 6px solid variante più scura
• Raggio: 50% (circolare)
• Attivo: pulsa 1.0 → 1.05 ogni 1.6s

Input

• Sfondo: #ffffff
• Bordo: 2px solid #e5e5e5
• Raggio: 12px
• Spaziatura interna: 12px 16px
• Focus: bordo #1cb0f6 (blu anguilla), anello 0 0 0 3px rgba(28, 176, 246, 0.2)

Barra di avanzamento

• Traccia: #e5e5e5
• Riempimento: #58cc02 (o #ff9600 per la serie)
• Raggio: 9999px
• Altezza: 16px
• Riempimento animato: 320ms ease-out all’incremento.

5. Spaziatura e layout

• Unità base: 4px. Scala: 4, 8, 12, 16, 24, 32, 48, 64.
• Contenitore: max 1080px, grondaia 24px.
• Colonna albero lezioni: 320px di larghezza; centrata su desktop.

6. Movimento

• Durata: 180ms per la pressione del pulsante; 320ms per lo sblocco del nodo competenza; 1.6s per il pulse del nodo attivo.
• Easing: cubic-bezier(0.34, 1.56, 0.64, 1) (back-out, leggero superamento) per gli sblocchi.
• Mascotte: Duo sbatte le palpebre ogni 4–6s, salta ai traguardi della serie (480ms ease-out molla).

7. Linee guida sull’uso

• Mantieni insieme il verde gufo ad alta saturazione, le spesse ombre inferiori e la geometria arrotondata delle lezioni; i pulsanti verdi piatti da soli non si leggono come Duolingo.
• Riserva il testo in grassetto sovradimensionato per i momenti di lezione, serie e progresso in cui il prodotto ha bisogno di incoraggiamento o feedback.
• Usa il movimento giocoso con parsimonia attorno ai cambiamenti di stato di avanzamento, evitando animazioni rimbalzanti generiche su ogni controllo.