Os tokens vivos do produto: cor, tipografia, espaçamento e ritmo. Esta página é a fonte de verdade única do design: toda superfície deriva daqui. A serifada editorial de parágrafo veio do 18theses.
Lime ácido sobre quase-preto é a assinatura: o lime é acento, nunca fundo.
Regra de background: ou é imagem, ou é cinza sólido, ou é gradient de tons de cinza; o padrão é
ink-900. Badges são sempre sóbrios (neutros). Texto nunca usa a família olive (nem
qualquer tom esverdeado): texto é off-white ou cinza (slate/gray/stone). Olive fica restrito a
elementos gráficos de marca. Neutros nunca são branco puro.
O claro segue a mesma hierarquia do escuro,
com os neutros da paleta: página off-white #F0F0EC, superfícies (cards)
white, barra lateral paper #FAFAF7, bordas stone-200,
campos de formulário stone-400, texto ink-900 com apoio
gray-600. Primário de botão/link: lime-on-light. Nunca branco puro
como fundo de página.
Space Grotesk nos títulos, Manrope no corpo/UI, Playfair Display em itálico para o acento humano: tudo que já existe. Somamos a Fraunces, serifada editorial para parágrafos longos.
Regra do destaque em lime: texto destacado na cor lime usa SEMPRE a serifada de acento (Playfair Display itálico), como em num só lugar. Lime em Space Grotesk ou Manrope só em UI funcional (botões, menu ativo, links).
Durante anos, o conhecimento de quem realmente entende de um assunto ficou preso à agenda de uma pessoa só. Uma empresa pequena raramente conseguia sentar com um consultor de verdade: o tempo era caro, e a atenção, escassa. E aí vale a pergunta: o que se perdeu no caminho? A resposta é simples e incômoda: perdeu-se acesso. A promessa aqui é devolver esse acesso: o mesmo raciocínio, o mesmo jeito de abordar um problema, disponível quando a empresa precisa, sem diluir o que torna aquele especialista quem ele é.
Nota: o 18theses usa a fonte Rosart (comercial, DizajnDesign). Aqui está a
Fraunces (livre, Google Fonts) como equivalente de mesmo espírito: troque a variável
--font-editorial pela Rosart licenciada quando quiser.
Base 4px, progressão consistente. Raios de canto do sutil ao pill.
Regras de contraste e estados. Texto sobre lime é sempre ink-950, nunca branco.
Sobre fundo claro, o primário usa lime-on-light (#5C7A00) com texto branco.
Desabilitado nunca usa opacidade (mata o contraste): troca as cores por
surface-2 + text-faint.
Primário: fundo lime-500, texto ink-950, hover lime-600. Ghost: transparente com borda forte. Foco visível sempre (anel lime translúcido).
Input: fundo transparente, borda border-strong, radius md, placeholder text-faint. Foco: borda lime + anel translúcido. Erro: borda error + mensagem curta abaixo do campo. Label: Manrope 600, sm.
Tokens combinados em peças reais.
25 anos de estrada em marketing para PMEs, agora disponível quando você precisar.
Graphite para blocos de destaque: fundo é sempre neutro: o lime entra só como acento.
Superfície elevada, borda sutil, raio md. O ritmo vertical segue a escala de espaço.
A família de telas que mostram um cartão sozinho no meio da tela e pedem uma decisão ou dão um recado: entrar, criar conta, confirmar o e-mail, autorizar uma conexão externa, avisar que a página não existe. Não têm sidebar, header nem navegação — a pessoa está de passagem, e a única coisa na tela é o que ela veio fazer.
Todas usam o mesmo fundo: uma malha de quadradinhos que piscam. É o que dá identidade a esse momento; sem ele o cartão flutua no vazio e poderia ser de qualquer produto. A regra de background continua valendo: o fundo não é verde — o verde aparece em quadradinho isolado, com alfa baixo, e some.
São três implementações em lugares que não compartilham código. O que mantém a família são os valores, idênticos nos três:
Quadrado de 4px, passo de 9px (centro a centro). O resto é
respiro: sem ele vira grade cheia, não textura.
Cor do quadrado: o mesmo tom do fundo. Escuro rgba(255,255,255,0.05),
claro rgba(0,0,0,0.07).
Densidade de 7% da malha acesa ao mesmo tempo — fração, nunca número
fixo: em número fixo o efeito some numa tela grande e satura numa pequena.
Vida de cada um entre 380ms e 900ms, subindo em 30% do tempo e
descendo no resto. Força sorteada entre 0,35 e 1.
Oliva #96B800 no escuro, #5C7A00 no claro. Nunca o lime da
marca: ele é acento de conteúdo, não de fundo.
Alfa máximo 0,45 no quadrado e 0,07 no halo (um quadrado maior
por baixo). O brilho vem da quantidade piscando, não da força de cada um.
black 55% → transparent 100%): sem
ela o retângulo termina numa linha reta contra o nada e denuncia que é papel de parede.fixed, e o conteúdo por cima precisa de relative z-10.
E ele tem de vir depois do elemento que pinta o fundo da página — atrás de um fundo
opaco, o canvas simplesmente não aparece.prefers-reduced-motion: a malha fica parada. Ela é decoração, não
informação — não há o que compensar.Entrar, criar conta, confirmar e-mail, esqueci/redefinir senha, candidatura a especialista, autorizar conexão externa (MCP/ChatGPT), retorno da conexão, candidatura enviada, página não encontrada. No back-office: entrar e redefinir senha.
Qualquer tela dentro da moldura do app (com sidebar ou header): home, chat, configurações, painel. Ali o fundo é a superfície neutra de sempre. Tela de erro que pode aparecer dentro do app também fica de fora — ela não sabe onde vai renderizar.
App do cliente: components/fundo-quadrados.tsx, aplicado por
AuthShell e TelaDePassagem.
Back-office: components/shared/FundoQuadrados.tsx, aplicado pelo
AuthShell do access.
Autorização OAuth: escrito à mão no HTML de oauth-consent.ts (é página montada
no servidor, sem bundle).