Saltar al contenido

Sistema de diseño · candidate.16

Style v10 es una base común, con un candidato verificable.

Tokens, tipografías, componentes y navegación compartidos. Cada sociedad o marca agrega una capa pequeña y explícita. Los productos heredan, no copian el sistema.

Release verificable

v10 · candidate.16

Estado
Candidato público, sin promoción automática
Publicado
30 agosto 2026
Digest
bd04fc0d…b1c35c
Integridad
SRI SHA-384
Abrir manifiesto inmutable
3puntos de entrada con SRI
10capas de marca
16marks y lockups de marca
15namebrands publicados

01 · Versiones

Una historia visible, una recomendación clara.

Las versiones anteriores siguen públicas para compatibilidad. Una migración nueva fija el digest candidate.16 y valida su sitio antes de reemplazar un carril existente.

Candidatov10

Candidate.16 fijado por digest

Runtime con fuentes self-hosted, tema y chrome. Se integra con pin por digest y se valida en cada consumidor antes de una promoción separada.

current.json
Compatiblev9

Release histórico preservado

Los consumidores actuales siguen usando su digest fijado. Sus rutas y manifiestos permanecen disponibles durante la migración.

release.json
Congeladov8

Compatibilidad reciente

Se conserva sin cambios para consumidores existentes. No recibe componentes nuevos.

Abrir v8
Congeladov7

Contrato de tokens y chrome

Origen de la base promovida a v9. Sigue disponible como referencia de transición.

Ver tokens v7
Legado activov6

Bundle monolítico

El carril más consumido hoy. Se mantiene para no romper sitios, pero no define la arquitectura futura.

Abrir galería v6

02 · Adopción

Integrar el runtime en tres referencias fijadas.

El orden importa: tema, estilos y chrome. El ejemplo fija bytes exactos con SRI y no depende del puntero mutable.

HTML · dentro de <head>
<script src="https://kit.innovacionsantiago.cl/v10/bd04fc0dac0b1497e8cd7a70c73433f46a5eb0ff7ae6c5a23234dd8077b1c35c/theme.js" integrity="sha384-4z/J3/xbpw17qJScwLAq3N2hW5F9+5M9by+yIDuu63LedHlPJq2cZE716lDAxL3c" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://kit.innovacionsantiago.cl/v10/bd04fc0dac0b1497e8cd7a70c73433f46a5eb0ff7ae6c5a23234dd8077b1c35c/style.css" integrity="sha384-XOqnmXzzTTi2HeNgwYcWZU1UWWGYntmWzaTutoIFsT/q/8Emxcq/+b2EPBKAhUa0" crossorigin="anonymous">
<script defer src="https://kit.innovacionsantiago.cl/v10/bd04fc0dac0b1497e8cd7a70c73433f46a5eb0ff7ae6c5a23234dd8077b1c35c/chrome.js" integrity="sha384-SfOYNfiltvNBhqAT+uSrMTrpQbSsiVqUJByllcrOkitokI9xKgSe2owoYOHCBXp5" crossorigin="anonymous"></script>

  1. Elegir la marca.Declarar data-brand en la raíz.
  2. Fijar el digest.No cargar CSS de current.json en producción.
  3. Agregar sólo una marca.Un producto hereda la marca que lo gobierna.
  4. Prefijar lo local.Las clases propias del sitio no entran a la base.
  5. Probar el sitio.Desktop, móvil, teclado, contraste, tema y regresión visual.

03 · Arquitectura

Compartir la base sin borrar las identidades.

La federación evita forks opacos. La base pertenece a cis-style. Las sociedades y marcas verdaderas mantienen su capa. Las vistas y productos no se presentan como nuevos sistemas de diseño.

01

Base común

Tokens, fuentes, chrome, componentes y comportamiento.

cis-style / v10 candidate.16
02

Capa de identidad

Acento, marca y atribución del dueño. En v10 viaja dentro de style.css y se activa por atributo.

<html data-brand="<marca>">
03

Producto o vista

Hereda una marca y agrega sólo reglas locales prefijadas.

sitio.css · prefijo propio

Es un proyecto de estilo

cis-style, cds-style, cochid-style y periodismo2-style. Tienen autoridad y alcance propios.

Es una capa de marca

Las diez que declara /v10/current.json: CIS, CDS, COCHID, Comentario, Periodismo2, Situación, Usaia, Firmas y Documentos, Indieweb y Editorial Sebastián.

Es un producto que hereda

Datos, Lex, Congreso, Elecciones, Collage y Mapa Santiago. Su identidad puede existir sin abrir otro fork de CSS.

04 · Componentes

Ejemplos ejecutados con el CSS de candidate.16.

Esta galería no recrea los componentes. Los botones, tarjetas, campos, indicadores, badges y tablas que aparecen aquí usan directamente el runtime publicado.

Acciones.btn
Estados.badge
OperativoRevisarIntervenirNeutral
Formulario.field · .input
Indicador.stat
99,9%disponibilidad observada
Tarjeta.card
Documento

Contrato de prestación de servicios

Versión vigente con un workflow de firma pendiente.

Abrir ficha
Tabla.table
ServicioEstadoLatencia
AdminOperativo84 ms
DocumentosRevisión211 ms

Referencia completa de escenarios: galería heredada y hub del kit. La promoción a ejemplos v10 se hará componente por componente con pruebas visuales.

05 · Marcas

Todas las identidades declaradas por el release.

El selector cambia una de las diez capas de marca que publica candidate.16 dentro de style.css; la capa CIS es blanco y tinta. El catálogo conserva los lockups federados de v9, los productos materializados y las reservas, sin promover como marca los sitios auxiliares recuperados desde tmp.

Capa activa

CIS

Los bordes, espacios y tipografías siguen viniendo de la base. El acento de CIS es la tinta; las otras capas aportan su color.

Compañía de Innovación de Santiago

CIS

cis-style

Entidad, mark, wordmark y lockup

Firmas y Documentos

Firmas y Documentos

cis-style

Marca materializada

USAIA

USAIA

cis-style

Marca materializada

Situación

Situación

cis-style

Marca materializada

Indieweb

Indieweb

cis-style

Marca materializada

Círculo de Santiago

Círculo de Santiago

cds-style

Entidad, mark y lockup

Mapa Santiago

Mapa Santiago

cds-style

Concepto materializado

COCHID

COCHID

cochid-style

Entidad, mark y lockup

COCHID Datos

Datos

cochid-style

Producto de COCHID

COCHID Lex

Lex

cochid-style

Producto de COCHID

COCHID Congreso

Congreso

cochid-style

Producto de COCHID

COCHID Elecciones

Elecciones

cochid-style

Producto de COCHID

Periodismo2

Periodismo2

periodismo2-style

Sólo símbolo P13 aprobado

Comentario, lockup con marca CIS

Comentario

cis-style · v10

Capa de marca y namebrand publicados en candidate.16

Editorial Sebastián, lockup con marca CDS

Editorial Sebastián

cds-style · v10

Capa de marca y namebrand publicados en candidate.16. Ver La Enciclopedia

Reservada

Collage

Sin logo aprobado

06 · Namebrands

Marca, namebrand, wordmark y lockup no son lo mismo.

La taxonomía recuperada se conserva como contrato editorial. Un namebrand identifica a la entidad; un wordmark nombra un proyecto; un lockup combina los elementos aprobados.

Entidad

Marca + namebrand de la entidad

Se usa en los sitios corporativos de CIS, CDS y COCHID. El nombre nunca aparece solo.

Proyecto

Marca de la entidad + wordmark

El proyecto conserva atribución visible sin inventar una sociedad ni otro sistema base.

Composición

Lockup

Es el archivo que reúne marca y nombre con separación y escala controladas.

Fuente: los quince archivos salen de assets/namebrands/namebrands.json del candidato: SVG con fuentes incrustadas y PNG sobre blanco, estado candidate-for-review, evidencia del 25 de agosto de 2026. La vista previa usa el PNG; el enlace abre el SVG.

Regla: namebrand no es sinónimo de wordmark ni de lockup. Abrir la exploración histórica de namebrands.

07 · Archivo

El trabajo recuperado desde tmp vuelve a ser navegable.

El archivo es evidencia histórica, no una aprobación automática. Se publica desde el commit 6536a10, con su manifiesto SHA-256 y sin leer el árbol mutable de tmp.

08 · Patrones

Escenarios para revisar, no páginas para copiar a ciegas.

Las plantillas existentes siguen accesibles. Cada adopción debe conservar la semántica, conectar datos reales y validar el estado vacío, la carga, el error y el acceso.

09 · Gobernanza

Cambiar el sistema exige evidencia.

candidate.16 se publica con un digest y un manifiesto verificables. Cada consumidor fija ese digest, carga tema, estilos y chrome con SRI, y se valida antes de cualquier promoción separada. Las rutas v9, sus manifiestos y los consumidores ya fijados se conservan para compatibilidad; este candidato no cambia su estado.

  1. 01
    Contrato

    El cambio declara si pertenece a base, marca o sitio.

  2. 02
    Pruebas mecánicas

    Hashes, rutas, manifiesto, CSS y JavaScript válidos.

  3. 03
    Pruebas de comportamiento

    Teclado, móvil, tema, fuentes, overflow y estados.

  4. 04
    Prueba en consumidor

    El sitio real se verifica antes de cambiar su pin.

  5. 05
    Release y rollback

    URL inmutable, healthcheck, logs y reversión documentada.

Hacer

  • Fijar un digest por release.
  • Usar IBM Plex Sans y JetBrains Mono self-hosted.
  • Usar bordes, jerarquía tipográfica y espacio.
  • Prefijar las reglas específicas del sitio.

No hacer

  • Copiar la base a otro repositorio.
  • Crear una marca por cada vista o producto.
  • Agregar sombras o franjas laterales a tarjetas.
  • Presentar una validación local como despliegue.