Sistema de diseño · Compañía de Innovación de Santiago

01Principios

01

Cinco principios que gobiernan todo lo que sigue.

Antes que componentes, decisiones. Antes que tokens, criterio. La identidad de la Compañía no se distingue por un color: se distingue por la disciplina con la que se aplica.

P · 01

Mono-ink antes que color.

La paleta base es zinc warm de 50 a 900. El accent existe pero se usa con disciplina: links, focus rings, deltas en KPI, CTAs primarios. Nunca como decoración.

Plataforma /v6/cis.min.css servida con SRI integrity y cache-control granular.
P · 02

Tipografía como primer ciudadano.

La jerarquía se construye con escala, peso y tracking. No con cajas y colores. Plex Sans 800 para hero; 600 para cuerpo de párrafo; mono para datos.

Heading 800 / -0.025em Body Plex 400 con line-height 1.55, máximo 60ch. jetbrains-mono · tabular-nums · v6.2.0
P · 03

Grid riguroso, asimetría intencional.

Modernismo Suizo (Müller-Brockmann, Hofmann, Ruder). 12 columnas, splits 5/7, 4/8, 3/9. Nunca 6/6 a menos que la simetría sea el mensaje.
P · 04

Bordes finos antes que sombras.

1px solid var(--cis-border). Las sombras pesadas son ruido. La separación se construye con líneas y negative space, no con elevación simulada.

Negative space generoso. Padding mínimo entre secciones: 4rem. Máximo: 7rem. Nunca menos.
P · 05

Datos reales, no lorem.

Los KPIs leen de manifests live. Las tablas usan consumers reales. Si fetch falla, fallback hardcodeado. Lo que se ve en este brand book es lo que está corriendo en producción.

fetch('/v6/manifest.json') → commit bb5c85c · built 2026-05-06

02Tipografía

IBM Plex Sans + JetBrains Mono.

Dos familias. Una para humanos, otra para datos. La escala modular ratio 1.25 hace toda la jerarquía.

02

Plex Sans · escala display

800 / -0.025em

Compañía5xl · 60px · 800

Innovación4xl · 48px · 800

Santiago3xl · 36px · 700

Brand book editorial2xl · 24px · 600

Headline secundariolg · 18px · 500

Body de párrafo regular con line-height 1.55base · 16px · 400

Caption secundaria, label de formsm · 14px · 400

Micro · footnote · timestampxs · 12px · 400

JetBrains Mono · datos

cis-style@v6.2.0stable

built_at2026-05-06T18:58Z

commitbb5c85c

integritysha384-pFJ2…

Tabular nums · alineación vertical

Brand	Sites	Δ7d	Uptime
cis	4	+0,12%	99,82%
cochid	5	+0,04%	99,71%
indieweb	2	−0,18%	99,55%
portal	1	+0,21%	99,90%
periodismo2	1	+0,03%	99,68%

Italic · emphasis editorial

«Tecnología tratada como infraestructura.»

Plex Serif italic 500 · solo para hero quotes

Decisión arquitectónica

Self-hosted IBM Plex Sans (400/500/600/700/800) + JetBrains Mono (400/500/700) en /v6/fonts/. Cero requests a Google Fonts CDN — privacy + GDPR + reproducibilidad.

ADR · typography-001 · parent ADR-021

Escala primaria · ink (zinc warm)

--cis-ink-50 → 900

50#fafafa

100#f4f4f5

200#e4e4e7

300#d4d4d8

400#a1a1aa

500#52525b

600#27272a

700#18181b

800#0c0c0e

900#000000

Variables semánticas · superficies y texto

light mode

surface

--cis-bg

text

--cis-text

border

--cis-border

Accent · una sola variable, tres estados

override por sub-brand

--cis-accent

#3b82f6

cis · master

--cis-accent-hover

#2563eb

+10% L · -5% S

--cis-accent-soft

background con 12% opacity

Semantic · estado, nunca decoración

success / warn / error / info

Success

Deploy completado, auth ok, métricas en verde.

--cis-c-green · #15803d

Warn

Cert expira pronto, latencia elevada, deprecation próxima.

--cis-c-amber · #d97706

Error

Servicio caído, build fallido, contrato roto.

--cis-c-red · #dc2626

Info

Mantenimiento programado, nueva versión disponible.

--cis-c-blue · #2563eb

04Spacing & grid

Baseline 8pt · grid 12 columnas.

La métrica vertical es múltiplo de 8. La horizontal es 12 columnas. Sin excepciones.

04

Escala de espaciado

rem · px @ 16

--cis-space-14 px

--cis-space-28 px

--cis-space-312 px

--cis-space-416 px

--cis-space-624 px

--cis-space-832 px

--cis-space-1248 px

--cis-space-1664 px

Grid 12 col · split sample

layout swiss

5fr

7fr

4fr

8fr

3fr

9fr

Líneas verticales: 1px solid var(--cis-accent), 12 divisiones del contenedor.

05Iconografía

47 símbolos · stroke 1.5 · resolución brand-aware.

Subset Lucide consistente, más 2 marks legacy. <cis-icon> resuelve por data-brand con fallback al master.

05

Sample · 12 íconos comunes

galería completa

search

arrow-right

check

x

plus

user

settings

bell

mail

edit

folder

arrow-down

En contexto · toolbar mock

stroke 1.5

Tamaños · xs a xl

14 / 16 / 20 / 24 / 32 px

xs · 14

sm · 16

md · 20

lg · 24

xl · 32

06Componentes

Cinco familias.
Una galería viva.

Cada clase está documentada en /v6/components.json con stable_since y variantes.

Componentes públicos · v6.2.0

140

+ 12 web components · 19 categorías

06 · 01

Layout y primitives

cards, tablas, formularios, alerts, badges, pills, stat-cards

v1 → 06 · 02

Display y feedback

tabs, accordion, stepper, empty, skeleton, hero, code, avatar, breadcrumb

v5 → 06 · 03

Iconografía

47 símbolos Lucide · web component cis-icon

→ 06 · 04

Shell · web components

cis-navbar, cis-footer, cis-modal, cis-toast, cis-drawer, cis-tabs

→ 06 · 05

Code blocks

cis-code inline · cis-code-block con line-numbers · variant terminal

→ 06 · 06

Observatorio

Monitor de drift en consumers · uptime checks cada 15 min

→

07Brands

16 brand books, una sola disciplina.

Un master cis y 15 derivados que sobreescriben únicamente accent y voz. Tokens en /v6/brands/<slug>/tokens.css. Marcas en /brand/<slug>/mark.svg.

01

CI

Compañía de Innovación de Santiago

Una empresa de Círculo de Santiago SpA

→

08Templates UX/UI

Layouts brand-agnostic, listos para Caddy.

6 templates Swiss verificados por el observatorio. Login, errores 401/403/404/500/503. El brand activo se inyecta vía data-brand en el <body>.

08

loginauth · v6.1.0

09Consumidores

22 sitios usando este sistema en producción.

Cada uno declara su brand, versión y templates en registry/consumers.yaml. El observatorio chequea drift cada 15 minutos.

Slug	URL	Brand	Versión	Status	Uptime 24h
Cargando consumidores en vivo desde /v6/consumers.json…

monitor_frequency_minutes: 15 · data: /v6/consumers.json · vista completa: observatory

10API formal

10

8 manifests JSON públicos.

Cada manifest tiene $schema, version y generated_at. Cache: 300s con must-revalidate. Assets binarios traen SRI integrity sha384.

$ curl https://style.innovacionsantiago.cl/v6/manifest.json | jq
{
  "version": "6.2.0",
  "channel": "stable",
  "commit":  "bb5c85c",
  ...
}

/v6/manifest.jsonapplication/json

curl

Índice maestro: assets con sha384, contracts cross-manifest, versión actual.

/v6/brands.jsonapplication/json

curl

16 brands con accent, voice_tone, sites_using, parent_attribution.

/v6/components.jsonapplication/json

curl

CSS classes y web components con stable_since, deprecated_since y variantes.

/v6/templates.jsonapplication/json

curl

Templates UX brand-agnostic con required_components y status.

/v6/consumers.jsonapplication/json

curl

22 sitios live: brand_used, version_pinned, expected_components, owner_team.

/v6/changelog.jsonapplication/json

curl

Releases con kind (major/minor/patch), summary y affected_components.

/v6/sla.jsonapplication/json

curl

Support matrix v4/v5/v6, deprecation_window, breaking_change_policy.

/v6/runtime.jsonapplication/json

curl

Control plane dinámico: footer copyright, navbar announcements, deprecation warnings.

11Versionado y SLA

Additive only dentro de v6.

Versión actual

v6.2.0

Released 2026-05-06 · channel stable
Sprint paralelo: errores · iconografía · componentes P1 · runtime push

Support matrix

deprecation 90 días

Version

Status

EOL

Notes

v6

active

—

Versión activa. Semver minor/patch additive. Breaking implica /v7/.

v5

frozen

2026-07-15

Deprecation 90d desde deploy v6 · src-v5/ snapshot disponible.

v4

frozen

—

Build legacy desde fallback rules · servido inmutable.

Breaking change policy

Dentro de /v6/ solo se permiten cambios additive (minor) o fixes (patch). Cualquier cambio breaking — renombrar selector público, modificar atributo de custom element, eliminar token público, cambiar semántica de slot — requiere bump a /v7/. CI valida la regla vía scripts/validate-changelog.py.

Sistema de diseño observable, no un catálogo de swatches.

Cinco principios que gobiernan todo lo que sigue.

Mono-ink antes que color.

Tipografía como primer ciudadano.

Grid riguroso, asimetría intencional.

Bordes finos antes que sombras.

Datos reales, no lorem.

IBM Plex Sans + JetBrains Mono.

Plex Sans · escala display

JetBrains Mono · datos

Tabular nums · alineación vertical

Italic · emphasis editorial

Decisión arquitectónica

Escala primaria · ink (zinc warm)

Variables semánticas · superficies y texto

Accent · una sola variable, tres estados

Semantic · estado, nunca decoración

Success

Warn

Error

Info

Baseline 8pt · grid 12 columnas.

Escala de espaciado

Grid 12 col · split sample

47 símbolos · stroke 1.5 · resolución brand-aware.

Sample · 12 íconos comunes

En contexto · toolbar mock

Tamaños · xs a xl

Cinco familias.Una galería viva.

Layout y primitives

Display y feedback

Iconografía

Shell · web components

Code blocks

Observatorio

16 brand books, una sola disciplina.

Layouts brand-agnostic, listos para Caddy.

22 sitios usando este sistema en producción.

8 manifests JSON públicos.

Additive only dentro de v6.

Support matrix

Breaking change policy

Cinco familias.
Una galería viva.