Sistema de design · referência
Esta página existe para o time de engenharia. Mostra exatamente o que é token, o que é componente, o que está aposentado, e por quê.
O logo da Clave embute três cores: azul (o corpo do C), teal (o arco superior) e roxo (a gota inferior). Em vez de inventar uma paleta nova, este sistema dá um papel para cada uma. Mais um magenta - único, exclusivo para CTAs.
Decomposição
#0900E9 azul royal - choca com o roxo HR-Tech.
#F5B800 amarelo - usado aleatoriamente, sem papel.
#00B6F5 ciano - duplica o teal, gera ruído.
#727999 em parágrafos - falha AA contra branco. Mover para captions.
Variantes 0.85-alpha translúcidas - confundem a hierarquia.
Cada cor tem um papel. Teal nunca é CTA. Magenta nunca é decoração. Roxo nunca aparece fora de páginas HR-Tech.
Se algo precisa de mais um tom, primeiro perguntamos se é hierarquia (use ink/ink-2/muted) ou se é estado (use surface/surface-2). 90% das vezes é uma dessas duas.
O site atual tem 18 tamanhos diferentes em uso. Aqui colapsamos pra 8 e mantemos as duas famílias que já funcionam: Albert Sans para títulos e Mulish para corpo. JetBrains Mono para metadados.
Display · Albert Sans
400 · 500 · 600 · 700. Usado em todos os títulos h1–h4, números de stat, nomes de pessoa em cards.
Texto · Mulish
400 · 500 · 600 · 700. Corpo, lede, listas, formulários. Leitura confortável em parágrafos longos.
Escala · 8 passos
10 valores, todos múltiplos de 4. Padding, gap, margin - tudo respeita a mesma escala.
Hoje o site mistura 7px, 8px, 16px, 20px, 24px e 50%. Aqui ficam só três: pequeno (cards), grande (superfícies maiores), pill (botões e avatares).
Um CTA primário (magenta), um secundário (ghost), e a versão do ghost para fundos escuros. Tamanhos: padrão e --sm.
O site atual mistura Material Symbols Rounded + FontAwesome Free + FontAwesome Brands + Flaticon UICons. Adotamos Lucide: open-source, cobertura completa, traço consistente, tem ícones para HR (users, briefcase, target, shield).
Antes (consulting BR mid-2010s) vs. depois (B2B SaaS direto). Cada exemplo é parafraseado a partir do site atual.
"Direcionamos nossos esforços para facilitar as tomadas de decisões que envolvem mapeamento de talentos…"
"Soluções inovadoras para potencializar a transformação do seu capital humano."
"Atuamos junto às lideranças no desenvolvimento de competências estratégicas."
"Identifique quem está pronto para liderar - em 20 minutos, com base científica."
"A mesma ciência da consultoria. Aplicada em minutos, por software."
"Você sai do programa com decisões - não com PDFs."
68% do tráfego atual do site da Clave vem de mobile. O site atual foi feito desktop-first com adaptações - dá pra perceber. Este sistema inverte: cada componente é desenhado primeiro pra 375px e depois cresce.
MARKETING · STICKY CTA SEMPRE VISÍVEL
PORTAL · HAMBURGER · KPIS 2×2
RESPONDENTE · ESCALA 2×N · POLEGAR
Alvos de toque com no mínimo 44px.
Botões, chips, células tapáveis. iOS Human Interface Guidelines é o piso, não o teto. Em uma escala Likert (respondente) os botões passam de 100px de altura - evitam tap acidental.
Não use hover como informação.
Tooltip que só aparece em hover é invisível em mobile. Use disclosure: chip que abre, célula que expande, modal de longo press. O hover é enfeite, não conteúdo.
CTA primaria ao alcance do polegar.
No marketing site, sticky CTA fixo no rodapé quando o usuário rola além do hero. No portal e no respondente, o botão de ação fica na parte inferior fixa - nunca no topo.
Não force tabela horizontal.
Tabelas com 6 colunas em 375px viram lixo. A regra: até 3 colunas, mantém. Mais que isso, converte cada linha em card vertical - como faz a tela de Talentos no drill-down.
Tipo não desce abaixo de 14px no corpo.
No mobile, 16px permanece base de corpo. 14px só para metadados e captions. 12px exclusivamente para o eyebrow mono - que também carrega letter-spacing pra não murchar.
Não esconda a navegação sem dar pista.
Hamburger pelado não é navegação - é enigma. No portal, o título da página aparece ao lado do ícone (“Visão geral”, “Estrelas”), e o avatar do usuário fica visível - âncora de contexto.
section padding: 96–128px vertical
wrap padding: 24px lateral
h1: até 72px
hero gap: 64px
section padding: 64–80px vertical
wrap padding: 20px lateral
h1: 40–48px (clamp resolve)
hero gap: 32px
Tudo isso já está em clamp() nas variáveis CSS - você não reescreve componente pra mobile, ele se adapta.