workbuddy_skills/open-design/design-systems/duolingo/DESIGN-it.md

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

Ruolo	Font	Dimensione	Peso	Altezza riga	Spaziatura	Note
Display	Feather Bold	56px (3.5rem)	800	1.05	-0.01em	Eroe onboarding
H1	Feather Bold	32px (2rem)	800	1.15	-0.005em	Titolo pagina
H2	Feather Bold	24px (1.5rem)	800	1.2	normal	Intestazione sezione
H3	Feather Bold	18px (1.125rem)	700	1.25	normal	Titolo scheda, riga lezione
Corpo grande	Mona Sans	17px (1.0625rem)	500	1.5	normal	Prompt lezione, istruzione
Corpo	Mona Sans	15px (0.9375rem)	400	1.5	normal	Prosa standard
Didascalia	Mona Sans	13px (0.8125rem)	600	1.4	0.01em	Contatore XP, metadati
Pulsante	Feather Bold	16px (1rem)	800	1.2	0.02em	Etichetta pulsante standard
Serie	Feather Bold	14px (0.875rem)	800	1.2	normal	Numero serie, sulla fiamma

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.