Galería de componentes y convenciones · versión 4

Sesenta y siete componentes y diez reglas transversales, cada uno con tres cosas: la pieza renderizada, la convención escrita (cuándo se usa y cuándo no) y el token o la clase que la gobierna. Todo en una página autocontenida, sin dependencias externas salvo las dos tipografías del grupo. Los códigos C01 a C67 y T01 a T10 están para que puedas comentar pieza por pieza. De los 67, 22 existen hoy en el sistema y 45 son propuestas.

De las ocho familias que siguen, el sistema tiene hoy: la barra, los botones (dos variantes), las tarjetas, la cifra destacada, el campo de texto, la tabla y la etiqueta. Todo lo demás (pestañas, migas, paginación, menús, casillas, interruptores, avisos, modal, cajón, progreso, esqueleto, estado vacío) no existe y acá aparece por primera vez. Esa es, en el fondo, la lista de trabajo que sale de esta página. El pie y la tarjeta de entrada no se repiten acá porque ya están resueltos en las secciones 8 y 9 de la guía de estilo.

Acá va la convención en prosa: para qué sirve la pieza, cuándo se usa y, sobre todo, cuándo no. Un párrafo, dos a lo más.

La barra es la única pieza de navegación que el sistema tiene resuelta hoy, y con una sola densidad. Las otras siete piezas de esta sección son propuestas: se dibujan con los mismos tokens, borde de 1px y radio 2px, para que entren sin discutir cuando se agreguen.

La barra de todos los sitios del grupo. Papel translúcido con desenfoque, pegada arriba, separada del contenido por un borde de 1px y nunca por una sombra. A la izquierda la marca con el namebrand de la entidad; al centro los enlaces agrupados con separador vertical; a la derecha las acciones. El activo se marca con subrayado de 2px en el acento, no con negrita ni con fondo.

Se usa siempre, en todo dominio del grupo con público. Lo que cambia por sitio es la marca y qué grupos de enlaces hay, nunca la estructura. No se usa para paneles internos con muchas secciones: ahí manda la barra lateral (C07), con la barra arriba reducida a marca y cuenta.

La misma barra con el relleno vertical bajado de 24 a 16 píxeles y la marca a 24. Es para herramientas donde la pantalla es de trabajo y cada píxel de alto cuenta: paneles, bandejas, editores. El namebrand baja a 9,5px y sigue siendo legible porque es versalita.

No se usa en portadas ni en sitios de contenido: ahí la barra apretada se lee como software, no como sitio. Un dominio elige una densidad y no la cambia entre páginas.

Relleno vertical de 44 píxeles y marca a 38. Es para la portada de una entidad, donde la barra es parte de la presentación y no un instrumento. Aparece la llamada a la acción a la derecha, que en las otras dos densidades no va.

No se usa con más de cuatro enlaces ni en páginas interiores del mismo sitio: una portada amplia y un interior estándar es una mezcla legítima, siempre que el cambio ocurra al salir de la portada y no a mitad de recorrido.

Panel de 210px mínimo, borde de 1px en --line-strong para que se despegue del fondo sin sombra, encabezados en mono versalita cuando hay que agrupar y separador de 1px entre grupos. El disparador es un botón con aria-expanded, no un enlace, y el panel se cierra con Escape o al hacer clic afuera.

Se usa cuando un grupo de la barra tiene más de cuatro destinos. No se usa para esconder navegación principal en el escritorio: si algo importa, va visible en la barra. Nunca se abre al pasar el cursor, solo al hacer clic, porque en pantalla táctil el hover no existe.

Bajo 860px los enlaces se ocultan y aparece la hamburguesa: cuadrada, 34px, tres barras de 1,5px, sin radio. El panel se abre pegado bajo la barra, ocupa el ancho completo, apila los grupos con un borde de 1px entre ellos y no lleva animación de deslizamiento.

En móvil el namebrand desaparece y queda la marca sola: no hay estado intermedio achicado. La acción secundaria (.gr-nav__cta--secondary) también se oculta, porque en el móvil solo cabe una acción.

Texto de 12,5px en tinta apagada, separador con barra inclinada en mono, y el último elemento en tinta plena con peso 600 y sin enlace. Sin fondo, sin caja, sin icono de casa: es una línea de texto que vive justo bajo la barra.

Se usa cuando la jerarquía tiene tres niveles o más y el usuario puede llegar por enlace directo. No se usa en sitios planos de dos niveles, donde repite lo que ya dice la barra, ni como sustituto del botón volver de un flujo.

Columna de 212px con borde derecho de 1px, encabezados de grupo en mono versalita y el elemento actual marcado con barra izquierda de 2px en el acento más fondo --accent-soft. Los elementos son bloques de 7px de alto interno, no botones ni píldoras.

Se usa en paneles con más de seis destinos estables. No se usa en sitios de contenido: ahí la navegación es la barra. Bajo 900px se colapsa detrás de la misma hamburguesa de C05 en vez de convertirse en una tira de iconos.

Misma gramática que los enlaces de la barra: subrayado de 2px en el acento para la activa, tinta apagada para el resto, sobre una línea de 1px que recorre todo el ancho. Sin cajas, sin esquinas redondeadas, sin fondo. Es deliberado que se parezcan a la barra: son el mismo gesto a otra escala.

Se usan para vistas del mismo objeto (un documento, una empresa, un mes). No se usan para navegar entre objetos distintos, ni anidadas dentro de otras pestañas, ni con más de cinco: a partir de ahí es una barra lateral.

Cifras en mono, celdas de 30px con borde de 1px, la página actual en tinta plena invertida. Siempre lleva Anterior y Siguiente con palabra, no solo flechas, y siempre muestra la última página para que se entienda el tamaño del conjunto.

Se usa en listas largas de resultados estables. No se usa en listas cortas ni en contenido que se explora por desplazamiento continuo, donde conviene un botón de cargar más.

Enlace escondido fuera de pantalla que aparece al recibir el foco con el tabulador, antes que cualquier otra cosa del documento. Fondo de tinta plena, papel encima, sin radio. Lleva a #contenido, que es el main.

Va en todas las páginas del grupo, es la primera cosa dentro del cuerpo. Sin él, quien navega con teclado tiene que recorrer la barra entera en cada página. Nunca se oculta con display:none, porque eso lo saca del orden de foco y deja de existir.

La regla de fondo: en prosa el enlace va subrayado y hereda el color del texto; fuera de la prosa el subrayado se cambia por otra señal (borde inferior, color, posición) porque una lista de enlaces subrayados se vuelve ilegible. El acento se reserva para el estado, no para todo enlace.

Color heredado del texto, subrayado de 1px separado 2px de la línea base. No cambia de color en reposo: lo que lo distingue es el subrayado. Al pasar el cursor toma el acento, y el subrayado toma el acento con él.

Se usa dentro de párrafos, notas al pie y descripciones. No se usa en listas de navegación, celdas de tabla ni tarjetas, donde el subrayado repetido produce ruido: ahí van C12 o C14.

Sin subrayado, tinta apagada, 13,5px con peso 500, relleno vertical de 6px y un borde inferior transparente de 2px reservado desde el principio para que el activo no mueva el texto. Al pasar el cursor solo cambia a tinta plena: no aparece fondo ni subrayado.

Se usa en la barra, en el pie y en cualquier lista de destinos. No se usa dentro de un párrafo, porque sin subrayado no se distingue del texto.

Tinta plena más el borde inferior de 2px en el acento. Es la única señal de estado que usa el acento en la barra, y por eso funciona: si los enlaces normales fueran de color, el activo no se vería. El estado lo decide el servidor o el build con la clase is-active, nunca JavaScript en el navegador.

Marca la sección donde estás, una sola por barra. En una jerarquía profunda se marca el ancestro de primer nivel, y el resto lo dicen las migas (C06).

Mono versalita de 11,5px con tracking 0,08em y un borde inferior de 1px en el acento que hace de subrayado grueso. La flecha va en el texto, no como icono. Es la voz secundaria de la casa aplicada a una acción.

Se usa como cierre de una tarjeta o de un bloque, siempre uno solo y siempre al final. No se usa suelto en medio del contenido ni repetido varias veces en el mismo bloque.

Igual que el enlace en prosa más un icono de 11px de flecha saliente, en tinta suave, pegado al texto. El icono va dentro del enlace para que no quede huérfano al final de una línea. Sin target="_blank" salvo que salir de la página pierda trabajo del usuario (un formulario a medio llenar); abrir pestañas por costumbre le quita el control.

Se usa para salir del grupo. No se usa entre dominios del grupo, que son la misma casa: innovacionsantiago.cl, circulodesantiago.cl y cochid.cl no se marcan como externos entre sí.

Único caso en que un enlace lleva color propio: rojo --err, con el mismo subrayado de la prosa. El color es la advertencia, así que no necesita icono ni mayúsculas.

Se usa para la acción irreversible dentro de un menú o al pie de un formulario, y siempre abre una confirmación (C51). No se usa como botón principal de una pantalla ni para acciones reversibles como archivar u ocultar, que son enlaces normales.

Tinta --ink-soft, sin subrayado, cursor de prohibido. Se marca con aria-disabled="true" y tabindex="-1": quitarle el href lo saca del árbol de accesibilidad, y dejarlo enfocable sin que haga nada es peor que no tenerlo.

Se usa cuando el destino existe pero todavía no está disponible para este usuario, y algo al lado explica por qué. Si la razón no se puede explicar, no se muestra el enlace: un destino apagado sin motivo es peor que un destino ausente.

Contorno de 2px en el acento, separado 2px del elemento, con la forma del elemento. Se aplica con :focus-visible, no con :focus, para que el foco no aparezca al hacer clic con el ratón pero sí al tabular. Nunca outline: none sin reemplazo. Esta vitrina ya aplica la regla: si recorres la página con el tabulador, lo que ves es la propuesta funcionando.

Acá el sistema se contradice y hay que zanjarlo: components.css le quita el contorno al campo de texto y lo reemplaza por borde en el acento más un anillo de 3px al 12%; la tarjeta de entrada de la guía usa contorno de 2px. Propuesta: el anillo del campo se queda como está por ser una señal de edición, y todo lo demás (enlaces, botones, pestañas, elementos de menú) usa el contorno de 2px.

El sistema tiene dos: el sólido y el de contorno. Faltan el terciario, el destructivo, el apagado y el que espera. Todos comparten geometría: sin radio (los botones son la excepción a la regla de 2px, van rectos como las superficies), borde de 1px siempre presente aunque sea del color del fondo, 13,5px con peso 600 y separación de 8px entre icono y texto.

Tinta plena de fondo, papel de texto, borde del mismo color de la tinta. Al pasar el cursor cambia entero al acento. El relleno es 12px por 18px, y el borde de 1px está siempre para que primario y secundario midan exactamente lo mismo y no salten al cambiar de estado.

Uno solo por pantalla, el que continúa la tarea. Si dos acciones parecen igual de importantes, una de las dos no lo es. No se usa para navegar: para ir a otra parte hay enlaces.

Fondo transparente, borde en --line-strong, texto en tinta. Al pasar el cursor gana fondo de papel elevado y el borde se acerca a la tinta. Mismo tamaño y mismo peso que el primario: lo que cambia es el relleno, no la jerarquía tipográfica.

Se usa para la alternativa legítima al lado del primario (cancelar, volver, descartar) y para acciones de igual rango cuando ninguna domina. No se usa como reemplazo del primario en pantallas donde sí hay una acción principal.

Sin fondo y sin borde visible, solo texto en tinta con relleno lateral reducido a 10px. Al pasar el cursor aparece fondo --accent-soft. Sigue midiendo lo mismo que los otros dos, así que se puede mezclar en una fila sin desalinear nada.

Se usa en barras de herramientas y encabezados de tabla, donde hay muchas acciones menores y una fila de botones con borde sería una reja. No se usa suelto: fuera de un grupo no se lee como botón.

Rojo --err sólido, o de contorno rojo cuando aparece dentro de una pantalla que no es la confirmación. La forma de las dos es idéntica a C19 y C20: cambia el color, nada más.

La versión sólida solo aparece dentro del diálogo de confirmación, nunca en la pantalla que lo lanza. El texto nombra el objeto ("Eliminar la empresa", no "Aceptar") para que la confirmación se pueda leer sin volver atrás.

Icono de 15px con trazo de 2 en currentColor, separado 8px del texto. A la izquierda si describe la acción (más, guardar); a la derecha si indica dirección o consecuencia (descargar, abrir, siguiente). El icono nunca lleva color propio.

Un botón de solo icono necesita aria-label obligatorio y se reserva para acciones universalmente reconocibles (más, cerrar, buscar). No se usa solo icono para acciones propias del dominio: nadie sabe qué icono significa "emitir DTE".

Fondo --line, texto --ink-soft, cursor de prohibido, sin efecto al pasar el cursor. Se usa el atributo disabled real, no una clase: un botón que parece apagado pero se puede pulsar es un error de conducta, no de estilo.

Se usa mientras falte algo que el usuario puede arreglar en la misma pantalla, y el motivo va escrito al lado o bajo el botón. Si el motivo no cabe, es mejor dejar el botón activo y explicar el error al pulsarlo, que dejarlo apagado sin explicación.

El icono se reemplaza por un aro de 14px que gira, y la etiqueta pasa al gerundio ("Enviar" pasa a "Enviando"). Marcado con aria-busy="true". El botón conserva su ancho para que la fila no salte, y queda inactivo mientras dura.

Se usa cuando la acción tarda más de medio segundo y ocurre en el sitio (guardar, enviar, firmar). No se usa para cargas de página completa, que llevan esqueleto (C58). Con movimiento reducido activado, el aro gira mucho más lento en vez de detenerse, porque hay que seguir viendo que algo pasa.

El sistema define dos tamaños, el estándar y el chico. El grande es propuesta y solo tiene sentido en portadas.

Los tres tamaños no se mezclan en la misma fila. Si una fila necesita un botón más grande que otro para que se note cuál importa, el problema es de jerarquía y se arregla con C19 y C21, no con el tamaño.

De toda esta familia, el sistema tiene una sola pieza: el campo de texto. Casilla, radio, interruptor, desplegable, buscador y control segmentado son propuestas. Todas comparten el mismo esqueleto: borde de 1px en --line, radio de 2px, papel elevado de fondo, etiqueta arriba de 12px con peso 500, y nunca marcador de campo dentro del campo haciendo de etiqueta.

Etiqueta arriba, siempre visible, unida al campo con for e id. Relleno 10px por 14px, cuerpo de 14px (el mismo del texto, no más chico), fondo de papel elevado para que se distinga del papel de la página. Al recibir el foco el borde toma el acento y aparece un anillo de 3px al 12%.

La etiqueta nunca va dentro del campo: el marcador de campo desaparece al escribir y deja al usuario sin saber qué está llenando. Si hace falta un ejemplo de formato, va en el texto de ayuda (C38).

Borde rojo, anillo de foco rojo, y el mensaje bajo el campo en 11,5px enlazado con aria-describedby más aria-invalid="true". El color no es la única señal: el mensaje escrito lo es, porque el rojo solo no funciona para quien no lo distingue.

El error aparece al salir del campo o al enviar, nunca mientras se escribe la primera vez. El mensaje dice qué pasó y cómo se arregla, no "Campo inválido". Se quita apenas el valor deja de estar malo.

Son dos cosas distintas y se ven distinto a propósito. Deshabilitado conserva la caja pero apaga el texto: el dato es editable en principio, hoy no. Solo lectura pierde la caja y queda como un dato subrayado por una línea de 1px: no es un campo, es un valor que ocupa el lugar de un campo para que el formulario no se desalinee.

Solo lectura se prefiere para datos calculados o asignados por un tercero, porque se puede seleccionar y copiar. Deshabilitado se reserva para lo que se desbloquea con otra decisión del propio formulario.

Mismo borde y mismo relleno que el campo de texto, alto mínimo de 88px, interlineado 1,5 y redimensionado solo vertical. Nunca se deja crecer a lo ancho: romper la columna del formulario desordena todo lo que hay al lado.

Se usa cuando la respuesta esperada tiene más de una frase. Si el dato cabe en una línea (un nombre, un folio), va campo de texto: un área grande le dice al usuario que escriba mucho.

Es un select nativo con el mismo borde y relleno del campo de texto; solo se reemplaza la flecha del sistema por un triángulo dibujado con dos degradados, para que se vea igual en los dos temas y en cualquier navegador. Se abre con el menú nativo del dispositivo, que en móvil es mejor que cualquier menú propio.

Se usa de cinco opciones para arriba. Con dos o tres va control segmentado (C35) o radio (C33), que muestran todas las opciones sin abrir nada. Con más de veinte va buscador (C36).

Casilla nativa de 15px teñida con accent-color: var(--accent), alineada con la primera línea del texto y separada 9px. La etiqueta entera es clickeable porque el input va dentro del label. La explicación opcional va debajo, en 11,5px apagado.

Se usa para opciones independientes entre sí, y para el sí o no de una sola cosa cuando el formulario se confirma con un botón. No se usa para activar algo al instante: eso es interruptor (C34).

Misma anatomía que la casilla, forma redonda y agrupado en un fieldset con legend, que es lo que le dice a un lector de pantalla que las opciones son entre sí. Siempre una viene marcada por omisión: un grupo de radios en blanco obliga a elegir sin decir cuál es lo normal.

Se usa de dos a cuatro opciones excluyentes que conviene ver todas juntas. Con más, o con opciones largas, va desplegable (C31).

Pista de 36 por 20 con radio de píldora (la excepción a la regla de los 2px, junto con el chip de sesión), borde de 1px, botón interior de 14px. Encendido toma el acento. Por dentro es una casilla nativa escondida, así que el teclado y los lectores de pantalla lo entienden sin ayuda.

Se usa cuando el cambio surte efecto de inmediato y no hay botón de guardar. No se usa dentro de un formulario que después se confirma: ahí el usuario no sabe si ya quedó guardado. La etiqueta nombra el estado encendido, en positivo, nunca una negación.

Fila de botones de 32px unidos por bordes de 1px dentro de una caja con radio de 2px. El elegido va en tinta plena invertida. Existe hoy una versión local en la tarjeta de entrada de la guía (.lgseg, para elegir entre entrar y crear cuenta), pero no está en el sistema y esa se pinta con el acento en vez de la tinta.

Se usa para dos a cuatro opciones cortas y excluyentes que cambian una vista al instante: periodo, unidad, orden. No se usa como navegación entre páginas (eso es pestañas, C08) ni con etiquetas largas: si no cabe en una palabra o dos, va desplegable.

Caja de 38px con la lupa de 15px a la izquierda en tinta suave y el atajo de teclado a la derecha en mono. El anillo de foco se aplica a la caja entera con :focus-within, no al campo de adentro, porque el campo no tiene borde propio.

Es el único control que puede ir sin etiqueta visible, porque la lupa ya lo dice, pero lleva aria-label igual. Va arriba a la derecha de la lista que filtra, no en la barra, salvo que la búsqueda sea global al sitio.

Caja pegada al campo, en mono de 12,5px sobre papel de página, sin borde entre las dos y con el radio solo en los extremos exteriores. El prefijo es una constante que el usuario no escribe ni borra: la moneda, el protocolo, el arroba.

Se usa para quitarle tecleo al usuario y quitarle formato al validador. No se usa para unidades que cambian según la opción elegida: eso va como desplegable pegado al campo, no como prefijo fijo.

Los dos van bajo el campo, en 11,5px: la ayuda en tinta apagada, el error en rojo con un punto delante que hace de señal no cromática. Nunca conviven los dos: cuando aparece el error, la ayuda se va, porque dos líneas bajo un campo se leen como una sola cosa confusa.

La ayuda es permanente y explica el formato antes de que el usuario se equivoque. El error es temporal y explica cómo salir. Ninguno de los dos se pone en un globo emergente: si el dato hace falta para llenar el campo, tiene que estar visible sin interacción.

La misma escala de estados vale para todos los controles de esta sección, incluidos casilla, radio, interruptor y desplegable: el borde comunica el estado, el fondo comunica si se puede editar, y el texto en tinta suave comunica que no se puede tocar.

Cuatro usos del mismo panel: acciones sobre un objeto, cuenta, menú contextual y submenú. Ninguno existe hoy en el sistema. Todos comparten el panel de C04: borde de 1px en --line-strong, sin sombra, sin radio, elementos de 13px con relleno 7px por 13px y --accent-soft al pasar el cursor.

Se abre desde el botón de tres puntos, siempre alineado al borde del objeto sobre el que actúa. Los elementos son verbos en infinitivo, la acción destructiva va última y separada por una línea, y los atajos de teclado van a la derecha en mono.

Se usa para acciones sobre un objeto de una lista o de un encabezado. No se usa para navegar ni para esconder la acción principal: lo que se hace siempre va como botón visible, y el menú guarda lo demás. Con menos de tres acciones no vale la pena el menú.

Cuelga del chip de sesión de la barra, que ya es una píldora con borde de 1px, y se alinea a la derecha. Encabeza con la ficha de quien está dentro (nombre completo y correo, porque en un grupo con varias cuentas eso es lo que se viene a comprobar) y cierra con salir, separado.

Es el único menú que puede llevar avatar. No se usa para acciones de la página, ni para cambiar de empresa si eso reordena todo el contenido: cambiar de contexto merece su propio selector visible, no un elemento escondido en el menú personal.

Es el mismo panel de C40 abierto con el botón derecho sobre una fila. Encabeza con el objeto apuntado en mono versalita, para que quede claro sobre qué va a actuar: es la diferencia con el menú de acciones, que ya está anclado visualmente a su fila.

Se usa solo en pantallas de trabajo con listas densas, y siempre como atajo de algo que también se puede hacer por otro camino. Nunca es el único acceso a una acción: en móvil no hay botón derecho.

Un solo nivel de profundidad, abierto al pasar el cursor o al recibir el foco (con :focus-within, para que el teclado llegue), con un triángulo a la derecha del elemento padre. El panel hijo sale por el costado, pegado al borde y alineado con el elemento.

Se usa cuando una acción tiene variantes del mismo verbo, como exportar en tres formatos. No se usa con dos niveles, ni para meter navegación, ni cuando el submenú tiene más de cinco elementos: eso ya es un diálogo. Si te hace falta un tercer nivel, el menú está haciendo el trabajo de una página.

Acá está la regla más característica de la casa: lo que separa es el borde de 1px, no la sombra. La única sombra del sistema es la de la tarjeta de entrada y la del diálogo, y existe porque esos dos flotan de verdad sobre el resto. Todo lo demás se distingue por borde y por fondo.

Borde de 1px y barra de color de 3px pegada al canto izquierdo, que crece a 5px y se satura al pasar el cursor, mientras la tarjeta sube un píxel. El color sale de --card-color, que por omisión es el acento de la marca y se puede cambiar por tarjeta para distinguir familias. Orden fijo dentro: icono, etiqueta en mono, título, descripción, enlace de cierre pegado abajo.

La tarjeta entera es el enlace, no solo el título: por eso es un a con display:flex y por eso el enlace de cierre no lleva href propio. No se usa para contenido que no lleva a ninguna parte, que va en panel (C46).

Borde superior de 4px en el color de la familia y un encabezado con línea doble bajo el texto, en mono versalita. La línea doble es una cita tipográfica de la prensa impresa y es el único lugar del sistema donde aparece.

Se usa una sola vez por página, para lo que hay que leer primero. No se usa en rejilla junto a otras iguales: si hay tres destacadas, no hay ninguna.

Tres franjas separadas por bordes de 1px: encabezado con título de 13px y sitio para una etiqueta o una acción; cuerpo; pie con los botones alineados a la derecha. Sin barra de color al canto (esa es de la tarjeta), sin sombra, sin radio.

Es el contenedor de trabajo por omisión en paneles internos: agrupa un conjunto de datos que se leen y se editan juntos. No se usa como enlace ni anidado dentro de otro panel; si hace falta anidar, lo de adentro va como lista de definición (C49) o tabla (C48).

Se hace con details y summary nativos: cero JavaScript, funciona con teclado sin escribir una línea y el contenido cerrado igual existe para el buscador del navegador. El marcador del sistema se oculta y se reemplaza por un más que pasa a menos, en mono.

Se usa para preguntas frecuentes y para detalle opcional que la mayoría no necesita. No se usa para esconder contenido importante ni para partir un formulario largo, donde el usuario tiene que poder ver todo lo que le van a preguntar.

Encabezados en mono versalita de 10,5px sobre una línea de 1px en tinta fuerte; filas separadas por líneas de 1px en --line. Sin bordes verticales, sin filas cebra, sin fondo. Las columnas de cifras llevan class="num", que las alinea a la derecha y les pone mono con cifras tabulares para que los dígitos se apilen.

En móvil la tabla se desplaza dentro de su propia caja con overflow-x: auto: la página nunca se desplaza a lo ancho. No se usa tabla para maquetar: si no son datos con columnas comparables, es una lista de definición (C49).

Rejilla de dos columnas: el término a 170px en mono versalita apagado, el valor en tinta plena, y una línea de 1px bajo cada par. Es la forma de mostrar los datos de un objeto, donde la tabla sería una tabla de una sola fila dada vuelta.

Bajo 640px las dos columnas se apilan y el término queda sobre su valor. No se usa para pares editables: si el usuario puede cambiarlos, es un formulario con campos de solo lectura (C29).

Cuatro tonos con la misma forma: borde de 1px, barra izquierda de 3px en el color del tono, fondo teñido al 8% del mismo color e icono a la izquierda. Nunca el color solo: el icono cambia de forma entre los cuatro y el texto empieza con la frase que resume, en negrita, para que se entienda sin ver colores.

El aviso va donde ocurre el hecho, no arriba de todo. El de error dice qué falló y qué hacer, y no desaparece solo. El de éxito sí se puede ir a los pocos segundos, salvo que traiga un dato que el usuario necesite copiar, como un folio.

Ancho máximo 400px, velo de tinta al 45%, y la única sombra del sistema junto con la tarjeta de entrada: --shadow-modal. Marcado como role="dialog" con aria-modal y título enlazado. El foco entra al diálogo, se queda dentro mientras está abierto y vuelve al botón que lo abrió al cerrarse. Escape cierra; el botón destructivo nunca es el que recibe el foco al abrir.

Se usa para confirmar algo irreversible o para una tarea corta que no merece página propia. No se usa para formularios largos, ni encadenado con otro modal, ni para mostrar errores que caben en un aviso (C50).

Panel de 290px anclado al borde derecho, con borde izquierdo de 1px en tinta fuerte y la misma anatomía del panel: encabezado con cerrar, cuerpo, pie con acción. Entra deslizándose y respeta prefers-reduced-motion. Lleva el mismo velo que el modal y las mismas reglas de foco.

Se usa para ver el detalle de un elemento sin perder la lista que hay detrás: inspeccionar una factura mientras se revisa el mes. No se usa para confirmar (eso es modal), ni para navegación principal, ni si el detalle es tan grande que merece su propia dirección web: si el usuario va a querer compartir el enlace, es una página.

Piezas chicas que informan sin pedir nada. Ninguna es clickeable salvo el chip, y ninguna lleva sombra. La etiqueta y la cifra destacada ya existen; el resto es propuesta.

Mono versalita de 10,5px con tracking 0,08em, relleno 3px por 8px, fondo --accent-soft y borde al 25% del acento. Sin radio: es un rectángulo, como todo lo demás.

Clasifica: dice a qué familia pertenece algo. No se usa para estado (eso es C54) ni para acciones. Una por objeto, dos como máximo; una fila de cinco etiquetas no clasifica nada.

Misma forma que la etiqueta, teñida con los tokens de estado: verde --ok, ámbar --warn, rojo --err, y el acento para lo neutro. Fondo al 10%, borde al 30%. La palabra siempre está: el color acompaña, no reemplaza.

Para estados de servicio o de conexión, donde la palabra ya se repite en cada fila, sirve la variante de punto de 7px más texto. No se usa el punto solo, sin palabra, en ningún caso.

Píldora con borde de 1px y 12px de cuerpo. Es la segunda excepción al radio de 2px, junto con el interruptor, y hereda la forma del chip de sesión de la barra, que ya está en el sistema (.gr-login__user).

Se usa para filtros aplicados que se pueden quitar uno a uno, y para representar a una persona. La cruz de quitar necesita etiqueta accesible propia. No se usa como etiqueta de clasificación (C53), que no se quita, ni como botón.

Píldora de 18px de alto con la cifra en mono de 10px. Rojo cuando pide atención de verdad (algo sin leer, algo que vence), gris --line cuando solo informa cuántos hay. Sobre 99 se escribe 99+.

Se usa pegado al nombre de la sección que cuenta. No se usa en rojo para cosas que no requieren acción: un contador rojo permanente deja de significar algo a la semana.

Riel de 6px sin radio, fondo --line, relleno en el acento. Encima, dos datos en mono de 10,5px: qué se está haciendo a la izquierda y cuánto va a la derecha, en unidades reales (18 de 24), no en porcentaje solo.

Se usa cuando el proceso tiene un final medible y dura más de unos segundos. Si no se sabe cuánto falta, no se usa una barra falsa: va el aro que gira de C25. No se usa para representar cuotas ni proporciones, que son un gráfico, no un indicador de proceso.

Bloques grises con un brillo que recorre de izquierda a derecha, con la forma y el tamaño del contenido que va a llegar: título más ancho, líneas de texto más angostas hacia el final. Con movimiento reducido activado, el brillo se detiene y quedan los bloques quietos.

Se usa en la primera carga de una vista, cuando se sabe qué forma va a tener el resultado. No se usa si el resultado puede venir vacío (queda un esqueleto que promete algo que no llega) ni para recargas de datos que ya están en pantalla, donde es mejor dejar el dato viejo y atenuarlo.

Caja con borde punteado de 1px (el único punteado del sistema, y sirve justo para decir "acá va a haber algo"), icono en tinta suave, título de 14px, una frase de explicación y la acción que resuelve el vacío.

Se distinguen tres vacíos y no se escriben igual: nunca hubo nada (se explica qué va a aparecer y se ofrece crear), el filtro no encontró nada (se ofrece limpiar el filtro), y falló la carga (eso es un aviso de error, C50, no un estado vacío). Nunca se deja una lista vacía sin texto.

Caja con borde de 1px, cifra en mono de 26px con peso 700 y tracking negativo, etiqueta abajo en mono versalita apagada. La cifra va arriba y la etiqueta abajo, no al revés: lo que se compara de un vistazo es la cifra.

Es la voz de cochid aplicada a cualquier sitio del grupo. Se usa en filas de tres o cuatro, con la misma unidad entre ellas. No se usa suelta ni con textos largos donde la cifra tenga que achicarse para caber: si no cabe en mono a 26px, no es una cifra destacada.

Dos familias y ninguna más: IBM Plex Sans para todo lo que se lee, JetBrains Mono para cifras, código, antetítulos y etiquetas. Las dos se sirven desde el host de estilo de la marca, nunca desde un CDN. La regla que las ordena: mono es la voz secundaria, la que rotula y numera, nunca la que narra.

Cuatro niveles y el cuarto cambia de familia: 32px peso 800 con tracking -0,03em para el título de página, 22px peso 700 para sección, 17px peso 700 para bloque, y el cuarto nivel en mono versalita de 10,5px. Ese salto a mono es el que evita tener seis tamaños de sans casi iguales.

Un solo título de primer nivel por página. Los niveles no se saltan al bajar, y el énfasis dentro de un título va por color (h1 em toma el acento), nunca en cursiva.

15px con interlineado 1,6 y ancho máximo de 68 caracteres. Ese ancho es la regla dura: una línea más larga se pierde al saltar de renglón. El cuerpo de la interfaz es más chico (14px con 1,45) porque se ojea, no se lee seguido.

Se usa en documentos, notas, descripciones largas y cualquier lugar donde haya párrafos seguidos. No se usa en tablas, tarjetas ni formularios.

Cuatro escalones bajo la prosa y ninguno más. El límite es 11,5px: por debajo el texto deja de ser legible en pantalla y se convierte en decoración. El texto chico va casi siempre en --ink-muted, porque achicar y apagar a la vez es lo que lo manda al segundo plano sin esconderlo.

No se usa para información que hace falta para decidir: si un dato es chico y apagado, el usuario asume que puede ignorarlo, y va a tener razón.

Toda cifra que se compara o se copia va en JetBrains Mono con cifras tabulares (tnum), alineada a la derecha si está en columna. Los dígitos ocupan lo mismo, así que las unidades se apilan y el ojo compara magnitudes sin leer.

Aplica a montos, RUT, folios, fechas en formato corto, coordenadas y porcentajes. No aplica a cifras dentro de una frase ("tres documentos", "el año 2026"), que van en sans como el resto del texto.

Barra izquierda de 2px en tinta fuerte, sangría de 16px, cuerpo de prosa y ancho máximo de 64 caracteres. Sin comillas dibujadas, sin cursiva, sin cuerpo agrandado: la barra ya dice que es una cita. La fuente va debajo, en mono versalita.

Se usa para texto de un tercero citado literalmente. No se usa para destacar frases propias, que es el trabajo de la tarjeta destacada (C45) o del antetítulo (C67).

En línea: mono de 12px con fondo de papel de página y borde de 1px, para que se despegue del párrafo sin cambiar el interlineado. En bloque: mono de 12px sobre --surface-inverse, que es el único fondo oscuro que el sistema usa dentro de una página clara, con desplazamiento horizontal propio.

Se usa para rutas, comandos, nombres de clase y de token. No se usa para destacar palabras que no son código: un nombre de producto en caja de código se lee como un identificador técnico.

Mono versalita de 11,5px con tracking 0,18em en el acento, sobre el título y pegado a él. Es el patrón firma del grupo: aparece en portadas, encabezados de sección y tarjetas. La variante apagada (.eyebrow--muted) se usa cuando ya hay demasiado acento alrededor.

Dice de qué familia es lo que sigue, en dos o tres palabras. No se usa como título en sí mismo, ni con frases largas: el tracking de 0,18em hace ilegible cualquier cosa de más de cuatro palabras.

Diez reglas que no son de ningún componente en particular y valen para todos. Están numeradas T01 a T10 para poder discutirlas por separado de las piezas.

Ocho escalones: 8, 12, 16, 24, 32, 40, 48 y 56. No hay valores intermedios, y los números sueltos (10px, 18px, 22px) son la señal de que alguien improvisó. Los tres primeros son separación dentro de un componente; del cuarto para arriba, separación entre componentes y entre secciones.

La regla que hace legible una pantalla no es cuánto espacio hay, sino que lo relacionado esté más junto que lo no relacionado. Una etiqueta a 6px de su campo y a 24px del campo siguiente se lee sola; los mismos 14px en ambos lados obligan a leer para entender qué va con qué.

Tres valores y ninguno más. Cero en superficies: tarjetas, paneles, avisos, tablas, menús, modales, botones. 2px en controles que reciben texto o selección: campos, desplegables, control segmentado. Píldora en exactamente dos casos: el chip de sesión y el interruptor.

Acá está la discrepancia que hay que zanjar: v7/base/tokens.css declara --radius-ctl: 6px, y tanto la guía como esta vitrina dibujan los controles en 2px. Mientras el repositorio no se corrija, cualquier sitio que consuma v7 va a mostrar controles de 6px junto a superficies rectas, que es justo la mezcla que la regla quiere evitar. Es un cambio de una línea en el repositorio de origen.

El separador dominante del sistema es el borde de 1px. La jerarquía se construye con dos recursos: el color del borde (--line para lo normal, --line-strong para lo que manda) y el fondo (--paper para la página, --paper-raised para lo que se levanta). La sombra no participa.

Solo dos piezas llevan sombra, y las dos flotan de verdad sobre el resto: la tarjeta de entrada y el diálogo, ambas con --shadow-modal. Todo lo demás tiene --shadow: none. Una tarjeta con sombra en este sistema se ve prestada de otro.

Tres densidades, y un dominio elige una y no la cambia entre páginas. Lo que cambia entre ellas es el espacio (relleno de la barra, alto de fila, separación entre bloques), no el tamaño de la letra, que baja como mucho medio punto. Achicar la letra para apretar es lo que vuelve ilegible un panel.

La densa está pensada para pantallas de trabajo donde el usuario pasa horas y compara filas. La amplia, para páginas que se visitan una vez. Si dudas, es la estándar.

Siete reglas que valen para todo: contorno de 2px en el acento con :focus-visible y nunca outline: none sin reemplazo; salto al contenido como primer elemento del cuerpo (C10); todo control tiene etiqueta, y si no es visible va aria-label; el color nunca es la única señal (los cuatro avisos cambian de icono, los estados llevan palabra); área táctil mínima de 34px; el foco entra y se queda dentro del modal y del cajón, y vuelve al disparador al cerrar; prefers-reduced-motion se respeta en las tres animaciones que hay.

Lo que falta decidir es el foco del campo de texto: components.css le quita el contorno y lo reemplaza por borde de acento más anillo de 3px al 12%, mientras la tarjeta de entrada usa contorno de 2px. Conviven dos gramáticas de foco en el mismo sistema. Propuesta: el anillo se queda solo para campos (dice "acá se escribe"), el contorno de 2px para todo lo demás.

El orden de arriba abajo es siempre el mismo: antetítulo, título, bajada, contenido, acciones. Las acciones van al final del bloque al que pertenecen, alineadas a la derecha en diálogos y paneles, a la izquierda en formularios de página.

Cuando hay dos acciones, la principal va a la derecha y la alternativa a su izquierda. Lo destructivo se separa del resto, con espacio o con una línea, para que no se pulse por inercia. El orden del código es el orden visual: nada se reordena solo con CSS, porque el teclado sigue el código.

Cinco cortes y ninguno más. El principio: en móvil no se achica, se reordena. El namebrand no se encoge hasta desaparecer, se va de una vez y queda la marca; la tabla no se apila en tarjetitas, se desplaza dentro de su caja; los menús no se convierten en tiras de iconos, se apilan.

Lo que nunca pasa: que la página se desplace a lo ancho. Todo lo ancho (tablas, bloques de código, diagramas) lleva su propio overflow-x: auto. Y las áreas táctiles no bajan de 34px, que es el alto del toggle de tema y de la hamburguesa.

La página es papel y tinta. El color aparece por excepción y siempre significa algo: el acento marca estado activo, foco y pertenencia de marca; los tres de estado (verde, ámbar, rojo) solo aparecen en avisos, insignias y errores. El acento cambia por marca (navy en CIS, azul en cochid, tinta en CDS) y por eso ningún componente lo escribe en duro: sale de --accent.

Los tres colores de estado no cambian por marca, porque no son identidad sino semáforo. En tema oscuro, el acento de CIS pasa de navy a verde claro: cualquier componente que dé por hecho un acento oscuro se rompe, y por eso los textos sobre acento se escriben con la regla de tema, no con #fff fijo.

Tres duraciones y ninguna más: 0,12s para respuesta inmediata (color de botón, borde), 0,15s para lo normal (bordes de tarjeta, fondos), 0,2s para lo que crece (la barra de la tarjeta). Todo con la curva por omisión. No hay entradas animadas, ni desplazamientos suaves, ni aparecidos al hacer desplazamiento.

Solo se animan propiedades baratas: color, fondo, borde, opacidad, y como mucho un translateY de un píxel. Las tres animaciones continuas del sistema (el aro que gira, el brillo del esqueleto y el desplazamiento del cajón) respetan prefers-reduced-motion.

Las seis primeras salen de core-style/CONTRACTS.md y de la sección 11 de la guía; las cinco últimas son las reglas de forma y de lengua que se aplican a todo lo que se escribe.

Cinco cosas que esta vitrina deja planteadas y no puede resolver sola.

Sin verificar en pantalla. No hay navegador en el servidor: esta página no la ha mirado nadie. El anidamiento está validado con el analizador de HTML de Python, y los dos temas están escritos, pero cómo se ve de verdad (sobre todo el modal, el cajón y el menú desplegable) queda por confirmar en tu pantalla.