Color
Tres colores de marca — el negro del chrome, el violeta de la acción y los neutros que sostienen todo lo demás.
Legalty tiene tres colores de marca: el negro, el violeta y los neutros. El negro viste el
chrome y da la seriedad; el violeta aparece con moderación, reservado a la acción y al foco;
los neutros sostienen todo lo demás. Los semánticos comunican estado sin ambigüedad. Todos los
valores se exponen como variables --lg-* y funcionan en claro y oscuro.
Negro de marca
El negro no es «ausencia de color» ni el gris más oscuro de la escala: es un color de la paleta, con su token y su papel. Es lo que viste la barra lateral, la entrada activa y la tipografía de máximo peso, y es lo que hace que el producto se lea profesional antes de que nadie lea una palabra.
En modo oscuro el papel se invierte: lo hace el blanco. Una entrada de barra seleccionada es negro sobre claro y blanco sobre oscuro; en los dos casos es el máximo contraste disponible —18,4:1 y 19,8:1— y en los dos dice lo mismo: estás aquí. Por eso no se documenta como «un color y su versión oscura», sino como un rol.
La superficie invertida
Ese rol tiene nombre propio, porque no lo usa solo la barra:
--lg-invert-bg /* negro en claro · blanco en oscuro */
--lg-invert-bg-hover
--lg-invert-text /* la tinta que se lee encima */
--lg-invert-text-muted
--lg-invert-border
Significa «esto pesa lo máximo que puede pesar en este tema». Lo comparten dos cosas que no se parecen en nada y hacen lo mismo:
- La entrada activa de una barra — dice dónde estás.
- El botón secundario de peso — la acción importante que no es la primaria: «Exportar», «Crear usuario», «Emitir». Negro sobre claro, blanco sobre oscuro.
Lo que no es negro es el lienzo. Las superficies —el fondo de la barra, el de una tarjeta, el de la página— siguen el tema. El negro rinde porque es escaso: si el marco entero fuera negro, que la entrada activa también lo sea dejaría de significar nada.
Tener el rol nombrado una vez es lo que evita que dentro de seis meses el negro de la barra y el negro del botón sean dos negros distintos.
Y por eso existen los tokens de barra, que son este mismo rol aplicado al chrome:
--lg-sidebar-bg /* el chrome; con [data-sidebar="brand"], negro en ambos temas */
--lg-sidebar-text
--lg-sidebar-text-muted
--lg-sidebar-hover
--lg-sidebar-active-bg /* negro en claro · blanco en oscuro */
--lg-sidebar-active-text
La barra de esta guía usa exactamente esos tokens —fondo claro, capítulo activo en negro pleno—, y es el mismo comportamiento que el dashboard. Se probó antes con el acento en su versión suave y no funcionaba —un violeta al 6% en una lista de trece entradas hay que buscarlo—, y además el negro tiene la ventaja de no competir con los tonos de aviso del contenido, porque no es ninguno de ellos.
Neutros y superficies
La escala neutra construye jerarquía por elevación: fondo, superficie, superficie elevada.
Texto
Acento de marca
El violeta #9268FA es la identidad. Para texto y rellenos usamos el tono ink #6340C7,
que cumple contraste AA sobre fondos claros. Se usa en la acción primaria, enlaces, foco
y selección — nunca como decoración.
Semánticos de estado
Cuatro familias: éxito, advertencia, peligro e información. Cada una con su tono sólido, su fondo suave y su borde.
Series de gráfico
Una gráfica no debe tomar prestados los semánticos. Cuando el verde de éxito pintaba la línea de «flujos completados», el verde significaba «va bien» en una tarjeta y «flujos» tres centímetros más abajo. Y tres tonos saturados —azul, verde, morado— sobre un panel gris son lo que convierte un dashboard en un semáforo.
Son una sola familia —acento, tinta, gris— y las series se distinguen además por el trazo: continuo, discontinuo, punteado. Así funciona impreso, en blanco y negro, y para quien no distingue colores.
Enlaces
El violeta subrayado permanente es el enlace del navegador de 1998, y en una tabla con quince filas produce quince subrayados compitiendo con los datos. Cada rol tiene su token:
| Rol | Token | Cuándo |
|---|---|---|
| Inline | --lg-link-inline-text | Dentro de una frase, donde el color lo distingue del texto que lo rodea |
| Navegación | --lg-link-nav-text | El que va solo al final de una fila: tinta normal, y lo que dice que es enlace es un chevrón —una forma, no un color— |
| Acción | --lg-link-action-text | El que dispara algo; acento, sin subrayado permanente |
| Destructivo | --lg-link-danger-text | Lo que borra o anula |
En todos, el subrayado aparece al pasar por encima y al enfocar, nunca en reposo. Y el foco es siempre visible: quitar el subrayado sin dejar otra señal deja a quien navega con teclado sin saber dónde está.