Design System v6

Galería viva de tokens, tipografía, componentes y gráficos del ecosistema Compañía de Innovación de Santiago SpA. Todo lo que ves se carga desde style.innovacionsantiago.cl/v6/.

Sprint V1 (mayo 2026) — 6 componentes P0 nuevos: cis-sidebar, cis-drawer, cis-popover, cis-search, footer variants y cis-kpi.
Ver galería V1 →

1 · Sub-brands

Cada proyecto tiene su propio token file. Cambia el acento sin reescribir componentes.

accent botón primario enlace de ejemplo

<link rel="stylesheet" href="/v6/cis.min.css">
<link rel="stylesheet" href="/v6/brands/proyecto/tokens.css">

2 · Paleta

--bg --paper --shell-bg --ink --muted --line --cis-accent --c-green --c-blue --c-amber --c-red

3 · Tipografía

IBM Plex Sans · 800

Semibold / 600

Regular / 400 — cuerpo de texto, párrafos largos, todo lo que no sea heading.

JetBrains Mono — api_key, 0x3fa21, --cis-accent.

4 · Botones

5 · Cards

USAIA

Transcripción + analítica de audio con Whisper.

Periodismo2

API de noticias Chile con NLP y RUT-entity linking.

Situación

OSINT AS17147 · Cloudflare Radar + z-score.

6 · Tablas

Servicio	Tier	Créditos	Estado
usaia	pro	10.000	live
periodismo2	starter	2.000	beta
claudia	—	0	interno

7 · Alerts

Pago confirmado · 5.000 créditos acreditados.

DTE en proceso · el folio se asignará en < 5 min.

Tu suscripción pro expira en 3 días.

La pasarela Flow devolvió error 412 · reintento automático en curso.

8 · Badges

INK ACCENT LIVE BETA DOWN WIP

9 · Formularios

Email Tier Comentario

10 · Shell (modal / toast / confirm)

11 · `<cis-chart>`

Lazy-loaded de Plotly desde CDN. Soporta permalink por hash.

<cis-chart type="line" permalink height="300"
  data-url="https://api.innovacionsantiago.cl/gateway/situacion/v1/latency/daily.json">
</cis-chart>

12 · Footer

Se monta al final del body por shell.min.js. Scroll al final para verlo vivo.