# Sistema de Diseño — Minimalart

> Fuente única de verdad para todas las decisiones visuales. El agente `design-orchestrator` lee este archivo antes de cualquier cambio.
> Assets de marca en [public/assets/](public/assets).

## 1. Principios

- **Minimal:** menos elementos, más jerarquía. El espacio en blanco es un componente.
- **Editorial:** combinación serif + sans, tipografía con peso visual.
- **Color con intención:** la paleta es expresiva pero se aplica con moderación — superficie neutra, acento puntual.
- **Accesibilidad:** contraste AA mínimo, focus visible, navegación por teclado.

## 2. Marca

- Nombre: **Minimalart**.
- Símbolo: grilla 3×3 con barra central (logo en [public/assets/Logos/](public/assets/Logos)).
- Variantes disponibles: positivo/negativo, sobre fondo neutro / azul / transparente, símbolo solo, favicon, tagline.

### Reglas de uso del logo

- **Nunca** reconstruir el wordmark con tipografía. Usar siempre los archivos oficiales (`/assets/Logos/`).
- Sobre fondos claros (`--bg`, `--surface`): variante **positivo** sobre transparente (`12_logo_positivo_fondo_transparente.png`).
- Sobre fondos navy/oscuros: variante **negativo** sobre transparente (`14_logo_negativo_fondo_transparente.png`).
- Para usos pequeños (favicon, app icon): variantes `31_*` / `32_*` / `33_*` / `34_*`.
- Tamaños mínimos en pantalla: lockup completo ≥ 24px de alto; símbolo solo ≥ 16px.
- No deformar, recortar, recolorear ni rotar el logo.

## 3. Paleta

Definida como variables CSS en `src/app/globals.css`. Usar tokens, nunca hex sueltos.

### Base

| Token         | Valor       | Uso                                       |
| ------------- | ----------- | ----------------------------------------- |
| `--bg`        | `#FAFAF7`   | fondo principal (crema neutral)           |
| `--surface`   | `#F2F1EC`   | superficies elevadas, cards               |
| `--fg`        | `#1A2238`   | texto principal (navy de marca)           |
| `--fg-muted`  | `#6B7891`   | texto secundario                          |
| `--border`    | `#E4E2DA`   | bordes y separadores                      |
| `--brand`     | `#1A2238`   | navy de marca, fondo logo negativo        |
| `--brand-fg`  | `#FAFAF7`   | texto sobre `--brand`                     |
| `--danger`    | `#D14A4A`   | errores                                   |

### Acentos (de iconos)

| Token              | Valor       | Nombre     |
| ------------------ | ----------- | ---------- |
| `--accent-yellow`  | `#E6CB52`   | Amarillo   |
| `--accent-sky`     | `#5C8FE6`   | Celeste    |
| `--accent-orange`  | `#F08F4A`   | Naranja    |
| `--accent-neutral` | `#6B7891`   | Neutro 5   |
| `--accent-pink`    | `#E27DC9`   | Rosa       |
| `--accent-turquoise` | `#36BFB8` | Turquesa   |
| `--accent-green`   | `#4DB87A`   | Verde      |

Color primario de acción por defecto: `--brand` (navy). Los acentos se reservan para categorización, ilustración y micro-momentos.

## 4. Tipografía

Fuentes locales en [public/assets/Tipografías/](public/assets/Tipografías). Cargadas vía `@font-face` en `globals.css`.

| Familia         | Uso                          | Pesos disponibles      |
| --------------- | ---------------------------- | ---------------------- |
| **Fraunces**    | display, titulares (serif)   | 600 (SemiBold)         |
| **Zalando Sans**| UI, cuerpo (sans)            | 400 / 500 / 600        |

### Escala (rem)

| Nombre  | Valor   | Uso                  |
| ------- | ------- | -------------------- |
| xs      | 0.75    | metadata, captions   |
| sm      | 0.875   | secundario           |
| base    | 1       | cuerpo               |
| lg      | 1.125   | énfasis              |
| xl      | 1.25    | h5                   |
| 2xl     | 1.5     | h4                   |
| 3xl     | 1.875   | h3                   |
| 4xl     | 2.5     | h2                   |
| 5xl     | 3.5     | h1                   |
| display | 5       | hero                 |

- **Headings (h1-h3):** Fraunces 600. Line-height 1.05–1.15. Tracking ligeramente apretado (`-0.01em`).
- **h4-h6 + UI + cuerpo:** Zalando Sans, peso según jerarquía. Line-height 1.5 cuerpo.

## 5. Espaciado

Escala base 4px (rem): `0.25 / 0.5 / 0.75 / 1 / 1.5 / 2 / 3 / 4 / 6 / 8 / 12`.
Usar utilidades Tailwind (`p-2`, `gap-6`…). Evitar valores arbitrarios.

## 6. Radios

| Nombre | Valor      | Uso               |
| ------ | ---------- | ----------------- |
| none   | 0          | bordes duros      |
| sm     | 0.375rem   | inputs, tags      |
| md     | 0.625rem   | buttons, cards    |
| lg     | 1rem       | paneles grandes   |
| full   | 9999px     | avatares, pills   |

## 7. Sombras y elevación

Preferir bordes (`--border`) y cambios de superficie (`--surface`) sobre sombras. Si se usan, una sola escala suave: `0 1px 2px rgb(26 34 56 / 0.06), 0 4px 12px rgb(26 34 56 / 0.04)`.

## 8. Componentes

Construir bajo demanda en `src/components/`. Cada componente:

- Props tipadas en TypeScript.
- Variantes y tamaños declarados explícitamente.
- Estados: default / hover / focus-visible / disabled.

### Button

- Variantes: `primary` (fondo `--brand`, texto `--brand-fg`), `secondary` (fondo `--surface`, borde `--border`), `ghost` (sin fondo).
- Tamaños: `sm` (`px-3 py-1.5 text-sm`), `md` (`px-4 py-2`), `lg` (`px-6 py-3 text-lg`).
- Radio: `md`.
- Focus: `outline-2 outline-offset-2 outline-[var(--brand)]`.
- Disabled: `opacity-50 cursor-not-allowed`.

## 9. Layout

- Contenedor: `max-w-6xl mx-auto px-6 lg:px-10`.
- Grid: 12 cols desktop / 6 tablet / 4 mobile, `gap-6`.
- Secciones de página separadas por `py-20 md:py-28`.

## 10. Iconografía

- **Símbolo de marca:** renderizar siempre como SVG inline (componente `BrandSymbol`), no como bitmap. Coloreado vía `currentColor` y los tokens de acento (`--accent-*`).
- Los PNGs en [public/assets/Icons/](public/assets/Icons) son referencia de marca; **no** usarlos como iconos en la UI (son banners y se pixelan al recortarse cuadrados).
- Variantes de color basadas en la paleta de acento: Amarillo, Celeste, Naranja, Neutro, Rosa, Turquesa, Verde.
- Para íconos de UI genéricos: SVG inline mínimos. No instalar librería de íconos sin pedido explícito.

## 11. Pendientes

- [ ] Modo dark explícito.
- [ ] Motion / transiciones (duraciones y easing).
- [ ] Sistema de ilustración / data viz.