Brandbook

Guia completo de identidade visual e comunicação — da marca às peças. Landing pages, redes sociais, e-books, pitches, impressos e tudo mais.

Explorar Checklist
01 · Propósito & Essência

Transformar
aprendizagem
em resultados.

A Scaffold Education é uma edtech que desenvolve um ecossistema completo de aprendizagem corporativa. Acreditamos que o aprendizado consistente é a base para o desenvolvimento das pessoas e a sustentabilidade dos resultados organizacionais.

Nossa identidade visual traduz essa missão: direta, sem ornamento desnecessário, com energia para mover — como uma estrutura que sustenta enquanto o crescimento acontece.

+500 mil pessoas treinadas +5.000 empresas
Personalidade de Marca

Quem somos

🧭
Desbravador

Somos pioneiros em soluções educacionais, sempre buscando novas formas de transformar o aprendizado.

Revolucione a capacitação da sua equipe
Nossos cursos seguem sempre o mesmo formato
🎯
Resolutivo

Focamos em soluções práticas que geram resultados reais e mensuráveis para nossos clientes.

Reduza custos de capacitação em até 97%
Temos treinamentos que talvez te ajudem
💡
Inovador

Combinamos tecnologia e pedagogia para criar experiências únicas de aprendizagem.

Tecnologia que potencializa o aprendizado
Nossa plataforma funciona como qualquer LMS
⭐
Inspirador

Motivamos pessoas e organizações a alcançarem seu máximo potencial através do aprendizado.

Desperte o potencial da sua equipe
Cursos obrigatórios para manter a conformidade
03 · Paleta de Cores

Cores

A paleta é construída sobre o laranja Scaffold como força central, ancorada pelo azul-tinta profundo e equilibrada por neutros quentes. Nunca misture com paletas externas não aprovadas.

PRIMÁRIA
Laranja Scaffold
HEX #f26522
RGB 242, 101, 34
CMYK 0, 58, 86, 5
Pantone 158 C
APOIO
Laranja Suave
HEX #f7941d
RGB 247, 148, 29
CMYK 0, 40, 88, 3
FUNDO
Creme
HEX #F4EFE8
RGB 244, 239, 232
CMYK 0, 2, 5, 4
NEUTRO
Preto
HEX #000000
RGB 0, 0, 0
Ação & Destaque

CTAs, destaques em títulos, elementos de navegação, badges. Use com generosidade — é a cor-força da marca.

Respiro & Leveza

Fundos de seções claras, backgrounds de cards, ambientes editoriais. Evita o branco frio e humaniza a experiência.

Acessibilidade de Contraste

Todas as combinações abaixo atendem WCAG AA (4.5:1). Sempre verifique antes de publicar.

Branco s/ Laranja
3.0:1
⚠ Use apenas em títulos grandes (+18pt)
Tinta s/ Creme
12.8:1
✓ AAA · Seções editoriais
04 · Tipografia

Sistema Tipográfico

Anton para impacto — títulos, displays, carrosséis. Montserrat para comunicação — body, legendas, UI. Nunca use mais de 3 pesos diferentes em uma mesma peça.

Estilo Exemplo Especificação Uso
Display Scaffold Anton / 72–120px / -0.02em Hero, capa, carrossel de impacto
H1 Aprendizagem Anton / 40–60px / -0.018em Título de seção principal
H2 Resultados Reais Anton / 28–40px / -0.015em Subtítulo de seção
H3 Plataforma Escalável Anton / 20–28px / -0.01em Card, slide de carrossel
Corpo O aprendizado consistente é a base para o desenvolvimento das pessoas. Montserrat 500 / 16–18px / 1.7–1.8 Parágrafos, descrições
Label Educação Corporativa Montserrat 800 / 10–12px / +0.16em / Upper Kicker, chip, navegação

Pesos Montserrat

Use no máximo 3 pesos por peça para manter hierarquia clara.

Light (300)
Textos delicados e introductórios
Regular (400)
Corpo de texto padrão em parágrafos
Medium (500)
Destaques sutis em parágrafos longos
Semibold (600)
Subtítulos e ênfases em texto corrido
Bold (700)
Títulos de cards e elementos de UI
Extrabold (800)
Labels, CTAs e kickers de destaque
Baixar fontes
05 · Iconografia & Grafismos

Elementos
Gráficos

Ícones Font Awesome (estilo consistente — outline ou solid, nunca misturar). Grafismos como setas, cantos e texturas são parte do DNA visual da marca.

Ícones Recomendados

Livro
Ideia
Equipe
Resultados
Plataforma
Mobile
Empresa
Certificado
Dados
Web
06 · Fotografia

Estilo
Fotográfico

Nossas imagens têm personalidade, autenticidade e vida. Evitamos fotos genéricas de banco em favor de conteúdo que conecta com nossa audiência corporativa.

✓ O que buscamos
Imagens com Alma
  • Pessoas reais em situações genuínas de aprendizagem e colaboração
  • Expressões naturais que transmitem engajamento e satisfação
  • Representação inclusiva de idades, etnias e contextos profissionais
  • Ambientes corporativos modernos com iluminação natural
  • Foco em momentos de transformação e conquista real
  • Imagens em P&B com elemento laranja de destaque (collage editorial)
✗ O que evitamos
Imagens Genéricas
  • Poses artificiais e sorrisos forçados de banco de imagem
  • Clichês como apertos de mão, apontando para gráficos
  • Escritórios impessoais e ambientes sem contexto
  • Imagens pixeladas, mal iluminadas ou subexpostas
  • Fotos sem diversidade representativa
  • Imagens que não se relacionam com aprendizagem ou trabalho

Logo sobre Fotografias

A versão correta do logo depende do fundo. Sempre garanta contraste mínimo 4.5:1.

Fundo Claro
Logo Principal
Contraste 4.5:1 mínimo · 90% das aplicações
Fundo Escuro
Logo Invertida
Contraste 7:1 · Materiais premium
Fundo Laranja
Logo Negativa
Aplicações especiais branded
Foto Complexa
Overlay 50–60% + Negativa
Sempre overlay escuro antes do logo
07 · Redes Sociais

Social
Media

A Scaffold possui três estilos visuais para redes sociais que devem ser aplicados de forma consistente. Cada estilo tem um contexto narrativo específico.

Estilos Visuais

Slide de capa — estilo editorial creme
Editorial Creme
Fundo creme + tinta + laranja. Para capa, conclusão e CTA. Transmite autoridade e confiança.
Slide de desenvolvimento — estilo dark ink
Dark Ink
Fundo tinta + branco + laranja. Para dados impactantes e desenvolvimento narrativo. Tom jornalístico.
Slide de afirmação — estilo laranja sólido
Laranja Sólido
Fundo laranja + branco + tinta. Para afirmações e slides de virada narrativa. Máximo impacto.

Estrutura do Carrossel

Todo carrossel de conteúdo segue uma narrativa em 4 atos.

01
Capa — Gancho

Pergunta provocadora, dado surpreendente ou notícia real. Fundo creme + logo no canto superior direito. Seta na base.

02
Desenvolvimento

Contexto e aprofundamento. Alterna entre estilos Dark e Laranja. Cada slide = 1 ideia central.

03
Virada

A perspectiva Scaffold. Conecta o problema externo com a tese da empresa. Laranja sólido ou dark de impacto.

04
CTA — Encerramento

Logo Scaffold + chamada para ação. Fundo creme ou escuro. Nunca encerre sem a identidade da marca.

Formatos & Dimensões

1:1
Post Feed
1080 × 1080px · JPEG/PNG
4:5
Carrossel
1080 × 1350px · JPEG/PNG
9:16
Stories / Reels
1080 × 1920px · MP4/PNG
1.91:1
LinkedIn Banner
1584 × 396px · JPEG/PNG
16:9
YouTube Thumb
1280 × 720px · JPEG/PNG
08 · Materiais de Venda

Pitch &
One Pager

Materiais de venda seguem um padrão visual único: fundos escuros quentes com acento laranja, tipografia de alto impacto e estrutura em 4 zonas de leitura.

Anatomia do Pitch

  • 01
    Capa de ImpactoLogo + headline direto + imagem de contexto (produto/pessoa). Fundo escuro com acento laranja.
  • 02
    O ProblemaContexto do mercado em 1–2 parágrafos. Sem burocracia. A dor do cliente em linguagem dele.
  • 03
    A SoluçãoHeadline laranja + 3–4 benefícios objetivos. Dados reais quando disponíveis.
  • 04
    Prova SocialNúmeros e logos de clientes. Grid de estatísticas com destaque tipográfico.
  • 05
    CTA de EncerramentoFoto do executivo de vendas + contato. Split escuro/laranja.
O DESAFIO
O CONHECIMENTO
DISPONÍVEL NEM SEMPRE
VIRA AÇÃO

Empresas já investem em treinamentos, conteúdos, políticas e trilhas. O desafio é fazer esse conhecimento chegar ao colaborador no momento da execução.

01
Encontrar orientação certa
02
Evitar interpretações divergentes
03
Enxergar as dúvidas reais
O PROB. NÃO É
MAIS CONTEÚDO.

One Pager Operacional

Estrutura em 5 zonas verticais para uma única página A4 ou digital.

01
Faixa Hero

Imagem de contexto com overlay + headline Scaffold + linha de posicionamento. Máximo impacto visual na entrada.

02
Faixa Laranja — Posicionamento

Título Anton em maiúsculas + corpo Montserrat + lista de capacidades. Background laranja com textos em tinta e branco.

03
Faixa Cinza — Problema & Solução

Split em 2 colunas: "O Desafio" (escuro) + "A Scaffold Entrega" (laranja). Máximo 3 bullets por coluna.

04
Faixa Escura — Resultados

Grid de 4 métricas em Anton grande + logos de clientes na base. Números sempre em destaque laranja.

05
Rodapé — Contato

Logo + CTA de WhatsApp em laranja + endereços. Fundo tinta ou preto.

09 · E-books & Infográficos

Materiais
Educacionais

E-books, infográficos e materiais de conteúdo refletem a expertise da Scaffold. A hierarquia visual deve guiar o leitor naturalmente da capa ao conteúdo.

Tipos de Infográfico

Cada tipo de dado exige um formato visual específico. Escolha o que melhor comunica a hierarquia de informação.

Timeline

Jornadas, processos sequenciais, evolução histórica. Linha laranja central com nós numerados.

Grid de Dados

Métricas e resultados. Números grandes em Anton + unidade + descrição. Fundo alternado tinta/laranja.

Comparativo

Antes vs. depois, problema vs. solução. Split em 2 colunas com contraste escuro/laranja.

Step-by-Step

Fluxos de processo com 4–6 passos. Numeração laranja, cards em tinta, conectores em laranja.

11 · Tom de Voz

Tom &
Linguagem

A Scaffold fala como um consultor experiente que respeita o tempo do interlocutor: direto, específico, sem jargão excessivo. Provoca reflexão, não ansiedade.

01
Direto ao ponto

Sem rodeios. A primeira frase já deve entregar o valor ou a tensão. Nunca comece com contexto genérico.

Reduza o turnover em 42% com uma jornada de integração bem estruturada.
No cenário atual, em que o mercado passa por transformações, a capacitação torna-se cada vez mais fundamental.
02
Dados concretos

Números reais valem mais que adjetivos. Especificidade gera confiança. Se não há dado, não invente.

–48% no tempo de onboarding em equipes comerciais e operacionais.
Nossa solução reduz significativamente o tempo de integração das equipes.
03
Provocativo sem ser agressivo

A Scaffold questiona paradigmas. Faz perguntas que o cliente ainda não fez. Mas respeita a inteligência de quem lê.

Sua empresa está escalando um padrão de decisão sem perceber?
Você precisa urgentemente rever seus processos de tomada de decisão!
04
Resultado, não processo

Fala do impacto, não da mecânica. O cliente quer resultado, não entender como a plataforma funciona internamente.

Transforme treinamento em execução no dia a dia.
Nossa plataforma possui módulos de microlearning com suporte a SCORM e xAPI.

Padrões de Copy

Estruturas recorrentes que definem a voz da Scaffold nas peças de comunicação.

Negação + Afirmação
IA NÃO CORRIGE
CULTURA.
IA AMPLIFICA.
Quebra a expectativa com "não é sobre X" e revela o real problema. Cria tensão e resolução no mesmo slide.
Dado + Consequência
+9H
de internet por dia.
E nunca tão distraídos.
Número de impacto em Anton + frase de contexto em Montserrat. Cria hierarquia e surpresa.
Pergunta Direta
SEU PADRÃO
DE DECISÃO
É SEGURO
PARA ESCALAR?
A capa mais eficaz é uma pergunta que o público ainda não fez. Deve ter resposta dentro do carrossel.
12 · Motion & Digital

Animação
& Interação

Motion reflete o ritmo da marca: rápido onde é ação, suave onde é revelação. Nunca decorativo — sempre funcional. Respeite prefers-reduced-motion.

Fast / Ação
180ms · cubic-bezier(.2,.8,.2,1)

Hovers, cliques, feedbacks imediatos. Quando o usuário age, a resposta deve ser quase instantânea.

Base / Reveal
520ms · cubic-bezier(.16,1,.3,1)

Entrada de elementos, modais, transições de estado. A curva spring cria sensação de física real.

Slow / Ambiente
900ms+ · cubic-bezier(.16,1,.3,1)

Parallax, scroll reveal, animações de fundo. Nunca aplicar em elementos interativos — cria frustração.

⚠ Acessibilidade de Motion

Sempre implemente @media (prefers-reduced-motion: reduce) para desativar animações. Usuários com epilepsia fotossensível ou distúrbios vestibulares podem ser prejudicados por movimento excessivo. Nunca use flashes ou transições rápidas com alto contraste.

Acessibilidade

Inclusão
Por Design

A Scaffold serve empresas diversas. Nossa comunicação deve ser acessível a todos, independentemente de limitações visuais, motoras ou cognitivas.

WCAG AA
Contraste Mínimo

Todo texto deve ter razão de contraste de pelo menos 4.5:1 contra o fundo. Para texto grande (+18pt), mínimo 3:1.

  • Laranja (#f26522) sobre tinta → 4.8:1 ✓
  • Evite texto branco sobre laranja em corpo pequeno
  • Use sempre ferramenta de verificação de contraste
Textos Alternativos
Imagens & Ícones

Todo conteúdo visual que transmite informação deve ter alternativa textual.

  • Logotipo: alt="Scaffold Education"
  • Ícones decorativos: aria-hidden="true"
  • Gráficos e infográficos: descrição completa em aria-label
  • Imagens de contexto: descrição sucinta do conteúdo
Navegação
Focus & Teclado
  • Todos os elementos interativos devem ter :focus-visible estilizado
  • Nunca remova o outline padrão sem substituir por alternativa visível
  • Ordem de tabindex deve seguir a ordem visual da página
  • Links de "pular para o conteúdo" em páginas longas
Mobile
Touch & Responsivo
  • Áreas de toque mínimas de 44×44px (WCAG 2.5.5)
  • Texto escalável até 200% sem quebrar layout
  • Teste em viewport de 320px (mínimo suportado)
  • Evite hover-only interactions — sempre tenha alternativa touch
Checklist de Produção

Antes de
Publicar

Use esta lista antes de aprovar qualquer peça — digital ou impressa. Uma peça fora do padrão prejudica a consistência construída ao longo do tempo.

Visual
  • Cores dentro da paleta oficial
  • Tipografia apenas Anton + Montserrat
  • Logotipo na versão correta para o fundo
  • Área de respiro do logo respeitada
  • Contraste mínimo 4.5:1 verificado
  • Grain aplicado onde aplicável (5–8%)
  • Proporção do logo mantida (nunca distorcida)
Conteúdo
  • Tom direto, sem jargão excessivo
  • Dados conferidos e com fonte
  • Revisão ortográfica e gramatical
  • Máximo 3 pesos tipográficos na peça
  • CTA claro e acionável
  • Hierarquia de leitura testada
  • Textos alternativos em imagens
Digital & Redes
  • Dimensões corretas para a plataforma
  • Resolução 72dpi/2x para telas
  • Compressão de imagem sem perda visível
  • Teste em mobile (320–480px)
  • prefers-reduced-motion implementado
  • Arquivo exportado em JPEG/PNG/WebP
Impressos
  • Modo de cor CMYK
  • Resolução mínima 300dpi
  • Sangria mínima 3mm incluída
  • Fontes embutidas ou convertidas
  • PDF/X-4 para envio à gráfica
  • Prova de cor solicitada antes de tiragem
Aprovação
  • Aprovação do responsável de marca
  • Versão final nomeada com data e versão
  • Arquivo fonte salvo em local acessível
  • Registro no repositório de materiais
Co-branding
  • Logo do parceiro na versão correta
  • Hierarquia de logos definida e respeitada
  • Paleta de cores não conflitante
  • Aprovação da outra empresa obtida
  • Contrato de uso de marca assinado