Mi cuenta · Brand Book

Sub-brand del ecosistema de la Compañía de Innovación de Santiago. Hereda toda la base del master cis: tipografía, escala, grid, motion, componentes y accesibilidad. Solo varía accent, voz y símbolos del sprite.

Un proyecto de la Compañía de Innovación de Santiago.

01 · Filosofía

Mi cuenta es sub-brand directo del master cis. Hereda toda la base visual del ecosistema de la Compañía de Innovación de Santiago.

Tres principios visuales aplican igual que en el master:

Mono-ink antes que color. El accent existe pero se usa con disciplina. No es decoración: aparece en links, focus rings, CTAs primarios y deltas KPI.
Tipografía como primer ciudadano. La jerarquía se construye con escala, peso y tracking. No con cajas de color.
Grid riguroso y negative space generoso. Asimetría intencional Swiss.

02 · Logo

Tres facetas, todas viven en brands/portal/:

Mark (mark.svg). Anillo brújula heredado del master cis con glyph específico del dominio. Mínimo de uso 16 px.
Wordmark (wordmark.svg). Solo texto: sigla en IBM Plex Sans 800, nombre completo y atribución al ecosistema.
Lockup (lockup.svg). Mark + wordmark combinados (la versión oficial).

El mark usa currentColor. Sobre fondo claro hereda --cis-ink-900. Sobre fondo oscuro --cis-ink-50. Nunca colorear el mark con el accent del brand.

Mínimos de uso

Contexto	Recomendado	Mínimo
Mark (favicon)	32 px	16 px
Wordmark	200 px	120 px
Lockup	360 px	240 px

03 · Color

Todo el sistema de color hereda del master cis (escala ink-50..ink-900 y tokens semánticos --cis-c-red, --cis-c-amber, --cis-c-green, --cis-c-blue). Lo único que cambia en Mi cuenta es el accent:

Token	Hex
`--cis-accent`	`#0891b2`
`--cis-accent-hover`	`#0e7490`

:root {
  --cis-accent:       #0891b2;
  --cis-accent-hover: #0e7490;
  --cis-link:         #0891b2;
}

Para usar este accent: @import url('../cis/tokens.css') y luego sobreescribir las variables. Eso ya está hecho en brands/portal/tokens.css.

04 · Tipografía

Heredada del master sin modificación: IBM Plex Sans 400/500/600/700/800 + JetBrains Mono 400/600. Escala modular ratio 1.25 (--cis-text-xs a --cis-text-6xl). Headlines izquierda-alineadas, tracking negativo en tamaños mayores o iguales a 24px.

05 · Grid y spacing

Heredado: Swiss 12 columnas, container max-width: 1280px, padding-inline clamp(1rem, 4vw, 2.5rem), gutter var(--cis-space-6). Asimetría preferida 8fr 4fr o 5fr 7fr.

06 · Motion

Heredado: durations instant (80ms), fast (150ms), base (250ms), slow (400ms). Easings standard, emphasized y decelerate. prefers-reduced-motion reducido a 0.01ms.

07 · Iconografía

Sprite específico de Mi cuenta en symbols.svg. Incluye la base obligatoria (home, user, settings, search, menu, x, check, alert-circle) más íconos del dominio del brand. Total: 10-15 símbolos.

<svg width="20" height="20"><use href="/v6/brand/portal/symbols.svg#portal-search"/></svg>

08 · Accesibilidad

Heredada en su totalidad del master:

Contraste mínimo AA (4.5:1 normal, 3:1 large).
Focus visible siempre con outline 2px.
ARIA correcto en custom elements.
Tap targets mayores o iguales a 44 por 44 píxeles en mobile.
prefers-reduced-motion respetado.

09 · Voz

Tono: de servicio, claro, breve.

Detalle completo, persona, do/don't y microcopy en voice.md.

10 · Atribución

El footer de cualquier sitio de Mi cuenta cierra con la línea exacta:

Un proyecto de la Compañía de Innovación de Santiago.

Esto vincula Mi cuenta con la jerarquía del ecosistema. Cadena de padres: cis.

11 · Naming

Prefijo cis- en tokens, clases, custom elements (legacy técnico).
BEM-ish: cis-block__element--modifier.
Variants vía data-attributes.
Texto humano: nunca usar la sigla "CIS" aislada. Siempre el nombre completo.

12 · Recursos

Tokens: https://style.innovacionsantiago.cl/v6/brands/portal/tokens.css
Mark: https://style.innovacionsantiago.cl/brand/portal/mark.svg
Wordmark: https://style.innovacionsantiago.cl/brand/portal/wordmark.svg
Lockup: https://style.innovacionsantiago.cl/brand/portal/lockup.svg
Sprite: https://style.innovacionsantiago.cl/brand/portal/symbols.svg
Sample: https://style.innovacionsantiago.cl/brand/portal/sample.html
Style guide: https://style.innovacionsantiago.cl/v6/brands/portal/style-guide.html
Master cis: https://style.innovacionsantiago.cl/v6/brands/cis/style-guide.html

Sitios que usan este brand

https://portal.innovacionsantiago.cl