Compañíade Innovaciónde Santiago

Convenciones · 2026-08-09

Convenciones y variantes

Diez reglas que no dependen de la marca. Cada una con las variantes entre las que se eligió, la que quedó y por qué. Lo que sigue abierto va marcado.

Cerradas

  • T01 separación · T02 activo · T06 densidad
  • T07 textura · T08 temas · T09 epígrafe · T10 namebrand

Abiertas

  • T03 el radio · el token dice 6px y todo se dibuja con 2px
  • T04 la voz del botón · cinco variantes vivas
  • T05 el foco · dos gramáticas distintas conviviendo

T01

Cómo se separa una cosa de otra

T01Separacióncerrada
Borde completo de 1px

Elegida · borde 1px

Sombra

Prohibida

Franja lateral

Prohibida

Un borde de 1px en el color de línea, y nada más. La sombra queda fuera porque no existe en los dos temas: lo que en claro lee como elevación, en oscuro desaparece contra el papel. La franja lateral queda fuera porque gasta el color de marca en decorar un canto, y hoy sigue viva en el kit como .card::before: esa es la decisión T3 de la página de elegir.

T02

Cómo se marca dónde estás

T02El activocerrada

Elegida · subrayado 2px

Descartada · negrita

Descartada · fondo

Subrayado de 2px en el acento. La negrita cambia el ancho del texto, así que la barra se mueve al navegar. El fondo compite con los botones, que son lo único que debe leerse como pulsable. En el índice lateral de esta página la misma regla se aplica de canto: una regla de 2px a la izquierda, transparente cuando no toca, para que el texto tampoco salte.

T03

Cuánto se redondea una esquina

T03El radioabierta

2px · lo dibujado

6px · lo que dice el token

Píldora · descartada

Sin resolver, y es una línea de código. --radius-ctl vale 6px en v7/base/tokens.css, pero la guía y todas las vitrinas dibujan 2px. Mientras no se corrija, cualquier sitio que consuma el kit sale con 6. La píldora sí está descartada: Martín la rechazó el 9 de agosto viéndola en el botón «Hablemos» de la barra amplia.

T04

Con qué voz habla un botón

T04La voz del botónabierta

v1 · tinta llena

v2 · versalita

v3 · contorno

v4 · acento lleno

Cuatro voces vivas en producción al mismo tiempo. El kit usa tinta llena, el catálogo usa versalita, circulodesantiago.cl usa contorno y Periodismo2 vive fuera del sistema con su propio rojo. Elegir una no es cosmético: define si la jerarquía la marca el relleno o el color. Las cinco variantes completas, con sus siete estados cada una, están en variantes de controles.

T05

Cómo se ve el foco del teclado

T05El focoabierta

En campos

En la tarjeta de entrada

Dos gramáticas distintas para lo mismo. Los campos usan un anillo de 3px pegado al borde; la tarjeta de entrada usa un contorno de 2px separado 2px. Además la regla está escrita a mano en catalogo.css y en firmas.css por separado, y no en v7/base, que es donde tendría que vivir una sola vez. Cualquiera de las dos sirve; lo que no sirve es que haya dos.

T06

Cuánto aire lleva una barra

T06Las densidadescerrada
compacta8px

Paneles y bandejas

estándar14px

La única que existe hoy

amplia22px

Portadas de entidad

Un dominio elige una densidad y no la cambia entre páginas. Hoy el kit define solo la estándar; la compacta y la amplia son propuestas y entrarían como dos modificadores. La regla que sí está cerrada es la de arriba: mezclar densidades dentro de un mismo sitio hace que la barra parezca saltar al navegar.

T07

Cuánta marca lleva un fondo

T07La texturacerrada

Elegida · un juego centrado

Descartada · patrón que teja

Un solo juego de anillos concéntricos, centrado detrás de la pieza. Al repetirse hasta el borde, la marca cubre la misma superficie que la tarjeta y compite con ella: se vuelve papel mural. Un juego centrado enmarca. Y la textura es del grupo, no de cada marca: entre marcas cambian el lockup y el acento, nunca la textura.

T08

Cómo se resuelve el tema

T08Los dos temascerrada
Claro por defecto

:root

Oscuro del sistema

prefers-color-scheme

Oscuro elegido

data-theme gana

Tres estados, y el botón es la única puerta. Claro en :root, oscuro si el sistema lo pide, y data-theme explícito que gana sobre los dos. Un guion en línea estampa el tema guardado antes de pintar, para que no haya parpadeo. Consecuencia dura: una página sin el conmutador de la barra deja al usuario encerrado en el tema de su sistema. No es una falta estética, es una página sin salida.

T09

Con qué voz habla lo pequeño

T09La voz del epígrafecerrada el 9 de agosto
Sección 3 · marcas

Elegida · Plex Sans Condensed

Sección 3 · marcas

Antes · JetBrains Mono

Plex Sans Condensed 600, versalita, tracking 0,14em. Va en epígrafes, separadores, etiquetas, fechas y rótulos de columna. JetBrains Mono se retira de ese oficio y queda solo para código, rutas e identificadores, que es para lo que se diseñó: en un epígrafe de cinco palabras se leía como terminal.

T10

Cuándo puede ir sola cada pieza de la marca

T10El namebrandcerrada
Compañía
de Innovación
de Santiago

· marca y nombre

· la marca sola

Compañía
de Innovación
de Santiago

No · el nombre solo

El namebrand nunca va solo; la marca sí. La marca sola vale para favicon, avatar y sello. El nombre sin marca no vale nunca, y por eso en móvil el salto es directo del lockup completo a la marca sola: cuando el nombre no cabe, desaparece, no se queda huérfano.

Dónde sigue

Lo que falta

Tres convenciones siguen abiertas y las tres son de la misma familia: T03 el radio, T04 la voz del botón y T05 el foco. Las tres se resuelven en la misma pasada, porque tocan el mismo archivo del kit y porque elegir el relleno del botón condiciona cómo se ve su foco.

Ir a elegir · Ver las cinco variantes completas de controles