Design System Inspirado no Spotify

Category: Mídia & Consumidor Streaming de música. Verde vibrante sobre fundo escuro, tipografia marcante, guiado pela arte dos álbuns.

1. Tema Visual & Atmosfera

A interface web do Spotify é um player de música escuro e imersivo que envolve os ouvintes em um casulo quase negro (#121212, #181818, #1f1f1f), onde a arte dos álbuns e o conteúdo se tornam a principal fonte de cor. A filosofia de design é “escuridão com o conteúdo em primeiro lugar” — a UI recua para as sombras para que a música, os podcasts e as playlists possam brilhar. Cada superfície é um tom de carvão, criando um ambiente semelhante a um cinema onde a única cor real vem do icônico Spotify Green (#1ed760) e da própria arte dos álbuns.

A tipografia usa SpotifyMixUI e SpotifyMixUITitle — fontes proprietárias da família CircularSp (Circular da Lineto, personalizada para o Spotify) com uma ampla pilha de fallback que inclui fontes árabes, hebraicas, cirílicas, gregas, devanágaris e CJK, refletindo o alcance global do Spotify. O sistema tipográfico é compacto e funcional: 700 (bold) para ênfase e navegação, 600 (semibold) para ênfase secundária e 400 (regular) para o corpo. Os botões usam maiúsculas com espaçamento positivo entre letras (1.4px–2px) para uma qualidade sistemática e semelhante a rótulos.

O que distingue o Spotify é sua geometria de pílulas e círculos. Os botões primários usam raio de 500px–9999px (pílula completa), os botões circulares de play usam raio de 50% e os campos de busca são pílulas de 500px. Combinados com sombras pesadas (rgba(0,0,0,0.5) 0px 8px 24px) em elementos elevados e uma combinação única de inset border-shadow (rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset), o resultado é uma interface que parece um dispositivo de áudio premium — tátil, arredondada e construída para o toque.

Características Principais:

• Tema escuro e imersivo quase negro (#121212–#1f1f1f) — a UI desaparece atrás do conteúdo
• Spotify Green (#1ed760) como único destaque da marca — nunca decorativo, sempre funcional
• Família de fontes SpotifyMixUI/CircularSp com suporte a scripts globais
• Botões em pílula (500px–9999px) e controles circulares (50%) — arredondados, otimizados para toque
• Rótulos de botões em maiúsculas com espaçamento amplo entre letras (1.4px–2px)
• Sombras pesadas em elementos elevados (rgba(0,0,0,0.5) 0px 8px 24px)
• Cores semânticas: vermelho negativo (#f3727f), laranja de aviso (#ffa42b), azul de anúncio (#539df5)
• Arte dos álbuns como fonte primária de cor — a UI é acromática por design

2. Paleta de Cores & Funções

Marca Principal

• Spotify Green (#1ed760): Destaque principal da marca — botões de play, estados ativos, CTAs
• Near Black (#121212): Superfície de fundo mais profunda
• Dark Surface (#181818): Cards, contêineres, superfícies elevadas
• Mid Dark (#1f1f1f): Fundos de botões, superfícies interativas

Texto

• White (#ffffff): --text-base, texto principal
• Silver (#b3b3b3): Texto secundário, rótulos silenciados, navegação inativa
• Near White (#cbcbcb): Texto secundário ligeiramente mais brilhante
• Light (#fdfdfd): Quase branco puro para ênfase máxima

Semântico

• Negative Red (#f3727f): --text-negative, estados de erro
• Warning Orange (#ffa42b): --text-warning, estados de aviso
• Announcement Blue (#539df5): --text-announcement, estados informativos

Superfície & Borda

• Dark Card (#252525): Superfície de card elevado
• Mid Card (#272727): Superfície alternativa de card
• Border Gray (#4d4d4d): Bordas de botões sobre fundo escuro
• Light Border (#7c7c7c): Bordas de botões com contorno, links silenciados
• Separator (#b3b3b3): Linhas divisórias
• Light Surface (#eeeeee): Botões em modo claro (uso raro)
• Spotify Green Border (#1db954): Variante de borda com destaque verde

Sombras

• Heavy (rgba(0,0,0,0.5) 0px 8px 24px): Diálogos, menus, painéis elevados
• Medium (rgba(0,0,0,0.3) 0px 8px 8px): Cards, dropdowns
• Inset Border (rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset): Combinação de borda e sombra para inputs

3. Regras de Tipografia

Famílias de Fontes

• Título: SpotifyMixUITitle, fallbacks: 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, mesma pilha de fallback

Hierarquia

Princípios

• Binário bold/regular: A maior parte do texto é 700 (bold) ou 400 (regular), com 600 usado com moderação. Isso cria uma hierarquia visual clara por contraste de peso, não por variação de tamanho.
• Botões em maiúsculas como sistema: Rótulos de botões usam maiúsculas + espaçamento amplo entre letras (1.4px–2px), criando uma “voz de rótulo” sistemática, distinta do texto de conteúdo.
• Tamanho compacto: O intervalo é de 10px–24px — mais estreito do que a maioria dos sistemas. A tipografia do Spotify é compacta e funcional, projetada para percorrer playlists, não para ler artigos.
• Suporte a scripts globais: A ampla pilha de fallback (árabe, hebraico, cirílico, grego, devanágari, CJK) reflete o alcance do Spotify em mais de 180 mercados.

4. Estilos de Componentes

Botões

Dark Pill

• Background: #1f1f1f
• Text: #ffffff or #b3b3b3
• Padding: 8px 16px
• Radius: 9999px (pílula completa)
• Uso: Pílulas de navegação, ações secundárias

Dark Large Pill

• Background: #181818
• Text: #ffffff
• Padding: 0px 43px
• Radius: 500px
• Uso: Botões de navegação principal do app

Light Pill

• Background: #eeeeee
• Text: #181818
• Radius: 500px
• Uso: CTAs em modo claro (consentimento de cookies, marketing)

Outlined Pill

• Background: transparent
• Text: #ffffff
• Border: 1px solid #7c7c7c
• Padding: 4px 16px 4px 36px (assimétrico para ícone)
• Radius: 9999px
• Uso: Botões de seguir, ações secundárias

Circular Play

• Background: #1f1f1f
• Text: #ffffff
• Padding: 12px
• Radius: 50% (círculo)
• Uso: Controles de play/pause

Cards & Contêineres

• Background: #181818 or #1f1f1f
• Radius: 6px–8px
• Sem bordas visíveis na maioria dos cards
• Hover: leve clareamento do background
• Shadow: rgba(0,0,0,0.3) 0px 8px 8px nos elevados

Inputs

• Input de busca: background #1f1f1f, texto #ffffff
• Radius: 500px (pílula)
• Padding: 12px 96px 12px 48px (considerando ícone)
• Focus: borda se torna #000000, outline 1px solid

Navegação

• Sidebar escura com SpotifyMixUI 14px peso 700 para ativo, 400 para inativo
• Cor silenciada #b3b3b3 para itens inativos, #ffffff para ativos
• Botões de ícone circulares (raio 50%)
• Logo do Spotify no canto superior esquerdo em verde

5. Princípios de Layout

Sistema de Espaçamento

• Unidade base: 8px
• Escala: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 14px, 15px, 16px, 20px

Grade & Contêiner

• Sidebar (fixa) + área de conteúdo principal
• Cards de álbuns/playlists em grade
• Barra de reprodução atual em largura total na parte inferior
• Área de conteúdo responsiva preenche o espaço restante

Filosofia de Espaço em Branco

• Compressão escura: O Spotify empacota o conteúdo de forma densa — grades de playlists, listas de faixas e navegação têm espaçamento apertado. O fundo escuro proporciona descanso visual entre os elementos sem precisar de grandes espaços.
• Densidade de conteúdo em vez de respiro: Este é um app, não um site de marketing. Cada pixel serve à experiência de escuta.

Escala de Border Radius

• Mínimo (2px): Badges, tags explícitas
• Sutil (4px): Inputs, elementos pequenos
• Padrão (6px): Contêineres de arte de álbum, cards
• Confortável (8px): Seções, diálogos
• Médio (10px–20px): Painéis, elementos de overlay
• Grande (100px): Botões grandes em pílula
• Pílula (500px): Botões primários, input de busca
• Pílula Completa (9999px): Pílulas de navegação, busca
• Círculo (50%): Botões de play, avatares, ícones

6. Profundidade & Elevação

Filosofia de Sombras: O Spotify usa sombras notavelmente pesadas para um app com tema escuro. A sombra de opacidade 0.5 com blur de 24px cria um efeito dramático de “flutuando na escuridão” para diálogos e menus, enquanto a opacidade 0.3 com blur de 8px proporciona uma elevação mais sutil para cards. A combinação única de inset border-shadow nos inputs cria uma qualidade entalhada e tátil.

7. O Que Fazer e Não Fazer

Faça

• Use fundos quase negros (#121212–#1f1f1f) — profundidade por variação de tonalidade
• Aplique Spotify Green (#1ed760) apenas em controles de play, estados ativos e CTAs primários
• Use o formato pílula (500px–9999px) em todos os botões — circular (50%) para controles de play
• Aplique maiúsculas + espaçamento amplo entre letras (1.4px–2px) nos rótulos de botões
• Mantenha a tipografia compacta (intervalo de 10px–24px) — isto é um app, não uma revista
• Use sombras pesadas (opacidade 0.3–0.5) para elementos elevados em fundos escuros
• Deixe a arte dos álbuns fornecer cor — a UI em si é acromática

Não Faça

• Não use Spotify Green decorativamente ou em fundos — ele é apenas funcional
• Não use fundos claros para superfícies primárias — a imersão no escuro é essencial
• Não ignore a geometria de pílula/círculo nos botões — botões quadrados quebram a identidade
• Não use sombras finas/sutis — em fundos escuros, as sombras precisam ser pesadas para serem visíveis
• Não adicione cores de marca adicionais — verde + cinzas acromáticos é a paleta completa
• Não use alturas de linha relaxadas — a tipografia do Spotify é compacta e densa
• Não exponha bordas cinzas brutas — use bordas baseadas em sombra ou inset em vez disso

8. Comportamento Responsivo

Breakpoints

Estratégia de Colapso

• Sidebar: completa → recolhida → oculta
• Grade de álbuns: 5 colunas → 3 → 2 → 1
• Barra de reprodução atual: mantida em todos os tamanhos
• Busca: input em pílula mantido, largura se ajusta
• Navegação: sidebar → barra inferior no mobile

9. Guia de Prompts para Agentes

Referência Rápida de Cores

• Background: Near Black (#121212)
• Surface: Dark Card (#181818)
• Text: White (#ffffff)
• Texto secundário: Silver (#b3b3b3)
• Destaque: Spotify Green (#1ed760)
• Border: #4d4d4d
• Erro: Negative Red (#f3727f)

Exemplos de Prompts de Componentes

• “Crie um card escuro: background #181818, raio 8px. Título em 16px SpotifyMixUI peso 700, texto branco. Subtítulo em 14px peso 400, #b3b3b3. Shadow rgba(0,0,0,0.3) 0px 8px 8px no hover.”
• “Crie um botão pílula: background #1f1f1f, texto branco, raio 9999px, padding 8px 16px. 14px SpotifyMixUI peso 700, maiúsculas, letter-spacing 1.4px.”
• “Crie um botão circular de play: background Spotify Green (#1ed760), ícone #000000, raio 50%, padding 12px.”
• “Crie um input de busca: background #1f1f1f, texto branco, raio 500px, padding 12px 48px. Inset border: rgb(124,124,124) 0px 0px 0px 1px inset.”
• “Crie uma sidebar de navegação: background #121212. Itens ativos: 14px peso 700, branco. Inativos: 14px peso 400, #b3b3b3.”

Guia de Iteração

1. Comece com #121212 — tudo vive na escuridão quase negra
2. Spotify Green apenas para destaques funcionais (play, ativo, CTA)
3. Tudo em pílula — 500px para grandes, 9999px para pequenos, 50% para circulares
4. Maiúsculas + rastreamento amplo nos botões — a voz sistemática de rótulo
5. Sombras pesadas (opacidade 0.3–0.5) para elevação — sombras leves são invisíveis no escuro
6. A arte dos álbuns fornece toda a cor — a UI permanece acromática