# Iconography

> Definí el sistema de íconos. La consistencia acá es lo que hace que el UI se vea como un sistema y no como un collage.

---

## Style

`[ Describí el estilo general: outlined / filled / duotone / flat / custom. Una oración. ]`

`[ Referencia: ¿qué set existente es el más cercano al estilo deseado? ]`

---

## Stroke Weight

- **Estándar**: `[ N ]px stroke a grid de `[ N ]`px
- **Bold**: `[ N ]px — para contextos de alta énfasis
- **Stroke cap**: `[ round / square ]`
- **Stroke join**: `[ round / miter ]`

**Regla**: Nunca mezclar pesos de stroke dentro del mismo contexto.

---

## Sizing Grid

Todos los íconos se dibujan en un grid de **`[ N ]`px base** con `[ N ]`px de padding interno (área viva de `[ N ]`px).

| Token | px | Uso |
|---|---|---|
| `icon-sm` | `[ N ]px` | `[ Uso ]` |
| `icon-md` | `[ N ]px` | `[ Uso ]` |
| `icon-base` | `[ N ]px` | `[ Uso — default ]` |
| `icon-lg` | `[ N ]px` | `[ Uso ]` |
| `icon-xl` | `[ N ]px` | `[ Uso ]` |

No escalar íconos entre estos tamaños de manera arbitraria.

---

## Corner Radius

- Esquinas internas: `[ N ]px`
- Esquinas externas: `[ round / sharp / según stroke join ]`
- Íconos direccionales (flechas): `[ redondeados / puntiagudos ]`

---

## Filled vs. Outlined

| Estado | Estilo |
|---|---|
| Default | `[ Outlined / Filled ]` |
| Active / Selected | `[ Filled — color: ]` `#[ HEX ]` |
| Disabled | `[ Outlined — stroke: ]` `#[ HEX ]` |
| Hover | `[ Outlined — stroke shift a: ]` `#[ HEX ]` |

---

## Color Usage

- **Default**: `#[ HEX ]` (sobre fondos oscuros) / `#[ HEX ]` (sobre fondos claros)
- **Muted / secundario**: `#[ HEX ]`
- **Active / acento**: `#[ HEX ]`
- **Disabled**: `#[ HEX ]`

Los íconos son siempre de un solo color.

---

## Naming Conventions

Patrón: `sustantivo-modificador`

```
arrow-right / arrow-left / arrow-up / arrow-down
chevron-right / chevron-left
close / menu / check
external-link / mail
[ agregar los propios ]
```

No usar verbos como prefijo (`go-right`, `open-link`). Solo sustantivos con modificadores cuando sea necesario.

---

## Prohibited Modifications

- No rotar íconos que no están diseñados para rotarse
- No aplicar drop shadow a íconos
- No outline doble para "hacer destacar"
- No mezclar íconos de distintos sets en el mismo contexto
- No encerrar íconos en círculos o cuadrados de color como patrón sistemático

---

## Icon Set Reference

**Set elegido**: `[ Lucide / Phosphor / Heroicons / Custom / Otro ]`
**Licencia**: `[ MIT / Comercial / Custom ]`
**URL**: `[ link al set ]`

`[ Si se van a crear íconos custom, describí el proceso y cómo deben matchear el set principal. ]`