IDENTIDADE DIGITAL · VERSÃO 1.0 · SETEMBRO 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 borboleta inspira transformação; as letras coloridas expressam diversidade de experiências. A interface equilibra essas cores 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. A borboleta 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.
Roxo EDAC
#53116B
Marca e ações primárias
Rosa descoberta
#DF167F
Destaques e foco
Amarelo energia
#FFCF24
Matrículas e chamadas
Verde crescimento
#10BA97
Apoio e detalhes
Roxo profundo
#321040
Texto e seções escuras
Papel
#FFFDF8
Fundo principal
Lavanda suave
#F6EFF8
Superfícies de apoio
Texto secundário
#6C6170
Parágrafos auxiliares
Priorizar texto branco sobre roxo, roxo profundo sobre amarelo e texto escuro sobre fundos claros. Não usar branco sobre amarelo ou verde vivo 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. Amarelo prioriza matrícula, roxo 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.
- Sem formulário de coleta de dados infantis. O contato abre o WhatsApp e o usuário decide se envia a mensagem.
- 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. |
| content.js | Configuração central de endereço, WhatsApp, mensagem, email e Instagram. |
| app.js | Navegação móvel, aplicação dos contatos e controle do vídeo. |
| 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 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 1.0 · Documento de referência da implementação.