# IzyPagos · Design System
Sistema de diseño oficial de **IzyPagos** (fintech de pagos). Tokens, estilos base,
componentes y un preset de Tailwind — **framework-agnóstico** y listo para copiar a un
repositorio o publicar como paquete privado, para reutilizar la marca en cualquier proyecto.
> La guía visual completa (estrategia, voz, reglas de uso, logo) vive en el manual
> `../index.html`. Este paquete es la **capa de implementación** de esa identidad.
## Contenido
```
design-system/
├─ package.json
├─ tokens/
│ ├─ tokens.css # custom properties (fuente de verdad en runtime) + tema oscuro
│ ├─ tokens.scss # variables SCSS
│ └─ tokens.json # W3C design tokens (para pipelines / Style Dictionary)
├─ css/
│ ├─ izypagos.css # bundle: importa todo lo de abajo
│ ├─ reset.css # reset moderno y neutro
│ ├─ base.css # tipografía, enlaces, foco, cuerpo
│ ├─ components.css # botones, inputs, badges, alerts, cards, tabla, switch, tabs…
│ └─ utilities.css # contenedor, stack/cluster, spacing, helpers de texto
├─ tailwind/
│ └─ izypagos.preset.js # preset con colores, tipografía, radios y sombras de marca
└─ assets/logo/ # logo en SVG + PNG + favicon/app icons
```
## Instalación
### Opción A — copiar la carpeta
Copia `design-system/` a tu repo (por ejemplo en `src/design-system/`) e impórtala.
### Opción B — dependencia local / privada
```bash
npm install ./ruta/al/design-system
# o publícalo en tu registro privado y:
npm install @izypagos/design-system
```
## Uso
### 1) CSS puro (cualquier stack)
```html
```
```js
// o con bundler
import '@izypagos/design-system'; // todo
import '@izypagos/design-system/tokens'; // solo tokens
```
```html
Aprobado