Manual de Identidade Visual

TECH
ROYER

Cursos Profissionalizantes

Este documento define os padrões visuais e comunicativos da marca Tech Royer. Siga estas diretrizes para garantir consistência em todos os canais.

Brand Book v1.0 — Novo Progresso, PA

01 — Identidade

Logo & Símbolo

O logo da Tech Royer combina um símbolo circular — representando conhecimento, tecnologia e evolução — com tipografia forte e direta.

Versão Principal

Fundos brancos e claros

Versão Negativa

Fundos escuros e azul-marinha

Símbolo Isolado

Favicon, ícone, avatar

Área de proteção

Mantenha ao redor do logo um espaço livre equivalente à altura da letra "R". Nenhum elemento pode entrar nessa zona.

espaço mínimo = altura do "R"

Regras de uso do logo

USE ASSIM

Versão colorida em fundos brancos e claros
Versão negativa (branco) em fundos escuros
Símbolo isolado para favicon e avatar
Respeitando sempre a área de proteção

NUNCA FAÇA

Distorcer ou alterar as proporções do logo
Aplicar sombras, filtros ou efeitos 3D
Mudar as cores originais da marca
Sobrepor em fotos sem contraste suficiente

02 — Identidade Visual

Paleta de Cores

A identidade cromática é construída sobre o Azul Royal — confiança, profissionalismo e tecnologia — complementado por neutros que garantem legibilidade e elegância.

Cores primárias

Azul Royal

#1A56C4

Cor dominante — CTA, links

Azul Profundo

#0F3A8C

Hover, seções de impacto

Preto Logo

#111111

Títulos H1, H2

Chumbo

#4A4F5A

Corpo de texto

Cores neutras

Branco Puro

#FFFFFF

Fundo principal

Gelo

#F4F6FA

Seções alternadas, cards

Cinza Borda

#E2E8F0

Bordas e divisores

Cinza Texto

#64748B

Subtítulos, labels

Escala tonal — Azul Tech Royer

Passe o mouse para ampliar cada tom.

100

200

300

400

500

600

700

800

← Mais claro (badges, fundos) Mais escuro (impacto, rodapé) →

Combinações de contraste aprovadas

Texto branco

Azul Royal + #FFFFFF

Texto escuro

Azul-50 + Azul-600

Texto preto

Gelo + Preto Logo

Texto claro

Azul-800 + Azul-200

03 — Tipografia

Sistema Tipográfico

Barlow Condensed para títulos e impacto. Barlow para textos e interface. As duas famílias são do mesmo projeto tipográfico — combinam naturalmente.

Barlow Condensed — Display / Títulos

'Barlow Condensed', sans-serif

Tecnologia que
transforma vidas

Cursos Profissionalizantes · Novo Progresso, PA

Light 300 Bold 700 Black 900

Barlow — Body / Interface

'Barlow', sans-serif

A Tech Royer é uma escola de cursos profissionalizantes focada em tecnologia, design e marketing digital. Formamos profissionais prontos para o mercado de trabalho com metodologia prática e atualizada.

Light 300 Regular 400 SemiBold 600 Bold 700

Escala tipográfica — Hierarquia

H1 — Barlow Condensed 900 / 52–80px

Título Hero

H2 — Barlow Condensed 900 / 36–48px

Título Seção

H3 — Barlow 700 / 22–28px

Título de Card

H4 — Barlow 700 / 16–18px

Título de Componente

Body — Barlow 400 / 15–17px / line-height 1.7

Texto corrido para parágrafos e descrições. Leitura confortável com espaçamento generoso entre linhas.

Label — Barlow 700 / 12px / uppercase / tracking

Categoria · Módulo · Data de Publicação

04 — Comunicação

Voz & Tom da Marca

A Tech Royer fala como um mentor experiente e acessível — direto, confiante e encorajador. Nunca arrogante, nunca genérico.

Direto

Vai ao ponto. Sem rodeios nem burocracia.

Confiante

Afirma com convicção. Demonstra expertise.

Acessível

Fala com o aluno, não para o aluno.

Local

Orgulho de Novo Progresso e da Amazônia.

✓ A Tech Royer diz

Linguagem aprovada

Aprenda na prática, comece hoje.
Certificado reconhecido. Carreira garantida.
Formação rápida e focada no mercado real.
Você é capaz. A gente te prova isso.
Tecnologia ao alcance de quem quer crescer.
Da Amazônia para o mundo digital.

✗ Evite sempre

Linguagem proibida

Revolucionário, disruptivo, inovador (clichê)
Linguagem excessivamente formal / acadêmica
Jargão técnico sem contexto para o leigo
Promessas vagas: "mude sua vida"
Tom corporativo frio e impessoal
Erros de português ou linguagem descuidada

Exemplo antes e depois

❌ Antes

"Buscamos capacitar os nossos discentes com ferramentas disruptivas que os habilitarão a atuar de forma proativa no mercado de trabalho."

✓ Depois

"Aprenda as ferramentas que o mercado usa agora. Saia do curso pronto para trabalhar."

05 — Interface

Componentes

Todos os elementos de interface seguem o mesmo sistema visual. Consistência entre páginas é obrigatória.

Botão primário · Botão secundário

Botão primário · Ghost — fundo escuro

Social Media Design Gráfico IA Corporativa

Badges — categorias de cursos

Social Media

Gestão de Redes Sociais

3 meses · Presencial + EAD

Card de curso padrão

Sistema de espaçamento

Token	Valor	Uso
--tr-space-xs	4px	Gap ícone/label, microespaços
--tr-space-sm	8px	Padding interno de badges
--tr-space-md	16px	Gap padrão entre elementos
--tr-space-lg	24px	Padding interno de cards
--tr-space-xl	40px	Gap entre cards, padding menor
--tr-space-2xl	80px	Padding vertical de seções

06 — Implementação

Variáveis CSS

Cole no campo de CSS global do Elementor: Elementor → Site Settings → Custom CSS. Todas as páginas passarão a usar os tokens da marca.

/* ========================================= TECH ROYER — Design Tokens v1.0 Cole em: Elementor → Site Settings → Custom CSS ========================================= */ :root { /* --- Cores Primárias --- */ --tr-blue: #1A56C4; /* Azul Royal — cor dominante */ --tr-blue-dark: #0F3A8C; /* Hover, rodapé, impacto */ --tr-blue-mid: #5A8EDC; /* Ícones, ilustrações */ --tr-blue-light: #EBF2FF; /* Fundos de badges, hover suave */ /* --- Escala Azul --- */ --tr-blue-50: #EBF2FF; --tr-blue-100: #C4D9FA; --tr-blue-200: #93BAEE; --tr-blue-300: #5A8EDC; --tr-blue-400: #1A56C4; --tr-blue-500: #1445A3; --tr-blue-600: #0F3A8C; --tr-blue-700: #0A2C72; --tr-blue-800: #061D52; /* Hero, seções de impacto */ /* --- Neutros --- */ --tr-black: #111111; /* Títulos principais */ --tr-charcoal: #4A4F5A; /* Corpo de texto */ --tr-gray-text: #64748B; /* Subtítulos, metadados */ --tr-gray-border: #E2E8F0; /* Bordas, divisores */ --tr-bg-alt: #F4F6FA; /* Fundo de seções alternadas */ --tr-bg-white: #FFFFFF; /* Fundo principal */ /* --- Tipografia --- */ --tr-font-display: 'Barlow Condensed', sans-serif; --tr-font-body: 'Barlow', sans-serif; /* --- Espaçamento --- */ --tr-space-xs: 4px; --tr-space-sm: 8px; --tr-space-md: 16px; --tr-space-lg: 24px; --tr-space-xl: 40px; --tr-space-2xl: 80px; /* --- Bordas --- */ --tr-radius-sm: 6px; --tr-radius-md: 10px; --tr-radius-lg: 16px; }

TECHROYER