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

# Sistema di Design Ispirato a Spotify

> Category: Media e Consumer
> Streaming musicale. Verde vibrante su sfondo scuro, tipografia decisa, guidato dall'arte degli album.

## 1. Tema Visivo e Atmosfera

L'interfaccia web di Spotify è un music player scuro e immersivo che avvolge gli ascoltatori in un bozzolo quasi nero (`#121212`, `#181818`, `#1f1f1f`), dove l'arte degli album e i contenuti diventano la principale fonte di colore. La filosofia di design è "content-first darkness" — l'interfaccia si ritira nell'ombra affinché musica, podcast e playlist possano risplendere. Ogni superficie è una tonalità di antracite, creando un ambiente teatrale in cui il solo vero colore proviene dall'iconico Spotify Green (`#1ed760`) e dalle copertine degli album stessi.

La tipografia utilizza SpotifyMixUI e SpotifyMixUITitle — font proprietari della famiglia CircularSp (Circular di Lineto, personalizzato per Spotify) con un ampio stack di fallback che include font arabi, ebraici, cirillici, greci, Devanagari e CJK, a riflesso della portata globale di Spotify. Il sistema tipografico è compatto e funzionale: 700 (bold) per l'enfasi e la navigazione, 600 (semibold) per l'enfasi secondaria e 400 (regular) per il corpo del testo. I pulsanti usano il maiuscolo con letter-spacing positivo (1.4px–2px) per una qualità sistematica da etichetta.

Ciò che distingue Spotify è la sua geometria a pillola e cerchio. I pulsanti primari usano un raggio da 500px a 9999px (pillola completa), i pulsanti circolari di play usano un raggio del 50%, e gli input di ricerca sono pillole da 500px. Combinando ombre pesanti (`rgba(0,0,0,0.5) 0px 8px 24px`) sugli elementi elevati con un'esclusiva combinazione di bordo inset-shadow (`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset`), il risultato è un'interfaccia che ricorda un dispositivo audio premium — tattile, arrotondata e costruita per il tocco.

**Caratteristiche Principali:**
- Tema scuro immersivo quasi nero (`#121212`–`#1f1f1f`) — l'interfaccia scompare dietro al contenuto
- Spotify Green (`#1ed760`) come unico accento di brand — mai decorativo, sempre funzionale
- Famiglia di font SpotifyMixUI/CircularSp con supporto per scritture globali
- Pulsanti a pillola (500px–9999px) e controlli circolari (50%) — arrotondati, ottimizzati per il tocco
- Etichette dei pulsanti in maiuscolo con ampio letter-spacing (1.4px–2px)
- Ombre pesanti sugli elementi elevati (`rgba(0,0,0,0.5) 0px 8px 24px`)
- Colori semantici: rosso negativo (`#f3727f`), arancione di avviso (`#ffa42b`), blu di annuncio (`#539df5`)
- L'arte degli album come fonte primaria di colore — l'interfaccia è acromatica per design

## 2. Palette Colori e Ruoli

### Brand Primario
- **Spotify Green** (`#1ed760`): Accento primario del brand — pulsanti play, stati attivi, CTA
- **Quasi Nero** (`#121212`): Superficie di sfondo più profonda
- **Superficie Scura** (`#181818`): Card, contenitori, superfici elevate
- **Medio Scuro** (`#1f1f1f`): Sfondi di pulsanti, superfici interattive

### Testo
- **Bianco** (`#ffffff`): `--text-base`, testo primario
- **Argento** (`#b3b3b3`): Testo secondario, etichette attenuate, nav inattiva
- **Quasi Bianco** (`#cbcbcb`): Testo secondario leggermente più luminoso
- **Chiaro** (`#fdfdfd`): Quasi bianco puro per la massima enfasi

### Semantici
- **Rosso Negativo** (`#f3727f`): `--text-negative`, stati di errore
- **Arancione di Avviso** (`#ffa42b`): `--text-warning`, stati di avviso
- **Blu di Annuncio** (`#539df5`): `--text-announcement`, stati informativi

### Superficie e Bordo
- **Card Scura** (`#252525`): Superficie di card elevata
- **Card Media** (`#272727`): Superficie di card alternativa
- **Grigio Bordo** (`#4d4d4d`): Bordi dei pulsanti su sfondo scuro
- **Bordo Chiaro** (`#7c7c7c`): Bordi di pulsanti con contorno, link attenuati
- **Separatore** (`#b3b3b3`): Linee divisorie
- **Superficie Chiara** (`#eeeeee`): Pulsanti in modalità chiara (raro)
- **Bordo Spotify Green** (`#1db954`): Variante di bordo con accento verde

### Ombre
- **Pesante** (`rgba(0,0,0,0.5) 0px 8px 24px`): Dialoghi, menu, pannelli elevati
- **Media** (`rgba(0,0,0,0.3) 0px 8px 8px`): Card, dropdown
- **Bordo Inset** (`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset`): Combinazione bordo-ombra per gli input

## 3. Regole Tipografiche

### Famiglie di Font
- **Titolo**: `SpotifyMixUITitle`, fallback: `CircularSp-Arab, CircularSp-Hebr, CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva, Helvetica Neue, helvetica, arial, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, MS Gothic`
- **UI / Corpo**: `SpotifyMixUI`, stesso stack di fallback

### Gerarchia

| Ruolo | Font | Dimensione | Peso | Altezza Riga | Letter Spacing | Note |
|------|------|------|--------|-------------|----------------|-------|
| Titolo di Sezione | SpotifyMixUITitle | 24px (1.50rem) | 700 | normal | normal | Peso titolo bold |
| Intestazione Feature | SpotifyMixUI | 18px (1.13rem) | 600 | 1.30 (compatto) | normal | Intestazioni sezione semibold |
| Corpo Bold | SpotifyMixUI | 16px (1.00rem) | 700 | normal | normal | Testo enfatizzato |
| Corpo | SpotifyMixUI | 16px (1.00rem) | 400 | normal | normal | Corpo standard |
| Pulsante Maiuscolo | SpotifyMixUI | 14px (0.88rem) | 600–700 | 1.00 (compatto) | 1.4px–2px | `text-transform: uppercase` |
| Pulsante | SpotifyMixUI | 14px (0.88rem) | 700 | normal | 0.14px | Pulsante standard |
| Link Nav Bold | SpotifyMixUI | 14px (0.88rem) | 700 | normal | normal | Navigazione |
| Link Nav | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | Nav inattiva |
| Didascalia Bold | SpotifyMixUI | 14px (0.88rem) | 700 | 1.50–1.54 | normal | Metadati bold |
| Didascalia | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | Metadati |
| Piccolo Bold | SpotifyMixUI | 12px (0.75rem) | 700 | 1.50 | normal | Tag, contatori |
| Piccolo | SpotifyMixUI | 12px (0.75rem) | 400 | normal | normal | Testo fine |
| Badge | SpotifyMixUI | 10.5px (0.66rem) | 600 | 1.33 | normal | `text-transform: capitalize` |
| Micro | SpotifyMixUI | 10px (0.63rem) | 400 | normal | normal | Testo minimo |

### Principi
- **Binario bold/regular**: La maggior parte del testo è 700 (bold) o 400 (regular), con il 600 usato con parsimonia. Questo crea una chiara gerarchia visiva tramite il contrasto di peso piuttosto che la variazione di dimensione.
- **Pulsanti in maiuscolo come sistema**: Le etichette dei pulsanti usano il maiuscolo + ampio letter-spacing (1.4px–2px), creando una voce "etichetta" sistematica distinta dal testo dei contenuti.
- **Dimensioni compatte**: L'intervallo va da 10px a 24px — più ristretto della maggior parte dei sistemi. La tipografia di Spotify è compatta e funzionale, progettata per scorrere le playlist, non per leggere articoli.
- **Supporto per scritture globali**: L'esteso stack di fallback (arabo, ebraico, cirillico, greco, Devanagari, CJK) riflette la presenza di Spotify in oltre 180 mercati.

## 4. Stili dei Componenti

### Pulsanti

**Pillola Scura**
- Background: `#1f1f1f`
- Testo: `#ffffff` o `#b3b3b3`
- Padding: 8px 16px
- Raggio: 9999px (pillola completa)
- Uso: Pillole di navigazione, azioni secondarie

**Pillola Scura Grande**
- Background: `#181818`
- Testo: `#ffffff`
- Padding: 0px 43px
- Raggio: 500px
- Uso: Pulsanti di navigazione principali dell'app

**Pillola Chiara**
- Background: `#eeeeee`
- Testo: `#181818`
- Raggio: 500px
- Uso: CTA in modalità chiara (consenso cookie, marketing)

**Pillola con Contorno**
- Background: trasparente
- Testo: `#ffffff`
- Bordo: `1px solid #7c7c7c`
- Padding: 4px 16px 4px 36px (asimmetrico per icona)
- Raggio: 9999px
- Uso: Pulsanti Segui, azioni secondarie

**Play Circolare**
- Background: `#1f1f1f`
- Testo: `#ffffff`
- Padding: 12px
- Raggio: 50% (cerchio)
- Uso: Controlli play/pausa

### Card e Contenitori
- Background: `#181818` o `#1f1f1f`
- Raggio: 6px–8px
- Nessun bordo visibile sulla maggior parte delle card
- Hover: leggero schiarimento dello sfondo
- Ombra: `rgba(0,0,0,0.3) 0px 8px 8px` sugli elementi elevati

### Input
- Input di ricerca: sfondo `#1f1f1f`, testo `#ffffff`
- Raggio: 500px (pillola)
- Padding: 12px 96px 12px 48px (consapevole dell'icona)
- Focus: il bordo diventa `#000000`, outline `1px solid`

### Navigazione
- Barra laterale scura con SpotifyMixUI 14px peso 700 per gli elementi attivi, 400 per quelli inattivi
- `#b3b3b3` colore attenuato per gli elementi inattivi, `#ffffff` per quelli attivi
- Pulsanti icona circolari (raggio 50%)
- Logo Spotify in alto a sinistra in verde

## 5. Principi di Layout

### Sistema di Spaziatura
- Unità base: 8px
- Scala: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 14px, 15px, 16px, 20px

### Griglia e Contenitore
- Barra laterale (fissa) + area contenuto principale
- Card album/playlist basate su griglia
- Barra "ora in riproduzione" a larghezza piena in basso
- L'area contenuto responsive occupa lo spazio rimanente

### Filosofia degli Spazi Bianchi
- **Compressione scura**: Spotify addensa i contenuti — griglie di playlist, elenchi di tracce e navigazione sono tutti a spaziatura ravvicinata. Lo sfondo scuro fornisce riposo visivo tra gli elementi senza necessitare di grandi spazi.
- **Densità dei contenuti prima del respiro**: Questa è un'app, non un sito di marketing. Ogni pixel serve l'esperienza di ascolto.

### Scala dei Raggi dei Bordi
- Minimo (2px): Badge, tag espliciti
- Sottile (4px): Input, elementi piccoli
- Standard (6px): Contenitori di copertine album, card
- Confortevole (8px): Sezioni, dialoghi
- Medio (10px–20px): Pannelli, elementi overlay
- Grande (100px): Pulsanti a pillola grandi
- Pillola (500px): Pulsanti primari, input di ricerca
- Pillola Completa (9999px): Pillole di navigazione, ricerca
- Cerchio (50%): Pulsanti play, avatar, icone

## 6. Profondità ed Elevazione

| Livello | Trattamento | Uso |
|-------|-----------|-----|
| Base (Livello 0) | Sfondo `#121212` | Strato più profondo, sfondo della pagina |
| Superficie (Livello 1) | `#181818` o `#1f1f1f` | Card, barra laterale, contenitori |
| Elevato (Livello 2) | `rgba(0,0,0,0.3) 0px 8px 8px` | Menu a tendina, card al passaggio del mouse |
| Dialogo (Livello 3) | `rgba(0,0,0,0.5) 0px 8px 24px` | Modali, overlay, menu |
| Inset (Bordo) | `rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset` | Bordi degli input |

**Filosofia delle Ombre**: Spotify utilizza ombre notevolmente pesanti per un'app a tema scuro. L'ombra con opacità 0.5 a 24px di blur crea un effetto drammatico di "fluttuazione nel buio" per dialoghi e menu, mentre quella con opacità 0.3 a 8px di blur fornisce un sollevamento più sottile per le card. L'esclusiva combinazione di bordo inset-shadow sugli input crea una qualità tattile e incassata.

## 7. Cosa Fare e Cosa Non Fare

### Fare
- Usare sfondi quasi neri (`#121212`–`#1f1f1f`) — profondità tramite variazione di tonalità
- Applicare Spotify Green (`#1ed760`) solo per i controlli di riproduzione, gli stati attivi e le CTA primarie
- Usare la forma a pillola (500px–9999px) per tutti i pulsanti — circolare (50%) per i controlli play
- Applicare maiuscolo + ampio letter-spacing (1.4px–2px) sulle etichette dei pulsanti
- Mantenere la tipografia compatta (intervallo 10px–24px) — questa è un'app, non una rivista
- Usare ombre pesanti (opacità 0.3–0.5) per gli elementi elevati su sfondi scuri
- Lasciare che l'arte degli album fornisca il colore — l'interfaccia stessa è acromatica

### Non Fare
- Non usare Spotify Green in modo decorativo o sugli sfondi — è solo funzionale
- Non usare sfondi chiari per le superfici primarie — l'immersione nel buio è fondamentale
- Non omettere la geometria a pillola/cerchio sui pulsanti — i pulsanti squadrati spezzano l'identità
- Non usare ombre sottili/leggere — su sfondi scuri, le ombre devono essere pesanti per essere visibili
- Non aggiungere ulteriori colori di brand — verde + grigi acromatici è la palette completa
- Non usare interlinee rilassate — la tipografia di Spotify è compatta e densa
- Non esporre bordi grigi grezzi — usare invece bordi basati su ombre o bordi inset

## 8. Comportamento Responsive

### Breakpoint
| Nome | Larghezza | Modifiche Principali |
|------|-------|-------------|
| Mobile Piccolo | <425px | Layout mobile compatto |
| Mobile | 425–576px | Mobile standard |
| Tablet | 576–768px | Griglia a 2 colonne |
| Tablet Grande | 768–896px | Layout espanso |
| Desktop Piccolo | 896–1024px | Barra laterale visibile |
| Desktop | 1024–1280px | Layout desktop completo |
| Desktop Grande | >1280px | Griglia espansa |

### Strategia di Collasso
- Barra laterale: completa → ridotta → nascosta
- Griglia album: 5 colonne → 3 → 2 → 1
- Barra "ora in riproduzione": mantenuta a tutte le dimensioni
- Ricerca: input a pillola mantenuto, la larghezza si adatta
- Navigazione: barra laterale → barra inferiore su mobile

## 9. Guida al Prompt per l'Agente

### Riferimento Rapido ai Colori
- Sfondo: Quasi Nero (`#121212`)
- Superficie: Card Scura (`#181818`)
- Testo: Bianco (`#ffffff`)
- Testo secondario: Argento (`#b3b3b3`)
- Accento: Spotify Green (`#1ed760`)
- Bordo: `#4d4d4d`
- Errore: Rosso Negativo (`#f3727f`)

### Esempi di Prompt per Componenti
- "Crea una card scura: sfondo `#181818`, raggio 8px. Titolo a 16px SpotifyMixUI peso 700, testo bianco. Sottotitolo a 14px peso 400, `#b3b3b3`. Ombra `rgba(0,0,0,0.3) 0px 8px 8px` al passaggio del mouse."
- "Progetta un pulsante a pillola: sfondo `#1f1f1f`, testo bianco, raggio 9999px, padding 8px 16px. 14px SpotifyMixUI peso 700, maiuscolo, letter-spacing 1.4px."
- "Costruisci un pulsante play circolare: sfondo Spotify Green (`#1ed760`), icona `#000000`, raggio 50%, padding 12px."
- "Crea un input di ricerca: sfondo `#1f1f1f`, testo bianco, raggio 500px, padding 12px 48px. Bordo inset: `rgb(124,124,124) 0px 0px 0px 1px inset`."
- "Progetta la barra laterale di navigazione: sfondo `#121212`. Elementi attivi: 14px peso 700, bianco. Inattivi: 14px peso 400, `#b3b3b3`."

### Guida all'Iterazione
1. Inizia con `#121212` — tutto vive nell'oscurità quasi nera
2. Spotify Green solo per evidenziazioni funzionali (play, attivo, CTA)
3. Usa la pillola ovunque — 500px per le grandi, 9999px per le piccole, 50% per le circolari
4. Maiuscolo + ampia spaziatura sui pulsanti — la voce sistematica da etichetta
5. Ombre pesanti (opacità 0.3–0.5) per l'elevazione — le ombre leggere sono invisibili sul scuro
6. L'arte degli album fornisce tutto il colore — l'interfaccia rimane acromatica