IDENTIDADE DIGITAL · VERSÃO 2.0 · OUTUBRO 2026
Raízes de afeto.
Asas para o futuro.
Design System & System Design da Escola EDAC. Diretrizes de identidade, componentes e arquitetura para uma experiência acolhedora, acessível e consistente.
Aplicação inicial: campanha de matrículas 2027 e site institucional.
01 / ESSÊNCIA
Uma identidade que respeita a infância.
A árvore com raízes, folhas e figuras humanas representa vínculo, desenvolvimento e acolhimento; as letras coloridas reforçam a nova assinatura institucional. A interface equilibra essas cores terrosas com fundos claros, fotografias reais e espaço para respirar. O tom é próximo, cuidadoso e direto, sem promessas absolutas.
Uso da marca
Preferir a logo completa em fundo claro. Manter proporção e arquivo original; não distorcer, recolorir ou aplicar sombra. Reservar espaço livre de pelo menos 25% da altura ao redor. Largura mínima sugerida: 90 px na interface. O símbolo da árvore funciona como apoio visual e favicon, sem substituir a assinatura institucional em contextos novos.
02 / PALETA
Cores da marca, funções claras.
Paleta de interface derivada visualmente das logos fornecidas. São valores de aplicação digital, não especificações oficiais de impressão nem amostras colorimétricas exatas. As tonalidades escuras foram ajustadas para leitura.
Azul-petróleo EDAC
#174B52
Marca e ações primárias
Terracota afeto
#AD5C32
Destaques e foco
Dourado luz
#D3A54E
Matrículas e chamadas
Oliva natureza
#747D61
Apoio e detalhes
Petróleo profundo
#133b41
Texto e seções escuras
Papel
#F8F5EB
Fundo principal
Areia suave
#EFEADB
Superfícies de apoio
Texto secundário
#626461
Parágrafos auxiliares
Priorizar texto branco sobre azul-petróleo, petróleo profundo sobre dourado e texto escuro sobre fundos claros. Não usar branco sobre dourado ou oliva para texto pequeno. O verde institucional do material ECA Digital permanece no próprio arquivo, preservando a composição.
03 / TIPOGRAFIA E RITMO
Clareza com um toque de afeto.
| Uso | Família / escala | Regra |
|---|---|---|
| Títulos | Manrope · 44–96 px | Peso 500–600; entrelinha 1–1,1; espaçamento levemente fechado. |
| Ênfase editorial | Georgia itálico | Uma frase curta por título. Não usar em parágrafos longos. |
| Texto | DM Sans · 14–18 px | Entrelinha 1,55–1,9; largura confortável de até 60 caracteres. |
| Rótulos | DM Sans · 10–12 px | Caixa alta e espaçamento ampliado; nunca carregar informação essencial apenas aqui. |
Fontes web via Google Fonts, com Arial como alternativa para texto e títulos. Georgia usa a fonte instalada no dispositivo. Espaçamento: base de 8 px, intervalos de 16, 24, 32, 48, 64 e 96 px. Conteúdo central com largura máxima de 1440 px e margens fluidas.
04 / COMPONENTES
Uma linguagem compartilhada.
| Componente | Comportamento |
|---|---|
| Botões e links | Altura mínima de 44 px nas ações principais; texto explícito; hover com deslocamento suave; foco visível. Dourado prioriza matrícula, azul-petróleo conduz contato. |
| Cabeçalho | Logo, navegação por âncoras e CTA. Até 680 px, menu acionável com estado expandido, fechamento por Escape e retorno do foco. |
| Hero com vídeo | Vídeo local sem áudio, em loop; sobreposição escura; botão de pausa; poster; preferência por movimento reduzido respeitada. Recorte central no vídeo vertical. |
| Campanha 2027 | Imagem inteira, sem cortar informação; ampliação por link; novidade do 1º ano destacada também em texto HTML. |
| Cards de vivências | Fotografia preservada, categoria, título e descrição curta. Três colunas no desktop; uma no celular. |
| ECA Digital | Seção dedicada, imagem legível e ampliável, quatro pilares em texto e contato. A adoção é comunicada conforme o briefing; não representa certificação jurídica. |
05 / IMAGEM, MOVIMENTO E ACESSIBILIDADE
A criança e a mensagem em primeiro lugar.
Usar exclusivamente os materiais fornecidos nesta entrega. Fotografias com textos embutidos são exibidas por inteiro. Não acrescentar textos sobre rostos. A campanha de matrícula mantém sua composição original. Textos importantes também aparecem em HTML.
- Estrutura semântica com um h1, seções, navegação identificada e link para pular ao conteúdo.
- Imagens informativas com descrição; elementos puramente decorativos com alternativa vazia.
- Vídeo sem áudio e com pausa; em movimento reduzido ou economia de dados, aguarda reprodução manual.
- Formulário de contato com nome do responsável, interesse e mensagem opcional. Os campos preparam uma mensagem para o WhatsApp; não são armazenados no site. O usuário revisa e decide se envia.
- Alvo de contraste: WCAG AA, 4,5:1 para texto comum e 3:1 para texto grande. Não usar a cor como único indicador.
06 / SYSTEM DESIGN
Uma arquitetura simples de manter.
| Arquivo | Responsabilidade |
|---|---|
| index.html | Conteúdo editorial, seções, SEO e marcação semântica. |
| theme.css | Estrutura e responsividade herdadas do template. |
| edac.css | Tokens da marca, componentes EDAC e ajustes de layout. |
| identity-v2.css | Nova identidade: cores, tipografia, logos e superfícies. Aplicada sobre a estrutura preservada. |
| content.js | Configuração central de endereço, WhatsApp, mensagem, email e Instagram. |
| app.js | Navegação móvel, contatos, controle do vídeo e preparação da mensagem do formulário para WhatsApp. |
| assets/ | Logos, campanha, fotografias e vídeo otimizado sem áudio. |
| serve.cjs | Servidor local de prévia com suporte a intervalos de vídeo; não é backend de produção. |
Não há banco de dados, autenticação, cookies de rastreamento ou envio automático de mensagens. Não existe etapa de build: o site é estático. A publicação pode usar hospedagem estática; o servidor de prévia não deve ser exposto à internet.
Responsividade e performance
Layouts de referência: 1440, 768 e 390 px. Menu móvel até 680 px; grades de turmas em quatro, duas e uma coluna. Imagens secundárias carregam sob demanda. Vídeo H.264 com início progressivo e áudio removido. Em desktop, a fonte vertical é recortada para preencher o hero; preservar a mensagem em HTML evita depender do texto dentro do vídeo.
07 / CONTEÚDO E PROVENIÊNCIA
Informação consistente, origem conhecida.
Template-base: bilingual-school-template, fornecido pelo usuário. Logos, fotografias, campanha 2027, vídeo e material ECA Digital: arquivos fornecidos para esta adaptação. A autorização de uso neste trabalho decorre do pedido do usuário; autorizações originais de imagem não foram auditadas.
Referências consultadas em 24/09/2026: EDAC Anthropic, EDAC Codex e EDAC Google. Endereço e contatos coincidem. As páginas divergem quanto ao horário de fechamento, portanto esse dado foi omitido. As etapas e a novidade do 1º ano seguem a campanha 2027 fornecida.
Os arquivos públicos HTML e JavaScript das referências foram consultados como fonte de informação, sem reutilização de bibliotecas, trackers ou código de aplicação. A versão 2 utiliza as seis logos do kit de identidade v6 fornecido pelo usuário. Fotografias, vídeo e campanha mantêm as marcas presentes nos arquivos originais para preservar o conteúdo. A identidade do antigo template bilíngue foi substituída; não há afirmação de ensino bilíngue nem oferta de Ensino Médio.
Manutenção
Antes de uma campanha futura, atualizar o ano em textos, metadados, campanha visual e mensagem do WhatsApp; revisar contatos e oferta escolar. Para um domínio definitivo, tornar absoluta a URL da imagem de compartilhamento. Publicação não faz parte desta entrega local.
Escola EDAC · Design System 2.0 · Documento de referência da implementação.