01 · Fundação
OS TRÊS PRINCÍPIOS
O NÚMERO NO CENTRO
O vendedor abre o app para ver quanto falta. Meta, dias úteis e comissão vêm em mono, grandes, antes de qualquer decoração.
LARANJA É AÇÃO
Um laranja por tela, sempre no que faz o dinheiro andar: lançar venda, subir de plano, começar o módulo. Nunca decorativo.
CHUMBO SUSTENTA
Grafite e superfícies quase neutras carregam a estrutura. Se a tela parece cheia, o problema é hierarquia — não falta de cor.
Produto em foco
{{ focusName }}
{{ focusNote }}
02 · Marca
ARQUITETURA DE MARCAS
Grupo Altus Educacional é a marca guarda-chuva. A assinatura minimalista identifica o Radar na página; as moedas 3D ficam restritas a placas, mockups e embalagens. A entrada usa ênfase contida e o PRO recebe o destaque mais forte.
Identidade principal
Assinatura minimalista
Cabeçalho, rodapé e leitura rápida. A aplicação minimalista PRO continua pendente de aprovação.
Guarda-chuva
Grupo Altus Educacional
Assinatura institucional, rodapés, contratos e certificados. Chumbo #4F453F + laranja.
Entrada
Radar do Vendedor Rico
Calculadora de previsibilidade. Ênfase contida — o degrau de entrada antes do PRO.
PRO · destaque
Radar do Vendedor Rico PRO
Versão completa. Nome oficial: Radar do Vendedor Rico PRO. O brilho mais forte é exclusivo da apresentação de produto.
Curso
Vendas Movem Negócios
O emblema (escudo + engrenagens + seta) é o ativo. A versão transparente limpa foi recuperada do projeto e substitui a arte com mármore.
Retrato · Rafael Pires
Still para autoridade (topo de página, bio, avatar). Palco para prova social e seções de método.
Regras de uso
✓Área de respiro mínima igual à altura do símbolo em todos os lados.
✓A assinatura escura usa sua própria placa; a versão clara fica sobre branco. Sobre foto, aplicar uma placa que preserve contraste.
✕Não redesenhar, esticar, rotacionar nem trocar a cor das logos recebidas e aprovadas.
✕Usar sempre “Radar do Vendedor Rico”, “Radar do Vendedor Rico PRO” e “Grupo Altus”.
✕Não usar moedas 3D como assinatura principal no cabeçalho ou no rodapé.
Arte recebida · Masterclass
Formato 9:16 para story e anúncio. Data em pill, nome em plate escuro, retrato à esquerda — manter esse esqueleto a cada edição, trocando só tema e data.
Decisão vigente
A logo do Grupo Altus é dourada e verde. Os produtos usam laranja. A separação atual protege a hierarquia entre instituição, produto e curso:
1Dourado e verde ficam institucionais: assinatura, certificado, rodapé, contrato. Nunca em botão ou dado.
2Laranja e chumbo são de produto e de venda: apps, páginas, anúncios.
3A logo guarda-chuva sempre em versão sobre fundo escuro — o azul-petróleo do mock não é cor do sistema.
#8A5A26
#1D8B54
A nova fotografia do Rafael foi preservada sem alteração da pessoa. Na página, testar recorte 4:5 no desktop e quadrado no celular; a troca permanece sujeita à aprovação da prévia.
Composição de produto
Objeto saida placa
4 camadas
Fundo, decoração suave, produto e decoração nítida.
Breakout · 12%
Ultrapassa a placa sem invadir texto, preço ou controles.
Decoração silenciosa
Elementos visuais usam aria-hidden e nunca carregam conteúdo.
Fonte 3D ainda não publicável: os JPEGs recebidos têm o quadriculado incorporado. Usar somente como referência até chegar transparência real ou autorização para tratamento.
03 · Cor
TOKENS DE COR
Escala clara e editorial por padrão. Placas escuras ficam reservadas à assinatura, aos mockups e a trechos de alto contraste; elevação continua indicada por superfície, borda e sombra curta.
Superfícies
Texto
Marca & produto
Semântica
Em fundo claro, ação e erro precisam permanecer distinguíveis por ícone e texto — nunca somente por cor.
04 · Tipografia
TRÊS FAMÍLIAS, UMA ESCALA
RADAR
Big Shoulders Display · 700/800
Display. Títulos, números-manchete, badges. Sempre caixa alta e tracking .01em.
Comissão paga
Work Sans · 400/500/600/700
Corpo, labels, botões. Nunca abaixo de 13px na web, 15px no mobile.
R$ 10.480
JetBrains Mono · 500/600
Todo número de dinheiro, meta, prazo e eyebrow. É a voz do dado.
05 · Espaço, raio, sombra
ESCALA DE 4
Espaçamento
space-1
4px
space-2
8px · gap de chip
space-3
12px · dentro do campo
space-4
16px · gap de grid
space-5
24px · padding de card
space-6
32px
space-7
56px · entre seções
space-8
96px · bloco de LP
Raio
4 · tag
8 · input
14 · card
20 · modal
full · pill
Elevação
sm
md · dropdown
lg · modal
glow · Full
06 · Motion
MOVIMENTO CURTO
Contador de meta anima o número, não o card. Respeitar prefers-reduced-motion: corta transform e loop, mantém opacidade.
07 · Grid
LAYOUT E BREAKPOINTS
12 colunas · gutter 24px · container 1180px · margem 28px
sm · < 640
1 coluna, margem 20px, tab bar inferior. Alvos de toque 44px. Métricas empilhadas.
md · 640–1023
2 colunas, sidebar colapsa em drawer, tabela vira lista de cards.
lg · ≥ 1024
12 colunas, sidebar 236px fixa, tabela completa, gráfico ao lado das métricas.
08 · Ícones
GEOMETRIA DE 1,6PX
Grade 24px, traço 1,6px, cantos retos, sem preenchimento. Ícone nunca aparece sozinho em ação destrutiva — sempre com rótulo.
add
check
close
chevron
arrow
upload
search
chart
prazo
info
tabela
radar
09 · Componente
BOTÕES
Variantes · altura 44px
Tamanhos e estados
Um botão primário por tela. Rótulo é verbo + objeto ("Lançar venda"), nunca "Enviar" ou "OK".
10 · Componente
CAMPOS & FORMULÁRIOS
Estados do campo
Formulário completo
Recorrente
12 · Componente
CARDS & MÉTRICAS
Comissão do mês
R$ 6.480
+18% vs. agosto
Falta para a meta
R$ 3.520
R$ 293/dia nos 12 dias úteis restantes
Ticket médio
R$ 1.240
-4% na semana
Taxa de conversão
31%
Um dos 2 indicadores que você controla
Vendas por semana
SETEMBRO
meta R$ 10k
1.8k
2.4k
4.1k
—
S1
S2
S3
S4 · projeção
Progresso da meta
64%
R$ 6.480 de R$ 10.000
Se nada for lançado até sexta, o valor por dia sobe para R$ 391.
13 · Componente
TABELAS & LISTAS
Dinheiro sempre alinhado à direita, mono, tabular-nums. Abaixo de 1024px cada linha vira um card com valor e status no topo.
14 · Componente
MODAIS & DRAWERS
EXCLUIR ESTE LANÇAMENTO?
Clínica Vitalis · R$ 1.850. A comissão sai da meta do mês e não tem como voltar.
Scrim rgba(0,0,0,.55) · entrada 280ms · Esc e clique fora fecham · foco volta ao gatilho.
MIGRAR DADOS PARA O PRO?
Meta, dias úteis e ticket médio do Radar do Vendedor Rico passam para o Radar do Vendedor Rico PRO. Leva alguns segundos.
15 · Componente
TOASTS & ALERTAS
Venda lançada
R$ 4.200 · comissão R$ 336 somada à meta
Faltam 12 dias úteis
No ritmo atual você fecha o mês em R$ 8.100
Não deu para sincronizar
Os lançamentos ficaram salvos no aparelho. Tentar de novo?
Upgrade
O Radar do Vendedor Rico PRO lança venda a venda e guarda o histórico. Sua meta migra automaticamente.
Canto inferior direito no desktop, topo no mobile. 4s, ou até a ação ser usada.
Venda lançada
R$ 4.200 · comissão R$ 336
16 · Componente
UPLOAD DE ARQUIVOS
Arraste a planilha de fechamento
CSV ou XLSX até 10 MB
Fila
68%
18 linhas
Remover
Formato não aceito aqui — só CSV e XLSX
17 · Componente
CHAT & IA
A IA fala como um gerente comercial direto: aponta o número, sugere a ação e cita a dica do curso. Nunca promete resultado.
18 · Padrão
ESTADOS DE DADOS
MÊS AINDA EM BRANCO
Lance a primeira venda e a projeção aparece na hora.
Carregando
Skeleton com a forma do conteúdo real. Spinner só em ação de botão.
NÃO CARREGOU
Seus lançamentos estão salvos no aparelho. Nada foi perdido.
19 · Padrão
ACESSIBILIDADE
Obrigatório
✓Foco visível em todo elemento interativo: outline 2px #AA470D, offset 2px.
✓Alvo de toque mínimo 44×44px, inclusive no ícone de excluir.
✓Status "pago/pendente" com texto — nunca só bolinha colorida.
✓Zoom até 200% sem corte lateral; tabela rola, não encolhe fonte.
✓aria-live="polite" em toast e no número que muda sozinho.
Proibido
✕text-low em texto abaixo de 13px ou sobre base-200.
✕Laranja como cor de texto longo — só título curto, label e link.
✕Placeholder no lugar do label.
✕Remover outline sem colocar outro indicador de foco.
20 · Padrão
VOZ & ESCRITA
Gerente comercial experiente falando com um vendedor comissionado: direto, concreto, sem promessa de resultado. Venda é montanha-russa — o produto dá previsibilidade, não milagre.
Números
R$ 10.480 (ponto de milhar, vírgula de centavo). Abreviar só em gráfico: 10,4k. Percentual sem espaço: 31%.
Pessoa
Você para o vendedor. Nunca "nós" institucional. O produto não fala de si: fala do mês dele.
Nomes
Radar do Vendedor Rico, Radar do Vendedor Rico PRO, Vendas Movem Negócios e Grupo Altus Educacional. Sempre completos na primeira menção. “Plano anual” e claims de renda só entram após confirmação.
21 · Código
TOKENS EM CSS
:root {
--alt-base-000:#FFFFFF; --alt-base-050:#FAF6F2;
--alt-base-100:#FFFFFF; --alt-base-200:#F0E8E0;
--alt-base-300:#E5DAD0; --alt-base-400:#D7C9BC;
--alt-border:#D7C9BC; --alt-border-strong:#B9A99A;
--alt-text-hi:#241B16; --alt-text-mid:#695A50;
--alt-text-low:#746458; --alt-text-on-accent:#FFFFFF;
--alt-accent:#B74712; --alt-accent-hover:#93380D;
--alt-accent-press:#A74412; --alt-accent-soft:#FBE7D8;
--alt-graphite:#4F453F; --alt-radar-vendedor-rico:#B86A26;
--alt-radar-vendedor-rico-pro:#AA470D;
/* institucional — só assinatura, certificado, rodapé */
--alt-gold:#8A5A26; --alt-green:#1D8B54;
--alt-success:#2D8A5D; --alt-warning:#AD7614;
--alt-danger:#B63B30; --alt-info:#326F9B;
--alt-space-1:4px; --alt-space-2:8px; --alt-space-3:12px;
--alt-space-4:16px; --alt-space-5:24px; --alt-space-6:32px;
--alt-space-7:56px; --alt-space-8:96px;
--alt-radius-sm:4px; --alt-radius-md:8px;
--alt-radius-lg:14px; --alt-radius-xl:20px;
--alt-radius-pill:999px;
--alt-shadow-sm:0 1px 2px rgba(54,34,20,.11);
--alt-shadow-md:0 4px 12px rgba(54,34,20,.11);
--alt-shadow-lg:0 18px 40px rgba(54,34,20,.16);
--alt-shadow-pro:0 0 0 1px rgba(170,71,13,.3), 0 0 26px rgba(170,71,13,.18);
--alt-font-display:'Big Shoulders Display', 'Arial Narrow', sans-serif;
--alt-font-body:'Work Sans', system-ui, sans-serif;
--alt-font-mono:'JetBrains Mono', ui-monospace, monospace;
--alt-dur-fast:120ms; --alt-dur-base:180ms; --alt-dur-slow:280ms;
--alt-ease:cubic-bezier(.2,.8,.2,1);
--alt-ease-enter:cubic-bezier(.16,1,.3,1);
}
Botão primário
.alt-btn {
height:44px; padding:0 22px;
border:none; border-radius:var(--alt-radius-md);
background:var(--alt-accent);
color:var(--alt-text-on-accent);
font:600 14.5px/1 var(--alt-font-body);
transition:background var(--alt-dur-fast) ease-out;
}
.alt-btn:hover { background:var(--alt-accent-hover); }
.alt-btn:active { background:var(--alt-accent-press); }
.alt-btn:focus-visible {
outline:2px solid var(--alt-radar-vendedor-rico-pro);
outline-offset:2px;
}
Campo e valor monetário
.alt-input {
height:44px; padding:0 14px;
background:var(--alt-base-200);
border:1px solid var(--alt-border);
border-radius:var(--alt-radius-md);
color:var(--alt-text-hi);
font:400 14.5px/1 var(--alt-font-body);
}
.alt-input:focus {
border-color:var(--alt-accent);
box-shadow:0 0 0 3px rgba(183,71,18,.18);
outline:none;
}
.alt-money {
font-family:var(--alt-font-mono);
font-variant-numeric:tabular-nums;
text-align:right;
}