Cómo se ve, suena y se mueve Trailwise

Logo y logotipo

El símbolo está decidido. Ascent, adoptado el 31 de agosto de 2026: tres bloques cortados a 17,5 grados, el mismo ángulo que el chaflán de los botones. Los dos de atrás son zancadas ya corridas y llevan la tinta, el de delante lleva el turquesa. Dos valores, y nada en el dibujo más pequeño que un bloque, y por eso aguanta a 16px donde el dibujo al que sustituye no aguantaba. Sucede a la montaña del Field Guide, que en esta página nunca pasó de «propuesta».

El logotipo, y esa única palabra en turquesa

Space Grotesk 500 a −0.05em, en minúsculas. «trail» va en tinta y «wise» en turquesa, tanto en claro como en oscuro. Esa es la única excepción a la regla de que el turquesa es un relleno y nunca una palabra, y la excepción no viaja: un titular en turquesa sigue estando mal. Las WCAG eximen del contraste al texto de logotipo, pero la relación es de 2,5:1 sobre blanco y 2,0:1 sobre la banda sky, y por eso el logotipo tiene un mínimo. 24px de altura de mayúscula sobre blanco, 28px sobre sky. Por debajo, usa el símbolo solo. El logotipo y los dos bloques se entregan vectorizados en lugar de como texto vivo, así que se representan bien sin ninguna fuente instalada: correo, PDF, impresión.

Área de respeto y tamaño mínimo

El área de respeto en todos los lados equivale al ancho de un bloque, 12 unidades en la retícula de 72. Por debajo de 24px sobre un fondo plano, usa el dibujo de favicon: dos bloques redibujados más gruesos, no el símbolo reducido. Sobre el mosaico de tinta los tres bloques siguen separados hasta 16px, y eso es lo que usan la pestaña del navegador y el icono de la app.

Color

La tinta y el papel hacen el trabajo. El turquesa es el único acento y es un relleno, nunca una palabra: con 2.5 sobre blanco falla como texto en cualquier tamaño. Donde el turquesa tiene que leerse pasa a ser turquesa oscuro. El cielo separa una sección de la siguiente y nunca ocupa una página entera.

Series de gráfico · asigna en este orden, nunca en ciclo

Validadas sobre blanco en luminosidad, croma, separación para daltonismo y contraste. Las ocho son seguras cuando las series van una al lado de otra, como en líneas y barras. En un diagrama de dispersión o en múltiplos pequeños, donde cualquier par puede coincidir, solo aguantan las tres primeras; a partir de tres, agrupa en Otros o haz facetas.

Secuencial y divergente

Tipografía

Dos familias, y la separación es estricta. Space Grotesk a −0.05em es para todo lo que habla. Noto Sans a +0.02em es para todo lo que explica. La jerarquía viene del tamaño y del grosor, nunca de una tercera fuente. El énfasis es grosor o color, nunca cursiva.

El resaltado

Tokens

Los contenedores son redondos, los controles son cuadrados, y el contraste entre ambos es el look. No suavices los controles ni afiles las tarjetas.

Botones

Un chaflán arriba a la izquierda que recorre toda la altura, para que el control se incline en la dirección en la que viaja todo lo demás. Una acción principal por vista. El hover profundiza el corte en lugar de cambiar un color, y es el único lugar de la web donde un hover es un gesto y no un cambio de estado.

Etiquetas y estado

Mayúsculas, con tracking, cuadradas. Cuatro colores de estado reservados que nunca se usan como serie de gráfico. Un color de estado nunca lleva el significado solo: siempre viene con un punto o una palabra.

Formularios

Las etiquetas siempre están visibles, en micro tipografía en mayúsculas encima del campo. Las ayudas son permanentes en vez de aparecer con el error. Los campos son cuadrados, de 54px de alto, y el foco es un anillo turquesa de 3px con 1px de desplazamiento.

Datos y telemetría

Las cifras se componen con la fuente display y números tabulares, para que una columna se compare hacia abajo en vez de bailar. Toda señal calculada lleva su nivel de confianza, y una señal que funciona con pocos datos lo dice en vez de producir una cifra plausible. Esto último es la única parte de este sistema que no tiene ninguna otra marca.

Movimiento

Una sola curva de easing y dos duraciones. El movimiento guiado por scroll escribe una única propiedad personalizada por fotograma en un elemento escenario y deja que el CSS haga el resto, nunca un listener por elemento. Las señas de identidad son la pila de tarjetas que sube hasta la banda, la escalera que revela un peldaño cada vez y luego sale por la izquierda, y el abanico que se abre según una fracción de scroll.

Fotografía

Trail de verdad y tiempo de verdad, nunca atletismo de banco de imágenes. La imagen principal se imprime en un solo azul: la fotografía aporta la luminancia y --ws-duo aporta el tono, así que un bosque con niebla y una pista de atletismo acaban en el mismo mundo. En el resto, la imagen que sirve de prueba conserva su propio color, porque un gráfico de tus propios datos no debería llevar estilo.

Voz

Experta y sin rodeos. Segunda persona directa, frases cortas mezcladas con otras más largas, lo concreto por encima de lo abstracto. Explicamos el razonamiento detrás de cada decisión y decimos dónde está el límite en vez de esconderlo. Cuando no lo sabemos, lo decimos, porque una señal en la que has dejado de confiar en silencio no va a cambiar lo que haces el día que importa.

Qué hacer y qué no

Descargas

El sistema como una página que puedes leer, una hoja de estilos que puedes enlazar y los tokens como datos. El manual de marca es la referencia; la hoja de estilos es lo que debería usar una herramienta interna en vez de reimplementar nada de esto.