# IzyPagos — Brand Spec (extraído de fuente real)

Fuente: `logoizypagos.png` (borrador de logo) + https://www.izypagos.com/ (sitio en vivo).
Mercado: procesamiento de pagos para **comercios en Colombia**. Público prioritario: comercios que cobran.

## Tokens de color base (OKLch)

```css
:root {
  --bg:      oklch(97.6% 0.006 250);  /* #F6F8FC  Nube (fondo claro)      */
  --surface: oklch(100%  0     0);    /* #FFFFFF  Superficie              */
  --fg:      oklch(20%   0.03  255);  /* #0B1524  Tinta 900 (texto)       */
  --muted:   oklch(55%   0.03  255);  /* #64748B  Tinta 500 (secundario)  */
  --border:  oklch(92%   0.008 250);  /* #E2E8F0  Borde hairline          */
  --accent:  oklch(58%   0.22  258);  /* #1466FF  Azul Izy (primario)     */
}
```

Color derivado de marca:
- Cian Izy `#17C1E8` — secundario (innovación / rapidez / datos), evolución del cian del logo.
- Azul Noche `#070C18` — base de tema oscuro (conserva el equity del fondo negro).
- Verde Pago `#12B76A` — éxito / transacción aprobada.
- Rojo `#F04438` — SOLO semántico (rechazo/error). Reasignación del rojo del borrador.

## Fuentes

```
--font-display: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;   /* titulares, marca */
--font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;  /* cuerpo, UI       */
--font-mono:    'IBM Plex Mono', ui-monospace, 'JetBrains Mono', monospace; /* montos, IDs, refs */
```

Datos financieros: `font-variant-numeric: tabular-nums`. Montos y referencias en mono/tabular.

## Posturas de layout observadas / decididas

1. Radios amables pero contenidos: 8 / 12 / 16 px + pill (999) — fintech cercano, no infantil ni banca rígida.
2. Bordes hairline 1px `--border`; elevación por sombra suave, no por bordes gruesos.
3. Presupuesto de acento: azul primario en 1–2 usos por pantalla; cian y verde como señales puntuales.
4. Gradiente azul→cian NUNCA como fondo genérico de héroe; solo en el isotipo y el momento de "aprobado".
5. Grid base 8px; contenedor máx 1200–1280px; cuerpo a 60–72ch.