Componentes
Modo oscuro rehecho
El acento de la Compañía de Innovación de Santiago cambia de color de noche. Acá va el diagnóstico con los valores reales, la regla propuesta y nueve opciones medidas, O01 a O09.
Índice del sistema de estilo · Guía · Marcas · Logos · Decisiones · Segunda tanda, N01 a N09
Aviso sobre esta migración. Los paneles que aplicaban cada paleta a una página de mentira pasaron a ser rejas de muestras de color: el kit no tiene una clase de panel de demostración con fondo propio y la lista de clases del sitio es cerrada. Se conservan los valores, los roles y los contrastes de cada panel, y se pierde el dibujo. Queda anotado como brecha para pedirlo al kit.
El acento de CIS cambia de color de noche
En claro, CIS es azul marino #1e3a5f. En oscuro, el mismo token vale #7fc598, que es verde. Medido en OKLCH el tono se mueve 100,8 grados. Eso no es adaptar contraste, es otra marca. Esta página levanta el diagnóstico con los valores reales de v7/base/tokens.css y v7/brands/*/tokens.css, propone una paleta oscura donde cada marca conserva su tono, y verifica el contraste de cada valor propuesto.
Esta página ya está comiendo de su propia cocina. En modo oscuro usa la opción O02 como acento. Aprieta el interruptor de arriba a la derecha para verla de noche. Los paneles de comparación de la sección 4 muestran siempre los dos modos a la vez, sin importar cómo tengas el interruptor.
1 · Diagnóstico
Todos los valores salen de leer los cinco archivos de tokens. Los tonos están medidos en OKLCH, que es el espacio donde "mismo tono" significa lo que el ojo entiende por mismo tono, y también en HSL para que se pueda comprobar con cualquier selector de color.
D01 · CIS salta de azul a verde
tono −100,8°
Está declarado en brands/cis/tokens.css línea 7 como decisión ("acento dual por tema"), pero el efecto es que un lector que ve el sitio de noche y otro que lo ve de día no están viendo la misma marca. Ninguna de las otras tres marcas hace esto.
El verde oscuro es el fantasma del sistema legacy que el propio archivo prohíbe
La línea 10 de brands/cis/tokens.css dice: "NO propagar el sistema legacy --cis-* (Inter + verdes #0f5f2d)". Ese verde legacy tiene tono OKLCH 150,4. El acento oscuro vigente #7fc598 tiene tono 155,2. Están a 4,8 grados: es el mismo verde, aclarado. El archivo prohíbe el sistema legacy en una línea y lo sirve de noche cuatro líneas más abajo.
D02 · Las otras tres marcas sí conservan su tono
Esto es lo que hace que D01 sea un defecto y no una convención del grupo. CDS e illanes00 están correctas y no hay que tocarlas. cochid tiene una desviación menor.
| Marca | Claro | Oscuro | Tono OKLCH | Salto OKLCH | Salto HSL | Veredicto |
|---|---|---|---|---|---|---|
| CIS | #1e3a5f |
#7fc598 |
256,0 a 155,2 | −100,8° | −72,7° | Roto |
| CDS | #1a1a2e |
#c8c8e4 |
282,9 a 285,5 | +2,6° | 0,0° | Correcta |
| cochid | #1d4ed8 |
#60a5fa |
264,4 a 254,6 | −9,8° | −11,2° | Deriva leve |
| illanes00 | #3763e0 |
#7fa3ff |
265,5 a 266,8 | +1,3° | −1,3° | Correcta |
CDS es el modelo a seguir: mismo tono, misma saturación en OKLCH (0,038 contra 0,039), solo se invierte la luminosidad (L 22,8 a 84,2). Es exactamente la operación que falta en CIS.
D03 · La base del grupo no es neutra, es CIS disfrazada
base/tokens.css declara el acento como "cada marca lo sobreescribe", pero sus dos valores son literalmente los de CIS: #1e3a5f en claro y #7fc598 en oscuro, con --accent-soft: #12261a, que es un verde. Cualquier sitio que cargue solo la base hereda el salto de tono completo. El defecto no vive en una marca, vive un nivel más arriba.
D04 · El botón relleno es ilegible de noche en las cuatro marcas
base/components.css línea 26 fija el color del texto a mano: .btn:hover { background: var(--accent); color: #fff; }. En claro funciona porque los acentos son oscuros. En oscuro los acentos son claros y el blanco encima queda así: CIS 2,03:1 · CDS 1,64:1 · cochid 2,54:1 · illanes00 2,45:1. El mínimo para texto es 4,5:1. Los cuatro fallan hoy, y con los azules claros que propongo abajo empeoran (blanco sobre #82a1ca da 2,66:1). Por eso la propuesta incluye un token nuevo, O09, y no es opcional: sin él, pegar los hexadecimales nuevos deja un botón peor que el actual.
D05 · cochid define su acento suave con transparencia y le salen dos colores
Las otras tres marcas usan un hexadecimal sólido. cochid usa rgba(96, 165, 250, .14), que no es un color sino una operación sobre lo que haya detrás. Sobre el papel #121212 compone #1d2732; sobre la superficie elevada #1c1c1c compone #262f3b. El mismo token pinta dos colores según dónde caiga, y el borde del badge, que usa color-mix con transparencia, se apila encima. Es el único token de acento del sistema que no se puede citar como valor.
D06 · La temperatura de los neutros se invierte entre modos (encontrado, fuera del alcance de esta propuesta)
En claro la casa es papel cálido con tinta fría. En oscuro es papel neutro con tinta cálida. No es un error de contraste y no lo estoy proponiendo cambiar, pero explica por qué el modo oscuro "se siente de otro sitio" incluso arreglando el acento.
| Token | Claro | Tono HSL | Oscuro | Tono HSL |
|---|---|---|---|---|
--ink | #0e1418 | 204° frío | #f3f1ea | 47° cálido |
--ink-muted | #5b6672 | 211° frío | #a9a69d | 45° cálido |
--ink-soft | #a3acb5 | 210° frío | #6b6863 | 38° cálido |
--paper | #f6f5f1 | 48° cálido | #0a0a0a | sin tono |
--line-strong | #14181c | 210° frío | #eaeae4 | 60° cálido |
D07 · La superficie inversa deja de existir de noche (encontrado, fuera del alcance de esta propuesta)
--surface-inverse existe para meter un bloque oscuro dentro de una página clara. En claro, #0c1116 contra el papel da 17,38:1 y el bloque se lee como bloque. En oscuro vale #17171a contra un papel #0a0a0a: 1,11:1. El recurso gráfico desaparece. Quien maquete una sección inversa la verá funcionar de día y evaporarse de noche.
D08 · Lo que sí está bien y no hay que tocar
Los contrastes de los acentos oscuros vigentes son holgados (entre 7,37:1 y 12,03:1 contra su papel). El problema nunca fue de accesibilidad sino de identidad, así que hay margen de sobra para elegir el tono correcto sin pelear con el contraste. Los acentos suaves del modo claro también están bien y esta propuesta no los toca.
2 · La regla propuesta
Una sola frase, aplicable a cualquier marca futura:
El acento oscuro conserva el tono y la saturación OKLCH del acento claro. Solo se mueve la luminosidad. Cuando la saturación del claro no cabe en sRGB a esa luminosidad, se sube hasta el máximo que quepa, nunca por debajo.
Conservar la saturación en OKLCH equivale a bajar la saturación en HSL, que es lo que pide un fondo oscuro: #1e3a5f tiene 52% de saturación HSL y el #82a1ca propuesto tiene 40%. La luminosidad sube de 25% a 65%. Es decir, la propuesta sí adapta luminosidad y saturación: lo único que deja quieto es el tono.
El costo que hay que mirar de frente
Tres de los cuatro acentos claros del grupo viven en un arco de diez grados de tono (CIS 256°, cochid 264°, illanes00 266°). En claro se distinguen por luminosidad y saturación: CIS es marino profundo y apagado (C 0,074), cochid es azul eléctrico (C 0,217), una razón de 2,95 veces. El modo oscuro comprime justamente esas dos dimensiones, así que el verde, mal y todo, hacía a CIS inconfundible de noche.
La propuesta recupera la separación por saturación en vez de por tono: CIS se queda apagado (C 0,070, azul acero) y cochid se va al máximo que permite sRGB (C 0,149, azul eléctrico), lo que da una razón de 2,13 veces de noche contra 2,95 de día. Es menos separación que hoy, y es la consecuencia inevitable de exigir que el tono no cambie. Si Martín prefiere el tono a la distinción, la opción O03 la maximiza sin romper la regla.
3 · Opciones
Los tres primeros códigos son alternativas entre sí: elige uno. El resto son decisiones independientes que se pueden tomar por separado.
Bloque A · Acento oscuro de CIS (elige uno de los tres)
Los tres tienen tono OKLCH 256° y saturación OKLCH 0,070, idénticos a #1e3a5f. Lo único que los diferencia es cuánta luz llevan.
El más contenido. De noche pesa parecido a lo que pesa el marino de día: se lee como color de institución, no como color de aviso.
OKLCH L 65,9 · C 0,070 · H 256,3 · papel 6,36:1 · elevado 6,06:1 · suave #142134
Cuatro puntos de luz más que O01. Es el punto donde un enlace se ve claramente como enlace sin que el azul empiece a brillar. Es el que usa esta página en oscuro.
OKLCH L 70,1 · C 0,070 · H 255,6 · papel 7,45:1 · elevado 7,11:1 · suave #142134
Calcado en luminosidad al #7fc598 vigente (9,92:1 contra 9,75:1), así que nada de la maqueta cambia de peso: solo se corrige el tono. Es también el que más se separa de cochid.
OKLCH L 78,0 · C 0,070 · H 255,4 · papel 9,92:1 · elevado 9,46:1 · suave #142134
Bloque B · Qué hace la base del grupo (elige uno de los dos)
Es lo que ya pasa en claro: el acento de la base es el marino de CIS. Mantenerlo en oscuro deja los dos modos coherentes y no obliga a decidir nada nuevo sobre el modo claro.
base claro #1e3a5f sin cambio · base oscuro igual a O01, O02 u O03 · suave oscuro #142134
Gris azulado casi sin color (C 0,020): un sitio sin archivo de marca se ve deliberadamente sin marca, y el día que alguien olvide cargar los tokens se nota. El costo es que en claro la base seguiría siendo marino, así que los dos modos dejan de espejarse.
OKLCH L 70,0 · C 0,020 · H 256,0 · papel 7,40:1 · elevado 7,06:1
Bloque C · Las otras tres marcas
Endereza los 9,8 grados que se van hacia el cian y sube la saturación al máximo que permite sRGB, que es lo que devuelve a cochid su azul eléctrico y lo separa del acero de CIS. Conserva exactamente la luminosidad de hoy, así que no cambia el peso de nada.
hoy #60a5fa H 254,6 · C 0,143 · propuesto L 71,3 · C 0,149 · H 264,3 · papel 7,25:1 · elevado 6,60:1 · suave sólido #1b263d , reemplaza el rgba() de D05
Verificado, no propuesto: el lavanda conserva el tono del azul noche (+2,6 grados) y la saturación OKLCH (0,038 contra 0,039). Es el único par del sistema que ya cumple la regla al pie de la letra. Solo necesita el token de O09.
papel 12,03:1 · elevado 11,44:1 · suave #1a1a2e sin cambio
Verificado, no propuesto: +1,3 grados de tono, dentro del margen de redondeo de un hexadecimal. Solo necesita el token de O09.
papel 7,95:1 · elevado 7,61:1 · suave #16233f sin cambio
Bloque D · El token que hace falta sí o sí
Arregla D04. El texto que va encima del acento deja de estar escrito a mano en components.css y pasa a ser un token que cambia con el tema: blanco cuando el acento es oscuro, tinta casi negra cuando el acento es claro. Un solo valor por modo sirve a las cuatro marcas.
claro blanco sobre acento: CIS 11,50:1 · CDS 17,06:1 · cochid 6,70:1 · illanes00 5,22:1 · oscuro #0a0a0a sobre acento: CIS 7,45:1 · CDS 12,10:1 · cochid 7,67:1 · illanes00 8,09:1
4 · Claro contra oscuro, marca por marca
Cada panel trae el acento sobre papel, el acento sobre superficie elevada, texto de tinta encima, un enlace, un botón relleno, un botón fantasma y un badge. Los paneles llevan sus colores fijos, así que muestran los dos modos a la vez aunque tengas el interruptor en claro. Los botones son maqueta, no responden.
CIS
acento sobre papel · Nombre de la marca · Tinta normal, un enlace con acento y un énfasis.
superficie elevada · Acento sobre elevado · Texto atenuado dentro de la tarjeta.
Entrar Cancelar badge
Los once paneles mostraban este mismo contenido; lo único que cambiaba entre uno y otro era la paleta, que ahora va como muestras de color en cada espécimen.
#1e3a5f · papel 10,54:1 · elevado 11,50:1 · texto encima 11,50:1
#7fc598 · papel 9,75:1 · elevado 9,30:1 · texto encima 2,03:1
#82a1ca · papel 7,45:1 · elevado 7,11:1 · texto encima 7,45:1
El panel del medio es el que hay hoy. El botón "Entrar" de ese panel es el defecto D04 en vivo: blanco sobre verde, 2,03:1.
Compañía Chilena de Inteligencia de Datos
#1d4ed8 · papel 6,41:1 · elevado 6,70:1 · texto encima 6,70:1
#60a5fa · papel 7,37:1 · elevado 6,70:1 · texto encima 2,54:1
#739fff · papel 7,25:1 · elevado 6,60:1 · texto encima 7,67:1
El badge del panel del medio usa el rgba() de D05: su fondo real es #1d2732 sobre el papel, pero sería #262f3b si el mismo badge cayera dentro de una tarjeta.
CDS · sin cambio propuesto
#1a1a2e · papel 15,64:1 · elevado 17,06:1 · texto encima 17,06:1
#c8c8e4 sin cambio · papel 12,03:1 · elevado 11,44:1 · texto encima 12,10:1 con O09
illanes00 · sin cambio propuesto
#3763e0 · papel 4,87:1 · elevado 5,22:1 · texto encima 5,22:1
#7fa3ff sin cambio · papel 7,95:1 · elevado 7,61:1 · texto encima 8,09:1 con O09
Las tres opciones de CIS, una al lado de la otra
5 · Verificación de contraste
Ratios WCAG 2.1 calculados sobre la luminancia relativa de sRGB. El umbral de texto normal es 4,5:1; el de texto grande y elementos de interfaz es 3:1. Todo lo propuesto está por encima de 4,5:1, así que no hay ninguna opción que no llegue.
Acento contra su papel y contra su superficie elevada
| Código | Marca | Acento | Papel | Ratio papel | Elevado | Ratio elevado | Texto normal |
|---|---|---|---|---|---|---|---|
| hoy | CIS y base | #7fc598 |
#0a0a0a | 9,75:1 | #111110 | 9,30:1 | pasa |
| O01 | CIS y base | #7694bd |
#0a0a0a | 6,36:1 | #111110 | 6,06:1 | pasa |
| O02 | CIS y base | #82a1ca |
#0a0a0a | 7,45:1 | #111110 | 7,11:1 | pasa |
| O03 | CIS y base | #9abae4 |
#0a0a0a | 9,92:1 | #111110 | 9,46:1 | pasa |
| O05 | base neutra | #969fab |
#0a0a0a | 7,40:1 | #111110 | 7,06:1 | pasa |
| hoy | cochid | #60a5fa |
#121212 | 7,37:1 | #1c1c1c | 6,70:1 | pasa |
| O06 | cochid | #739fff |
#121212 | 7,25:1 | #1c1c1c | 6,60:1 | pasa |
| O07 | CDS | #c8c8e4 |
#0c0b08 | 12,03:1 | #14120d | 11,44:1 | pasa |
| O08 | illanes00 | #7fa3ff |
#0c0d0f | 7,95:1 | #111316 | 7,61:1 | pasa |
Texto encima del acento, es decir el botón relleno
| Marca y modo | Acento | Con blanco, como está hoy | Con --on-accent, O09 |
|---|---|---|---|
| CIS claro | #1e3a5f | 11,50:1 | 11,50:1 |
| CIS oscuro hoy | #7fc598 | 2,03:1 | 9,75:1 |
| CIS oscuro O02 | #82a1ca | 2,66:1 | 7,45:1 |
| CDS oscuro | #c8c8e4 | 1,64:1 | 12,10:1 |
| cochid oscuro O06 | #739fff | 2,58:1 | 7,67:1 |
| illanes00 oscuro | #7fa3ff | 2,45:1 | 8,09:1 |
Badge, es decir acento sobre acento suave
| Marca y modo | Acento | Suave | Ratio | Nota |
|---|---|---|---|---|
| CIS claro | #1e3a5f | #e7edf4 |
9,76:1 | sin cambio |
| CIS oscuro O02 | #82a1ca | #142134 |
6,09:1 | suave nuevo, mismo tono 256° |
| CDS claro | #1a1a2e | #e6e6ee |
13,74:1 | sin cambio |
| CDS oscuro | #c8c8e4 | #1a1a2e |
10,43:1 | sin cambio |
| cochid claro | #1d4ed8 | #dbeafe |
5,49:1 | sin cambio |
| cochid oscuro O06 | #739fff | #1b263d |
5,85:1 | sólido, reemplaza el rgba() |
| illanes00 claro | #3763e0 | #e8edfb |
4,46:1 | preexistente, ver abajo |
| illanes00 oscuro | #7fa3ff | #16233f |
6,38:1 | sin cambio |
La única medición que no llega a 4,5:1
El badge de illanes00 en modo claro da 4,46:1, cuatro centésimas por debajo del umbral de texto normal, y el badge además va en mono a 10,5 píxeles, que es el peor caso. Es un valor que ya existe hoy y que esta propuesta no toca: el encargo es la paleta oscura, y ensayé suaves claros nuevos que lo dejaban peor (4,37:1). Lo dejo señalado para que se decida aparte. Todo lo demás, incluido cada valor propuesto, pasa 4,5:1.
6 · CSS listo para pegar
Escrito con O02 y O04. Para O01 o O03 se cambian los dos hexadecimales del acento por los de la tarjeta correspondiente; el suave #142134 sirve para las tres. Cada bloque va donde ya está el bloque equivalente: hay que tocar los dos, el de prefers-color-scheme y el de data-theme, porque el sistema los declara por separado.
base/tokens.css
:root {
--accent: #1e3a5f;
--accent-soft: #e7edf4;
--on-accent: #ffffff; /* O09 · nuevo */
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--accent: #82a1ca; /* O02 · era #7fc598 */
--accent-soft: #142134; /* era #12261a */
--on-accent: #0a0a0a; /* O09 · nuevo */
}
}
:root[data-theme="dark"] {
--accent: #82a1ca;
--accent-soft: #142134;
--on-accent: #0a0a0a;
}brands/cis/tokens.css
/* La linea 7 del encabezado deja de decir "acento dual por tema"
y pasa a decir: navy #1e3a5f, aclarado a #82a1ca en oscuro
conservando tono OKLCH 256 y croma 0,070. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--accent: #82a1ca;
--accent-soft: #142134;
}
}
:root[data-theme="dark"] {
--accent: #82a1ca;
--accent-soft: #142134;
}brands/cochid/tokens.css · opción O06
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--accent: #739fff; /* era #60a5fa, tono 254,6 a 264,3 */
--accent-soft: #1b263d; /* era rgba(96,165,250,.14) */
}
}
:root[data-theme="dark"] {
--accent: #739fff;
--accent-soft: #1b263d;
}base/components.css línea 26 · opción O09
/* antes */
.btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
/* despues */
.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }brands/cds y brands/illanes00
No se tocan. Heredan --on-accent de la base y con eso quedan resueltas.
Si además se elige O05, la base neutra
/* en los dos bloques oscuros de base/tokens.css, en vez del acento de CIS */
--accent: #969fab; /* gris azulado, H 256, C 0,020 */
--accent-soft: #1d2127; /* H 256, C 0,012, acento encima 6,04:1 */
/* y brands/cis/tokens.css pasa a ser el unico dueno de #82a1ca */7 · Lo que no verifiqué
Nadie ha mirado esta página en un navegador
No hay navegador en el servidor. Los colores, los ratios y los saltos de tono están calculados, no vistos: la conversión sRGB a OKLCH, la luminancia relativa y los ratios WCAG salen de cálculo directo sobre los hexadecimales leídos de los archivos. Lo que no está verificado es cómo se ve: si el azul O02 se siente lo bastante distinto del azul de cochid en una pantalla real, si el papel casi negro produce halo alrededor del texto claro, y si las tipografías cargan. Eso hay que mirarlo.
Fuera del alcance de esta propuesta
D06, la inversión de temperatura de los neutros, y D07, la superficie inversa que desaparece de noche, están diagnosticados con números pero no traen hexadecimales propuestos: son decisiones sobre la paleta neutra, no sobre el acento, y merecen su propia pasada. Tampoco toqué los acentos suaves del modo claro. El orden de carga de las hojas también es frágil, porque los bloques oscuros de la base y los de la marca tienen la misma especificidad y gana el último: si un sitio carga brands/*/tokens.css antes que base/tokens.css, se queda con la paleta oscura de la base. Hoy el orden documentado es el correcto.
Nada de esto está aplicado. core-style/v7 sigue sirviendo el verde. Esta página es la propuesta y no se tocó ningún archivo del sistema de diseño.