---
version: alpha
name: Kairos Control
description: "Sistema visual institucional y analítico para Kairos Agéntica."
colors:
  primary: "#2C53B0"
  primary-hover: "#24459A"
  primary-soft: "#EDEFF4"
  surface: "#F4F4F1"
  surface-alt: "#FBFBF9"
  surface-dark: "#232629"
  surface-dark-raised: "#2B2E32"
  on-surface: "#3A3E42"
  on-surface-strong: "#232528"
  on-surface-muted: "#5B6065"
  on-dark: "#ECEDEA"
  on-dark-strong: "#FBFBF9"
  on-dark-muted: "#A8ACAF"
  accent-on-dark: "#9BB6F2"
  loss: "#B63A32"
  loss-soft: "#F6EDEB"
  border: "#DCDCD6"
  border-dark: "#3B3E43"
  error: "#E8A199"
typography:
  headline-display:
    fontFamily: "Inter Tight"
    fontSize: 3.65rem
    fontWeight: 600
    lineHeight: 1.03
    letterSpacing: -0.018em
  headline-lg:
    fontFamily: "Inter Tight"
    fontSize: 2.55rem
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.018em
  headline-md:
    fontFamily: "Inter Tight"
    fontSize: 1.45rem
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -0.018em
  headline-sm:
    fontFamily: "Inter Tight"
    fontSize: 1.12rem
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.01em
  body-lg:
    fontFamily: "Source Sans 3"
    fontSize: 1.125rem
    fontWeight: 400
    lineHeight: 1.65
  body-md:
    fontFamily: "Source Sans 3"
    fontSize: 1rem
    fontWeight: 400
    lineHeight: 1.6
  body-sm:
    fontFamily: "Source Sans 3"
    fontSize: 0.875rem
    fontWeight: 400
    lineHeight: 1.5
  label-lg:
    fontFamily: "Inter Tight"
    fontSize: 0.94rem
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0.01em
  label-caps:
    fontFamily: "JetBrains Mono"
    fontSize: 0.72rem
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0.12em
    fontFeature: '"tnum" 1'
  data-md:
    fontFamily: "JetBrains Mono"
    fontSize: 1rem
    fontWeight: 500
    lineHeight: 1.35
    fontFeature: '"tnum" 1'
  data-sm:
    fontFamily: "JetBrains Mono"
    fontSize: 0.68rem
    fontWeight: 500
    lineHeight: 1.35
    letterSpacing: 0.04em
    fontFeature: '"tnum" 1'
rounded:
  none: 0px
  sm: 4px
  md: 6px
  full: 9999px
spacing:
  xxs: 2px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
  page-gutter: 24px
  page-gutter-compact: 20px
components:
  page:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-lg}"
  surface-card:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 24px
  dark-bookend:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
  dark-panel:
    backgroundColor: "{colors.surface-dark-raised}"
    textColor: "{colors.on-dark}"
    rounded: "{rounded.md}"
    padding: 24px
  heading:
    textColor: "{colors.on-surface-strong}"
    typography: "{typography.headline-lg}"
  secondary-text:
    textColor: "{colors.on-surface-muted}"
    typography: "{typography.body-md}"
  dark-strong-text:
    textColor: "{colors.on-dark-strong}"
    typography: "{typography.headline-lg}"
  dark-secondary-text:
    textColor: "{colors.on-dark-muted}"
    typography: "{typography.body-md}"
  dark-label:
    textColor: "{colors.accent-on-dark}"
    typography: "{typography.label-caps}"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#FFFFFF"
    typography: "{typography.label-lg}"
    rounded: "{rounded.sm}"
    padding: 14px
    height: 48px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "#FFFFFF"
    typography: "{typography.label-lg}"
    rounded: "{rounded.sm}"
  button-secondary-dark:
    backgroundColor: "transparent"
    textColor: "{colors.on-dark}"
    typography: "{typography.label-lg}"
    rounded: "{rounded.sm}"
    height: 48px
  action-chip:
    backgroundColor: "{colors.primary-soft}"
    textColor: "{colors.primary}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.sm}"
  input-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: 12px
    height: 48px
  loss-data:
    textColor: "{colors.loss}"
    typography: "{typography.data-md}"
  loss-panel:
    backgroundColor: "{colors.loss-soft}"
    textColor: "{colors.loss}"
    rounded: "{rounded.sm}"
  error-message:
    backgroundColor: "{colors.surface-dark-raised}"
    textColor: "{colors.error}"
    typography: "{typography.body-sm}"
  divider-light:
    backgroundColor: "{colors.border}"
    height: 1px
  divider-dark:
    backgroundColor: "{colors.border-dark}"
    height: 1px
---

# Kairos Agéntica

Este archivo sigue la especificación
[google-labs-code/design.md](https://github.com/google-labs-code/design.md).
Los tokens YAML son normativos; la prosa explica cómo aplicarlos.

La terminología y la voz de marca se resumen en
[/marca/](https://kairosagentica.com/marca/) y en
[/llms.txt](https://kairosagentica.com/llms.txt). Los activos de logo se documentan en
[/img/logo/README.md](https://kairosagentica.com/img/logo/README.md) y se descargan
desde [/marca/](https://kairosagentica.com/marca/).

## Overview

La dirección visual se llama **Control**: claridad institucional con materialidad de
informe financiero. Debe sentirse precisa, sobria, senior y operativa, nunca futurista
ni ornamental.

La interfaz combina fondos claros dominantes con dos bookends antracita, uno en la
apertura y otro en el cierre. El azul acero identifica interacción y producto. Los datos,
tablas y hairlines son parte de la identidad, no decoración añadida.

El lector es una persona que dirige una empresa y necesita comprender rápido. La jerarquía
debe permitir escanear primero la decisión, después la evidencia y finalmente el detalle.
Cuando una regla visual no esté definida, elegir la opción más legible, estable y contenida.

## Colors

La paleta usa neutros de alto contraste y un único acento funcional.

- **Primary:** azul acero para acciones, enlaces, foco y estados activos.
- **Surface:** platino como fondo dominante; blanco roto para tarjetas y alternancia.
- **Dark surfaces:** antracita para portada y cierre; panel oscuro para contenido elevado.
- **Text:** grafito y titular sobre claro; hielo y hielo suave sobre oscuro.
- **Loss:** rojo reservado a pérdida, riesgo o error cuantificado. Nunca es decorativo.
- **Borders:** hairlines claros u oscuros para separar sin crear cajas pesadas.

Combinaciones de texto aprobadas:

| Texto | Fondo | Contraste |
|---|---|---:|
| `on-surface` | `surface` | 9.78:1 |
| `on-surface-muted` | `surface` | 5.76:1 |
| `on-surface-strong` | `surface-alt` | 14.83:1 |
| `on-dark` | `surface-dark` | 12.94:1 |
| `on-dark-muted` | `surface-dark` | 6.65:1 |
| `primary` | `surface` | 6.41:1 |
| blanco | `primary` | 7.07:1 |
| `accent-on-dark` | `surface-dark` | 7.51:1 |
| `loss` | `surface` | 5.24:1 |

Los colores de borde no son válidos como texto. El color nunca puede ser la única señal de
estado: acompañar pérdida, error, selección o éxito con texto, iconografía o estructura.

## Typography

La tipografía separa narrativa, lectura y datos.

- **Inter Tight:** titulares y etiquetas de acción. Pesos 500 a 700, tracking ajustado.
- **Source Sans 3:** texto corrido. El cuerpo principal usa `body-lg` para lectura cómoda.
- **JetBrains Mono:** cifras, KPI, timestamps y etiquetas técnicas. Usar números tabulares.

Los tamaños se expresan en `rem` y los interlineados son unitless para respetar zoom y
preferencias del usuario. Los titulares pueden escalar de forma fluida con `clamp()`, usando
el token como límite superior. El cuerpo con contenido no baja de `1rem`.

Limitar párrafos a unas 64ch y no justificar texto. Mantener una jerarquía semántica real:
un único `h1`, niveles consecutivos y estilos visuales desacoplados del nivel HTML.

## Layout

Modelo de layout: grid fluido con ancho máximo de 1160px.

- Gutter normal: 24px; compacto: 20px.
- Ritmo espacial: base de 8px con medio paso de 4px y microajuste excepcional de 2px.
- Separación de secciones: fluida entre 64px y 100px.
- Desktop: rejillas asimétricas cuando ayudan a jerarquizar evidencia y explicación.
- Compacto: una columna; tablas complejas se convierten en tarjetas legibles.

Los breakpoints responden al contenido, no a modelos de dispositivo. El layout debe seguir
siendo funcional con zoom de texto y página hasta 400%, sin desbordamiento horizontal en
contenido de lectura. No reordenar visualmente elementos de forma que el orden de foco deje
de coincidir con el DOM.

## Elevation & Depth

El sistema es esencialmente plano. La profundidad se construye con:

1. cambio tonal entre `surface`, `surface-alt` y superficies oscuras;
2. hairlines de 1px;
3. agrupación y espacio interno;
4. una sombra discreta solo para una captura o superficie que deba separarse del fondo.

No usar sombras en navegación, botones, tarjetas editoriales ni elementos de marca. No usar
gradientes como recurso de identidad. Una superposición funcional sobre vídeo o imagen puede
usar transparencia si mejora la lectura.

## Shapes

La geometría es recta y analítica.

- Radio general: 4px.
- Radio de panel: 6px.
- Radio circular: solo avatares, controles circulares y casos semánticamente redondos.
- Hairlines: 1px.
- Logo: bloques rectangulares, sin curvas ni diagonales.

No mezclar radios grandes de producto SaaS con la geometría contenida de Kairos. Ningún panel
editorial supera 6px de radio.

## Components

### Buttons and links

- Altura objetivo: 48px para acciones táctiles.
- Primary: fondo `primary`, texto blanco y hover `primary-hover`.
- Secondary sobre oscuro: transparente, borde visible y texto `on-dark`.
- Focus: outline de 3px en `primary`, o `accent-on-dark` sobre fondos oscuros, con offset.
- Active: reducción máxima a `scale(0.98)`; desactivarla con `prefers-reduced-motion`.
- Disabled: menor énfasis, cursor no interactivo y semántica nativa `disabled`.
- Los enlaces de texto deben describir destino o acción; no usar "aquí" o "leer más".

### Navigation

La navegación es sticky, de 64px de alto y con una única acción principal. En compacto,
el botón de menú mantiene nombre accesible, estado `aria-expanded` y target táctil de 48px.
El menú abierto conserva el orden del DOM.

### Cards, dashboards and tables

Las tarjetas usan contraste tonal y hairlines, no sombras decorativas. Los dashboards
simulados priorizan cifras legibles y etiquetas mono. Las tablas conservan encabezados
semánticos; en compacto pueden convertirse en tarjetas sin perder la relación entre etiqueta
y valor.

### Forms

- Cada control tiene `label` persistente; el placeholder nunca sustituye la etiqueta.
- Inputs, selects, textarea y submit tienen al menos 48px de alto.
- Error: borde y texto explícito, `aria-invalid` y anuncio mediante región live.
- No comunicar error únicamente con rojo.
- El estado de envío debe distinguir cargando, éxito y fallo sin mover la página de forma
  inesperada.

### Images and motion

Las imágenes de contenido llevan `alt` conciso; las decorativas usan `alt=""` o
`aria-hidden="true"`. Reservar dimensiones para evitar layout shift.

La animación solo explica entrada, estado o continuidad. Con `prefers-reduced-motion: reduce`,
el contenido aparece sin desplazamiento, el scroll suave se desactiva y ninguna transición es
necesaria para entender el estado.

## Do's and Don'ts

- Do usar el azul para interacción y el rojo solo para pérdida o error.
- Do mantener contraste WCAG AA y comprobar las parejas nuevas antes de incorporarlas.
- Do conservar skip link, landmarks (`nav`, `main`, `footer`) y jerarquía de headings.
- Do diseñar targets táctiles de 48px y separarlos al menos 8px cuando estén próximos.
- Do usar unidades relativas, grid flexible y orden DOM coherente con el orden visual.
- Do probar teclado, zoom 400%, lector de pantalla, contraste alto y movimiento reducido.
- Do reservar ancho y alto de imágenes y limitar fuentes y recursos críticos.
- Do aspirar en campo a LCP <= 2.5s, INP <= 200ms y CLS <= 0.1 en el percentil 75.
- Don't introducir otros colores de acento, neón, glow púrpura o degradados de IA.
- Don't usar blobs, ilustración corporativa genérica ni iconos flotantes decorativos.
- Don't usar color, posición o movimiento como única forma de transmitir información.
- Don't ocultar el foco ni sustituir controles nativos por `div` interactivos.
- Don't copiar aquí reglas de oferta, claims, terminología o voz: pertenecen a la guía
  editorial de marca.