MRR da carteira
R$ 19.500
▲ 8,2%
01
Princípios
Cinco decisões que governam tudo. Não são gosto: são a régua que mantém consistência antes de preferência.
01Quiet luxury
Premium sem neon nem glow artificial na UI estática. O detalhe importa mais que o volume: sofisticação que se sente, não se anuncia.
02A tipografia trabalha
A hierarquia vem da fonte e do espaço, não do excesso de cor ou decoração.
03Azul que lidera
Safira e sua família de tons estruturam o sistema, não só pontuam. Campos de azul são bem-vindos; o branco é base, não dogma. Tom rico de azul, sim; neon, não.
04Todo estado desenhado
Hover, focus, active, disabled, loading, empty, error: nada improvisado na hora da tela.
05Cada decisão tem critério
Contraste validado, token nomeado, regra escrita. Consistência antes de preferência.
02
Cor
Três camadas: primitivas cruas, semânticas de intenção, tokens de componente. A tela consome só semânticas, nenhuma cor é hardcoded. O azul é paleta de trabalho, não um acento solitário: superfícies, campos e séries de dados vivem na rampa Safira.
Azul Safira · a rampa de trabalho
--blue-50
#EAF1FB
chip / halo / campo suave
--blue-100
#D3E2F7
superfície tonal
--blue-200
#A9C6EF
campo / série 5
--blue-300
#7BA6E6
série 4
--blue-400
#5A97EE
Brilho · dark · série 3
--blue-500
#2E78E6
série 2
--blue-600
#1E63C8
MARCA · Safira · série 1
--blue-700
#154494
brand-hover
--blue-800
#0E3360
profundo 2
--blue-900
#061B36
base do dark
--blue-950
#05152B
tinta mais fundo
Neutros frios · platina
--neutral-0
#FFFFFF
--neutral-50
#F7F9FC
card
--neutral-100
#EEF2F8
inset
--neutral-200
#E4EAF2
hairline
--neutral-300
#C9D3E0
platina
--neutral-400
#A8B5C6
--neutral-500
#8493A6
--neutral-550
#65758C
legenda AA
--neutral-600
#5B6B7F
texto muted
--neutral-700
#3A4760
--neutral-800
#1C2740
--neutral-900
#15233B
tinta de texto
--neutral-950
#0A1424
Estados · 600 no claro
--green-600
#1E9E6A
success
--amber-600
#C9821A
warning
--red-600
#D14343
error
--success-soft
#E6F6EF
--warning-soft
#FBF1DF
--error-soft
#FBEAEA
Semânticas · modo claro (o que a tela usa)
TokenResolveUso
--bgneutral-0página
--surfaceneutral-50card
--surface-2neutral-100inset / elevado
--borderneutral-200hairline
--border-strongneutral-300divisor forte / platina
--textneutral-900AAA · 14,3:1
--text-mutedneutral-600AAA · 6,8:1
--text-subtleneutral-550AA · só legenda · 4,5:1
--brandblue-600botões, links, foco
--brand-hoverblue-700hover de marca
--brand-softblue-50chip / halo de foco
--ringblue-600focus ring (offset 2px)
Superfícies · o azul também é campo
--bgbase branca
--surfacecard
--brand-softcampo suave
blue-100tonal
--grad-skycampo tonal
--grad-brandcampo de marca
O branco continua sendo a base neutra, mas o sistema respira em azul: superfícies tonais, campos de marca e séries de dados usam a rampa Safira. O que não entra é neon, tom rico de azul, sim; brilho artificial, não.
03
Tipografia
Direção "Clean": Inter como família única de títulos, corpo e números (o substituto honesto da SF Pro), com algarismos tabulares. Geist Mono só em código, tokens e dados densos pequenos. Escala 1.25, base 16px.
Acelera
IA na sua empresa
Direção e implementação
Resultado em semanas
Autoridade serena, sem hype
Lead e destaques de parágrafo, quando o corpo precisa respirar um pouco mais.
Corpo de texto padrão. A hierarquia vem da fonte e do espaço.
Texto pequeno, apoio e metadados de interface.
Caption e rótulos de campo
Eyebrow / meta em caixa-alta
Números · Inter
1.284 · 98,2%
Inter com tabular-nums, peso 800, tracking apertado. É a fonte dos KPIs e headlines.
Mono · Geist
--table-row-hover
2026-07-09 · P0
2026-07-09 · P0
Só código, token e dado técnico pequeno.
Regra de kicker
Kickers em Inter caixa-alta, tracking largo. Mono nunca vira rótulo de seção.
Tracking display
Aperto premium do Inter: -.03em a -.04em nos títulos e números grandes.
Wordmark
AceleraIA
AceleraIA
AceleraIA
AceleraIA
A
Marca tipográfica caixa-alta em Inter 900, sem símbolo. O detalhe ownable é o "IA" fixo em Safira. Mínimo do lockup horizontal: 14px. Abaixo de 40px, entra o selo "A" em gradiente de marca.
04
Espaço, forma, elevação, gradientes
Grade de 4px, raios generosos, sombras frias sem neon, um easing só. Quatro gradientes assinatura cobrem ação, campo tonal claro, superfície escura e detalhe metálico.
Espaçamento · base 4px
--sp-1 4px
--sp-2 8px
--sp-3 12px
--sp-4 16px
--sp-5 24px
--sp-6 32px
--sp-7 48px
--sp-8 72px
Raio
--r-sm10px
--r-base14px
--r-lg18px
--r-pillfull
Elevação
shadow-sm
shadow-md
shadow-lg
Gradientes assinatura · quatro
--grad-brandação / CTA / campo royal
--grad-skycampo tonal claro de azul
--grad-deepsuperfícies escuras / dark
--grad-platinadetalhe metálico
--ease cubic-bezier(.4,0,.2,1) · --t .25s · --t-fast .15s · respeita prefers-reduced-motion
05
Componentes
Cada peça herda tokens semânticos, tem todos os estados desenhados e reage ao hover. Renderizados ao vivo, do jeito que devem aparecer no produto.
Botão
Input / Select
CNPJ incompleto. Faltam 9 dígitos.
Switch & Tabs
Badge / Chip · dot + rótulo
SaudávelAtençãoRisco
MarcaNeutroOutline
Tabela · hairline, sem zebra
| Conta | Saúde | MRR |
|---|---|---|
| Vega Log | 92 | R$ 8.400 |
| Móveis Duarte | 61 | R$ 3.200 |
| Clínica Bem | 34 | R$ 1.900 |
Toast & Empty state
✓
Conta salva. As mudanças já valem para o time.
◍
Nenhuma conta em riscoQuando uma conta cair de saúde, ela aparece aqui com o motivo.
Painel de saúde
Grupo Acelerador
87Confiança do score78%
Uso do agente subiu 3 semanas seguidas.
Última call de valor há 9 dias.
AdoçãoRelacionamentoROI
06
Indicadores e gráficos
Números de destaque em Inter (peso display, tabular-nums), delta semântico, sparkline. Os gráficos usam a rampa de azuis como séries, grid discreto e ponto de destaque. Saúde sempre em verde/âmbar/vermelho. Tudo anima ao entrar na tela, como no produto.
Contas ativas
148
▲ 12
Saúde média
64/100
▼ 3 pts
Churn 30d
2,1%
▼ 0,4 pp
Área · série única
Adoção do agente · 12 semanas
Linha múltipla · rampa de azuis
AdoçãoRelacionamentoROI
Barras · destaque
Contas por faixa de saúde
Barras agrupadas · antes / depois
AntesDepois
Donut · distribuição de saúde
Saudável 107
Atenção 50
Risco 27
Gauge · confiança do score
Meia-lua para índices 0 a 100
Empilhada · composição por plano
StarterProEnterprise
Funil · pipeline
Ranking · top contas por MRR
Vega LogR$ 8,4k
Móveis DuarteR$ 6,1k
Clínica BemR$ 4,7k
Nova FibraR$ 3,2k
Atlas RHR$ 1,9k
Bullet · meta vs. real
Receita do trimestre82% · meta 90%
Ativação de contas68% · meta 75%
Cobertura de fontes91% · meta 85%
07
O mesmo sistema, no escuro
O dark é o modo do produto (dashboard). Não é outro sistema: são os mesmos tokens, com o ground trocado por quase-preto Safira. O azul sobe para Brilho para continuar legível.
Mesma marca, outro palco
Fundo #0A0F1A com undertone Safira. O azul vive nos acentos e ainda pode virar campo, nunca em brilho artificial.
--bg#0A0F1A
--surface#111826
--surface-2#18202F
--accent#5A97EE Brilho
--text#EAF1FB
--text-muted#98AAC4
08
Governança
As regras que sustentam a consistência ao longo do tempo, além dos tokens.
01
Nenhuma tela hardcoda cor. Sempre variável semântica. É o que garante o dark de graça.
02
Zero emoji na UI de produto. Dot tipado + rótulo em português, sempre juntos.
03
Todo número tem origem. Um KPI leva à lista que o gerou.
04
Termos crus nunca aparecem. open, P0 e afins: um dicionário PT centraliza os rótulos.
05
Cor nunca é o único sinal. Estado sempre tem dot + rótulo, além da cor.
06
Réguas únicas. Atividade, datas e bandas de saúde centralizadas. Mata duplicação.