Componentes
Guía de estilo
Todo lo decidido hasta el 5 de agosto de 2026, en un solo documento: identidad, marcas, namebrand, jerarquía, barra, pie, entrada, tipografía y las reglas duras. Es la propuesta, no lo que está aplicado. Lo que se sirve hoy sigue siendo v7 sin estos cambios.
1 · Identidad
Tres sociedades y un sistema personal. El parentesco importa porque decide qué dice el pie de cada sitio.
Círculo de Santiago SpA · RUT 78.372.913-K
Matriz. No opera nada por sí misma. Sus filiales son CIS y cochid.
Compañía de Innovación de Santiago SpA · RUT 78.384.591-1
Operadora. Filial de CDS. Opera el servidor y todos los servicios del grupo, propios y de su hermana.
Compañía Chilena de Inteligencia de Datos SpA · RUT 78.374.391-4
Empresa propia. Filial de CDS, hermana de CIS, operada por CIS. No es un proyecto de CIS.
2 · Marcas
Tres marcas, una por entidad. No se inventan marcas de producto: un producto usa la de quien
lo opera. Fuente: core-style/v7/brands/*/mark.svg.
CIS · dos anillos
Anillo exterior fino y anillo interior grueso. r92 sw4 más
r56 sw18 sobre lienzo 200, en currentColor.
CDS · un anillo
Un círculo de contorno, r10 sw2 sobre lienzo 24. Nunca relleno.
cochid · cuadrado
Cuadrado azul #1d4ed8 relleno, sin esquina redondeada. Nunca en contorno.
La marca puede ir sola. El namebrand no.
La marca sola vale para favicon, avatar, sello y para el degradado en móvil cuando el namebrand no cabe. El namebrand nunca aparece sin su marca.
Variante de tamaño chico
Bajo unos 32 píxeles, el trazo canónico de 4 sobre un lienzo de 200 renderiza menos de medio píxel y
desaparece. Para esos usos existe la variante engrosada: sw 8 y sw 26.
3 · Namebrand de entidad
El nombre de la entidad tratado como marca. Tres formas autorizadas por entidad: apilada, una línea y vertical.
CIS
M01 · apilada
barra y uso general
M04 · una línea
papelería y firmas
M05 · vertical
login y portadas
CDS · caja normal, peso 800, tracking −0,02em
M10 · apilada
M24 · una línea
equivale a M04
M13 · vertical
Compañía Chilena de Inteligencia de Datos
M15 · apilada
M17 · una línea
equivale a M04
M18 · vertical
4 · Co-brand: entidad más producto
El comportamiento por defecto de todo producto. La marca la pone la entidad; el producto pone su nombre.
[marca y namebrand de la entidad] │ [wordmark del proyecto]
M22. El nombre del producto nunca repite el de la entidad: "Catálogo", no "Catálogo CIS".
M23 · producto arriba, entidad como bajada
Cuando el producto tiene nombre propio fuerte. La bajada va en la misma tipografía que el resto, solo más chica: no cambia de familia.
5 · Wordmark de proyecto
Los proyectos llevan su nombre con tratamiento propio: una palabra en peso 800 partida por color, y el dominio más chico y apagado si el producto se conoce por él. Es lo que ya hace usaia.cl.
la costura marca el significado
compuesto real
el sufijo es la costura
dos palabras: acento en la segunda
nombre propio
palabra corta, va entera
proyecto de cochid
proyecto de cochid
proyecto de cochid
tpte, falta crearlo
graphs
nombre en inglés, pendiente
Periodismo2 es la excepción
Va sin la marca de CIS en la barra. En su lugar, la marca de la Compañía convertida en antena, con el anillo interior en rojo. Cuatro propuestas en Namebrand. La atribución a CIS sigue existiendo, pero solo en el pie.
periodismo26 · Jerarquía y topología
Ocho clases. La clase de un dominio decide qué chrome le toca. El detalle dominio por dominio está en Taxonomía, y la topología con rutas en Mapa.
| Clase | Qué lleva en la barra | Ejemplos |
|---|---|---|
| Entidad | Marca más namebrand de la entidad, sin nombre de producto | innovacionsantiago.cl · circulodesantiago.cl · cochid.cl |
| Proyecto | Co-brand M22 con wordmark de proyecto (W01) | usaia · Periodismo2 · indieweb · Firmas y Documentos · Situación · Claudia · lex · congreso · elecciones · scribe · ciudad · tpte · graphs |
| Subsitio | Lockup del padre más una palabra, sin estilo especial | apps · idea · mkt de indieweb · prosa.cochid · mando · admin y api de Periodismo2 |
| Sitio de la entidad | Solo el lockup de la entidad, sin namebrand propio | catálogo · isométrico · archivo · wiki · panel · datos · mapas · economía · bici |
| Muestra | Nada. No lleva estilo del sistema | jeopardy · cis.innovacionsantiago · nuevo.circulodesantiago · cds.circulodesantiago · tmp |
| Personal | Sistema illanes00, ajeno al grupo | polymarket · viaje · mundial · prosa · thesis · scribe de illanes00 |
| Infraestructura | Nada. Sin público. Si tiene pantalla, hereda el lockup de su entidad | api · core · broker · mail · errores · registros · vpn · estilo · teselas |
| Fuera de producción | Se retira | LIBRO, en sus dos dominios |
7 · Barra
Un solo esqueleto para todo el grupo. Cambia la marca por dominio, no la estructura.
| Concepto | Valor |
|---|---|
| Marca en barra | 30px en CIS y CDS · 26px en cochid |
| Separación marca y namebrand | gap: 10px |
| Namebrand | IBM Plex Sans 800 · 11,5px · line-height .96 · letter-spacing .02em · versalitas (CDS en caja normal) |
| Alto | padding: 14px vertical |
| Degradado en móvil | Cuando el namebrand no cabe, desaparece y queda la marca sola. No hay estado intermedio achicado |
| Sesión | Chip con foto y nombre de pila; iniciales sobre el acento si no hay foto |
<cis-navbar> colgaba el navegador con un bucle infinito. El único JS de sistema
es el cambio de tema, con guarda de una sola vez.8 · Pie
Cuatro franjas, en este orden: el bloque de marca con su lema, las columnas de navegación, la línea societaria y la base legal. Así queda el pie entero de un sitio de CIS.
Las dos piezas, por separado
El círculo doble es la marca de la Compañía y el nombre va en el mismo namebrand apilado en
versalitas que usa la barra, no en una línea de texto. El antetítulo en mono y la flecha vienen del bloque
de circulodesantiago.cl. Trazo grueso, sw 8 y sw 26, porque va a 26px.
Hoy el pie escribe el nombre en una sola línea. Acá va con el mismo namebrand apilado, para que la barra y el pie digan lo mismo, y con el lema corregido: se cae "infraestructura".
| Quién | Qué dice |
|---|---|
| Sitios de CIS | Operado por [◎] Compañía de Innovación de Santiago · una empresa de [◯] Círculo de Santiago |
| Sitios de cochid | Operado por [◎] Compañía de Innovación de Santiago · una empresa de [◯] Círculo de Santiago |
| Sitios de la matriz | Círculo de Santiago SpA · RUT 78.372.913-K, a secas. Nunca "una empresa de" sobre sí misma |
sites.json → brands.cis.tagline, y de ahí baja a todos los sitios.9 · Entrada
Una cuenta para todo el grupo. Tres puertas al mismo nivel, sobre la textura de anillos, que es del grupo y no cambia por marca: lo que cambia entre las tres entidades es el lockup y el color del acento. Los logos de Google y Microsoft son las marcas de cada proveedor dibujadas en línea con sus colores oficiales, self-hosted, sin CDN.
Entrar al grupo
Continuar con Google Continuar con Microsoft Continuar con correoLas tres puertas al mismo nivel jerárquico, el correo apenas atenuado por ser el camino más largo. Sin formulario visible hasta que se pide. Es la card que se implementa, en sus tres marcas.
Cambia el lockup, la textura no. Authentik puede cambiar de marca por brand según el dominio de entrada, así que esto se alcanza sin duplicar el flow.
Entrar
Continuar con Google Continuar con Microsoft Continuar con correoLos cuadrados concéntricos que se habían propuesto para cochid quedaron fuera: el login es una superficie del grupo, no de una entidad. Lo único que cambia es el lockup y el acento.
Lo que se ve tras pulsar "Continuar con correo": el formulario reemplaza a los botones, con vuelta atrás. Va junto con L11, que es la otra mitad del mismo paso.
La otra mitad de L04: un control de dos posiciones, y el registro deja de ser un enlace escondido al pie. Hoy Authentik los tiene como dos flows separados, autenticación y enrolamiento, unidos por el link "Regístrate", así que es el cambio de mayor alcance.
Las dos cosas que cambian el flow (el correo como tercer botón, y entrar junto a crear cuenta) exigen reordenar la autenticación, no son cambios de hoja de estilo. Detalle en Login v3, incluido el error del icono de Microsoft en producción.
10 · Tipografía y color
Dos familias, self-hosted, sin excepciones.
IBM Plex Sans
Innovación desde Santiago
Texto corrido en 400. Titulares en 700 y 800.
Pesos en uso: 400, 500, 600, 700, 800.
JetBrains Mono
78.384.591-1
Cifras, código, antetítulos y etiquetas.
Pesos en uso: 400, 500, 700.
Acento por marca
11 · Lo que no se hace
--accent, --paper,
--ink, --line y las tipografías viven solo en
v7/brands/{marca}/tokens.css.gr-*. Si el chrome no alcanza, se cambia en core-style y
se versiona.Sin verificar en pantalla. No hay navegador en el servidor: la maqueta de esta guía no la ha mirado nadie. Los lockups son texto con estilos, así que dependen de que IBM Plex Sans cargue.