Modos: Marketing y Operativo
La misma marca en dos contextos — uno para enamorar y explicar, otro para trabajar con rigor.
Legalty tiene dos superficies muy distintas. Una explica qué es constituir una empresa y por qué conviene hacerlo aquí: se ve una vez, tiene que convencer, y puede permitirse aire y carácter. La otra es donde alguien pasa ocho horas revisando expedientes, cobranzas y flujos: se ve treinta veces al día, tiene que desaparecer y dejar ver los datos.
Durante un tiempo el sistema solo describía la primera. Al aplicarlo a la aplicación el resultado no se sentía premium sino disperso —titulares redondos pegados a tablas densas, violeta en sitios donde no decidía nada, avisos compitiendo con cifras—. La respuesta no es un sistema más pobre para la app: es decir en voz alta que son dos contextos, y separar lo que es identidad de marca —que se comparte— de lo que responde a una función distinta.
Regla de oro: el modo Operativo no es una versión reducida del Marketing. Es la misma marca optimizada para el trabajo diario y para la confianza que exige lo legal.
Qué cambia, exactamente
Menos de lo que parece, y ahí está la gracia. Lo que no cambia: la paleta, los semánticos, la escala de espaciado, el isotipo, los principios —y los radios, incluida la píldora del botón, que es de las cosas que hacen que una pantalla se reconozca como Legalty antes de leer nada—. Un modo no es otro tema, ni un tema recortado.
Lo que cambia es lo que responde a una función distinta: qué familia lleva por defecto un título que vive pegado a una tabla, cuánto respira una fila que se repite treinta veces, y qué gris se puede permitir una etiqueta que sostiene una cifra de dinero.
| Marketing | Operativo | |
|---|---|---|
| Título por defecto | Poppins | Inter |
| Tracking del título | -0.02em | -0.015em |
| Padding de card | 24px | 20px |
| Alto de fila | 16px | 12px |
| Separación entre secciones | 48px | 32px |
| Gris terciario | hereda | #6D717E |
| Idéntico en los dos modos | |
|---|---|
| Radio · control (botón, campo) | 999px |
| Radio · card | 24px |
| Radio · overlay (modal) | 28px |
| Radio · chip | 10px |
| Familia de marca | Poppins (--lg-font-brand) |
| Paleta y semánticos | los mismos |
Los radios sí se contienen, pero no por modo: por densidad. Una card suelta a 24px está
bien en cualquier contexto; treinta filas seguidas con esquinas de 24px se leen como una pila
de pastillas y el radio compite con el dato. Eso lo resuelve data-density="compact", que
funciona igual en los dos modos.
Poppins dentro de la aplicación
Que el título por defecto sea Inter no destierra a Poppins de la app. Para el momento de marca
que quiera existir detrás del login —la portada de una sección, una bienvenida, un estado
vacío que celebra algo— está --lg-font-brand, que es Poppins en todos los modos:
.titulo-de-portada { font-family: var(--lg-font-brand); }
La diferencia es de defecto, no de permiso. El título corriente de una vista operativa hereda Inter porque va pegado a cifras; el que quiere ser marca lo pide, y al pedirlo se nota que es una decisión.
Antigüedad de la deuda
Bs 184.320 pendientes · 41 con deuda
Ver cobranzaAntigüedad de la deuda
Bs 184.320 pendientes · 41 con deuda
Ver cobranzaCuándo estoy en cada uno
- Marketing — landing, onboarding público, estados vacíos de bienvenida, correos, presentaciones, esta guía.
- Operativo — todo lo que vive detrás del login: inicio, financiero, expedientes, tablas, flujos, CRM, formularios de trabajo.
Checklist
- ¿Quién lo ve? Alguien que eligió entrar y tiene una tarea → Operativo. Alguien a quien hay que convencer → Marketing.
- ¿Cuántas veces al día se ve esta pantalla? Más de una → Operativo.
- ¿Hay una cifra, una tabla o una lista de más de cinco filas? → Operativo.
- ¿El titular tiene que llamar la atención, o solo decir dónde estás? Lo segundo → Operativo.
- ¿Cuántos colores distintos hay en pantalla? En Operativo: neutros, un acento en la acción primaria, y semánticos solo cuando informan de un estado. Si un color no responde «¿qué hago con esto?», sobra.
- ¿El radio del contenedor se nota antes que su contenido? Entonces es demasiado.
Cómo se activa
El modo es un atributo, y los tokens son variables CSS heredables. Se declara una vez en la raíz del documento:
<html data-mode="app"> <!-- toda la aplicación -->
<html data-mode="marketing"> <!-- sitio público, esta guía -->
Y se puede acotar a un subárbol, que es lo que hace la comparación de arriba:
<section data-mode="marketing">…</section> <!-- un bloque de bienvenida dentro de la app -->
La densidad es un segundo eje, independiente del modo, para una tabla o un panel concretos:
<table data-density="compact">…</table>
El chrome de marca —la barra lateral en negro, en claro y en oscuro— es un tercer atributo, porque no todas las barras lo quieren: en Legalty lo llevan las de administración y abogado, y no la del cliente, cuya sesión está más cerca del onboarding que del trabajo diario.
<aside data-sidebar="brand">…</aside>
Una nota sobre implementación
Los modos son CSS puro, así que funcionan con cualquier kit de componentes. Lo que no puede seguir el modo en caliente es un kit que compile sus colores a build time: es el caso de NextUI v2, donde el tema se genera desde el modo operativo y queda fijo. En HeroUI v3 —que es lo que usa esta guía— el cambio es en vivo, porque su theming ya son variables CSS.
Consecuencia práctica: en el dashboard de Legalty el modo operativo es permanente y no hay conmutador; aquí sí, y por eso la comparación de arriba puede existir.
¿Añades una pantalla nueva? No preguntes qué tokens usar: pregunta en qué modo estás. Los tokens ya saben el resto.