Marca
Versão prototipal. Um anel, um raio que varre e um ponto aceso: o setor lá fora, a leitura daqui, o que chega. Vale até a marca definitiva existir — e tudo o que a usa importa de um lugar só, então trocá-la é trocar dois arquivos.
O símbolo
Sobre papel. Azul é a instituição; laranja é o que importa.
Sobre o azul das capas: o anel vira branco, o ponto continua laranja.
Construção em 64 × 64: anel de raio 27 e traço 3,2; raio a −38°; ponto a 62% do raio, com raio 4,6; centro com raio 2,6; varredura de 0° ao raio, a 14% de opacidade.
O nome
Horizontal, a forma principal. Newsreader: "Instituto" regular, "Automação" negrito, espaçamento −0,022 em. O símbolo mede 0,86 do corpo do texto e centra na altura das capitulares.
Negativo, para o azul das capas e fundos escuros.
Vertical, para espaços quadrados: avatar, capa, crachá.
Vertical, negativo.
Monocromático: herda a cor do texto (currentColor). Para carimbo, gravação, uma cor só.
Tamanhos
O símbolo sobrevive a 16 px porque tem quatro formas e duas cores, nada mais. O horizontal não desce de 140 px: abaixo disso o nome fica ilegível e o símbolo deve ir sozinho.
Cores
São as mesmas cores do site, com o mesmo trabalho: azul é a instituição (anel, raio, centro, nome); laranja é o que importa (o ponto, e só ele). Nada de gradiente, nada de sombra.
Regras
- O ponto fica onde está. A −38°, a 62% do raio. Mover o ponto é outra marca.
- Não gira. O raio aponta para cima e para a direita; é a direção de quem lê o que vem de fora.
- Duas cores, sempre as mesmas. Azul e laranja da paleta; ou uma cor só, no monocromático.
- Fundo: papel ou o azul das capas. Sobre foto ou fundo colorido, usa-se o ícone quadrado.
- Respiro de meio anel. Nada encosta na marca a menos de metade da altura do símbolo.
- Nunca sem o ponto. Sem ele sobra um relógio parado; com ele, um radar que achou algo.
Arquivos
- Logo horizontal · cor ·
logo-horizontal.svg - Logo horizontal · negativo (fundo escuro) ·
logo-horizontal-negativo.svg - Logo horizontal · monocromático (herda a cor do texto) ·
logo-horizontal-mono.svg - Logo vertical · cor ·
logo-vertical.svg - Logo vertical · negativo ·
logo-vertical-negativo.svg - Logo vertical · monocromático ·
logo-vertical-mono.svg - Símbolo · cor ·
simbolo.svg - Símbolo · negativo ·
simbolo-negativo.svg - Símbolo · monocromático ·
simbolo-mono.svg - Ícone quadrado · claro (avatar, favicon) ·
icone-quadrado.svg - Ícone quadrado · escuro ·
icone-quadrado-escuro.svg
publico/marca/ e a função simbolo() em src/ui/marca.ts; o cabeçalho, o favicon, o rodapé e esta página mudam sozinhos.