Sistema de design Diagnóstico Sóbrio. Canvas quase-preto com dois níveis de superfície escura para hierarquia sem borda. Um único acento — verde-esmeralda — reservado para dado positivo, ação primária e o momento em que o produto revela um gap. Nunca decorativo. A interface fica em silêncio até haver sinal.

v2.1 · 24 ago 2026 · escuro e claro · fonte de verdade: DESIGN.md + tokens.json

01 — Marca

Símbolo, escrita e lockup

A marca tem duas partes que nunca se misturam. O símbolo são três anéis concêntricos fechando pra dentro, com um ponto no centro: é o "silêncio até haver sinal" virado forma. A escrita é letreiro customizado traçado à mão — não existe em nenhuma fonte instalável.

simbolo.svg
Sozinho: favicon, ícone de app, avatar. Mínimo 16px — testado, ainda lê.
escrita-escuro.svg
"crm" no tom neutro, "scan" no acento. Sempre o vetor pronto — nunca digitado numa fonte.
icone-squircle · circulo · quadrado
Quadrado para App Store e favicon, círculo para avatar, squircle dentro do produto.

Espaço de proteção e tamanho mínimo

Deixe ao redor do símbolo um espaço livre igual à altura do ponto central — a "bolinha" do meio. Nada encosta nesse perímetro: nem texto, nem borda de card.

Símbolo sozinho: nunca abaixo de 16px. Lockup completo: nunca abaixo de 120px de largura — abaixo disso, use só o símbolo.

02 — Cores

Um acento só, e ele tem hora certa

Superfícies em quatro degraus de escuro fazem a hierarquia sem precisar de borda. O verde é a única cor viva do sistema e aparece em três situações: dado positivo, ação primária e gap encontrado. Fora disso, a tela fica em silêncio.

Superfícies

surface
#0D1117
Canvas base.
surface-2
#161B22
Cards, linhas de tabela.
surface-3
#1C232C
Hover, superfície ativa, input.
border
#23282F
Hairline de 1px.

Texto

text
#E6EDF3
Corpo e títulos.
text-secondary
#B4BCC6
Apoio, lede, descrição.
text-muted
#7D8590
Legenda e microcopy. Nunca em corpo de texto.
on-primary
#06281A
Texto sobre o verde. Nunca branco puro.

Acento

primary
#3ECF8E
CTA, dado positivo, gap revelado.
primary-hover
#5CE0A5
Estado de hover do CTA.
primary-deep
#0E3D26
Fundo de chip e badge.
primary-tint
#0F2A1E
Linha de tabela com gap.

Estado

success
#3ECF8E
Gap corrigido.
warning
#F0BF00
Gap aberto, atenção.
error
#EB5757
Gap crítico.
info
#4EA7FC
Nota informativa.

Camada elevada

overlay
rgba(5,8,10,0.72)
Backdrop atrás do modal.
modal
#12161C
Fundo do modal. Nunca o cinza default do navegador.
modal-border
#2A313A
Borda do modal, um degrau acima da border comum.
03 — Tipografia

Inter para ler, mono para o número

Inter em toda interface e corpo de texto. IBM Plex Mono reservado para número, métrica e valor em R$ — o mono é o sinal de "isto é dado real, não copy". Base de 18px, não os 14px de produto para dev: o leitor é dono de PME entre 35 e 55 anos, quase sempre à noite.

display-13.25rem · 800
lh 1.08 · ls -0.02em
Onde seu comercial vaza dinheiro
display-22.5rem · 800
lh 1.12 · ls -0.015em
Funciona até com CRM bagunçado
h12rem · 700 · lh 1.2
Relatório de gaps do processo
h21.5rem · 700 · lh 1.25
Negócios parados há mais de 30 dias
h31.25rem · 600 · lh 1.3
Follow-up sem resposta
body-lg1.125rem · 400 · lh 1.6
Conecte o CRM que você já usa e receba em minutos o relatório dos gaps do seu processo comercial, com um plano de ação priorizado.
body1rem · 400 · lh 1.6
Leitura por API, com permissão revogável a qualquer momento. Nada é instalado no seu CRM e nenhuma migração é necessária.
body-sm0.875rem · 400 · lh 1.5
Dados tratados conforme a LGPD. Você revoga o acesso quando quiser, direto no painel.
ui-label0.875rem · 600 · lh 1.3
Conectar meu CRM
ui-caption0.75rem · 600 · uppercase
Gap encontrado
data-lgIBM Plex Mono
2rem · 500
R$ 184.300
dataIBM Plex Mono
1.125rem · 500
47 negócios · 38 dias
data-smIBM Plex Mono
0.875rem · 500
12,4% · 03/09/2026
04 — Espaçamento e forma

Escalas

Sete degraus de espaçamento e cinco de raio. Tudo no layout sai de um desses valores — nunca um número solto no CSS da peça.

Espaçamento

xs · 4px
sm · 8px
md · 16px
lg · 24px
xl · 40px
2xl · 64px
3xl · 96px

Raio de canto

none · 0px
sm · 6px
md · 10px
lg · 16px

Elevação

A profundidade vem da troca de superfície, não de sombra pesada. A sombra só entra no modal.

surface
canvas
surface-2
card
surface-3
hover / ativo
modal
camada elevada
05 — Componentes

As peças do sistema

Cada componente é uma entrada de token no DESIGN.md. Variante nova entra como entrada nova — nunca como modificador improvisado no CSS de uma página.

button-primary · secondary

Altura 44px em ambos — é o mínimo de toque no celular.

input
badge-gap e variantes de estado
Gap encontrado Gap aberto Gap crítico
card

Motivos de perda

Preenchidos em 31% dos negócios fechados. O resto sai do funil sem explicação.

card-gap-encontrado
Gap encontrado

47 negócios parados há mais de 30 dias

Nenhum deles tem próxima ação marcada. Somados, representam:

R$ 184.300

Modal

Conectar RD Station CRM

Leitura apenas. Você revoga a permissão quando quiser, direto no painel — sem falar com ninguém.

06 — Iconografia

Lucide, traço 1.75

Biblioteca única: Lucide (licença ISC). Traço de 1.75 para casar com a hairline de 1px do sistema. Cor sempre currentColor; o acento só entra no ícone do CTA. Nunca misturar bibliotecas, nunca misturar preenchido com contorno.

16 · inline
20 · botão
24 · isolado
32 · destaque
07 — Aplicação

A marca vestindo o produto

O sistema com a copy real da oferta. É aqui que se vê se a identidade sustenta a promessa — ou se ficou bonita e muda.

Diagnóstico em minutos

Funciona até com CRM bagunçado

Conecte o CRM que você já usa e veja onde seu comercial está vazando dinheiro. Sem migrar de plataforma, sem projeto de consultoria.

Leitura por API com permissão revogável. Nada instalado no seu CRM.

Relatório de gaps — o mono no lugar certo

O que foi analisadoVolumeImpacto estimado
GapNegócios parados há 30+ dias, sem próxima ação 47 R$ 184.300
Motivo de perda preenchido 31% Atenção
GapTempo médio até o primeiro contato 38h R$ 62.100
Variação de conversão entre vendedores 4,3x Crítico

Dados ilustrativos, para demonstrar o sistema. Todo número em IBM Plex Mono; a coluna de valor alinhada à direita para comparar de relance.

08 — Modo claro

A mesma marca, em papel

O escuro é o modo nativo do produto. O claro existe para os lugares onde o fundo não é nosso: e-mail, documento impresso, anexo de proposta, print dentro do slide de outra pessoa. Não é um tema alternativo do painel — é a marca fora de casa.

light-surface
#F7F9FA
Canvas claro. Nunca branco puro.
light-surface-2
#FFFFFF
Card — a elevação inverte de sentido.
light-surface-3
#EDF1F4
Input, hover, superfície recuada.
light-border-strong
#8A95A0
Limite de campo. 3:1 sobre branco.
light-ink
#10161C
Texto principal. 18,2:1.
light-ink-secondary
#4A555F
Apoio e lede. 7,6:1.
primary-light-bg
#0E7A4C
O verde como traço: texto, link, ícone. 5,4:1.
primary-light-tint
#E6F7EF
Fundo de gap encontrado no claro.

Por que são dois verdes

O acento não muda de identidade — muda de função. Como preenchimento, o verde vivo continua sendo o botão. Como traço sobre fundo branco, ele desaparece: dá 2:1, e o mínimo legível é 4,5:1. Por isso existe o verde escuro.

Verde vivo como texto
2,00:1 — reprova
Verde escuro como texto
5,38:1 — passa em AA
Verde vivo como preenchimento
7,93:1 — passa em AAA

Regra: no claro, verde vivo só preenche; verde escuro traça. Os estados seguem a mesma lógica e têm par próprio — warning-light #8A6D00, error-light #C4342A, info-light #1668C4 — porque os tons do escuro são claros demais para texto sobre branco.

Os mesmos componentes, no claro

Gap encontrado

47 negócios parados há mais de 30 dias

Nenhum deles tem próxima ação marcada. É o relatório do crmscan como ele chega por e-mail ou anexado numa proposta.

card no claro

Motivos de perda

Preenchidos em 31% dos negócios fechados.

input e badges no claro
Gap encontrado Gap aberto Gap crítico
O que foi analisadoVolumeImpacto estimado
GapNegócios parados há 30+ dias47R$ 184.300
Motivo de perda preenchido31%Atenção
Variação entre vendedores4,3xCrítico

Conectar RD Station CRM

Leitura apenas. Você revoga a permissão quando quiser.

Nenhum componente foi redesenhado para o claro. Só os tokens trocaram — é essa a prova de que o sistema aguenta os dois fundos.

09 — Regras

O que sustenta o sistema

Faça

  • Guarde o verde #3ECF8E para dado positivo, CTA primário e gap revelado.
  • Todo número, percentual e valor em R$ vai em IBM Plex Mono.
  • Eleve por troca de superfície: surface → surface-2 → surface-3 → modal.
  • Texto sobre o verde usa on-primary #06281A.
  • Referencie sempre o token pelo nome — nunca um hex solto no CSS da peça.
  • Use o arquivo vetorial do wordmark; ele é traçado à mão.

Nunca

  • #000000 puro como canvas — o canvas é #0D1117.
  • Verde como fundo de seção, textura ou enfeite. Ele perde o significado.
  • Branco puro sobre o verde: o par correto é on-primary.
  • text-muted em corpo de texto — ele é só para legenda.
  • Um segundo acento. Cor extra só nos tokens de estado.
  • Corpo em 14px. A base é 18px, o leitor tem 35 a 55 anos.
  • "Digitar" o wordmark numa fonte de sistema — nenhuma reproduz essas letras.
  • Usar o Hero 3D como favicon, ícone de app ou em tamanho pequeno.
  • Verde vivo como texto sobre fundo claro — ali o par é primary-light-bg.
  • Tons de estado do escuro como texto no claro — cada um tem par próprio -light.
  • Branco puro como canvas do claro — o canvas é #F7F9FA, o branco é do card.