A marca Sanance, com as medidas abertas
Cada cor, medida e contraste desta página sai do mesmo build que veste o produto. Um arquivo
é escrito à mão, brand.config.mjs,
e o resto é gerado a partir dele.
Atualizado em 2026-08-05
O pacote traz as quatro famílias em SVG e PNG, o favicon, a assinatura de e-mail e este guia em HTML autocontido, que abre sem internet e imprime em PDF.
A palavra e o ponto
Geometria em proporção da altura: a fonte iguala a altura, o ponto fica em 13.5% dela e o vão entre palavra e ponto em 7%. Geist peso 600, entreletra -0.04em.
As letras saem em contorno, então o arquivo desenha igual numa máquina sem a fonte instalada.
Respiro de 50% da altura em volta, livre de texto, borda e imagem. Largura mínima em tela: 88px. Abaixo disso, usar o reduzido.
- Gradiente no logotipo. Ele fica em superfície grande, como capa de deck.
- Redesenhar, reespaçar ou trocar a fonte.
- Contorno, sombra, relevo ou rotação.
- Cor fora das três variantes acima.
- Aplicar sobre foto ou sobre preenchimento de cor de estado.
- Escrever a palavra em caixa alta ou capitular.
Três ativos, um por formato de espaço
O logotipo atende espaço horizontal. O lockup sn/nc atende espaço quase quadrado. O reduzido s atende o pequeno, nu ou dentro de tile. Os três carregam o mesmo ponto, na mesma proporção
e com o mesmo vão.
- As quatro letras do lockup se alinham à esquerda entre si, e o bloco delas é o que se centraliza em qualquer contêiner. O ponto vive fora dessa medida, pendendo à direita.
- O vão do ponto soma a entreletra de volta: 0.07 declarado mais 0.05 que a entreletra negativa consome dá 0.12 aplicado.
- Fora de recipiente a caixa de medida exclui o ponto. Dentro do tile ela inclui: num quadrado de 16px o ponto é 7% da largura, e deixá-lo fora joga a letra para a esquerda.
- No tile a letra ocupa 68% do lado e se centraliza pela altura-x. O raio é 25% do lado.
- Abaixo de 40px o lockup cede lugar ao reduzido. Abaixo de 16px nem o reduzido é usado.
- O ponto é círculo geométrico nas três famílias, nunca o glifo de ponto da fonte.
Marca, severidade e categoria
A cor de estado é declarada por contraste exigido, e o build resolve o hex de cada tema. A coluna "medido" é o contraste que a cor entrega contra a pior das duas superfícies de texto do tema. A ordem e a distância de 1.4× entre vizinhos são verificadas no CI.
#1c7c73marca, foco e link#145e58logotipo em fundo claro#0a3a36fim do gradiente#f5f4efsuperfície da aplicação#ffffffcard e tabela#0e1116texto principalPara dado que responde "qual", nunca "quão grave". A organização escolhe o slot, e o hex vem do tema.
#1c66a85.01:1#aa367d4.99:1#9056144.99:1#864ba14.98:1#5d64724.99:1| Nível | Hex, tema claro | Medido | Exigido | Papel |
|---|---|---|---|---|
| Alarme | #431609 | 12.98:1 | 13:1 | --color-danger |
| Atenção | #4e390b | 9.2:1 | 9.2:1 | --color-warning |
| Conforme | #215d3b | 6.54:1 | 6.5:1 | --color-success |
| Informação | #2766c9 | 4.6:1 | 4.6:1 | --color-info |
Sans para valor, mono para rótulo
Piso de 12px em rótulo e 13px em dado, sem exceção em produto.
| Papel | Tamanho | Peso | Família | Uso |
|---|---|---|---|---|
label-sm | 12px | 500 | mono | rótulo de metadado |
label | 13px | 500 | mono | rótulo de seção |
body-sm | 14px | 400 | sans | apoio |
body | 16px | 400 | sans | corpo |
title-sm | 20px | 600 | sans | título de card |
title | 26px | 600 | sans | título de seção |
display | 40px | 600 | sans | título de página |
num-sm | 24px | 600 | sans | número em lista |
num | 32px | 600 | sans | KPI em grade |
num-lg | 48px | 600 | sans | KPI em wallboard |
Preciso, direto e acionável
- pt-BR, voz ativa, sujeito explícito.
- Microcopy diz o que fazer antes de dizer o que aconteceu.
- Número medido antes de adjetivo. Sem o número, dizer que não se tem.
- Estado vazio nomeia a próxima ação. Erro diz o que fazer.
- Sem emoji. Sem travessão. Sem frase de efeito no fim do parágrafo.
| Situação | Evitar | Escrever |
|---|---|---|
| Lista sem resultado | Nenhum registro. | Nenhuma sessão neste período. Amplie o intervalo ou troque de unidade. |
| Falha de carregamento | Erro ao carregar dados. | Não conseguimos carregar as sessões. Tente novamente. Se persistir, o dado das 14h já está no relatório diário. |
| Busca | Buscar… | Buscar paciente, protocolo ou poltrona |
| Confirmação de ação | Salvar | Marcar início às 14:32 |
| Sem base de cálculo | 0% | — · sem poltronas cadastradas |
Pisos que o CI verifica
- Texto no piso de 4.5:1. Contorno de controle e limite de gráfico no piso de 3:1.
- Alvo de toque de 44px em qualquer controle.
- Anel de foco de 2px com 2px de deslocamento, na cor de ação.
-
Tinta sobre o tint do próprio tom é um papel próprio,
-on-tint, diferente da tinta sobre o preenchimento sólido,-foreground. Fundir os dois pinta preto sobre preto no tema escuro. - Estado nunca é só cor: cor + forma + palavra. A tela precisa continuar legível em escala de cinza.
Crachá, impresso, apresentação e e-mail
Fora da tela existe papel e tinta. Duas regras cobrem quase tudo: usar a versão de uma cor e não depender de gradiente.
Reduzido de uma cor, mínimo de 12mm. Bordado usa só a silhueta, sem meio-tom.
Logotipo de uma cor no cabeçalho. A marca d'água usa o reduzido a 8% de opacidade.
Reduzido em tile, mínimo de 10mm. O adesivo convive com álcool, então sem gradiente e sem traço fino.
Tabela HTML com reduced-tile-88-teal.png
servido a 44px e wordmark-32-light.png a 16px.
O arquivo pronto está no pacote.
A capa é a única superfície onde o gradiente aparece. Gráfico usa a rampa de categoria com legenda, nunca a escala de severidade.
Vinil de uma cor. O respiro de 50% vale inclusive contra o recorte da placa.
As quatro famílias em SVG e em PNG, nos tamanhos 16, 32, 44, 88, 180, 512, cada uma
nas três variantes de cor. Mais o favicon.ico de
16, 32 e 48 pixels, a assinatura de e-mail e este guia num arquivo só.
Um arquivo à mão, o resto gerado
Cor, medida, tipografia e voz vivem em brand/brand.config.mjs. O comando node brand/build.mjs escreve os
tokens, os SVG, o JSON desta página e o guia autocontido;
node brand/pack.mjs escreve os PNG, o favicon e o
zip.
No CI, node brand/build.mjs --check refaz o build
em memória e compara byte a byte. Artefato editado à mão aparece como diferença, e fonte alterada
sem regerar também. A escala de severidade que não fecha a ordem ou a distância mínima aborta
o build antes de escrever qualquer arquivo.