Come Trailwise appare, suona e si muove

Logo e logotipo

Il simbolo è deciso. Ascent, adottato il 31 agosto 2026: tre blocchi tagliati a 17,5 gradi, lo stesso angolo dello smusso dei pulsanti. I due dietro sono falcate già corse e portano l’inchiostro, quello davanti porta il turchese. Due valori, e niente nel disegno più piccolo di un blocco, ed è per questo che regge a 16px dove il disegno che sostituisce non reggeva. Succede alla montagna del Field Guide, che su questa pagina non è mai andata oltre la «proposta».

Il logotipo, e quell’unica parola in turchese

Space Grotesk 500 a −0.05em, in minuscolo. «trail» è inchiostro e «wise» è turchese, sul chiaro come sullo scuro. È l’unica eccezione alla regola per cui il turchese è un riempimento e mai una parola, e l’eccezione non viaggia: un titolo in turchese resta sbagliato. Le WCAG esentano il testo del logotipo dal contrasto, ma il rapporto è 2,5:1 su bianco e 2,0:1 sulla fascia sky, ed è per questo che il logotipo ha un minimo. 24px di altezza maiuscola su bianco, 28px su sky. Sotto quella soglia usa il simbolo da solo. Il logotipo e i due lockup sono forniti vettorializzati anziché come testo vivo, quindi si rendono correttamente senza alcun font installato: e-mail, PDF, stampa.

Area di rispetto e dimensione minima

L’area di rispetto su tutti i lati equivale alla larghezza di un blocco, 12 unità sulla griglia da 72. Sotto i 24px su fondo pieno usa il disegno della favicon: due blocchi ridisegnati più spessi, non il simbolo rimpicciolito. Sul tile inchiostro i tre blocchi restano separati fino a 16px, ed è quello che usano la scheda del browser e l’icona dell’app.

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.