Sistema de Design Inspirado no Discord

Categoria: Produtividade & SaaS Plataforma de voz e chat. Blurple intenso, superfícies dark-first, momentos de destaque divertidos.

1. Tema Visual & Atmosfera

O produto do Discord foi projetado para noites, raids e chamadas em grupo — por isso toda a superfície é dark-first. A tela padrão é o profundo Background Primary (#313338 no tema claro, #1e1f22 no tema escuro), com colunas de chat sobrepostas em tons ligeiramente mais claros ou escuros para indicar canais, threads e painéis laterais. O icônico Blurple (#5865f2) é reservado para a marca, CTAs primários, menções e a affordance de “você” — usado com parcimônia para se destacar sobre os neutros suaves.

A tipografia usa gg sans (a fonte customizada do Discord, substituta da Whitney) para texto corrido e interface, com formas geométricas arredondadas que transmitem acolhimento sem comprometer a legibilidade nos tamanhos pequenos que um cliente de chat exige. Os títulos escalam de forma incremental; as linhas de chat são compactas (4–8px entre grupos de mensagens) para que horas de histórico pareçam fáceis de percorrer.

A linguagem de formas é arredondada, mas não excessivamente suave: raio de 8px nos cards, 4px nos inputs, pílulas completas em badges de status e tags. Os servidores são avatares com bordas arredondadas de 48px que se transformam em círculos ao passar o mouse — um detalhe de animação que se tornou parte da identidade visual da marca.

Características-Chave:

• Superfícies dark-first: #1e1f22 / #2b2d31 / #313338 (profundidade em 3 níveis)
• Blurple #5865f2 como único destaque saturado na superfície de chat
• gg sans (estilo Whitney) para todo o texto — amigável, geométrica, neutra
• Avatares de servidor em quadrado arredondado (raio de 16px) que se transformam em círculos ao passar o mouse
• Espaçamento compacto nas linhas de chat, padding generoso no painel lateral
• Pontos de status: verde online, amarelo ausente, vermelho não perturbe, cinza offline
• Divisores de 1px alinhados ao pixel em off-white com baixa opacidade

2. Paleta de Cores & Papéis

Primária

• Blurple (#5865f2): Primária da marca, CTA principal, destaque de menção.
• Blurple Hover (#4752c4): Hover/ativo do blurple.
• Blurple Soft (#7289da): Blurple legado, destaque secundário em marketing.

Superfície (Tema Escuro — padrão)

• Background Tertiary (#1e1f22): Trilho da lista de servidores, plano de fundo mais profundo.
• Background Secondary (#2b2d31): Barra lateral de canais, barra lateral de configurações.
• Background Primary (#313338): Superfície de chat, coluna de mensagens.
• Background Floating (#111214): Popovers flutuantes, tooltips, autocompletar.
• Background Modifier Hover (rgba(78, 80, 88, 0.3)): Overlay de hover nas linhas.
• Background Modifier Selected (rgba(78, 80, 88, 0.6)): Linha ativa.

Superfície (Tema Claro)

• Light Bg Primary (#ffffff): Superfície de chat no tema claro.
• Light Bg Secondary (#f2f3f5): Barra lateral no tema claro.
• Light Bg Tertiary (#e3e5e8): Superfície clara mais profunda.

Texto

• Header Primary (#f2f3f5): Cabeçalhos de canal, títulos de modais no tema escuro.
• Header Secondary (#b5bac1): Cabeçalhos secundários.
• Text Normal (#dbdee1): Texto corrido no tema escuro — ligeiramente mais frio que o branco puro.
• Text Muted (#949ba4): Timestamps, nomes de servidores, metadados secundários.
• Text Link (#00a8fc): Hiperlinks em mensagens — azul céu, distinto do blurple.
• Channels Default (#80848e): Nome de canal inativo na barra lateral.

Status & Semântica

• Status Online (#23a55a): Ponto online, estados de sucesso.
• Status Idle (#f0b232): Ponto ausente, away.
• Status DND (#f23f43): Não perturbe; também funciona como vermelho destrutivo.
• Status Streaming (#593695): Roxo de “Transmitindo”.
• Status Offline (#80848e): Cinza offline.
• Mention Highlight (rgba(88, 101, 242, 0.1)): Leve camada blurple nas linhas com @menção.

Borda & Divisor

• Background Modifier Accent (rgba(255, 255, 255, 0.06)): Divisor padrão no tema escuro.
• Border Subtle (#3f4147): Divisor sólido para cards.

3. Regras Tipográficas

Família de Fonte

• Corpo / UI / Títulos: gg sans, com fallback: "Helvetica Neue", Helvetica, Arial, sans-serif
• Display (legado / Whitney): Whitney, com fallback: gg sans
• Código / Mono: "gg mono", com fallback: Consolas, Andale Mono, Courier New, Courier, monospace

Hierarquia

Princípios

• Geometria amigável: gg sans substitui a Whitney com terminais arredondados em a/g/s — a marca busca aconchego sem sacrificar a legibilidade.
• Contraste por peso, não por cor: a hierarquia vem dos passos de peso 400→500→600→700→800; a superfície permanece neutra.
• Corpo em 16px: as mensagens de chat não reduzem abaixo de 16px. A densidade vem da altura de linha (1.375), não do tamanho da fonte.

4. Estilos de Componentes

Botões

Primário

• Fundo: #5865f2
• Texto: #ffffff
• Padding: 8px 16px
• Raio: 4px
• Hover: #4752c4
• Uso: CTAs primários, “Continuar”, “Entrar no Servidor”

Secundário

• Fundo: #4e5058
• Texto: #ffffff
• Padding: 8px 16px
• Raio: 4px
• Hover: #6d6f78

Terciário / Sutil (estilo link)

• Fundo: transparente
• Texto: #dbdee1
• Hover: texto sublinhado, sem mudança de fundo

Destrutivo

• Fundo: #da373c
• Texto: #ffffff
• Hover: #a12d2f

Inputs

• Fundo: #1e1f22
• Texto: #dbdee1
• Borda: 1px solid #1e1f22
• Raio: 4px
• Padding: 10px 12px
• Foco: borda #5865f2

Avatares de Servidor

• Tamanho: 48×48px
• Raio: 16px (quadrado arredondado) por padrão; transição para 50% ao passar o mouse e no estado ativo.
• Estado ativo: pílula branca de 4px na borda esquerda da coluna de ícones.

Pontos de Status

• Tamanho: 10×10px
• Borda: 3px solid background-tertiary (cria o efeito de “entalhe”)
• Posição: canto inferior direito do avatar.

Cards / Embeds

• Fundo: #2b2d31 (escuro) ou #f2f3f5 (claro)
• Borda esquerda: 4px solid cor de destaque do embed.
• Raio: 4px
• Padding: 8px 16px

Pílula de Menção

• Fundo: rgba(88, 101, 242, 0.3)
• Texto: #c9cdfb
• Padding: 0 2px
• Raio: 3px

5. Espaçamento & Layout

• Unidade base: 4px. Escala: 4, 8, 12, 16, 20, 24, 32, 40.
• Trilho de servidores: 72px de largura, fixo.
• Barra lateral de canais: 240px de largura.
• Lista de membros: 240px de largura no desktop.
• Coluna de chat: fluida, mínimo de 380px.

6. Movimento

• Duração: 200ms para hover; 350ms para a transformação do avatar em círculo; 80ms para o fade do tooltip.
• Easing: cubic-bezier(0.215, 0.61, 0.355, 1) para a transformação do avatar (rápido e depois suaviza).
• Pulso de notificação: 1.4s ease-in-out infinite no indicador de menção não lida.

7. Diretrizes de Uso

• Preserve o shell escuro, a densidade compacta e a hierarquia de ações em blurple em conjunto; usar blurple em um layout de marketing com fundo claro quebra a sensação do produto Discord.
• Mantenha as superfícies com navegação intensa estruturadas em trilhos, barras laterais e colunas de chat, em vez de cards decorativos isolados.
• Use a linguagem de avatar em quadrado arredondado e ponto de status ao representar pessoas, servidores ou presença ativa.