A identidade
Stack
Cores, tipografia, componentes, voz e tom. Tudo que define como a Stack comunica, aparece e age — em um só lugar.
3
Famílias tipográficas
10+
Tokens de cor
6
Componentes base
4
Personas definidas
Cores
Paleta completa com tokens Tailwind. Use sempre as classes stack-* — nunca hex direto no código.
Core
stack-black
Black
#000000
Background primário, texto sobre fundo claro
stack-yellow
Yellow
#E7FF00
Accent: CTAs, highlights, hover states
stack-gray
Gray
#898989
Textos auxiliares, bordas, placeholders
stack-white
White
#FFFFFF
Texto sobre fundo escuro, bg modo claro
Yellow Expanded
stack-yellow-strong
Yellow Strong
#C8E000
Hover do botão primário
stack-yellow
Yellow Default
#E7FF00
Accent padrão
stack-yellow-soft
Yellow Soft
#F3FF7A
Texto de destaque suave sobre dark
Superfícies (Dark)
stack-deep
Deep
#070B12
Fundo mais profundo, interior de card
stack-black
Black
#000000
Fundo de página
stack-surface
Surface
#111111
Card, nav, sidebar
stack-elevated
Elevated
#1A1A1A
Elemento elevado sobre surface
stack-border
Border
#2A2A2A
Borda padrão entre elementos
stack-muted
Muted
#4A4A4A
Ícones e texto desabilitado
Semânticas
semantic-success
Success
#22C55E
Confirmação, sucesso, válido
semantic-error
Error
#EF4444
Erro, alerta crítico, destrutivo
semantic-warning
Warning
#F59E0B
Aviso, atenção, pendente
Regra crítica: amarelo em grandes áreas
Nunca use bg-stack-yellow como fundo de seções com muito texto. O amarelo é accent — botão primário, destaque de palavra, badge, ícone. Em fundo grande, o contraste quebra a leitura.
Tipografia
Todas as famílias vêm do Google Fonts. Nunca usar fontes alternativas sem aprovação de marca.
Roboto
Roboto · 400 Regular, 500 Medium, 700 Bold, 900 Black
O Builder constrói antes de esperar permissão.
Corpo de texto, parágrafos, labels, UI genérico
Roboto Condensed
Roboto Condensed · 700 Bold, 900 Black
AUTOMATIZE O RUÍDO
Headlines de hero e seção, números grandes, títulos impactantes
Roboto Mono
Roboto Mono · 400 Regular, 700 Bold
brand.stack.com.br/tokens
Labels técnicos, badges, tokens, código, section-label uppercase
Combinações canônicas
Hero / seção de impacto
font-condensed font-black uppercase tracking-tight
Corpo de texto
font-sans text-base leading-relaxed
Label / badge técnico
font-mono text-[11px] tracking-[0.08em] uppercase
H1 de post de blog
text-3xl sm:text-4xl md:text-5xl font-bold
Escala de tamanhos
| Token | Size | Uso | Specimen |
|---|---|---|---|
| text-xs | 12px | Captions, notas de rodapé | Aa |
| text-sm | 14px | Corpo compacto, badges | Aa |
| text-base | 16px | Corpo padrão de texto | Aa |
| text-lg | 18px | Subtítulos, lead text | Aa |
| text-xl | 20px | Títulos de card | Aa |
| text-2xl | 24px | H3, títulos de seção menores | Aa |
| text-3xl | 30px | H2 editorial de post | Aa |
| text-4xl | 36px | H1 de blog, stats | Aa |
| text-5xl | 48px | Headlines de seção (Condensed) | Aa |
| text-6xl | 60px | Hero headline médio | Aa |
| text-7xl | 72px | Hero headline grande | Aa |
| text-8xl | 96px | Display de impacto máximo | Aa |
Componentes
Classes definidas em packages/brand/styles/components.css. Disponíveis em todos os apps.
Botões
.btn-primary
A ação mais importante da página. Máximo 1 por tela.
.btn-secondary
Alternativa de menor comprometimento. Máximo 1 por tela.
.btn-ghost
Saída de escape, link textual, ação terciária.
Nunca 2 botões primários na mesma tela. CTAs sempre começam com verbo: "Garantir", "Construir", "Começar".
Badges
.badge .badge-yellow
Fundo escuro com texto amarelo. Uso em superfícies dark.
.badge .badge-black-on-yellow
Fundo amarelo com texto preto. Alta visibilidade, uso seletivo.
Section Label
.section-label
Roboto Mono, 11px, uppercase, tracking 0.15em. Introduz seções ou categorias. Cor padrão: text-stack-gray.
Cards
.stack-card
Card Dark (Deep)
bg-stack-deep/90 border border-white/10 rounded-sm
Use para conteúdo sobre fundo profundo. Cria profundidade com a superfície.
.stack-card-surface
Card Surface
bg-stack-surface border border-stack-border rounded-sm
Use sobre fundo preto puro. Contraste mais sutil.
shadow-brand-sm
Cards estáticos
shadow-brand-md
Cards com hover (hover:shadow-brand-md)
Container e layout
max-w-container mx-auto px-4 sm:px-6 → 1280px · Páginas principais max-w-6xl mx-auto px-4 sm:px-6 → Blog listing max-w-3xl mx-auto px-4 sm:px-6 → Post individual (leitura) Logo & Grafismo
Variações do logo Stack e uso do grafismo como elemento visual de textura.
Variações do logo
Versão principal
Sobre fundo preto ou muito escuro. Uso primário.
Sobre amarelo
Versão invertida em fundo amarelo. Uso em badges de alto impacto.
Sobre branco
Modo claro ou impressos. Versão escura do logo.
Grafismo
Grafismo Amarelo
grafismo-amarelo.png
Elemento de textura. Em heroes: opacity 0.06. Em demonstrações de marca: opacity 0.15–0.25.
Grafismo Branco
grafismo-branco.png
Versão branca do grafismo. Use em fundos muito escuros ou sobre amarelo.
Regras de uso do grafismo
- ✓ Em heroes:
opacity-[0.06], posicionado no canto superior direito - ✓ Sempre
pointer-events-none select-none— nunca é elemento clicável - ✕ Nunca usar como elemento de conteúdo isolado ou sem contexto de marca
- ✕ Nunca colorizar ou alterar o grafismo fora das versões amarelo/branco definidas
Voz & Tom
Nossa voz não pede permissão. Ela mostra o caminho.
A Guia Pragmática
Direta, confiante e incisiva. Conhece o território da IA e automação, já teve resultados aplicando essas ferramentas e está aqui para desafiar os melhores profissionais a saírem da zona de conforto operacional — que é a zona de risco profissional.
Os 4 pilares de personalidade
Provocadora porque é Visionária
Desafia o conforto operacional. A Stack pergunta: 'Você foi contratado para isso?' — não para diminuir, mas para despertar.
Autoridade com provas, não arrogância
Autoridade vem de cases reais e resultados práticos — nunca de certificados ou credenciais abstratas.
Mentora, não professora
Uma professora dá respostas. A Stack faz perguntas e guia a descoberta. O objetivo é a libertação, não a transmissão de conteúdo.
Líder da jornada
Cria um ambiente de alto nível, desafio e responsabilidade. Comunidade de quem faz — não de quem só assiste.
Do & Don't
Faça
- → "você" — minúsculo, nunca "tu" ou "vocês"
- → Frases curtas. Uma ideia por frase.
- → Voz ativa: "a Stack ensina" — nunca "é ensinado"
- → CTAs com verbo: "Garantir vaga", "Construir agora"
- → Dados específicos: "2.500 alunos", "28% de aumento salarial"
- → Perguntas reais: "Você foi contratado para preencher planilha?"
Nunca use
- ✕ Adjetivos vagos: "incrível", "revolucionário", "poderoso"
- ✕ Clichês de EdTech: "aprenda no seu ritmo", "transforme sua carreira"
- ✕ Jargão corporativo: "sinergia", "mindset", "ecossistema"
- ✕ Exclamações excessivas
- ✕ Promessas vagas sem números ou provas
- ✕ CTAs genéricos: "Saiba mais", "Clique aqui", "Entrar"
Redutores de risco — posicionar abaixo do CTA
Personas
Quatro faces do Builder — o ICP unificado da Stack.
O Builder
Profissional de nível médio com viés para ação. Preso no operacional, quer trabalho estratégico. Competente na sua área, frustrado com o que o impede de avançar. Acredita em resultados, não em teoria.
Dor
Planilhas, campanhas manuais, relatórios repetitivos que consomem todo o tempo estratégico.
Motivação
Automatizar funis, gerar relatórios com IA e volcar energia para o que importa.
Como abordar
Mostre automação de funil e relatórios com IA. Dados concretos de produtividade.
Dor
Múltiplos sistemas desconectados. Processos manuais que travam o crescimento da operação.
Motivação
Integrar tudo sem código, criar fluxos automáticos e eliminar o caos operacional.
Como abordar
Integração sem código, fluxos automáticos. Mostre redução de erros e tempo.
Dor
Tarefas admin consomem o tempo que deveria ser de vendas. CRM atualizado manualmente.
Motivação
Recuperar tempo de venda real, automatizar o administrativo e bater meta sem trabalho extra.
Como abordar
IA para qualificação, CRM automático. ROI em horas recuperadas por semana.
Dor
Ansiedade com IA, atrito constante com engenharia, sobrecarga de discovery manual.
Motivação
Usar IA sem depender de eng, acelerar discovery e entregar insights mais rápido.
Como abordar
IA sem código para PMs. Discovery acelerado. Autonomia de produto.
USP da Stack
"Liberte-se do operacional dominando
Automação e IA"
Animações
Motion que não distrai. Feedback rápido, entradas suaves, saídas mais rápidas que entradas.
Keyframes disponíveis
animate-fade-in
300ms · easing brand
Entrada padrão de elementos. translateY(8px) → 0 + fade.
Uso: Cards, listas, itens de conteúdo
animate-fade-in-slow
500ms · easing brand
Entrada suave. Mesma animação, mais devagar.
Uso: Heroes, banners, primeiros elementos da página
animate-fade-in-scale
300ms · easing brand
Scale(0.97) → 1 + fade. Sensação de popup.
Uso: Modais, tooltips, dropdowns
Transições de cor
| Classe | ms | Uso | Demo |
|---|---|---|---|
| transition-colors duration-fast | 150ms | Hover de botão ghost, ícones | |
| transition-colors duration-base | 300ms | Hover de cor em cards e botões | |
| transition-colors duration-slow | 500ms | Transições de estado maiores |
Tokens de motion
| Nome | Duração | Uso |
|---|---|---|
| instant | 100ms | Feedback imediato (ex: ripple) |
| fast | 150ms | Hovers, botões, seleções |
| normal | 200ms | Animações de UI padrão |
| slow | 300ms | Entradas de conteúdo |
| enter | 250ms | Abertura de modais |
| exit | 150ms | Fechamento — sempre mais rápido |
Reduced Motion
Respeite @media (prefers-reduced-motion: reduce). O global.css já desativa todas as animações para usuários que preferirem. Nunca sobrescrever esse comportamento.