AutorIA CIENTÍFICA

Manual de design

O que o site e o sistema têm em comum, e por quê. Este documento não é decoração: cada regra aqui existe para que uma tela nova nasça parecida com as que já existem, sem precisar de reunião.

01 · Princípio

A forma serve à confiança.

O AutorIA Científica vende uma promessa difícil: a de que cada frase mostra de onde veio. Um produto que promete procedência não pode parecer improvisado — a aparência é a primeira evidência que o usuário tem de que o rigor prometido existe. Daí as três decisões que governam tudo o mais.

Papel antes de tela. O fundo é papel, o texto é tinta, os títulos são serifados. O trabalho científico nasceu impresso e ainda é julgado como página; a interface acompanha isso em vez de brigar.

Cinábrio, e só ele. A cor-mãe é o vermelho da caneta de revisão — o único traço que um texto acadêmico aceita por cima de si. Ele carrega a marca, a ação principal e a sinalização, sempre sobre papel e carvão. Não há segunda cor de acento: quando tudo pode ser destacado, nada é. Se um elemento não é a marca, não é ação e não é sinal, ele é tinta ou é apagado.

Nada decorativo esconde informação. Sombra, animação e gradiente entram quando ajudam a ler; em qualquer outro caso, saem.

02 · Cor

Uma paleta para os dois — site e sistema.

Os nomes abaixo são os das variáveis CSS. O sistema usa os mesmos valores com nomes herdados (--azul é o verde-700; o nome ficou de uma versão antiga e será aposentado aos poucos).

cinábrio#C33C10A cor-mãe. A marca, a ação principal, a sinalização.
cinábrio-escuro#9E3009Botão pressionado, foco, borda de confirmação.
cinábrio-claro#F2794AO cinábrio sobre fundo escuro — e no modo noturno.
cinábrio-suave#FAE7DFFundo de aviso, realce de literalidade, cesta de seleção.
carvão#14100EBarra do topo e faixas escuras. Não é preto puro.
carvão-800#221A16Segunda camada escura, quando há duas.
papel#F2F4F1O fundo de tudo. Branco puro fica só na folha do editor.
tinta#0E1512O texto. Preto puro nunca — cansa a leitura longa.
apagado#5D6B66Texto secundário, legenda, ajuda.
sinal#C33C10Cinábrio. Alerta, trecho copiado, ação destrutiva, o “IA” da marca.
sinal-suave#FAE7DFFundo de aviso, realce de literalidade forte.
dourado#C99A12Cargo e selo. Herdado do ExecuteIA; usar com parcimônia.

Regras de uso

assim

Cinábrio em um botão de excluir, no realce do trecho transcrito e no chip de “fidelidade baixa”.

assim não

Cinábrio em título, ícone decorativo ou borda de cartão comum — quando tudo é sinal, nada é.

assim

Texto sobre verde-700 ou mais escuro sempre em papel (#F2F4F1): contraste acima de 7:1.

assim não

Verde-600 sobre verde-100 em corpo de texto: passa no olho e reprova na leitura de quem enxerga menos.

03 · Tipografia

Três vozes, cada uma com um trabalho.

Instrument Serif
Serifada — o que se lê primeiro. Títulos, números grandes, a marca, frases de destaque. Peso 400 sempre; o corpo do texto nunca. Georgia como reserva.
Libre Franklin — o texto que se lê inteiro, do primeiro parágrafo ao rodapé da tela.
Sem serifa — o corpo. Interface, parágrafos, botões e rótulos. 400 no texto, 600 no que é ação ou ênfase. 14px no sistema, 17px no site.
IBM Plex Mono — p. 214 · DOI 10.1590/x · 87%
Monoespaçada — o dado. Página, DOI, porcentagem, rótulo de seção, expressão de busca. Tudo que se confere caractere a caractere, e nada além disso.

Hierarquia

Título de página
Serifada, clamp(28px, 4.4vw, 46px), entrelinha 1.04, máximo 24 caracteres por linha.
Título de seção
Serifada 30px, ou 12pt em versalete dentro da folha do editor — ali quem manda é a norma do trabalho, não este manual.
Corpo
16–17px no site, 14px no sistema, entrelinha 1.55. Largura máxima de 66 caracteres: linha mais longa que isso perde o olho na volta.
Apoio e legenda
13,5px na cor apagada. Nunca abaixo de 12px — a tela é lida por gente cansada, de madrugada.
04 · Espaço e forma

Uma escala, e o hábito de respeitá-la.

Todo espaçamento sai da escala de 4 pixels. Valor fora dela é erro de digitação, não decisão de projeto.

4
8
12
16
24
32
48
76

Cantos

3px em botões e cartões do site; 7–8px nos campos e blocos do sistema; 999px só em ficha e chip. Nada mais arredondado que isso.

Linhas

1px em #D5DCD7. A grade de cartões é feita de gaps de 1px sobre fundo da cor da linha — assim as bordas nunca dobram.

Sombra

Só na folha do editor e em caixas flutuantes. Cartão comum não levita.

Movimento

Entradas de 0,55s; transições de 0,12s. Tudo desligado quando o sistema pede menos movimento.

05 · Componentes

O vocabulário da interface.

Botões

Ação principal   Ação secundária   Ação destrutiva

Um botão principal por tela. Se há dois, um deles não era principal.

Chips e selos

do fichamento 12 aprovados fidelidade 48%

O chip mostra estado, não comanda ação. O de aviso usa cinábrio e diz o número — “fidelidade baixa” sem número não ajuda ninguém a decidir.

Texto de interface

assim

“Não faço fichamento pelo resumo: sem o texto integral, a citação sairia sem página e poderia não existir no artigo.”

assim não

“Erro 422: operação não permitida.”

Toda mensagem diz o que aconteceu, por quê e o que fazer agora. Em português do Brasil, na segunda pessoa, sem jargão de programador e sem culpar quem está do outro lado. Recusa é sempre explicada: o sistema tem opiniões técnicas e deve defendê-las, não impô-las em silêncio.

06 · Marca

Duas aspas e uma linha citada.

O símbolo é um par de aspas de abertura sobre o cinábrio, com um traço de carvão embaixo: a linha citada, o texto que sustenta o que foi escrito. É a promessa do produto reduzida a um sinal — e é por isso que ele não muda conforme a tela.

Arquivos: /logo.svg (assinatura horizontal), /logo-claro.svg (fundo escuro), /marca.svg (só o símbolo, e o ícone da aba), /icone-192.png e /icone-512.png (atalho na área de trabalho e no celular), /apple-icon.png (iPhone e iPad), /manifest.webmanifest.

Área de respiro: metade da altura do símbolo em toda a volta. Tamanho mínimo: 24px para o símbolo, 120px de largura para a assinatura. Abaixo disso, use só o símbolo.

O nome por extenso é AutorIA Científica. “AutorIA” domina, em serifada; “Científica” vem abaixo, em sem serifa pequena e espaçada, como a linha de qualificação de uma folha de rosto. Em espaço apertado — aba do navegador, ícone de atalho — vale só o símbolo, e no texto corrido vale “AutorIA”.

Não faça: girar, aplicar sombra, trocar as cores das aspas, pôr “Científica” do mesmo tamanho de “AutorIA”, ou escrever “Autoria” e “AUTORIA” — é AutorIA, com “IA” em cinábrio, sempre.

07 · Acessibilidade

O rigor também é visual.

Contraste

4,5:1 no corpo, 3:1 em texto grande. Cinábrio sobre papel passa; cinábrio sobre carvão, não — nesse par, use o cinábrio-claro.

Foco visível

Contorno de 2px em cinábrio, deslocado 2–3px. Nunca remover o foco: quem navega por teclado se perde sem ele.

Cor nunca sozinha

Todo estado marcado por cor traz também texto ou ícone — daltonismo é comum e o dado é científico.

Alvo de toque

Mínimo de 40×40px em qualquer coisa clicável no telefone.