Manual de marca
Última actualización: 7 de septiembre de 2026
Lo mínimo para que Nynel Gym se vea igual en todas partes: la paleta, la tipografía y qué se puede y qué no se puede hacer con el logotipo.
Logotipo
Versión horizontal. Va sobre blanco o sobre un claro muy próximo al blanco.
Nynel GymSobre fondo oscuro se usa el icono con la palabra compuesta en texto. Es lo que hace el panel, y por eso se lee bien en los dos temas.
Cómo se ve en el panel
Nynel GymNynel Gym
Nynel GymNynel Gym
Nynel GymNynel GymNynel GymUsos correctos e incorrectos
Sí
- · Sobre fondo blanco o muy claro, con aire alrededor de al menos la altura de la ene.
- · Sobre grafito, usando el icono, que ya viene con su teja oscura.
- · A un tamaño donde la palabra «GYM» siga siendo legible: nunca por debajo de 90 píxeles de ancho.
No
- · Recolorear el logotipo. El lima y el grafito son la marca.
- · Poner el logotipo horizontal, que va sobre blanco, directamente sobre el grafito.
- · Deformarlo, rotarlo, añadirle sombra o contorno.
- · Colocarlo sobre una fotografía con detalle detrás de la palabra.
Paleta
El verde lima se usa con moderación. En una pantalla densa, teñirlo todo de lima destruye la jerarquía: si todo destaca, nada destaca. La jerarquía la dan el peso tipográfico y el espaciado; el color solo marca lo accionable y lo que exige atención.
Verde lima
Rellenos y botones en los dos temas. Como texto, solo sobre grafito.
Lima oscuro
El lima sobre fondo claro, donde el original no llega a contrastar.
Grafito
Fondo del tema oscuro y color del texto sobre lima.
Trazo
El contorno de las ilustraciones. No se usa para texto.
Verde de texto claro
Texto verde SOLO en modo claro. Sobre el grafito no llega al mínimo.
Superficie clara
Tarjetas y tablas en el tema claro.
Fondo claro
El lienzo sobre el que flotan las tarjetas.
Texto suave
Segundo nivel de información: etiquetas y contexto.
El verde cambia según el modo, y no por gusto
El verde de la marca se invierte entre el tema claro y el oscuro. No es una decisión estética: es la única combinación que llega al contraste mínimo en los dos modos. Cualquiera que lo unifique «para que sea el mismo verde en todas partes» dejará la mitad del panel por debajo de la norma.
El mínimo para texto normal es 4,5 a 1. La lima de marca sobre blanco se queda en 1,31, así que como texto en modo claro no vale por mucho que sea el color de la marca; ahí manda el verde oscuro. Sobre el grafito pasa lo contrario: el verde oscuro cae a 3,11 y es la lima la que llega a 14,65.
Como relleno el lima no tiene ese problema, porque lo que va encima es grafito, y esa pareja da 14,65 a 1. Por eso el botón principal es lima con texto grafito en los dos temas.
Ilustraciones
Cuatro ilustraciones para los estados vacíos. Todas comparten el mismo contorno en trazo #4A5058 con un único acento lima, y vienen con fondo transparente para poder ir sobre claro o sobre oscuro.
Sobre el tema oscuro se les sube el brillo un cincuenta por ciento: el trazo original es un gris medio que sobre el grafito se apagaría hasta casi desaparecer.
Tipografía
La tipografía es la del sistema operativo de quien mira la pantalla, que en macOS e iOS es San Francisco, en Android Roboto y en Windows Segoe UI. Es una decisión deliberada: carga instantánea, legibilidad probada en cifras pequeñas y cero riesgo de que un tipo de letra no llegue y la interfaz salte.
Título de sección · 22 px, semibold
Título de tarjeta · 16 px, semibold
Cuerpo del panel · 14 px, regular. Es lo que se lee en párrafos y formularios.
Filas de tabla · 13 px. Denso a propósito: caben más registros por pantalla.
Etiquetas · 11 px, mayúsculas, con espaciado
Cifras tabulares: 1.234,50 · 9.876,00 · 42,75
Todo importe y toda fecha usan cifras de ancho fijo. Sin eso, las columnas de dinero bailan de fila en fila y comparar dos números cuesta el doble.