Manual da Marca
Diretrizes técnicas para manutenção da identidade visual PitStop Digital. Siga as especificações para garantir a consistência e integridade do sistema.
Assets do Sistema
- Cores: 4 Principais
- Fontes: 2 Famílias
- Ícones: FontAwesome 6
- CSS: Tailwind
Visão & Posicionamento
Missão
Entregar páginas e identidades visuais rápidas, enxutas e conversoras para pequenos e médios negócios, eliminando a burocracia do desenvolvimento web tradicional.
Visão
Ser a oficina digital de referência em velocidade & performance. Onde o cliente entra com uma ideia e sai com um negócio rodando em tempo recorde.
Voz da Marca
Técnica, direta e confiante. Usamos metáforas automotivas/industriais (box, oficina, motor, performance). Evitamos jargões de marketing vazios; preferimos termos de engenharia e mecânica.
Logo & Símbolo
Safe Zone (Área de Respiro)
Mantenha sempre uma margem de segurança ao redor do logo equivalente à altura do ícone "X". Nenhum elemento gráfico ou texto deve invadir este espaço.
Variações Permitidas
Paleta Cromática
Pit Yellow
Pit Black
Dark Metal
Pit Blue
Tipografia
Chakra Petch
Display & Headings // Google Fonts
Bold (700) - Títulos Principais
THE QUICK BROWN FOX
SemiBold (600) - Subtítulos
JUMPS OVER THE LAZY DOG
Regular (400) - Detalhes Tech
0123456789 // SYSTEM.READY
Inter
Body Text & UI // Google Fonts
SemiBold (600) - Destaques e Botões
The quick brown fox jumps over the lazy dog.
Regular (400) - Parágrafos
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Light (300) - Legendas (Opcional)
Nota de rodapé ou detalhe secundário.
Componentes UI
Botões & CTAs
.btn-pit-stop (Primary)
Secondary / Outline
Tech Link
Cards & Estruturas
Card Padrão (.riveted-card)
Usado para recursos, planos e conteúdo principal. Possui rebites decorativos nos cantos superiores e borda colorida no topo.
Alertas e Avisos
Use bordas amarelas e ícones de alerta para destacar informações críticas ou garantias.
Texturas & Padrões
Padrões de fundo sutis que adicionam profundidade técnica sem comprometer a legibilidade. Use com baixa opacidade como camadas decorativas.
Tech Dots
Padrão de pontos sutis criado com radial-gradient.
Tech Grid
Grade técnica com linhas cruzadas perpendiculares.
Hazard Stripes
Listras diagonais de atenção (amarelo/preto).
Tire Tread
Padrão de pneu com linhas verticais sutis.
Diretrizes de Uso
Pare de
Perder
Vendas
speed: 'max',
design: 'pro'
};
Aberta Poucas Vagas
Perfil Instagram & Grid
Diretrizes do Grid (1:1)
O grid do perfil é a primeira impressão visual da marca. Use posts quadrados (1:1) que funcionem bem tanto individualmente quanto em conjunto, criando uma identidade coesa e profissional.
Padrão Visual do Grid
- Alterne entre posts com fundo escuro e amarelo para criar ritmo visual.
- Mantenha elementos centralizados e minimalistas (ícones grandes, texto curto).
- Use a paleta principal: Pit Yellow, Pit Black, Dark Metal e Pit Blue.
- Evite poluição visual - cada post deve ter um único foco/mensagem.
Dica Técnica: Pense no grid como um painel de controle. Mesmo com posts independentes, o conjunto deve transmitir organização, velocidade e profissionalismo.
Stories & Ephemeral (9:16)
Os Stories são o "pit-lane" da marca: rápidos, crus e interativos. Use para mostrar bastidores, métricas em tempo real e enquetes técnicas. Mantenha a UI nativa do Instagram sempre legível.
SEU NEGÓCIO
É INVISÍVEL
NO GOOGLE?
Cliente não encontrado.
Sem site = Sem credibilidade.
Resolva isso ainda essa semana.
Não alugue.
Tenha o seu.
Sites profissionais de alta conversão. Sem mensalidades. Entrega recorde.
Box Liberado
Garante seu site profissional com entrega expressa.
Posts de Feed (Carrossel)
Diretrizes de Feed (3:4)
Para o feed, priorizamos o formato vertical (3:4 ou 4:5) para ocupar o máximo de tela no mobile. A estética deve seguir o padrão "Industrial Tech": alto contraste, tipografia pesada e elementos de UI sobrepostos.
Checklist Visual
Seu site
travou
no grid de largada?
Motor
Fundido?
Enquanto você tenta arrumar seu site sozinho, seu concorrente já cruzou a linha de chegada e levou o cliente.
Diagnóstico:
Lento: Demora mais de 3s para carregar.
Quebrado: Não abre direito no celular.
Invisível: O Google ignora sua existência.
Instalando
Nitro
Telemetria
Comparativo de tempo de volta (Entrega)
10x mais rápido
ENTRE NO
BOX HOJE
Garanta sua vaga no grid