Marca
Un azul marino que habla, un turquesa que nunca habla y una banda clara para respirar entre medias. Controles cuadrados contra contenedores redondos. Un movimiento que va en una dirección en vez de decorar. El argumento del producto es que te dice cuándo no lo sabe, así que la interfaz nunca aparenta una seguridad que no se ha ganado.
Fundamentos
En el sitio la marca se compone como logotipo tipográfico: Space Grotesk 500 a −0.05em, en tinta, nunca en turquesa. En el diseño actual no hay ningún icono en ninguna página.
Área de respeto y tamaño mínimo
El área de respeto en todos los lados equivale a la altura de mayúscula de la T. El logotipo deja de ser legible por debajo de unos 90px de ancho, que es el mínimo para un bloque de cabecera.
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.
--ws-ink#15344B12.93:1 · AATipografía display y superficies oscuras
--ws-teal#03B8A52.5:1 · Nunca textoLa marca. Solo rellenos, nunca una palabra
--ws-teal-deep#00786C5.38:1 · AAEl turquesa seguro para texto
--ws-sky#E2F5FFSuperficie · tinta 11.53:1La banda que separa las secciones
--ws-paper#FFFFFFSuperficie · tinta 12.93:1La superficie por defecto
--ws-body#00000021.0:1 · AAEl texto corrido es negro puro, no tinta
--ws-duo#1C5F916.78:1 · AAEl azul en el que se imprime toda fotografía en duotono
--ws-muted#6A7F8E4.17:1 · Solo tamaño grandeTexto secundario y de ejes
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
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 tejido recibe carga, se adapta, recibe más carga y se adapta otra vez. Cuando la carga llega más rápido de lo que la adaptación puede seguir, el tejido no falla en el acto.
Leer la nota| Función | Tamaño | Fuente | Dónde aparece |
|---|---|---|---|
| Mega | clamp(3.6rem,17.6vw,261px) | Display | Solo bandas de cierre |
| H1 | clamp(2.9rem,8.1vw,120px) | Display | Títulos de página |
| H2 | clamp(2.2rem,4.05vw,60px) | Display | Cabeceras de sección, títulos de artículo |
| H3 | clamp(1.9rem,3.1vw,46px) | Display | Cabeceras de bloque |
| Entradilla | clamp(1.1rem,1.82vw,27px) | Texto base | Un párrafo debajo de un título |
| Texto base | clamp(1rem,1.21vw,18px) | Texto base | Todo lo demás |
| Prosa | clamp(1.05rem,1.32vw,20px) | Texto base | Texto largo, limitado a 68ch |
| Label | 16px, en mayúsculas | Texto base | Navegación, botones, antetítulos |
El resaltado
Los contenedores son redondos, los controles son cuadrados, y el contraste entre ambos es el look. No suavices los controles ni afiles las tarjetas.
| Radio y espacio | Valor |
|---|---|
| Tarjetas, diálogos | --ws-radius 32px |
| Paneles de herramientas | 8px |
| Todos los controles | 0px |
| Ancho máximo | --ws-maxw 1416px |
| Margen lateral | 20px, 32px por encima de 1024 |
| Cabecera | 104px, 88px por debajo de 1024 |
| Espaciado | 4 8 12 16 24 32 48 64 96 |
| Elevación y movimiento | Valor |
|---|---|
| Tarjeta | 0 30px 60px −40px / 45% |
| Elevación al pasar el cursor | 0 40px 80px −40px / 55% |
| Diálogo | 0 60px 120px −50px / 70% |
| Easing | cubic-bezier(.22,.61,.36,1) |
| Micro | 220ms · hover, focus, color |
| Aparición | 800ms · opacidad y una subida de 24px |
| Anillo de foco | 3px solid, 3px de desplazamiento |
Componentes
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.
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.
Garmin conectado. Última sincronización hace 4 minutos.
Polar lleva 6 días sin sincronizar. El detalle de más de 28 días no se puede recuperar una vez que se cierra la ventana.
No hemos podido conectar con Strava. Vuelve a conectar para reanudar la importación.
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.
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.
| Sesión | Tipo | Distancia | Ritmo medio | Carga |
|---|---|---|---|---|
| Lunes | Suave | 8,0 km | 5:38 | 44 |
| Miércoles | Series | 10,2 km | 4:21 | 92 |
| Sábado | Larga | 24,0 km | 5:55 | 176 |
Patrones
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.
| Patrón | Tiempo | Qué hace |
|---|---|---|
| Aparición al entrar | 800ms | Opacidad y una subida de 24px. Nunca escalonado hasta la muerte. |
| Fijar el escenario | ligado al scroll | La imagen se queda quieta mientras el texto la atraviesa |
| Relevo | ligado al scroll | Un pasaje sale por la izquierda mientras el siguiente llega por la derecha |
| Corte del botón | 260ms | El corte se hace más profundo. La etiqueta no se mueve. |
| Diálogo | 420ms | Opacidad y una subida de 20px |
| Movimiento reducido | respetado | Toda aparición se resuelve al instante y no queda nada oculto |
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.
Marca
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.
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.
Treinta días de Trailwise Pro, tu historial importado el primer día y un plan que responde a lo que tu cuerpo está haciendo de verdad.
EmpezarGratis durante la beta privada. Sin tarjeta de crédito.
Cómo funciona la beta
Hemos enviado un enlace de confirmación a .
Tus preferencias se han guardado.
Este correo ya está registrado. Si aún no estaba confirmado, te hemos enviado un nuevo enlace de confirmación a .