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

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

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

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