Andaime de design
Sistema de tokens da BIP
A forma vem do balão: círculo, traço fino e raio generoso. A cor vem da paleta da marca e foi medida com o validador da skill dataviz — cor tem papel fixo, e estado nunca é comunicado só por cor.
Tipografia
72
Outfit ExtraLight em 104px. A hairline do logotipo num tamanho que dashboard nenhum usa fino — é o risco assumido, e é o que faz a tela parecer da Buzzing.
Display · Outfit Light 32px
Título de seção · DM Sans Medium 23px
Corpo · DM Sans 15px. Geométrica de baixo contraste, desenhada para interface — mantém o bowl circular da marca sem perder legibilidade em texto denso.
Rótulo · Outfit 12px caixa alta, tracking 0.16em
Duas famílias no sistema inteiro, e nenhuma monoespaçada. Largura fixa achata o "o" e alarga o "i" — o contrário do círculo da marca. Número tabular vem do recurso tnum da própria DM Sans.
Estado — banda do BRS e sentimento
Atenção e Crítica ficam a ΔE 3,6 em deuteranopia. Por isso toda banda carrega ícone e palavra — a cor sozinha nunca decide.
Magnitude — o peso da voz
Rampa sequencial esticada a partir do ciano da própria marca, ordenada pelo peso base da metodologia. Mais escuro pesa mais: a cor carrega a informação, não é rótulo.
| Subdimensão | Peso base |
|---|---|
| PP4Percepção Editorial | 3,0 |
| PP1Percepção do Consumidor | 2,5 |
| PP2Percepção Interna | 2,0 |
| PP3Percepção Social | 1,5 |
Ação e assinatura
Uma só cor de ação, e ela não é a identidade — é um papel. O magenta puro da marca nunca carrega texto pequeno.
A fita — a assinatura
A assinatura da Buzzing não é uma cor, é a adjacência: cinco fitas diagonais que se tocam sem respiro. As proporções são medidas sobre o arquivo do logotipo, não estimadas — o dourado é a maior faixa e a única que desce, e o ciano é uma lasca de 11%. Cinco fatias iguais é a leitura errada.
Em tamanho de ilustração, a fita é o balão
E não uma faixa solta. A faixa solta em tamanho grande lê como listra de arco-íris decorativa — que é o que a §8 proíbe, e é o receio que a própria cliente nomeou sobre a marca dela. O balão é figurativo e é a marca, e é isso que justifica a cor.
Como aresta: nesta espessura quem carrega a marca são as larguras desiguais
Transição — vai e volta sem sumir, porque barra que desaparece lê como travada
Onde ela vive
Carregando · vazio e primeiro acesso · conclusão · cabeçalho de relatório. Mais uma presença permanente: a aresta do trilho lateral.
Onde ela nunca vive
Em gráfico · como sentimento · como oito cores para oito canais · encostando na rampa de peso das vozes · como fundo de bloco grande.
Camadas
Quatro superfícies, e só quatro. A regra que as separa: a borda desenha o contorno; a sombra diz que há um plano abaixo — só a segunda produz camada, e acumular as duas apenas engorda o contorno. Por isso o cartão trocou border por elevação.
0 · canvas — o plano da página
1 · card — objeto de conteúdo
2 · poço — dentro do card
3 · sobreposição
popover, drawer, diálogo
A escada é monotônica e com folga real: branco 1.0 › poço 0.9787 › canvas 0.9655 › hairline 0.9353. O canvas tem piso, não teto: abaixo de 0.9655 o texto pequeno reprova em AA, porque tinta escura sobre fundo mais escuro perde contraste. Um nível a mais do que o papel exige é profundidade decorativa — proibida pelo mesmo motivo que cor decorativa.
Forma
Raio de 14px em cartão e campo; pílula inteira em chip. O símbolo da marca é um balão com raio muito generoso — raio pequeno faz a interface parecer de outra empresa.
Apoio
contexto que não disputa
Card
o padrão
Destaque
um por tela
Sobreposição
popover, drawer
Movimento
Movimento explica a mudança. Toda animação responde a uma de três perguntas e a nenhuma outra: de onde isto veio, o que mudou de estado, o que aconteceu com o que sumiu. A que não responde a nenhuma é decoração — e decoração numa tela de diretoria custa credibilidade.
O teto: movimento pode chamar atenção quando o que ele encena é uma conquista de quem está operando — aceitar uma recomendação, um relatório ficar pronto. Em tudo o mais ele é servil. Nenhuma animação passa de 420ms, e isso é conferido por máquina em todas as rotas, não por revisão.
| Superfície | Token | Em uso | Curva |
|---|---|---|---|
| Micro-estadohover, foco, cor, chip, seleção | --dur-rapida | 120ms | ease-padrao |
| Sobreposição, entrandodrawer, popover, diálogo | --dur-media | 200ms | ease-entrada |
| Sobreposição, saindoo que vai embora não precisa ser acompanhado | --dur-saida | 160ms | ease-saida |
| Troca de conjuntofiltrar, ordenar, reagrupar | --dur-troca | 240ms | ease-padrao |
| Dado que se desenhaanel, contagem, barra — uma vez por tela | --dur-lenta | 320ms | ease-entrada |
| Cerimôniaaceitar recomendação, relatório pronto — uma por tela | --dur-cerimonia | 420ms | ease-entrada |
| Passo do escalonamentorevelação de cartões, teto de 6 passos | --stagger-passo | 40ms | — |
Os valores da coluna Em uso são lidos dos tokens no navegador, não copiados da documentação. Se um deles divergir do que a §7 fixa, a linha diz qual é a diferença — que é a única forma de uma tabela de referência prestar para alguma coisa depois da primeira semana.
As curvas carregam significado próprio: ease-entrada desacelera, porque o objeto chega e assenta; ease-saida acelera, porque o que vai embora não precisa ser acompanhado; ease-padrao é simétrica, para o que não entra nem sai. Nenhuma delas ultrapassa e volta: um número que faz overshoot lê como número instável.
Tudo é suprimido sob prefers-reduced-motion — inclusive o atraso da revelação escalonada, porque zerar só a duração deixaria o último cartão invisível enquanto o atraso corre. Ver cada transição isolada, com botão de repetir, em /movimento.