Come Trailwise appare, suona e si muove

Logo e wordmark

Sul sito il brand è composto come wordmark: Space Grotesk 500 a −0.05em, in inchiostro, mai in verde acqua. Nel design attuale non c’è nessuna icona in nessuna pagina.

Area di rispetto e dimensione minima

L’area di rispetto su ogni lato è pari all’altezza della T maiuscola. Il wordmark smette di essere leggibile sotto i 90px circa di larghezza, che è il limite minimo per un lockup di testata.

Colore

Inchiostro e carta fanno il lavoro. Il verde acqua è l’unico accento ed è un riempimento, mai una parola: a 2.5 su bianco non passa come testo a nessuna dimensione. Dove il verde acqua deve essere letto diventa verde acqua scuro. Il cielo separa una sezione dalla successiva e non è mai una pagina intera.

Serie dei grafici · assegnale in quest’ordine, mai in ciclo

Validate su bianco per luminosità, croma, separazione per i deficit della visione dei colori e contrasto. Tutte e otto reggono dove le serie stanno una accanto all’altra, come nelle linee e nelle barre. In uno scatter o in uno small multiple, dove qualsiasi coppia può incontrarsi, reggono solo le prime tre; oltre le tre, accorpa in Altro oppure dividi in facet.

Sequenziali e divergenti

Tipografia

Due famiglie, e la divisione è netta. Space Grotesk a −0.05em è per tutto ciò che parla. Noto Sans a +0.02em è per tutto ciò che spiega. La gerarchia nasce da dimensione e peso, mai da un terzo carattere. L’enfasi è peso o colore, mai corsivo.

L’evidenziatore

Token

I contenitori sono arrotondati, i controlli sono squadrati, e il contrasto tra i due è il look. Non ammorbidire i controlli e non squadrare le card.

Pulsanti

Uno smusso in alto a sinistra per tutta l’altezza, così il controllo pende nella direzione in cui va tutto il resto. Un’azione primaria per vista. L’hover approfondisce il taglio invece di cambiare colore, ed è l’unico punto del sito in cui un hover è un gesto e non un cambio di stato.

Badge e stati

Maiuscolo, spaziato, squadrato. Quattro colori di stato riservati che non diventano mai una serie di un grafico. Un colore di stato non porta mai il significato da solo: arriva sempre con un punto o una parola.

Form

Le etichette sono sempre visibili, composte in micro maiuscolo sopra il campo. I suggerimenti sono sempre presenti invece di comparire in caso di errore. I campi sono squadrati, alti 54px, e il focus è un anello verde acqua da 3px con 1px di offset.

Dati e telemetria

I numeri sono composti nel carattere display con cifre tabulari, così una colonna si legge in verticale invece di ballare. Ogni segnale calcolato porta con sé la sua affidabilità, e un segnale che gira su pochi dati lo dice invece di produrre un numero plausibile. Quest’ultima parte è l’unico pezzo di questo sistema che nessun altro brand ha.

Movimento

Una sola curva di easing e due durate. Il movimento guidato dallo scroll scrive una sola custom property per frame su un elemento stage e lascia fare il resto al CSS, mai un listener per elemento. Le firme sono la pila di card che sale dentro la fascia, la scala che rivela un gradino alla volta e poi esce a sinistra, e il ventaglio che si apre su una frazione di scroll.

Fotografia

Trail veri e tempo vero, mai atletismo da stock. Le immagini hero vengono stampate in un solo blu: la foto fornisce la luminanza e --ws-duo fornisce la tinta, così un bosco nella nebbia e una pista di atletica finiscono nello stesso mondo. Per tutto il resto, le immagini che fanno da prova tengono il loro colore, perché un grafico dei tuoi dati non va stilizzato.

Voce

Competente e diretta. Seconda persona diretta, frasi corte mescolate a frasi più lunghe, concreto invece che astratto. Spieghiamo il ragionamento dietro ogni scelta e dichiariamo il limite invece di nasconderlo. Dove non sappiamo, lo diciamo, perché un segnale di cui hai imparato in silenzio a diffidare non cambierà quello che fai il giorno in cui conta.

Cosa fare e non fare

Download

Il sistema come pagina da leggere, foglio di stile da collegare e token in forma di dati. Il brand book è il riferimento; il foglio di stile è quello che uno strumento interno dovrebbe usare invece di reimplementare tutto questo.