A marca, e são duas
Os dois arquivos não são duas versões do mesmo logo. São duas marcas, com a hierarquia de cor invertida: no primeiro o azul domina e o teal é o ponto do “i”; no segundo o teal é o fundo inteiro e o azul virou o símbolo. É essa inversão que dá base às duas visões deste documento.
O logo 1 tem 2.616 × 660 px e fundo transparente; o logo 2 tem 2.500 × 1.667 px e já vem com o card. O download desenha o cartão num canvas, na escala escolhida, sem biblioteca externa: este arquivo abre de um pen drive, sem internet.
O logo para colar dentro de um documento
O PNG em tamanho cheio não cabe num documento que a IA monta: em texto, o logo 1 ocupa 41 KB e o logo 2 348 KB, e ninguém transporta isso para dentro de um relatório. Os dois blocos abaixo são os mesmos logos reduzidos para 48 px de altura, que é o tamanho de cabeçalho, e cabem em 6 KB cada um.
Cole no campo de imagem do documento, ou peça ao assistente que use este bloco no cabeçalho. Sobre fundo escuro ou teal, o logo vai sobre uma pastilha branca.
De onde vêm os hex
dado Os seis valores abaixo foram medidos pixel a pixel nos dois PNG, com a proporção de tinta de cada um. Não foram estimados a olho, e não vieram do site.
| Logo | Cor | Hex | Quanto ocupa |
|---|---|---|---|
| 1 · Instituto Euvaldo Lodi | azul | #0E4194 | 80,3% da tinta |
| cinza | #575656 | 15,5% | |
| teal | #6AC2BA | 4,2% · o ponto do “i” | |
| 2 · IEL Consultorias | teal, gradiente | #23E2C7 → #6CC2BA |
base-esquerda para topo-direita |
| azul | #164193 | as duas faixas do símbolo | |
| branco | #FFFFFF | símbolo e texto |
O azul institucional é o do logo, e não o do site
O site iel-ce.org.br usa #0055A5, que é outro
azul. Decisão do Rafael em 03/09/2026: vale o #0E4194,
medido no logo. Não misture os dois no mesmo documento.
Paleta, nas duas visões
Clique em qualquer tom para copiar o hex. O tom 500 é a cor medida no
logo; os outros nove foram calculados por mistura linear em sRGB, os claros com
branco e os escuros com #111111. decisão nova
A escala não existe no site: foi construída aqui.
Visão 1 · Institucional
Para prestação de contas, convênio, ofício e relatório que vai ao financiador. Dominante azul, acento teal.
Azul institucional · dominante
#0E4194É o azul do logo 1, e ele ocupa 80,3% da tinta dele. O 700 serve para hover e para texto de link.
Teal ponte · acento
#6AC2BAÉ o ponto do “i” do logo 1, e é a cor que as duas marcas compartilham. Texto sobre ele é escuro até o tom 700.
Cinza · neutro
#57565615,5% da tinta do logo 1. Os tons 50 e 200 são o fundo e a borda de toda tabela deste sistema.
Visão 2 · Consultorias
Para proposta, diagnóstico e apresentação comercial. Dominante teal, acento azul.
Teal vivo · dominante
#23E2C7É o extremo forte do gradiente do logo 2. Texto sobre ele é escuro até o tom 700: branco só a partir do 800.
Azul consultorias · acento
#164193São as duas faixas do símbolo do logo 2, e é onde o texto branco pode ficar nesta visão.
Cinza · neutro
#575656O mesmo cinza da visão 1. O neutro não muda entre as duas: é o que mantém as duas parecendo da mesma casa.
A ponte entre as duas visões é o teal, e ela já existia
O teal do logo 1 é #6AC2BA. O extremo suave do gradiente do logo 2 é
#6CC2BA. Dois pontos de diferença em cada canal: as duas
marcas já compartilham essa cor. Não invente uma terceira para harmonizar.
Texto branco não passa sobre os dois teais
dado Contraste medido pelo cálculo de luminância da WCAG:
| Fundo | Texto branco | Texto #111111 | O que usar |
|---|---|---|---|
#0E4194 azul institucional | 9,53 : 1 | 1,98 : 1 | branco |
#164193 azul consultorias | 9,50 : 1 | 1,99 : 1 | branco |
#575656 cinza | 7,32 : 1 | 2,58 : 1 | branco |
#6AC2BA teal ponte | 2,09 : 1 | 9,03 : 1 | escuro |
#23E2C7 teal vivo | 1,64 : 1 | 11,49 : 1 | escuro |
O piso da WCAG AA para texto normal é 4,5 : 1. Branco sobre o teal vivo dá 1,64, então na visão 2 o texto sobre a cor dominante é escuro, e não branco. O logo 2 faz isso certo: o texto branco dele fica sobre a faixa azul, nunca sobre o teal claro.
Os rótulos dos próprios swatches acima obedecem a esta regra. A cor de cada um é escolhida comparando o contraste contra o fundo dele, e não pelo número do tom. Os 60 ficam acima de 4,5 : 1, e o pior deles é 4,53. Escolher por número de tom parece funcionar e falha em toda escala clara: era assim até 03/09, e deixava nove swatches ilegíveis bem embaixo deste aviso.
Tipografia
dado Montserrat, carregada via Google Fonts no site do IEL. A escala de tamanho abaixo também é da auditoria de 03/09/2026.
40px · 700Execução do convênio
32px · 700Prestação de contas
20px · 600O que precisa de decisão
18px · 500Texto de apoio, e rótulo de botão
16px · 400Corpo de texto. É o tamanho do parágrafo em todo documento do IEL.
14px · 400Nota de rodapé, legenda de tabela, dado secundário.
12px · 600Rótulo de coluna
O peso de título é decisão nova, e não extração do site
dado No site, h1, h2,
h3 e h5 estão todos em peso 400, então a
hierarquia vem só do tamanho. A auditoria não consegue dizer se é intenção editorial ou
CSS que ninguém sobrescreveu.
decisão nova Aqui título é 600 ou 700. O motivo é de uso: este design system existe para gerar relatório e proposta, documentos que a pessoa varre procurando o número, e não lê linha por linha. Sem peso, um título de 20px e um parágrafo de 18px viram a mesma mancha. A ambiguidade do site não se repete aqui, e a escolha está declarada.
Regras do logo
| Qual logo | Em que contexto | Dominante | Acento |
|---|---|---|---|
| Logo 1 Instituto Euvaldo Lodi |
prestação de contas, convênio, ofício, relatório para financiador | azul #0E4194 | teal #6AC2BA |
| Logo 2 IEL Consultorias |
proposta, diagnóstico, apresentação comercial | teal #23E2C7 → #6CC2BA |
azul #164193 |
Margem mínima igual à altura do “I”
Meça a altura da letra do próprio logo e use isso como folga em volta, nos quatro lados. É uma medida que acompanha o logo quando ele muda de tamanho.
Logo 1 sobre branco, sempre
Sobre branco ele mede 8,83 : 1. Fora de branco, confira antes, e a conferência é de imagem: mede-se o pixel do logo contra o fundo, não o texto ao lado.
Pôr o logo 1 direto sobre fundo escuro
Ele é azul #0E4194 sobre transparente, então some no escuro:
2,00 : 1 sobre o azul 900 e 1,22 : 1 sobre o azul
500. Em fundo escuro ele vai sobre uma pastilha branca, como nos
cartões da seção 1 e no cabeçalho da visão 1.
Pôr o logo 1 sobre teal
O ponto do “i” é teal. Sobre fundo teal ele desaparece, e o que sobra parece um erro de impressão.
Recolorir, distorcer ou aplicar sombra
Os dois PNG já vêm na cor certa. Esticar para caber, trocar o azul pelo do site ou pôr sombra são as três coisas que mais aparecem e as três que não se fazem.
Componentes
Cada peça abaixo muda de cor junto com a visão do topo. Troque lá e veja aqui: é a prova de que as duas visões saem do mesmo componente, e não de dois arquivos.
🔴 O rodapé do card não é enfeite. Número sem a conta ao lado é o defeito que o papel do agente proíbe, e um card bonito é justamente onde ele passa despercebido.
| Unidade | Registros | Valor executado | Observação |
|---|---|---|---|
| Centro | 184 | R$ 296.400,00 | 4 grafias agrupadas por você |
| Sobral | 141 | R$ 228.150,00 | |
| Maracanaú | 97 | R$ 154.800,00 | 2 grafias agrupadas por você |
Tom de voz
Puxado da linguagem do próprio site auditado, e não de referência genérica. O IEL escreve institucional, sem jargão de startup.
“Desenvolvimento empresarial”
É o vocabulário do próprio site: educação executiva e corporativa, gestão da inovação, trilhas de carreira.
O número com a conta ao lado
Quem lê um relatório de convênio responde por ele. Número sem origem obriga a pessoa a refazer a conta, e ela vai refazer.
“Destravar”, “escalar”, “disruptivo”, “game changer”
Não aparece em lugar nenhum do site do IEL, e num documento que vai ao financiador soa como quem não conhece a casa.
“Vale destacar”, “cabe ressaltar”, “conforme solicitado”
Ocupam linha e não dizem nada. O papel do agente já proíbe as três, e a proibição vale para o documento inteiro.
O que a auditoria pode e não pode sustentar
dado Montserrat, a escala de tamanho, o azul do site
#0055A5 e o vocabulário institucional vêm da home de
iel-ce.org.br, medidos em 03/09/2026.
decisão nova Tudo o mais nesta página. A auditoria cobriu uma página só, e ela mesma diz isso: formulário, tabela e estado de erro não foram capturados. Nada aqui deve ser apresentado como “padrão do IEL” com base numa home.
Três coisas ficaram de fora de propósito: a paleta utilitária de tema
(--indigo, --purple, --cyan), que a auditoria
mostra ser boilerplate provavelmente não usado; a barra amarela do topo, que é widget de
campanha RD Station e não cor institucional; e a fonte Ubuntu, que aparece só nesse
widget.
Mockup aplicado · o relatório de execução, nas duas visões
É o mesmo caso da aula: o fechamento do trimestre do convênio do IEL. Lado a lado, para você escolher olhando, em vez de decidir no abstrato.
Antes de qualquer número
- 763 registros lidos, 61 sem horas, 1 repetido
- 15 grafias de unidade, e as instruções dizem 12
- A soma bateu com o fechamento, e bater não é prova: as duas contas ignoram as mesmas 422 células de texto
O que precisa de decisão sua
As quatro grafias de Centro precisam da sua decisão antes de qualquer número sair da casa.
| Unidade | Registros | Executado |
|---|---|---|
| Centro | 184 | R$ 296.400,00 |
| Sobral | 141 | R$ 228.150,00 |
| Maracanaú | 97 | R$ 154.800,00 |
Antes de qualquer número
- 763 registros lidos, 61 sem horas, 1 repetido
- 15 grafias de unidade, e as instruções dizem 12
- A soma bateu com o fechamento, e bater não é prova: as duas contas ignoram as mesmas 422 células de texto
O que precisa de decisão sua
As quatro grafias de Centro precisam da sua decisão antes de qualquer número sair da casa.
| Unidade | Registros | Executado |
|---|---|---|
| Centro | 184 | R$ 296.400,00 |
| Sobral | 141 | R$ 228.150,00 |
| Maracanaú | 97 | R$ 154.800,00 |
Repare no que vem primeiro nos dois
A cor muda; a ordem não. Nos dois documentos o bloco “antes de qualquer número” está no topo, com as três conferências, e a tabela bonita vem no fim.
🔴 É a trava deste material inteiro. Um design system dentro de uma aula de conferência pode virar exatamente o contrário: a coisa bonita que faz ninguém olhar o número. Se um dia você tiver que escolher entre o documento ficar mais bonito e a conferência aparecer primeiro, a conferência ganha.
Saiu da marca? Não regenere. Corrija na fonte
Regenerar gasta e não conserta a causa: se a cor saiu errada, ela vai sair errada de novo. Três conferências antes de adotar o resultado:
- A fonte é a da marca? Montserrat, e não a fonte padrão do navegador.
- Os hex estão certos? Compare com a seção 2. O erro mais comum é o
azul
#0055A5do site entrando no lugar do#0E4194do logo. - O logo está no fundo certo? Logo 1 nunca sobre teal.
Se alguma das três falhar, o conserto é no campo Contexto, não num novo pedido: acrescente ali a regra que faltou, e a próxima geração já nasce certa.
Componentes que enriquecem o relatório
Cinco peças a mais, além das da seção 5. Elas vieram dos templates de slide do padrão visual da R. Lima (cartão de métrica, de-para, distribuição e o “quem, o quê, até quando”), e foram adaptadas às duas visões. Mude a visão no topo e elas mudam junto.
Números ilustrativos Todo número desta seção é inventado para mostrar a forma. Nenhum número de relatório sai deste arquivo: ele sai da planilha, com a conta ao lado.
- Conta
- soma de 214 registros, texto convertido, repetido fora
- Comparado com
- o fechamento da coordenação: R$ 298.910,00
- Origem
- aba execucao, coluna G, linhas 4 a 217
205 registros, soma por fórmula
214 registros: 9 estavam como texto
| # | Ação | Resolve | Impacto | Responsável | Prazo |
|---|---|---|---|---|---|
| 1 | Pedir à coordenação o fechamento refeito, somando as células de texto | decisão 1 | R$ 13.570,00 | a definir | a definir |
| 2 | Confirmar no sistema se a linha repetida é erro de exportação | decisão 2 | R$ 320,00 | a definir | a definir |
A apresentação, no molde das aulas
A apresentação usa o mesmo molde dos slides do curso, que reproduz o template do
IEL Ceará: slide de 1280 × 720, a faixa curva no topo, navy #11355F e dourado
#D7A34F, Montserrat. É um arquivo HTML só: abre no navegador, troca de slide pelas setas do
teclado, e imprime em PDF com um slide por página.
A faixa dourada marca o que pede ação, como nas aulas, onde ela marca a prática: só no slide das decisões e no do plano de ação. Nos outros, a faixa é navy.
Acima, o molde vazio, com quatro slides de exemplo (capa, decisões, números e plano de ação). Use as setas abaixo do slide, ou as do teclado depois de clicar nele.
Precisa em PowerPoint?
Peça na mesma conversa: “Converta a apresentação em um arquivo .pptx para eu baixar, um slide do PowerPoint para cada slide, com os mesmos textos, números e cores.” O .pptx abre no PowerPoint, no Google Slides e no Keynote. Para o Claude criar o arquivo, o recurso de criar arquivos precisa estar ligado nas configurações da conta.
O bloco para colar, em doze seções
As nove seções acima são para você ler e navegar. Esta é a que a IA lê, e por isso ela tem outra estrutura: doze seções, na ordem em que um assistente precisa delas para acertar de primeira.
Cole no campo Contexto do seu projeto no Claude. Ele muda com a visão escolhida no topo: troque lá e o bloco se reescreve.
Onde este arquivo mesmo vai
No campo Contexto, como arquivo, e não nas instruções do projeto. A diferença é a da aula 1.3: instrução é lida em toda conversa, e material de consulta é aberto quando a pergunta tem a ver. Design system é consulta.
O bloco de texto acima é o atalho para quem não quiser anexar o arquivo: com ele colado no Contexto, o assistente acerta a cor mesmo sem ler este HTML.
O log de duas linhas, e por que ele fecha esta página
Veio sem alteração: os seis hex dos dois logos, medidos pixel a pixel
nos PNG; a família Montserrat e a escala de tamanho, extraídas do DOM da home de
iel-ce.org.br em 03/09/2026; os dois arquivos de logo, embutidos aqui do
jeito que chegaram.
Foi completado por inferência, e está avisado: as escalas de 50 a 900, calculadas por mistura em sRGB; o peso 600 e 700 de título, que o site não tem; a escala de sombra e de raio; o mapa de qual logo em qual contexto; e a anatomia do relatório da seção 10, que veio do caso da aula e não do IEL. Nada disso é padrão do IEL, e nenhuma dessas linhas deve ser apresentada como se fosse.