Como o Trailwise se vê, se ouve e se move

Logo e logótipo

O símbolo está decidido. Ascent, adotado a 31 de agosto de 2026: três blocos cortados a 17,5 graus, o mesmo ângulo do chanfro dos botões. Os dois de trás são passadas já corridas e levam a tinta, o da frente leva o turquesa. Dois valores, e nada no desenho mais pequeno do que um bloco, e é por isso que aguenta a 16px onde o desenho que substitui não aguentava. Sucede à montanha do Field Guide, que nesta página nunca passou de «proposta».

O logótipo, e aquela única palavra em turquesa

Space Grotesk 500 a −0.05em, em minúsculas. «trail» vai em tinta e «wise» em turquesa, tanto em claro como em escuro. É a única exceção à regra de que o turquesa é um preenchimento e nunca uma palavra, e a exceção não viaja: um título em turquesa continua errado. As WCAG isentam o texto de logótipo do contraste, mas o rácio é de 2,5:1 sobre branco e 2,0:1 sobre a faixa sky, e é por isso que o logótipo tem um mínimo. 24px de altura de maiúscula sobre branco, 28px sobre sky. Abaixo disso, usa o símbolo sozinho. O logótipo e os dois blocos são entregues vetorizados em vez de texto vivo, por isso apresentam-se corretamente sem nenhuma fonte instalada: e-mail, PDF, impressão.

Área de proteção e tamanho mínimo

A área de proteção de todos os lados equivale à largura de um bloco, 12 unidades na grelha de 72. Abaixo de 24px sobre um fundo liso, usa o desenho de favicon: dois blocos redesenhados mais grossos, e não o símbolo reduzido. Sobre o mosaico de tinta os três blocos mantêm-se separados até aos 16px, e é isso que o separador do navegador e o ícone da app usam.

Cor

A tinta e o papel fazem o trabalho. O teal é o único destaque e é um preenchimento, nunca uma palavra: com 2.5 sobre branco falha como texto em todos os tamanhos. Quando o teal tem de ser lido, passa a teal escuro. O céu separa uma secção da seguinte e nunca é uma página inteira.

Séries de gráfico · atribuir por esta ordem, nunca em ciclo

Validadas contra branco quanto a luminosidade, croma, separação para daltonismo e contraste. As oito são seguras onde as séries ficam lado a lado, como em linhas e barras. Num gráfico de dispersão ou num small multiple, onde qualquer par se pode encontrar, só as três primeiras aguentam; a partir das três, junta em Outros ou divide em facetas.

Sequencial e divergente

Tipografia

Duas famílias, e a divisão é rígida. Space Grotesk a −0.05em é para tudo o que fala. Noto Sans a +0.02em é para tudo o que explica. A hierarquia vem do tamanho e do peso, nunca de um terceiro tipo de letra. O destaque é peso ou cor, nunca itálico.

O marcador

Tokens

Os contentores são redondos, os controlos são quadrados, e o contraste entre os dois é o aspeto. Não arredondes os controlos e não esquadres os cartões.

Botões

Um chanfro no canto superior esquerdo a percorrer toda a altura, para que o controlo se incline na direção em que tudo o resto viaja. Uma ação principal por vista. O hover aprofunda o corte em vez de trocar uma cor, e este é o único sítio do site onde um hover é um gesto e não uma mudança de estado.

Selos e estado

Maiúsculas, com espacejamento, quadrados. Quatro cores de estado reservadas que nunca se tornam uma série de gráfico. Uma cor de estado nunca carrega significado sozinha: vem sempre com um ponto ou uma palavra.

Formulários

As etiquetas estão sempre visíveis, compostas em micro maiúsculas por cima do campo. As indicações são permanentes, em vez de aparecerem no erro. Os campos são quadrados, com 54px de altura, e o foco é um anel teal de 3px a 1px de desvio.

Dados e telemetria

Os números são compostos no tipo de display com algarismos tabulares, para que uma coluna se compare na vertical em vez de dançar. Todos os sinais calculados trazem a sua confiança, e um sinal que corre com poucos dados diz isso mesmo em vez de produzir um número plausível. Essa última parte é a única peça deste sistema que nenhuma outra marca tem.

Movimento

Uma curva de easing e duas durações. O movimento guiado pelo scroll escreve uma única propriedade personalizada por frame num elemento de palco e deixa o CSS fazer o resto, nunca um listener por item. As assinaturas são a pilha de cartões a subir para dentro da faixa, a escada que revela um degrau de cada vez e depois sai pela esquerda, e o leque que abre com uma fração de scroll.

Fotografia

Trilhos a sério e tempo a sério, nunca atletismo de banco de imagens. As imagens de destaque são impressas num único azul: a fotografia dá a luminância e --ws-duo dá o matiz, para que uma floresta com nevoeiro e uma pista de atletismo acabem no mesmo mundo. Em todo o resto, as imagens de prova mantêm a sua própria cor, porque um gráfico dos teus próprios dados não deve ser estilizado.

Voz

Especialista e de fala simples. Segunda pessoa direta, frases curtas misturadas com outras mais longas, o concreto acima do abstrato. Explicamos o raciocínio por trás de cada decisão e dizemos qual é o limite em vez de o esconder. Onde não sabemos, dizemo-lo, porque um sinal em que aprendeste discretamente a não confiar não vai mudar o que fazes no dia em que isso conta.

Fazer e não fazer

Transferências

O sistema como uma página que podes ler, uma folha de estilos que podes ligar, e os tokens como dados. O manual de marca é a referência; a folha de estilos é o que uma ferramenta interna deve usar em vez de reimplementar isto tudo.