LIBRO
ERP de gestión: facturación, libros contables y flujo de caja para estudios y pymes.
Componentes · galería v2
PÁGINA HISTÓRICA · se conserva a propósito
Iteración v2. Referencia histórica.
Segunda vuelta de la galería de componentes. La galería v1 queda intacta para comparar. Esta página responde punto por punto al feedback del 2026-07-31:
«Al footer elegido le falta el logo del Círculo de Santiago en "una empresa de". Asimismo, no tiene sentido decir que el Círculo es una empresa del Círculo. Eso debes revisar mejor. El namebrand de cochid es el nombre completo en mayúsculas, como estaba en cochid.cl. Las cards no me convencen, se ven muy genéricas. Faltan en colores por marcas colores según yo. El login card creo que se puede mejorar todavía. Y el login info se puede mejorar, hay navbars que ya lo muestran.»
.cochid-namebrand apilado 3 líneas, sans 800 uppercase
Fuentes estudiadas por curl: bundle de innovacionsantiago.cl (card radius 0, tag mono, pie dashed con dot de estado), catálogo, LIBRO («estética brutalista de CIS»), visor de documentos de cis-verify (borde izquierdo 4px) y tokens v7 por marca.
Opción A
El lenguaje exacto de innovacionsantiago.cl: papel sobre papel, borde 1px, voz mono en mayúsculas y pie punteado con punto de estado en vivo.
El acento de marca aparece solo en el tag, el punto y el CTA: se integra a cualquier página del grupo sin pedir permiso.
Compañía de Innovación de Santiago
Facturación, libros contables y flujo de caja para estudios y pymes, con la estética brutalista de CIS.
Opción B
Barra de título invertida, borde 2px de tinta y ficha de filas tipo tabla: la card se lee como un spec sheet de US Graphics, hermana del holding de LIBRO.
Hover con desplazamiento y borde de acento: cero suavidad, la jerarquía la pone la tinta y el acento queda para un solo dato clave. La sombra dura que llevaba en la primera vuelta se quitó al migrar, por la convención T01 del sitio: lo único que separa es el borde completo.
Compañía de Innovación de Santiago
ERP de gestión: facturación, libros contables y flujo de caja para estudios y pymes.
Círculo de Santiago
Cartas y certificados del directorio verificables por código, QR y checksum.
Compañía Chilena de Inteligencia de Datos
Parlamento chileno estructurado: boletines, urgencias, comisiones y roll call nominal.
Opción C
Cruza el visor de documentos con marcas de registro en las esquinas derechas: sello de imprenta, no widget genérico. La franja izquierda de 4px que heredaba se quitó al migrar, por la convención T01.
El borde del hover toma el acento de cada marca: la misma estructura se siente CIS, CDS o Compañía Chilena de Inteligencia de Datos sin cambiar una línea.
Compañía de Innovación de Santiago
libroProducto · ERP
Facturación, libros contables y flujo de caja para estudios y pymes, con la estética brutalista de CIS.
v7/brands/*/tokens.cssFuentes: bundle CSS de innovacionsantiago.cl · circulodesantiago.cl (Next abe123e6) · cochid.cl + v6 · datos.cochid.cl (Next 2c919dd0) · mapas.cochid.cl (CSS local, sus chunks vivos 404ean: asset drift Next, señalado aparte) · auth.innovacionsantiago.cl/static/dist/custom.css.
v7 solo tiene el accent navy/verde. El sitio vivo suma una superficie hero navy, la paleta categórica del mapa isométrico de landmarks, un ámbar de estado y un rojo de card (seguridad).
#13202e · paneles hero (5 usos)falta#1e3a5f · --cat-color landmarks= accent#5c3a1f · [data-cat=cerro]falta#6d2bb4 · [data-cat=historico]falta#a12c2c · [data-cat=cultural]falta#0e5a6b · [data-cat=barrio]falta#1f6b3a · [data-cat=parque] (4 usos)falta#b46a0c · bg + texto statusfalta#b91c1c · --card-colorfaltaEl sistema legacy --cis-* (Inter + escala verde) y los fallbacks de componentes compartidos se excluyen a propósito: no son marca.
Los 22 hex del CSS vivo coinciden 1:1 con v7/brands/cds/tokens.css + base (acento #1a1a2e, lavanda dark #c8c8e4, soft #e6e6ee). Nada que agregar; los semánticos ok/warn/err los hereda de base.
#1e6091 · --c-denunciafalta#f4a261 · --c-formalizfalta#9b5de5 · --c-acusacfalta#2a9d8f · --c-condenafalta#e76f51 · --c-lossfalta#6c757d · --c-neutrofalta#eff6ff · blue-50proponer#dbeafe · blue-100 (= accent-soft)en v7#93c5fd · blue-300proponer#3b82f6 · blue-500 (= chart-3)en v7#1d4ed8 · blue-700 (= accent)en v7#1c398e · blue-900falta#162456 · blue-950falta#fffffff2 (rgba .95)falta#18181be6 (zinc-900)falta#a1a1aa (zinc-400)falta#93c5fd (light usa #3b82f6)falta#0096ff · box-shadow selecciónfaltaEl custom.css de Authentik define una identidad propia (acento cyan) que hoy no existe en v7/brands/. Propuesta: brands/auth/tokens.css nuevo.
#0891b2 · --cis-accentfalta#0e7490 · --cis-accent-2falta#52525b · --cis-btn-bgfalta#ffffff / #dadce0 / #1f1f1ffalta#6b7280falta/* brands/cis/tokens.css · añadir */ --surface-hero: #13202e; --cis-cat-santiago:#1e3a5f; --cis-cat-cerro:#5c3a1f; --cis-cat-historico:#6d2bb4; --cis-cat-cultural:#a12c2c; --cis-cat-barrio:#0e5a6b; --cis-cat-parque:#1f6b3a; --warn-accent:#b46a0c; --alert:#b91c1c; /* brands/cochid/tokens.css · añadir */ --cochid-seq-1:#eff6ff; --cochid-seq-2:#dbeafe; --cochid-seq-3:#93c5fd; --cochid-seq-4:#3b82f6; --cochid-seq-5:#1d4ed8; --cochid-seq-6:#1c398e; --cochid-seq-7:#162456; --cochid-funnel-denuncia:#1e6091; --cochid-funnel-formalizacion:#f4a261; --cochid-funnel-acusacion:#9b5de5; --cochid-funnel-condena:#2a9d8f; --cochid-loss:#e76f51; --cochid-neutro:#6c757d; --cochid-map-panel-bg:#fffffff2; --cochid-map-panel-text:#18181b; --cochid-map-panel-muted:#52525b; --cochid-map-card-hover:#3b82f6; --cochid-map-focus:#0096ff; /* brands/auth/tokens.css · NUEVO */ --accent:#0891b2; --accent-hover:#0e7490; --accent-soft:#d7f4f9; --btn-neutral:#52525b; --google-bg:#ffffff; --google-border:#dadce0; --google-text:#1f1f1f; /* brands/cds · sin cambios */
Login card · Opción A
Continuidad v7 estricta + tres mejoras sobre el login actual: filo superior de 2px de tinta, lockup chico mark + wordmark (en vez del logo 320px centrado) y línea de contexto «para continuar a <sitio>» que Authentik puebla con el nombre de la app OIDC/proxy. Footer legal mono con el alcance de la cuenta.
para continuar a docs.circulodesantiago.cl
Continuar con GoogleLogin card · Opción B
Más marca: mark de anillos a 64px centrado y el fondo del flow con textura de anillos concéntricos (el motivo del logo al 5% de opacidad, SVG inline). Reemplaza la foto hero genérica de Authentik; en custom.css se logra con --ak-flow-background apuntando a un SVG data-URI.
una cuenta para CIS, Círculo de Santiago y Compañía Chilena de Inteligencia de Datos
Continuar con GoogleLogin info v2 · .x-login
Estado anónimo (pill «Entrar» con /login?next=<ruta>, patrón ya vivo en cis-verify), sesión activa (chip con punto verde = sesión viva vía forward_auth y menú <details> puro HTML, cero JS obligatorio) y variante compacta solo-avatar para navbars densas. El menú ofrece «Salir de este sitio» (outpost) y «Cerrar sesión en todo el grupo» (flow de invalidación global de Authentik, verificado en vivo). Estado decidido server-side vía headers X-authentik-*. Prueba a abrir los menús.
Compañía de Innovación de Santiago
El veloz murciélago hindú comía feliz cardillo y kiwi. La cigüeña tocaba el saxofón detrás del palenque. 0123456789
vault list cis-verify
C-4F2A91 · RUT 78.384.591-1 · {"status":"ok"} · 0O 1lI
La crónica de Santiago, en cuerpo serif
Texto largo de lectura editorial: columnas, bajadas y pies de foto.
Capítulo 7, notas al margen
Espécimen monoespaciado de la superfamilia Plex. 0123456789
Interfaz redondeada de producto
Identidad propia del producto, declarada como excepción al canon.
Interfaz genérica sin marca
Deuda heredada de plantillas; migra a IBM Plex Sans.
Serif de plantilla heredada
Restos serif en sitios CDS legacy; se rinde aquí con fallback Georgia a propósito (la fuente no se sirve).
/v7/fonts del dominio de cada marca; prohibido Google Fonts.
Los radios de esta página son maqueta visual: marca mentalmente y responde por el canal de siempre. A1 (footer societario) y A2 (namebrand de la Compañía Chilena de Inteligencia de Datos) ya están aplicados y no esperan decisión.
Iteración v2 generada el 2026-07-31 en respuesta al feedback de Martín. Insumos:
cards-b1-opciones (B1) y la extracción de paletas por curl (B2).
Los radios de esta página son maqueta visual: marca mentalmente y responde por el canal.