Fundamentos

Os pilares da identidade IAD

Toda decisão visual parte destes três pilares estratégicos que definem o DNA da marca.

01

Conhecimento

Base sólida, aprendizado profundo e formação estratégica. A marca comunica autoridade educacional com clareza.

02

Evolução

Crescimento contínuo, inovação e adaptação. O sistema visual reflete movimento, progresso e transformação.

03

Aplicação

Conexão entre teoria e prática para gerar impacto real. O design serve ao propósito, não ao ornamento.

Sistema de Cores

Paleta oficial da marca

Cinco cores estratégicas que equilibram solidez institucional, inovação digital e sofisticação. Use sempre os valores HEX exatos.

#002D72

Deep Sapphire

Cor primária. Fundos principais, cabeçalhos, elementos de autoridade. Uso dominante.

#1E88E5

Royal Blue Beam

Cor de ação. Links, CTAs secundários, destaques digitais, ícones interativos.

#F9A825

Golden Pulse

Cor de valor. CTAs principais, badges premium, destaques estratégicos. Uso seletivo.

#FFF8E1

Luxe Ivory Mist

Fundo alternativo. Superfícies elegantes, áreas de conteúdo premium, cards de destaque.

#1B1B1B

Grafite / Preto

Texto corrido, ícones em fundo claro, suporte estrutural. Contraste e legibilidade.

Tons derivados e estados

Deep Sapphire — Variações

#001a45

900

#002D72

Base

#003d99

Hover

rgba 12%

Fundo

Golden Pulse — Variações

#c17900

Dark

#F9A825

Base

#ffcc5a

Light

rgba 15%

Fundo

Combinações aprovadas de contraste

Use estas combinações para garantir acessibilidade (mínimo 4.5:1 para texto normal).

✓ Use

Branco sobre Deep Sapphire

Branco sobre Grafite

Grafite sobre Golden Pulse

Branco sobre Royal Blue

Deep Sapphire sobre Cinza Claro

✗ Evite

Branco sobre Golden Pulse (baixo contraste)

Sapphire sobre Royal Blue (difícil leitura)

Golden sobre Ivory (muito similar)

Cinza claro sobre Branco (invisível)

Royal Blue sobre Sapphire (confusão)

Tipografia

Sistema tipográfico

Clash Display para impacto e personalidade. SF Pro Display para legibilidade e clareza funcional.

Display / Hero

Clash Display 700 · 72px

Alpha

H1 / Título

SF Pro Display 700 · 40px

O futuro pertence a quem se prepara.

H2 / Seção

SF Pro Display 700 · 28px

Cursos de tecnologia e inovação digital

H3 / Subseção

SF Pro Display 600 · 20px

Formação profunda e estratégica

Body / Texto

SF Pro Display 400 · 16px

O Instituto Alpha Digital une solidez educacional e linguagem contemporânea, conectando fundamentos acadêmicos e inovação em uma comunicação relevante e impactante.

Caption / Meta

SF Pro Display 400 · 12px

Instituto Alpha Digital · Stúdiocarcel · 2025/2026

Label / Badge

SF Pro Display 700 · 11px · CAPS

Educação Digital · Inovação · Tecnologia

Hierarquia em uso — Web

Cursos em destaque

Desenvolvimento Web Full Stack

Domine front-end e back-end com as tecnologias mais demandadas do mercado. 6 meses de formação intensiva.

120h Premium Ao vivo

Fundo escuro — versão negativa

Marketing Digital Avançado

Estratégias, tráfego pago, SEO e analytics para escalar negócios no ambiente digital.

80h Gravado

Espaçamento e Grid

Sistema de espaçamento

Escala de 4px como unidade base. Toda margem, padding e gap deve ser múltiplo de 4.

Escala de tokens

xs · 4px

--space-xs: 4px · Ícones, bordas internas

sm · 8px

--space-sm: 8px · Gap entre itens próximos

md · 16px

--space-md: 16px · Padding padrão de cards

lg · 24px

--space-lg: 24px · Padding cards grandes

xl · 32px

--space-xl: 32px · Separação de seções

2xl · 48px

--space-2xl: 48px · Seções de página

3xl · 64px

--space-3xl: 64px · Hero e seções grandes

Border radius

radius-xs · 4px

Badges, tags, chips, botões pequenos

radius-sm · 8px

Inputs, botões padrão, ícones

radius-md · 10px

Alerts, form elements, mini cards

radius-lg · 16px

Cards, modais, painéis, seções

radius-xl · 24px

Modais grandes, imagens hero, avatares

radius-full · 999px

Botões pill, avatares, toggles

Componentes

Botões e ações

Hierarquia clara de ação: Primary (Deep Sapphire) → Gold (CTA premium) → Secondary (outline) → Ghost (ação leve).

Variações de estilo

Variações de tamanho

Fundo escuro

Estados especiais

Badges e rótulos

Educação Digital Premium Ao Vivo Encerra em 2 dias Gravado Novo Trending ⭐ Destaque

Alertas e feedbacks

ℹ

Inscrições abertas — As turmas do 2º semestre estão com vagas disponíveis. Garanta sua vaga antes do prazo.

✓

Inscrição confirmada! — Seu acesso ao curso foi liberado. Verifique seu e-mail para os próximos passos.

⚠

Prazo se encerrando — Faltam apenas 3 dias para o término das inscrições com desconto.

✕

Erro no pagamento — Não foi possível processar seu cartão. Tente novamente ou use outro método.

Formulários

Inputs e campos de formulário

Campos padrão

Nome completo

E-mail

Usaremos para enviar confirmação e materiais do curso.

Área de interesse

Mensagem

Estado de erro

E-mail

✕ Insira um e-mail válido (ex: nome@email.com)

Toggles e checkboxes

Receber novidades por e-mail

Notificações push

Aceito os termos de uso

Barra de progresso

Desenvolvimento Web78%

Marketing Digital55%

Design UX/UI91%

Cards

Tipos de card para conteúdo

Mais vendido

Web Dev

⭐ Premium

Full Stack Development

React, Node.js, bancos de dados e deploy. Formação completa em 6 meses.

R$ 297/mês

UX/UI Design

Design de Produto Digital

Figma, prototipação, pesquisa de usuário e design system. 4 meses.

R$ 247/mês

Data Science

IA & Machine Learning

Python, modelos preditivos e IA aplicada aos negócios. 5 meses.

R$ 347/mês

"

O IAD transformou minha carreira. Em 6 meses passei de CLT a freelancer internacional com projetos nos EUA. A formação é densa e prática.

LM

Lucas Mendes

Dev Full Stack · Turma 2024

Acesso Premium IAD

Todos os cursos por
R$ 197/mês

Acesse todos os cursos da plataforma, certificados reconhecidos e mentoria em grupo.

Navegação

Barra de navegação e menus

Todos os cursos

Tecnologia

Marketing

Design

Negócios

Layout completo com sidebar

Meu progresso

3

Cursos

68%

Progresso

2

Certificados

CONTINUAR ASSISTINDO

WD

Aula 14 — APIs RESTful com Node.js

Layout de Página

Estrutura de website institucional

Instituto Alpha Digital · 2026

O futuro pertence a
quem se prepara.

Formação intensiva em tecnologia, design e marketing digital. Conectamos teoria e prática para transformar carreiras.

12k+alunos

48cursos

96%aprovação

Cursos em destaque

Aprenda com quem está no mercado

Desenvolvimento Web

120h · Full Stack

R$ 297/mês

Marketing Digital

80h · Completo

R$ 197/mês

IA & Data Science

100h · Premium

R$ 347/mês

Privacidade Termos Suporte

Redes Sociais

Facebook, Instagram e LinkedIn

Templates e padrões de post para cada rede social. Tom de voz confiante, minimalista e voltado para transformação.

Facebook — Post Padrão

IAD

Instituto Alpha Digital

Há 2 horas · 🌐 Público

A evolução começa na mente.

Enquanto você lê isso, alguém está aprendendo a construir o futuro com código, dados e estratégia.

Não fique para trás. 🚀

#IAD #EducaçãoDigital #Tecnologia #TransformaçãoDigital

Instituto Alpha Digital

A evolução começa na mente.

👍 Curtir

💬 Comentar

↗ Compartilhar

Instagram — Feed Square

IAD

institutoalphadigital

···

Instituto Alpha Digital

"O conhecimento move quem constrói o futuro."

@institutoalphadigital

🤍 💬 ↗ 🔖

1.847 curtidas

institutoalphadigital Forme-se para o que vem. 🎯 Link na bio para se inscrever.

LinkedIn — Post Institucional

IAD

Instituto Alpha Digital

Educação Digital · 12.400 seguidores

3h · 🌐

O mercado não espera.

Profissionais que dominam tecnologia hoje têm salários 2x maiores do que a média do setor.

No IAD formamos pessoas para atuarem com:
✅ Inteligência e estratégia
✅ Tecnologia aplicada
✅ Visão de futuro

Acesse o link e conheça nossa formação.

#IAD #EducaçãoDigital #Tecnologia #Inovação

👍 Curtir

💬 Comentar

↗ Compartilhar

📤 Enviar

Padrões visuais para stories e banners

STORY · INSTAGRAM

"Forme-se para o que vem."

Ver cursos →

@institutoalphadigital

TURMAS 2026

Inscrições Abertas

Vagas limitadas

Garanta sua vaga

CONQUISTA

96%

dos alunos recomendam

Instituto Alpha Digital

@institutoalphadigital

NOVO CURSO

IA & Machine Learning

Inteligência Artificial para Negócios

100h · Ao vivo + gravado

Inscreva-se →

Dashboard

Painel administrativo e analytics

Alunos ativos

12.847

↑ 18% este mês

Cursos ativos

48

↑ 4 novos

Receita mensal

R$847k

↑ 23% vs. mês anterior

Taxa de conclusão

91%

↓ 2% vs. média

Cursos mais acessados esta semana

Curso	Alunos	Conclusão	Status
Full Stack Dev	3.241	78%	Ativo
Marketing Digital	2.180	65%	Ativo
UX/UI Design	1.847	91%	Premium
Data Science & IA	1.423	54%	Novo

Atividade recente

Nova inscrição — Turma Full Stack

João Mendes se inscreveu · há 5 min

Certificado emitido

Ana Costa concluiu UX/UI Design · há 12 min

Novo conteúdo publicado

Aula 18 — APIs com Python · há 1h

Suporte — ticket aberto

Pedro Lima enviou dúvida sobre pagamento · há 2h

Pagamento confirmado

5 renovações de assinatura Premium · há 3h

Email Marketing

Template de e-mail institucional

IAD

Instituto Alpha Digital

Março 2026

Novidades da plataforma

Turmas do 2º semestre com vagas abertas

Olá, João! Chegou a hora de dar o próximo passo na sua carreira digital. As turmas de Junho estão com inscrições abertas e as vagas estão acabando rápido.

🎁 Oferta exclusiva para você

Use o cupom IAD30 e ganhe 30% de desconto no primeiro mês de qualquer curso.

48

cursos

12k+

alunos

96%

aprovação

Descadastrar · Política de privacidade

Implementação

Tokens CSS — Copie e cole

Variáveis CSS prontas para implementação em qualquer projeto da marca IAD.

Cores e Tipografia

            /* ── IAD Design Tokens ── */
            :root {
            /* Cores primárias */
            --iad-sapphire: #002D72;
            --iad-sapphire-hover: #003d99;
            --iad-royal-blue: #1E88E5;
            --iad-golden: #F9A825;
            --iad-golden-dark: #c17900;
            --iad-ivory: #FFF8E1;
            --iad-grafite: #1B1B1B;

            /* Texto */
            --iad-text-primary: #1B1B1B;
            --iad-text-secondary: #424242;
            --iad-text-muted: #757575;

            /* Tipografia */
            --iad-font-display: 'Clash Display', sans-serif;
            --iad-font-body: 'SF Pro Display', -apple-system,
            sans-serif;

            /* Raios de borda */
            --iad-radius-sm: 6px;
            --iad-radius-md: 10px;
            --iad-radius-lg: 16px;
            --iad-radius-xl: 24px;

            /* Espaçamento */
            --iad-space-xs: 4px;
            --iad-space-sm: 8px;
            --iad-space-md: 16px;
            --iad-space-lg: 24px;
            --iad-space-xl: 32px;
            --iad-space-2xl: 48px;
            --iad-space-3xl: 64px;
            }
          

Componentes base

            /* ── Botão primário ── */
            .btn-iad-primary {
            background: var(--iad-sapphire);
            color: #ffffff;
            padding: 10px 20px;
            border-radius: var(--iad-radius-md);
            font-weight: 600;
            border: none;
            cursor: pointer;
            transition: all 0.2s;
            }

            /* ── Card padrão ── */
            .card-iad {
            background: #ffffff;
            border-radius: var(--iad-radius-lg);
            border: 1px solid rgba(0,45,114,0.06);
            box-shadow: 0 2px 8px rgba(0,45,114,0.08);
            padding: 24px;
            }

            /* ── Input padrão ── */
            .input-iad {
            border: 1.5px solid #e0e0e0;
            border-radius: var(--iad-radius-md);
            padding: 10px 14px;
            font-size: 14px;
            outline: none;
            transition: border-color 0.2s;
            }
            .input-iad:focus {
            border-color: var(--iad-royal-blue);
            box-shadow: 0 0 0 3px rgba(30,136,229,0.12);
            }
          

Checklist de implementação

Antes de publicar qualquer interface

Cores são os valores HEX exatos da paleta oficial

Contraste de texto mínimo 4.5:1 (verificado no WebAIM)

Logo não distorcido e com área de proteção respeitada

Tom de voz: confiante, direto e sem excessos

Golden Pulse usado com parcimônia (só onde há valor real)

Tipografia SF Pro Display em todos os textos

Testado em mobile (mín. 320px) e desktop (1280px)

Tom de voz — referência rápida

✓ Use

"Forme-se para o que vem." · "A evolução começa na mente." · "Aprenda. Aplique. Evolua."

✗ Evite

"O melhor curso do mundo!!!" · Exclamações em excesso · Jargões vazios · Frases longas e genéricas

"O conhecimento move quem constrói o futuro."

— IAD, identidade de marca 2026

Instituto Alpha DigitalGuia Completo de Interface

Os pilares da identidade IAD

Paleta oficial da marca

Tons derivados e estados

Combinações aprovadas de contraste

Sistema tipográfico

Sistema de espaçamento

Botões e ações

Badges e rótulos

Alertas e feedbacks

Inputs e campos de formulário

Tipos de card para conteúdo

Barra de navegação e menus

Layout completo com sidebar

Estrutura de website institucional

O futuro pertence aquem se prepara.

Aprenda com quem está no mercado

Facebook, Instagram e LinkedIn

Padrões visuais para stories e banners

Painel administrativo e analytics

Template de e-mail institucional

Turmas do 2º semestre com vagas abertas

Tokens CSS — Copie e cole

Checklist de implementação

Instituto Alpha Digital
Guia Completo de Interface

O futuro pertence a
quem se prepara.