Identidade visual
Dourado e azul. Os contrastes desta página são medidos a partir do CSS em uso — se uma cor mudar, os números abaixo mudam junto.
Logotipo
Em fundo escuro use a versão em negativo: o quadrado azul do símbolo desaparece contra o próprio azul, e o logotipo positivo some sem que ninguem perceba.
Arquivos: logo.svg · logo-negativo.svg · símbolo.svg · favicon.svg · icone-512.png
O símbolo
O u não é um traço: são três fios paralelos, de raios 6, 12 e 18 no quadrado de 64.
Os raios foram escolhidos medindo em 32 px, o tamanho da aba do navegador. Com os fios mais juntos, os três viram um borrão — e o desenho perde o que ele tem de próprio. Por isso a distância entre eles não é ajuste estético: é o conteúdo do símbolo.
O mesmo motivo se repete como três linhas em todo o sistema: sob o nome no logotipo, sob o nome na barra lateral e sob cada título de seção. É o que dá unidade às telas sem precisar de texto explicando.
Os PNG são gerados por tools/gerar_marca.py,
a partir da mesma geometria do SVG. Ícone desenhado à mão num editor é o
arquivo que ninguém sabe refazer quando a cor muda.
Paleta
Azul
#0B1A3317.36:1 sobre branco
#102A5214.24:1 sobre branco
#16386F11.48:1 sobre branco
#1D4B8F8.55:1 sobre branco
#E4EBF61.2:1 sobre branco
não serve para texto
Dourado
#7A5E126.11:1 sobre branco
#A8851C3.48:1 sobre branco
não serve para texto
#B4901F3.02:1 sobre branco
não serve para texto
#CBA6362.32:1 sobre branco
não serve para texto
#EBD9A01.4:1 sobre branco
não serve para texto
#FBF5E41.09:1 sobre branco
não serve para texto
Neutros
#0E1B2E17.29:1 sobre branco
#57677F5.75:1 sobre branco
#DCE3ED1.29:1 sobre branco
não serve para texto
#F4F7FB1.07:1 sobre branco
não serve para texto
#FFFFFF1.0:1 sobre branco
não serve para texto
Semanticos
#0F6B3C6.59:1 sobre branco
#8A5A005.93:1 sobre branco
#9C1C1C8.09:1 sobre branco
Contraste verificado
| Uso | Frente | Fundo | Medido | Mínimo | Situação |
|---|---|---|---|---|---|
| Texto do corpo | #0E1B2E | #FFFFFF | 17.29:1 | 4.5:1 | passa |
| Texto secundario | #57677F | #FFFFFF | 5.75:1 | 4.5:1 | passa |
| Link | #16386F | #FFFFFF | 11.48:1 | 4.5:1 | passa |
| Titulo sobre o fundo | #0B1A33 | #F4F7FB | 16.15:1 | 4.5:1 | passa |
| Botao principal (texto sobre ouro) | #0B1A33 | #CBA636 | 7.48:1 | 4.5:1 | passa |
| Rotulo dourado sobre claro | #7A5E12 | #FBF5E4 | 5.61:1 | 4.5:1 | passa |
| Cabecalho de tabela | #FFFFFF | #102A52 | 14.24:1 | 4.5:1 | passa |
| Anel de foco | #A8851C | #FFFFFF | 3.48:1 | 3.0:1 | passa |
| Anel de foco sobre o fundo | #A8851C | #F4F7FB | 3.24:1 | 3.0:1 | passa |
4,5:1 é o mínimo para texto; 3:1 vale para componente funcional, como o anel de foco. Um teste automatizado reprova a alteração de cor que quebrar qualquer linha desta tabela.
O que não fazer
| Combinação proibida | Daria | Precisaria de |
|---|---|---|
| Ouro cheio como texto sobre branco | 2.32:1 | 4.5:1 |
| Ouro cheio como anel de foco | 2.32:1 | 3.0:1 |
- Ouro nunca carrega texto pequeno sobre fundo claro. Onde o dourado precisa falar, ele vira fundo e o texto por cima é azul-escuro.
- O anel de foco usa o ouro escuro, não o ouro cheio. Ele não é enfeite: é o que diz onde o teclado está.
- Selo de status não vira dourado. Verde, âmbar e vermelho significam alguma coisa; trocar por estética apaga o significado.
- Não recolorir o logotipo. Existem três versões prontas; fundo escuro pede a negativa.
- Respeito de folga: deixe ao redor do símbolo pelo menos a largura de um montante do u.
Tipografia
A pilha do sistema (-apple-system, Segoe UI, system-ui):
carrega instantâneo, respeita o ajuste de tamanho do usuário e não adiciona
requisição externa — a política de segurança da página bloqueia fonte de
terceiros de propósito.
Pendência honesta: o logotipo usa essa mesma pilha, então o desenho das letras muda entre sistemas. Uma marca definitiva pede uma fonte escolhida e o texto convertido em curvas — decisão que envolve licenciamento, e por isso fica registrada aqui em vez de ser fingida.