Sistema de Diseño · Plataforma Itrend

Referencia viva de tokens y componentes. Tema activo: azul. Todo lo que ves usa las hojas compartidas reales (tokens.css + main.css + components.css) — no hay estilos inventados aquí. Copia los snippets tal cual.

Cómo llamar al CSS

Fija una versión (un tag) y enlaza el dist/. No necesitas Node ni este toolchain para consumir.

Opción A — un solo bundle

<link rel="stylesheet" href="dist/itrend-ui.css">

Opción B — capas por separado (respeta el orden)

<link rel="stylesheet" href="dist/tokens.css">      <!-- 1. variables -->
<link rel="stylesheet" href="dist/main.css">         <!-- 2. reset + layout -->
<link rel="stylesheet" href="dist/components.css">   <!-- 3. componentes -->

Opción C — npm por tag

npm install git+https://gitlab.com/spotmind/itrend/minecon-ui.git#v0.3.0

Regla de oro: usa siempre var(--color-*), var(--space-*)… nunca hardcodees. Para saber qué versión tienes cargada: lee --itrend-ui-version del CSS (getComputedStyle(document.documentElement).getPropertyValue("--itrend-ui-version")).

Colores semánticos

Nunca hardcodear: usar siempre var(--color-*). Fuente: design/tokens.json.

Escala de espaciado

Tipografía

Radios

Tabla de tokens

Relación variable CSS → valor (valores computados reales del :root). Fuente: design/tokens.json.

Variable CSSValorCategoría

Botones · main.css

Primario / Secundario

<button class="btn btn-primary">Simular impacto</button>
<button class="btn btn-secondary">Cancelar</button>

Tokens: --color-action · --color-action-hover · --color-action-text · --color-surface-alt

Badges · main.css

Grandes Pymes 
<span class="badge">Grandes</span>
<span class="badge outline">Pymes</span>

Tokens: --color-action · --color-action-text · --color-border · --radius-sm

Categóricos (soft)

Para etiquetar tipo de dato / sector, como en la maqueta de referencia.

Cosecha Impacto Procesamiento 
<span class="badge cosecha">Cosecha</span>
<span class="badge impacto">Impacto</span>
<span class="badge proceso">Procesamiento</span>

Tokens: --color-cat-cosecha · --color-cat-impacto · --color-cat-proceso (+ sus -bg)

KPI cards · main.css

Los KPI protagonistas: PAE, pérdida en PB y pérdida en PIB. Siempre en CLP/USD, nunca solo %.

PAE
$4.820M
Pérdida Anual Esperada
Pérdida PB
$12.140M
Producción Bruta
Pérdida PIB
$6.310M
Valor agregado
<div class="kpi-grid">
  <div class="kpi-card">
    <div class="kpi-label">PAE</div>
    <div class="kpi-value">$4.820M</div>
    <div class="kpi-sub">Pérdida Anual Esperada</div>
  </div>
</div>

Tokens: --color-surface · --color-border · --shadow-card · --radius-lg

Campos (select / input) · main.css

<div class="filter-row">
  <div class="field-group">
    <label>Región</label>
    <select><option>Maule</option></select>
  </div>
</div>

Tokens: --color-border · --color-border-focus · --color-surface · --radius-md

Dialog · components.css

Diálogo modal de decisión (primer componente promovido). Para preguntas que deben responderse en el momento. Aquí se muestra estático; quien lo abre maneja foco/Esc.

¿Aplicar medidas de mitigación?

Se recalculará la pérdida anual esperada para el territorio seleccionado.

<div class="dialog-backdrop">
  <div class="dialog">
    <h3 class="dialog__title">¿Aplicar medidas de mitigación?</h3>
    <p class="dialog__desc">Se recalculará la pérdida…</p>
    <div class="dialog__actions">
      <button class="btn btn-secondary">Cancelar</button>
      <button class="btn btn-primary">Aplicar</button>
    </div>
  </div>
</div>

Tokens: --color-scrim · --color-surface · --shadow-card · --radius-lg

Card + jerarquía de títulos · main.css

Configuración base

Define el territorio y el alcance del análisis de riesgo.

<div class="card">
  <div class="card-head">
    <div>
      <div class="card-title">Configuración base</div>
      <p class="card-lead">Define el territorio…</p>
    </div>
  </div>
</div>

Jerarquía: .section-title · .card-title · .block-label · .card-lead (ver DESIGN.md §6)

Help text · main.css

La PAE (Pérdida Anual Esperada) integra amenaza, exposición y vulnerabilidad por nivel de intensidad.

<p class="help-text">La PAE integra amenaza, exposición…</p>

⚠ Contraste text-muted sobre surface-alt = 4.22:1 (bajo AA 4.5). Pendiente de diseño.