Capítulo 02
Identidade
Cor, tipo, grelha e superfície. Tudo o que está nesta página é lido em tempo real do tokens.css que o site usa: se um valor mudar lá, muda aqui, e o contraste é recalculado à frente dos seus olhos. Um manual que pode mentir não serve para nada.
Duas cores, e só
A Visual Up tem basalto e âmbar. Não há terceira cor de marca, e não vai haver: uma paleta de duas cores é o que faz uma carrinha preta com uma marca amarela ser reconhecida de longe, ao virar da esquina, antes de se ler uma única palavra.
As rampas abaixo não foram escolhidas à mão. Saem por OKLCH das duas cores reais, mantendo o matiz e variando luminosidade e croma. O degrau de origem é o valor exato do original: basalto-900 é o preto do site e ambar-500 é o amarelo do logótipo.
Basalto · a estrutura
Âmbar · a ação e o risco
A regra que os números impõem
O âmbar nunca é texto sobre fundo claro.
Âmbar sobre branco dá —, muito abaixo do mínimo legível de 4,5:1. Não é opinião de gosto, é medição. Por isso o âmbar é superfície: fundo de botão, filete, marcador. Quando precisar mesmo de âmbar em texto, use --vu-ambar-texto, que é o degrau escuro que passa a régua.
Sobre basalto o problema desaparece: aí o âmbar tem — e pode ser texto à vontade.
Os pares verificados
Estes são os pares que o sistema promete. A coluna do rácio é calculada neste momento, no seu navegador, a partir dos tokens carregados.
| Uso | Frente | Fundo | Mínimo | Medido |
|---|
Três tipos, três funções
O site atual usa a fonte que veio por omissão com a plataforma. Aqui cada família tem um trabalho, e nenhuma faz o trabalho da outra.
Fachada
Archivo · display
Títulos e números grandes. Grotesca larga, de sinalética, que aguenta ser lida de longe e em caixa alta. Peso 700–800, entrelinha apertada.
Orçamento
Instrument Sans · corpo
Todo o texto que se lê a sério: parágrafos, campos, propostas. Tem carácter sem chamar a atenção para si.
24h · 40%
Fragment Mono · técnica
Números, medidas, referências de obra e etiquetas. Já estava carregada no site: é a única coisa tipográfica que a marca tinha escolhido, e fica.
O que mudou, e porquê
O corpo era Inter, que é o que a plataforma carrega sozinha quando ninguém escolhe nada. Instrument Sans faz o mesmo trabalho com mais carácter, e Inter fica na pilha como recurso: o que ainda não migrou continua a ler-se bem enquanto não migra.
A escala
Razão 1,250 (terça maior) sobre base de 16px. Os três degraus de topo são fluidos: crescem com o ecrã em vez de saltarem em degraus.
Grelha e espaço
Tudo assenta em múltiplos de 4px. Não há valores fora da escala: se um espaço parece precisar de 18px, é porque é 16px ou 24px e ainda não se decidiu qual.
Grelha base de 4px. Largura máxima de conteúdo: 1200px. Texto corrido: 68 caracteres.
Superfícies
Três fundos claros e um escuro. Nada de gradientes de marca, nada de sombras a fingir profundidade: a única sombra do sistema serve para levantar um elemento que está mesmo por cima de outro.