Design System Inspired by Discord

Category: Produttività e SaaS Piattaforma vocale e di chat. Blurple intenso, superfici dark-first, momenti d’accento giocosi.

1. Tema Visivo e Atmosfera

Il prodotto Discord è progettato per serate, raid e chat vocali di gruppo — quindi l’intera superficie è dark-first. La canvas predefinita è il profondo Background Primary (#313338 tema chiaro, #1e1f22 tema scuro), con colonne di chat stratificate su tonalità leggermente più chiare o più scure per indicare canali, thread e pannelli laterali. Il caratteristico Blurple (#5865f2) è riservato al marchio, alle CTA primarie, alle menzioni e all’indicatore “tu” — usato con parsimonia per risaltare sui neutri attenuati.

La tipografia è gg sans (il sostituto personalizzato di Whitney di Discord) per il testo e il chrome, con forme geometriche arrotondate che risultano accessibili pur mantenendo la leggibilità alle piccole dimensioni richieste da un client di chat. I titoli scalano in modo incrementale; le righe di chat sono compatte (4–8px tra i gruppi di messaggi) affinché ore di scorrimento risultino facilmente analizzabili.

Il linguaggio delle forme è arrotondato ma non morbido come un palloncino: raggio di 8px sulle card, 4px sugli input, pillole complete su badge di stato e tag. I server hanno avatar con angoli arrotondati da 48px che si trasformano in cerchi al passaggio del mouse — un piccolo dettaglio in movimento che è diventato parte dell’identità del brand.

Caratteristiche Chiave:

• Superfici dark-first: #1e1f22 / #2b2d31 / #313338 (profondità a 3 livelli)
• Blurple #5865f2 come unico accento saturo nella superficie di chat
• gg sans (stile Whitney) per tutto il testo — amichevole, geometrico, neutro
• Avatar dei server a quadrato arrotondato (raggio 16px) che si trasformano in cerchi al passaggio del mouse
• Spaziatura compatta tra le righe di chat, padding generoso nel pannello laterale
• Indicatori di stato: verde online, giallo inattivo, rosso non disturbare, grigio offline
• Divisori da 1px allineati al pixel in bianco attenuato a bassa opacità

2. Palette Colori e Ruoli

Primari

• Blurple (#5865f2): Primario del brand, CTA primaria, evidenziazione delle menzioni.
• Blurple Hover (#4752c4): Hover/attivo per il blurple.
• Blurple Soft (#7289da): Blurple legacy, accento secondario nel marketing.

Superficie (Tema Scuro — predefinito)

• Background Tertiary (#1e1f22): Barra lista server, sfondo più profondo.
• Background Secondary (#2b2d31): Barra laterale canali, barra laterale impostazioni.
• Background Primary (#313338): Superficie di chat, colonna messaggi.
• Background Floating (#111214): Popover flottanti, tooltip, completamento automatico.
• Background Modifier Hover (rgba(78, 80, 88, 0.3)): Overlay hover sulle righe.
• Background Modifier Selected (rgba(78, 80, 88, 0.6)): Riga attiva.

Superficie (Tema Chiaro)

• Light Bg Primary (#ffffff): Superficie di chat nel tema chiaro.
• Light Bg Secondary (#f2f3f5): Barra laterale nel tema chiaro.
• Light Bg Tertiary (#e3e5e8): Superficie chiara più profonda.

Testo

• Header Primary (#f2f3f5): Intestazioni dei canali, titoli modali nel tema scuro.
• Header Secondary (#b5bac1): Intestazioni attenuate.
• Text Normal (#dbdee1): Testo corpo nel tema scuro — leggermente più freddo del bianco puro.
• Text Muted (#949ba4): Timestamp, nomi server, metadati secondari.
• Text Link (#00a8fc): Hyperlink nei messaggi — blu cielo, distinto dal blurple.
• Channels Default (#80848e): Nome canale inattivo nella barra laterale.

Stato e Semantica

• Status Online (#23a55a): Indicatore online, stati di successo.
• Status Idle (#f0b232): Indicatore inattivo, assente.
• Status DND (#f23f43): Non disturbare, utilizzato anche come rosso distruttivo.
• Status Streaming (#593695): Viola “in streaming”.
• Status Offline (#80848e): Grigio offline.
• Mention Highlight (rgba(88, 101, 242, 0.1)): Sfondo blurple tenue sulle righe con @menzione.

Bordo e Divisori

• Background Modifier Accent (rgba(255, 255, 255, 0.06)): Divisore standard nel tema scuro.
• Border Subtle (#3f4147): Divisore solido per le card.

3. Regole Tipografiche

Famiglia di Font

• Corpo / UI / Intestazioni: gg sans, con fallback: "Helvetica Neue", Helvetica, Arial, sans-serif
• Display (legacy / Whitney): Whitney, con fallback: gg sans
• Codice / Mono: "gg mono", con fallback: Consolas, Andale Mono, Courier New, Courier, monospace

Gerarchia

Principi

• Geometria amichevole: gg sans sostituisce Whitney con terminali arrotondati su a/g/s — il brand vuole calore senza compromettere la leggibilità.
• Contrasto di peso anziché di colore: la gerarchia si ottiene tramite passaggi di peso 400→500→600→700→800; la superficie rimane neutra.
• Corpo a 16px: i messaggi di chat non scendono sotto i 16px. La densità si ottiene tramite l’altezza della riga (1.375), non la dimensione del font.

4. Stili dei Componenti

Bottoni

Primario

• Background: #5865f2
• Testo: #ffffff
• Padding: 8px 16px
• Raggio: 4px
• Hover: #4752c4
• Utilizzo: CTA primarie, “Continua”, “Unisciti al Server”

Secondario

• Background: #4e5058
• Testo: #ffffff
• Padding: 8px 16px
• Raggio: 4px
• Hover: #6d6f78

Terziario / Sottile (stile link)

• Background: transparent
• Testo: #dbdee1
• Hover: testo sottolineato, nessun cambiamento di sfondo

Pericoloso

• Background: #da373c
• Testo: #ffffff
• Hover: #a12d2f

Input

• Background: #1e1f22
• Testo: #dbdee1
• Bordo: 1px solid #1e1f22
• Raggio: 4px
• Padding: 10px 12px
• Focus: bordo #5865f2

Avatar dei Server

• Dimensione: 48×48px
• Raggio: 16px (quadrato arrotondato) per impostazione predefinita; transizione a 50% al passaggio del mouse e in stato attivo.
• Stato attivo: pillola bianca da 4px sul bordo sinistro della colonna icone.

Indicatori di Stato

• Dimensione: 10×10px
• Bordo: 3px solid background-tertiary (crea l’effetto “tacca”)
• Posizione: in basso a destra dell’avatar.

Card / Embed

• Background: #2b2d31 (scuro) o #f2f3f5 (chiaro)
• Bordo sinistro: 4px solid colore accento dell’embed.
• Raggio: 4px
• Padding: 8px 16px

Pillola di Menzione

• Background: rgba(88, 101, 242, 0.3)
• Testo: #c9cdfb
• Padding: 0 2px
• Raggio: 3px

5. Spaziatura e Layout

• Unità base: 4px. Scala: 4, 8, 12, 16, 20, 24, 32, 40.
• Barra server: larghezza 72px, fissa.
• Barra laterale canali: larghezza 240px.
• Lista membri: larghezza 240px su desktop.
• Colonna chat: fluida, min 380px.

6. Animazione

• Durata: 200ms per hover; 350ms per la trasformazione in cerchio dell’avatar; 80ms per la comparsa del tooltip.
• Easing: cubic-bezier(0.215, 0.61, 0.355, 1) per la trasformazione dell’avatar (scatto iniziale poi assestamento).
• Pulsazione notifica: 1.4s ease-in-out infinite sull’indicatore di menzione non letta.

7. Linee Guida d’Uso

• Preservare insieme il guscio scuro, la densità compatta e la gerarchia delle azioni blurple; usare il blurple su un layout marketing in stile chiaro rompe la sensazione del prodotto Discord.
• Mantenere le superfici con navigazione complessa strutturate attorno a barre, barre laterali e colonne di chat, anziché card decorative isolate.
• Utilizzare il linguaggio degli avatar a quadrato arrotondato e degli indicatori di stato per rappresentare persone, server o presenza attiva.