Logo

A marca é a letra S geométrica (setas entrelaçadas, referência a fluxo/automação) seguida do lockup completo "Salesdever". Existem duas famílias de arquivo: uma clara/branca para fundos escuros (uso padrão do produto) e uma roxa para fundos claros (e-mail, impressão, favicon em light mode).

logo-full.png — sidebar expandida

logo-compact.png — sidebar colapsada / favicon dark

logoCompleta_roxo_semFundo.png

logo-compact-purple.png — favicon light

Regra prática extraída da geometria real do menu do produto: o recuo mínimo em torno do símbolo é igual em todos os lados (top = left = right ≈ 24px num container de referência de 50px). Nunca encostar o símbolo em bordas, dividers ou texto.

respiro mínimo = 1 unidade

O favicon troca automaticamente conforme o tema do sistema operacional do visitante: símbolo claro/branco em dark mode e símbolo roxo em light mode — a marca nunca aparece "sumida" contra o fundo da aba do navegador, em nenhum dos dois cenários.

Cores

Toda cor vem da paleta oficial de tokens do produto — nunca um hex solto, sempre uma variável nomeada (var(--color-*)). Clique em qualquer amostra para copiar o valor.

Acento, não fundo total — ver seção Princípios.

Tipografia

Fonte única: Inter (variable font, Google Fonts) — o intervalo completo de peso 100..900 num único arquivo, sem cortes estáticos. Nunca usar Raleway, Poppins ou qualquer outra fonte.

Inter é uma variable font: não são 6 arquivos estáticos, é um único arquivo interpolando o eixo wght de 100 a 900 em tempo real. Arraste o slider — o peso muda instantaneamente, sem trocar de fonte nem carregar nada novo.

Todos os pesos que o produto de fato usa, na mesma frase, para comparar peso visual e decidir onde cada um se aplica.

font-variant-numeric: tabular-nums lining-nums já está ativo globalmente via o token --numeric — todo número do produto herda dígitos de largura fixa por padrão. Reforçar explicitamente em qualquer elemento que exiba números dinâmicos (KPIs, timers, valores monetários), caso esse comportamento seja sobrescrito por acidente num componente. Compare o alinhamento:

Mesma hierarquia tipográfica aplicada como no produto — renderizada ao vivo com os tokens reais, não maquete estática. Os labels ao lado marcam qual token cada texto usa.

Toda página tem exatamente um <h1>: 1.5rem / 600 / letter-spacing normal / line-height herdado do body (1.6, sem override) / text-align left. Ícone antes do <h1> é o erro mais recorrente no projeto — ver seção Do's & Don'ts.

h1 {
  font-size: 1.5rem;      /* --text-2xl */
  font-weight: 600;       /* --weight-semibold */
  color: #ffffff;
  letter-spacing: normal; /* nunca negativo */
  /* sem line-height explícito — herda 1.6 do body */
  margin: 0;
  text-align: left;       /* nunca center */
}

Glassmorphism — a receita

Todo card, modal e dropdown do produto usa a mesma receita: superfície semitransparente + blur + borda de 1px sutil. Sem transform: translateY no hover — cards não flutuam.

.card {
  background: linear-gradient(135deg,
    rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
/* sem transform: translateY no hover */

Uma única receita para todo card, modal e dropdown do produto — sem variações soltas. Superfície semitransparente em gradiente sutil, borda de 1px quase invisível, blur forte por trás. É essa combinação, e só essa, que caracteriza o glassmorphism da marca.

background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
border: 1px solid rgba(255,255,255,.12);
border-radius: 12px;
backdrop-filter: blur(20px);

Para superfícies que exigem blur mais acentuado — overlay de modal, por exemplo, onde o conteúdo por trás precisa ficar bem mais discreto — usa-se um blur ainda mais forte (24px) sobre um fundo levemente mais opaco, mantendo a mesma borda e o mesmo raio. É uma variação de intensidade da mesma receita, não uma receita diferente.

Espaçamento, raios e sombras

Espaçamento em grid de 4px. Nunca usar valores arbitrários como 14px, 22px, 37px.

Componentes

Galeria viva dos padrões reais usados no produto. Hierarquia de botões: criação (sólido lilás) > ghost escuro > destructive vermelho.

/* Criação — único botão com cor sólida */
background: #A594FF; color: #0a0014; border: 1px solid transparent;
height: 36px; padding: 0 18px; font-size: .875rem; font-weight: 600; border-radius: 8px;
/* hover: clareia, não escurece */
background: #BDB0FF;

/* Ghost — todas as outras ações (editar, filtrar, cancelar) */
background: rgba(165,148,255,.12); border: 1px solid rgba(165,148,255,.3); color: #fff;
/* hover */ background: rgba(165,148,255,.2); border-color: rgba(165,148,255,.55);

/* Destructive — deletar (ação irreversível) */
background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.25); color: #F87171;
/* hover */ background: rgba(248,113,113,.18); border-color: rgba(248,113,113,.45);

/* ❌ sem gradiente, sem translateY, sem box-shadow decorativo */

Ícone fixo (tipo do seletor) + label (item selecionado, trunca) + chevron (interatividade).

.filter-bar select, .filter-bar input[type="text"] {
  height: 36px; padding: 0 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px; color: #fff; font-size: .8125rem; font-weight: 500;
}
/* hover */ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22);
/* focus */ outline: none; border-color: rgba(165,148,255,.5);

Regra: border-radius: 6px; font-size: .72rem; font-weight: 600; — sem text-transform: uppercase, sem letter-spacing, sem formato pill.

Background sempre hex sólido — nunca rgba com alpha < 1, nunca backdrop-filter. Transparência vaza o conteúdo por trás.

Regra obrigatória: modais com acordeão/expansão/carregamento async nunca centralizam verticalmente. A headline fica fixa no topo e o balão cresce só pra baixo.

Ícones

A biblioteca oficial de ícones do produto — a mesma usada em todas as telas, sempre em sincronia com o que está em produção.

Do's & Don'ts

Pares visuais lado a lado — o erro mais comum vs. o padrão correto.

Princípios

O que guia toda decisão visual do SalesDever.