Referência

Marca Spinlist

Logotipo, tipografia e paleta de marca. Fonte da verdade — use sempre os arquivos daqui, não recrie o logo manualmente.

Logo

Wordmark completo

Mark (disco)

App icon

Espaço de respiro

Zona de exclusão ao redor do logo definida pelo diâmetro do disco (½ lado do mark). Nenhum elemento externo pode entrar nessa área.

½ disco

Tamanho mínimo

32px — mínimo digital

20px — ilegível, evitar

Abaixo de 32px de altura

Use só o mark (disco) quando a largura disponível for menor que 140px. O mark funciona bem em qualquer tamanho acima de 16×16px.

Do / Don't

Do Fundo escuro #0f0f0f. Uso primário. Verde limão sobre preto com máximo contraste.

Don't Não use sobre fundo branco. O Spinlist é um produto dark-first — não existe versão com cores invertidas para fundo claro.

Do Mark isolado para ícone de app, favicon, avatar e contextos com largura inferior a 140px.

Don't Não estique, comprima, gire ou distorça. A SVG tem proporção fixa — sempre use height e deixe a largura automática.

Tipografia

Uma família, quatro pesos. Sem serifa, sem mistura com outras fontes.

Inter Google Fonts · Variable · gratuita

Regular 400

Coleção de vinis

Textos longos, descrições

SemiBold 600

Coleção de vinis

Títulos de item, labels

Bold 700

Coleção de vinis

Títulos de página, CTAs

ExtraBold 800

Coleção de vinis

Display, onboarding

Amostra em contexto

ADICIONADO RECENTEMENTE

Kind of Blue

Miles Davis

1959 · Jazz · Columbia Records

Escala completa de tamanhos e pesos em Fundação → Tipografia.

Cores de marca

Cinco cores estruturais. Para a paleta semântica completa (error, success, gradientes de gênero) veja Fundação → Cores.

Verde Lima

#C8F53C

--color-brand

Ações, destaques, logo

Preto fundo

#0f0f0f

--color-bg

Fundo global do app

Superfície

#1a1a1a

--color-surface1

Cards, inputs, sheets

Branco texto

#f5f5f5

--color-content-primary

Texto principal, títulos

Cinza texto

#888888

--color-content-secondary

Metadados, labels, hints

Contraste (WCAG)

Par	Ratio	Nível	Uso
#C8F53C sobre #0f0f0f	12.6 : 1	AAA	CTAs, logo, destaques
#f5f5f5 sobre #0f0f0f	18.4 : 1	AAA	Texto principal
#888 sobre #0f0f0f	4.6 : 1	AA	Texto secundário ≥ 14px
#0f0f0f sobre #C8F53C	12.6 : 1	AAA	Texto em botão primário