Planeta Digital Brandbook
Brand
Guia oficial de identidade visual e verbal. Um sistema claro para manter consistência, impacto e credibilidade em cada ponto de contacto da marca.
Radar da Marca
Atualizações reais do que estamos a construir.
Tokens
Cores da Marca
Paleta curta e funcional: verde para ação e crescimento, base neutra para legibilidade e espaço visual.
Verde Principal
#40A947
--color-green-1
Verde Claro
#7DDF7D
--color-green-2
Verde Suave
#B4E3D6
--color-green-3
Preto de Contraste
#151515
--color-dark-1
Branco
#FFFFFF
--color-white
Branco Base
#F6F5F3
--color-white-1
Background
Gradientes
Sistema de fundos com profundidade e direção visual. Mantém identidade sem perder legibilidade.
Brand Flow
linear-gradient(135deg, #40A947 0%, #7DDF7D 48%, #B4E3D6 100%)
--bg-gradient-brand
Deep Contrast
linear-gradient(145deg, #151515 0%, #243646 58%, #40A947 100%)
--bg-gradient-deep
Soft Atmosphere
radial-gradient(circle at 12% 8%, rgba(125, 223, 125, 0.16) 0%, rgba(125, 223, 125, 0) 42%), linear-gradient(160deg, #FFFFFF 0%, #F8FCF8 100%)
--bg-gradient-soft
Surface Lift
linear-gradient(180deg, #F6F5F3 0%, #FFFFFF 100%)
--bg-gradient-surface
Regras de aplicação
- Usar gradiente forte apenas em hero ou blocos de destaque principal.
- Evitar texto longo sobre gradientes complexos sem overlay.
- Combinar com superfícies neutras para descanso visual.
- Preferir ângulos de 135° a 180° para manter consistência.
Type System
Tipografia
Duas famílias e hierarquia objetiva: impacto nos títulos, leitura rápida no conteúdo.
Crescer no digital com estratégia.
Design orientado para resultado.
Clareza em cada detalhe.
Texto para introduções e mensagens com mais presença.
Tom direto, humano e profissional. Escrevemos para simplificar decisões e acelerar ação.
Components
Botões
Call-to-actions com contraste alto, foco em legibilidade e cantos de assinatura da marca.
Essentials
Fundamentos Importantes
Regras operacionais para manter consistência visual e funcional em todas as páginas.
Acessibilidade
- Contraste mínimo AA em texto e componentes críticos.
- Área mínima de toque: 44x44px.
- Estados de foco sempre visíveis no teclado.
- Texto de corpo com mínimo recomendado de 16px.
Escala de Espaçamento
Base de 8px para ritmo consistente em layout e componentes.
Grid e Breakpoints
Iconografia e Motion
- Ícones monoline com stroke consistente.
- Microanimações entre 180ms e 280ms.
- Easing padrão: ease-out para interação.
- Evitar animações contínuas sem propósito.
Motion
Animação da Marca
Movimento com intenção: feedback rápido, leitura guiada e transições sem ruído.
Hover Elevation
Para botões e cards clicáveis. Dá profundidade e confirma interação.
Shimmer CTA
Ideal para chamadas principais em secções de conversão.
Entrada Suave
Para listas e highlights quando entram no viewport.
Texto letra a letra
Entrada da esquerda para a direita.
Entrada da direita para a esquerda.
Cenários recomendados
Hero
Objeto da esquerda + texto letra a letra (LTR).
Secção alternada
Imagem da direita + heading com reveal RTL.
Testimonials
Cards com stagger de 90ms entre elementos.
CTA final
Shimmer curto no botão + fade do bloco.
Rápida
180ms
Padrão
240ms
Suave
320ms
Easing
cubic-bezier(.22,1,.36,1)
Stagger
60-120ms
Scroll Story
Narrativa sem sair do mesmo sítio
Enquanto fazes scroll, o conteúdo muda por fases e a imagem acompanha. Ideal para explicar processo, produto e transformação.
Fase 01
Diagnóstico e posicionamento
Descobrir
Mapeamento da marca, público e proposta de valor para definir uma base estratégica.
Definir
Sistema visual, voz e estrutura da experiência com foco em diferenciação.
Construir
Implementação de layout, conteúdo e animações de forma consistente com o brandbook.
Escalar
Medição de resultados, testes e melhoria contínua para manter performance.
Scroll Stage
Palavras em destaque + imagem em transição
Modelo editorial de alto impacto: palavra principal fixa no centro e elementos visuais em movimento conforme a fase do scroll.
DESIGN
MAKERS
TECH
LOVERS
DATA
BELIEVERS
Fase 01
Mensagem criativa dominante com suporte visual periférico.
Fase 02
Transição da narrativa para foco tecnológico e produto.
Fase 03
Fecho com posição estratégica orientada a dados e escala.
Immersive 01
Scroll e as imagens vão passando
Galeria horizontal controlada pelo scroll vertical. Boa para mostrar portefólio, casos e serviços sem perder ritmo.
Immersive 02
Scroll e a imagem vai crescendo
Zoom progressivo para criar foco no detalhe e aumentar a perceção de profundidade.
Detalhe em foco
Estratégia que aproxima design e performance
Immersive 03
Sequência de imagens por scroll
Cada bloco ativa um novo frame visual, como uma mini-história contínua.
Frame 01
Descoberta
Frame 02
Conceito
Frame 03
Execução
Frame 04
Escala
01. Diagnóstico
Levantamento da realidade atual, oportunidades e prioridades.
02. Direção
Definição do caminho visual, estrutura e tom da experiência.
03. Implementação
Construção, integração e validação técnica do ecossistema digital.
04. Otimização
Medição contínua e ajustes para melhorar conversão e performance.
Immersive 04
Before / After guiado pelo scroll
Um comparador visual que evolui com o scroll: da situação atual para uma experiência estruturada, rápida e orientada a conversão.
01. Estado Atual
Mapeamento de fricções, ruído visual e pontos de abandono.
02. Estrutura
Reorganização da navegação, hierarquia e mensagens principais.
03. Conversão
CTAs mais fortes, percursos curtos e foco em contacto qualificado.
04. Otimização
Leitura contínua de dados e melhoria incremental da experiência.
Immersive 05
Scroll e a imagem cresce progressivamente
Um efeito de ampliação contínua durante o scroll para aumentar foco e impacto visual, mantendo o utilizador preso à narrativa.
Immersive 06
Imagem espalmada que abre com o scroll
Efeito de scroll-driven reveal: a imagem começa comprimida e ganha escala até ocupar um bloco fluid, criando a sensação de “desdobrar” o conteúdo.
Não sabes por onde começar? Experimenta um destes prompts:
FAQ
Perguntas frequentes
Voice
Voz da Marca
Confiante, próxima e orientada para negócio. Menos ruído, mais direção.
Como falamos
- Frases curtas e objetivas.
- Foco em benefícios concretos para o cliente.
- Linguagem simples, sem jargão desnecessário.
- Verbos de ação: criar, otimizar, escalar, vender.
Evitar
- Promessas vagas sem prova.
- Texto excessivamente técnico.
- Formalismo distante da realidade do cliente.
- CTAs genéricos e sem contexto.
Exemplos de assinatura verbal