Vytal · Styleguide
vytal.
Un signo vital para negocios de fitness y de vitalidad para los atletas. Un solo pulso: la marca, el color, la tipografía y los productos que mantienen el latido del gimnasio a la vista.
Logotipo
Sub-marcas · pro & my
El nombre del producto lidera, en una sola palabra. myVytal es el espacio personal del atleta; proVytal, para quienes gestionan el espacio. El tile del pulso nunca cambia; el icono de la app es siempre el Vytal.
El símbolo, medido
Una señal vital que también es una V. El vértice en 32,46.5 con los brazos en 27,26.5 y 37,17.5: una V asimétrica, con el brazo derecho 1,45× más alto, para que se lea como el pico de un electrocardiograma.
- Centrado. El trazo estaba 1,5 unidades sobre el centro del cuadrado (30,5 frente a 32). Los márgenes eran 14 arriba y 17 abajo; ahora son 15,5 y 15,5.
- Grosor 5 → 5,5. A 16 px, 5 daba 1,25 px, sub-píxel. Probé 6 y empeoró a 96: el valle se funde con el pico.
- La V no se tocó. Solo traslación, cero reescalado. Los brazos mantienen 76,0° y −80,2°, y la asimetría 1,45×.
A 16 px ninguna versión es buena. Un trazo de siete puntos no cabe en dieciséis píxeles. La alternativa era un segundo símbolo simplificado solo para el favicon, y se rechazó: el símbolo es uno.
El verde: solo tres sirven de botón
De nueve verdes medidos, solo los oscuros aguantan una etiqueta blanca legible (al menos 4,5:1, WCAG AA para texto normal). Todos los verdes que usa la categoría fitness (lima, neón, energía) fallan.
No existe un verde energético que sirva de botón primario. La elección no es clínico o fitness: es dónde se pone la energía. Este producto la pone en la familia de doce matices que elige un gimnasio, no en la identidad.
| cor | etiqueta blanca | superficie en oscuro | superficie en claro | ¿botón? |
|---|---|---|---|---|
Esmeralda 800#065f46 | 7.68:1 | 2.49:1 | 7.36:1 | sí |
Esmeralda 700#047857 | 5.48:1 | 3.49:1 | 5.25:1 | sí |
Floresta#0e7a42 | 5.41:1 | 3.54:1 | 5.18:1 | sí |
Teal 600#0d9488 | 3.74:1 | 5.12:1 | 3.59:1 | no |
Green 600#16a34a | 3.30:1 | 5.81:1 | 3.16:1 | no |
Energia#00b45a | 2.74:1 | 7.00:1 | 2.62:1 | no |
Green 500#22c55e | 2.28:1 | 8.41:1 | 2.18:1 | no |
Green 400#4ade80 | 1.74:1 | 10.99:1 | 1.67:1 | no |
Lima#84cc16 | 1.98:1 | 9.70:1 | 1.89:1 | no |
Los candidatos, en componentes reales
El logotipo, un botón primario y un número, en los dos temas, al tamaño en que aparecen. Aquí se elige, no en la tabla.
Un logotipo por app
El símbolo es el mismo en las cuatro; cambia la palabra. Y hay UNA regla, no dos dispositivos: un elemento verde por lockup, y marca lo que distingue ese lockup. La base no tiene prefijo, su logo es su verde; las apps tienen prefijo, y el logo es el prefijo.
El kiosco y la TV no llevan logotipo nuestro, y está medido: las dos apps leen el color y la marca DEL GIMNASIO. Un kioskVytal sería nuestra marca tapando la del cliente en la puerta de su propio gimnasio.
Color
El verde es el único color de marca. Los neutros llevan siempre un tono verde, nunca gris puro. Los colores de señal sirven datos y estado, nunca la marca.
La marca no es un escalón de esta rampa, y es a propósito: el verde antiguo era el green-600 de Tailwind sin una coma cambiada, es decir el verde por omisión de media web.
Cada color tiene un trabajo. El verde Vytal es identidad; azul, ámbar, rojo, morado y naranja comunican estado o datos y nunca sustituyen la marca.
El verde oficial se usa como identidad o elemento no textual. Medido el 2026-08-27: sobre el lienzo CLARO (#fafafa) tiene 5,25:1 y sirve; sobre el lienzo OSCURO (#100f0d) tiene 3,49:1 y NO sirve para texto pequeño. Ahí el texto lleva el green-text (#06ae7e, 6,72:1).
Colores de texto
Jerarquía de texto por fondo. Primario para contenido, secundario y mudo para apoyo, acento para acción.
Tipografía
abcdefghijklm 0123456789
abcdefghijklm 0123456789
abcdefghijklm 0123456789
abcdefghijklm 0123456789
Tokens
Uso
- Elige el lockup que combina con el fondo: claro u oscuro.
- Mantén espacio libre ≈ al radio de esquina del tile alrededor del logo.
- Deja respirar el pulso; el tile verde es la constante.
- Recolorear el tile o el pulso, o aplicar gradientes.
- Estirar, rotar o contornear el lockup.
- Usar los colores de señal (cyan/amber/red) como marca.
Cómo esta página se mantiene verdadera
Ningún contraste de esta página está escrito: todos salen de la misma función que el servidor usa para validar el color que elige un gimnasio. Si un número aquí está mal, la REGLA está mal, no la memoria de alguien.
Vytal · vytal.fit · un solo pulso, en la marca y los productos.