# KULTRUN — Design System

**KULTRUN** es una palabra en mapudungun: el tambor ceremonial de la machi. En su parche está dibujado el universo repartido en cuatro cuadrantes — la vista completa en un solo círculo tensado. El sistema está construido sobre esa idea: pocas piezas, bien decididas, y una identidad que se teje con la gente en lugar de entregarse terminada.

Referencia de dirección: identidades participativas de bloque de color y forma geométrica. La ilustración es **geometría mapuche**, no ornamento étnico decorativo: kultrun, antü, lukutuwe, anümka, ñimin, siempre planos y de trazo uniforme.

---

## Fundamentos

### Color — cinco valores, ni uno más

La paleta está nombrada en mapudungun. El nombre no es decoración: dice para qué sirve el color.

| Nombre | Token | Hex | Rol |
|---|---|---|---|
| **KURÜ** | `--c-kuru` | `#1B1A18` | Base · profundidad · contraste |
| **LIG** | `--c-lig` | `#FFFFFF` | Luz · claridad |
| **WENU** | `--c-wenu` | `#D2E4F8` | Cielo · espacio. **La segunda superficie**: la mayoría de bloques, cards y bandas |
| **ANTÜ** | `--c-antu` | `#FA5A2A` | Sol · energía · acento. **Un bloque por pantalla** |
| **KUYÜM** | `--c-kuyum` | `#E4E1DA` | Arena · territorio · materia. **El fondo de la marca** |

La pareja de trabajo es **Kuyüm + Wenu**: Kuyüm es la página, Wenu es todo lo que se apoya encima. Kurü pone el peso y Antü aparece una vez. Si una pantalla parece plana, el bloque que falta es Wenu, no Antü.

**Antü** es también el motivo del sol en la biblioteca de formas: color y símbolo comparten nombre.

Los alias en inglés (`--c-ink`, `--c-white`, `--c-arena`, `--c-sky`, `--c-sol`) siguen resolviendo para no romper páginas existentes, pero **en trabajo nuevo se usan los nombres en mapudungun**.

**Contraste — regla dura.** WENU y KUYÜM son **superficies claras**: el texto encima va siempre en **KURÜ**, nunca en LIG. Blanco sobre Wenu no alcanza contraste legible y está prohibido en todo el sistema. LIG como color de texto sólo sobre KURÜ o ANTÜ. Y al revés: **WENU no se usa como color de tipografía** sobre superficies claras (un dato en Wenu sobre blanco no se lee) — para destacar sobre claro, ANTÜ.

**Contraste — la regla que no se rompe.** **KURÜ es el único fondo que admite texto claro.** Wenu, Kuyüm, Antü y Lig son superficies claras: el texto sobre ellas va **siempre en Kurü**, nunca en blanco. El blanco sobre Wenu ronda 1.6:1 de contraste — ilegible, y es el error más fácil de cometer porque en pantalla grande «parece» que funciona.

**La regla vale igual para los acentos**, y ahí es peor: un número grande en Wenu sobre Kuyüm mide ~1:1, es decir, invisible. Sobre fondo claro **el único acento legal es Antü**. Wenu y Kuyüm-dk sólo funcionan como acento **sobre Kurü**, donde son claro-sobre-oscuro.

En `slides/Slides.jsx` las dos vías están forzadas por código: `inkOn(bg)` deriva el color de texto y `accentOn(bg, accent)` degrada cualquier acento claro a Antü si el fondo no es Kurü. Una slide no se puede autorizar con tipo ni cifra ilegible aunque se intente.

Sin degradados. Sin paleta secundaria. Los tints (`--c-kuru-80/55/30/12`) sólo para bordes y texto secundario, nunca como color de bloque.

### Tipografía — sólo Graphik

Una familia; el **rol lo marca el peso**, no una segunda fuente.

| Rol | Peso | Uso |
|---|---|---|
| Display | Semibold **600** | Palabras-declaración, tracking −3.5%, line-height 0.88 |
| Título | Semibold **600** | 96 / 64 / 40 px |
| UI | Medium **500** | Nav, botones, labels, eyebrows, captions |
| Cuerpo | Regular **400** | 19 / 16 px |
| Lead | Light **300** | Entradillas de 24 px |

**Bold 700, Black 800 y Super 900 no se usan.** Están en la familia y se cargan, pero endurecen la marca: el sistema se detiene en Semibold 600. El display no se distingue por peso sino por **tamaño y por el color Sol** — un salto de peso grande contra un título de 500 se lee duro.

Itálica: **una palabra**, nunca un párrafo. Todos los archivos son locales (`fonts/Graphik-*.otf`), sin dependencia de CDN.

### Forma

Radios grandes y suaves: `14` inputs · `28` cards · `44` bloques · `72` secciones · `pill` botones. Nunca 4 ni 8 px. Sombras prácticamente inexistentes — el contraste de bloque hace el trabajo.

### Motivos mapuche

El sistema tiene una **biblioteca de 67 elementos geométricos** en seis familias, cada uno con su nombre en mapudungun y una glosa: `preview/mapuche-shapes.html`, archivos en `assets/icons/*.svg`, metadatos en `assets/icons/index.json`.

| Familia | N.º | Contenido |
|---|---|---|
| **Cosmovisión** | 8 | Kultrun, Meli Witran Mapu, Wenu Mapu, Antü, Küyen, Wangülen, Wangülen Lukutuwe, Wiriwel |
| **Ñimin** | 15 | Lukutuwe, Anümka, Copün, Rayen, Temu, Perimontun Filu, Widowmawe, Llalin Kushe, Külpewe, Mauñimin, Pichikemenküe, Nge-nge, Ligtu, Ñimin, Witral |
| **Naturaleza** | 12 | Kopiwe, Pewen, Foye, Kürüf, Mawün, Lafken, Wingkul, Trayenko, Pillañ, Kütral, Mapu, Rakiduam |
| **Animales** | 8 | Üñüm, Chalwa, Filu, Ñamku, Waka, Kawellu, Pangi, Llalin |
| **Platería** | 7 | Trapelakucha, Sikil, Chawai, Tupu, Trarilonko, Punzón, Kaskawilla |
| **Ritual** | 17 | Rewe, Chemamüll, Ruka, Trutruka, Pifilka, Ñolkiñ, Ngillatun, Küdaw, Nütram, Kimün, Newen, Kelluwün, Yamuwün, Inarumen, Afkadi, Trokiñ, Wiñol |

Los cinco de uso diario — **kultrun** (la marca), **antü**, **lukutuwe**, **anümka** y **ñimin** — están en `preview/motifs.html`.

**Reglas de dibujo:** lienzo 200×200, trazo 12, `stroke-linecap:square`, un solo color, plano. Sin degradados, sombras, relieve ni imitación de tejido real.

**Reglas de uso:** mínimo 48 px. Son gráficos de marca, **no iconos de interfaz** — nunca dentro de un botón, un menú o como icono de una acción; para eso está el set funcional (`preview/icons.html`). Trazo en Ink sobre claro o Arena sobre oscuro; el acento es el bloque de fondo, **nunca la línea**. Cuando una pieza aparece destacada o en material público, se nombra en mapudungun.

### Logo

La marca es un **kultrun**: dos anillos, la cruz que reparte el mundo en cuatro, los cuatro semicírculos tensados hacia dentro y cuatro **rombos** de cuadrante. Los rombos (no cuadrados) vienen del ñimin del telar — lukutuwe, copün — y son lo que ata el logo al resto del vocabulario de forma.

**Dos piezas, un solo signo.** Ninguna versión resuelve a la vez el parche ceremonial y el favicon:

| Pieza | Uso | Archivo |
|---|---|---|
| **Principal** | 40 px y más: papelería, portadas, firma, web grande | `assets/kultrun-mark-{ink,white,sol}.svg` |
| **Reducción UI** | Por debajo de 40 px: favicon, avatar, nav, app | `assets/kultrun-mark-ui-{ink,white,sol}.svg` |

La reducción suelta el segundo anillo y los rombos — exactamente lo que se empasta primero — y asienta la cruz y los semicírculos en el borde interior del anillo único, en la misma proporción que la principal.

**Geometría canónica** (lienzo 200×200):

- **Principal** — anillo exterior r=92, interior r=70, trazo 11 · cruz de 30 a 170 · cuatro semicírculos r=24 · cuatro rombos en las **diagonales**, centro (66,66 / 134,66 / 66,134 / 134,134), semidiagonal 11.
- **Reducción** — anillo r=88 trazo 13 · cruz de 19 a 181 trazo 10 · cuatro semicírculos r=25 trazo 10.

**La regla que gobierna los semicírculos:** sus extremos van *sobre* la circunferencia, nunca más afuera. Para un anillo de radio R y un arco de radio r, el arco arranca a una profundidad `100 − √(R² − r²)` con los extremos a ±r del eje; así nace del anillo y abomba hacia dentro, y es geométricamente imposible que se salga. Los arcos ocupan los ejes; los rombos, las diagonales. Nunca se cruzan.

El icono `kultrun` de la biblioteca de formas es **el mismo archivo que el logo**: si se toca uno, se tocan los dos.

Wordmark en Graphik Semibold, tracking −4.5%. Tres lockups: horizontal (principal), vertical con descriptor *Cuatro Mundos*, y sobre Sol (la marca siempre en Ink cuando el fondo es naranja). Altura mínima de marca: 16 px con la reducción, 40 px con la principal. Área de respeto: un cuadrante.

### Navegación

**La nav va siempre plegada.** La barra sólo lleva dos cosas: la marca y la palabra **Menú**. Nunca links sueltos, en ningún breakpoint — es el patrón para el microsite y para todas las webs KULTRUN.

Al pulsar, un **overlay Ink a pantalla completa** entra con `clip-path` desde arriba en 600 ms:

- Links en **Semibold 600** a escala de display (`clamp(38px, 7vw, 86px)`), cada uno con su número de orden en 11 px.
- **Reveal escalonado** de 60 ms por link; el pie (email + CTA) entra al final.
- El **CTA vive dentro del overlay**, no en la barra: es el único pill de la navegación.
- Cierra con «Cerrar», con `Esc` y al pulsar cualquier link. Bloquea el scroll del `body` y devuelve el foco al disparador.
- Banda **ñimin** al pie del overlay al 16% de opacidad.
- **Máximo 6 entradas.** Si no caben, el problema es la arquitectura de contenido, no el menú.

La marca de la barra es la **principal** en reposo y la **reducción** cuando la barra se encoge al hacer scroll. Patrón completo en `preview/nav.html`.

### Botones y CTA

**Un solo pill.** Graphik Medium 16 px, padding 17/26, radio `pill`. Hover vira a **Sol** en todas las variantes; la variante Sol vira a Ink. Press: scale 98%. Sobre Ink el botón nunca es Ink.

La **flecha escalonada** es la flecha de la marca — un chévron de ángulos rectos con la misma lógica que la banda ñimin, sólida y sin trazo:

```svg
<svg viewBox="0 0 24 24" fill="currentColor" stroke="none">
  <path d="M2 9H11V6H17V9H20V10.5H22V13.5H20V15H17V18H11V15H2Z"/>
</svg>
```

Dos reglas que no se negocian:

1. **La flecha va SIEMPRE dentro del pill**, a 10 px del texto. Nunca en un disco aparte, nunca separada del botón.
2. **Sin animación de carril.** No hay disco que crezca, ni flecha en marquesina infinita, ni pill que se fusione con un círculo en hover. El único cambio de estado es el color (350 ms) más el 98% de press (200 ms).

La flecha de retroceso es la misma figura espejada: `M22 9H13V6H7V9H4V10.5H2V13.5H4V15H7V18H13V15H22Z`.

### Movimiento

Easing `cubic-bezier(0.65, 0, 0.35, 1)`. Duraciones 200 ms (micro) · 350 ms (estado) · 600 ms (reveal). Sin bounce, sin overshoot.

---

## Components

Componentes React exportados por el sistema (`window.<Namespace>.<Nombre>`), en `components/`:

- **Pill** — botón pill canónico con la flecha escalonada dentro. Variantes: `ink`, `sol`, `sky`, `white`.
- **Field** — campo de texto: label Medium en mayúsculas, superficie blanca, radio 14, hint opcional, asterisco Sol para requeridos.
- **ChipGroup** — chips multi-selección; el chip activo invierte a Ink.

---

## Índice de archivos

- `README.md` — este documento.
- `SKILL.md` — entry point del Skill.
- `colors_and_type.css` — tokens de color, tipo, forma, espaciado y motion, más los alias legacy del sistema anterior.
- `index.html` — landing del sistema con todas las cards.
- `thumbnail.html` — tile del sistema en el home.
- `components/` — Pill, Field, ChipGroup con sus `.d.ts` y preview cards.
- `assets/` — marca kultrun (Ink / blanco / Sol), imágenes.
- `assets/icons/` — **67 formas mapuche** en SVG + `index.json` con nombre, glosa y familia.
- `fonts/` — Graphik 100–900 + itálicas, en `.otf`.
- `preview/` — preview cards de la pestaña Design System.
- `preview/mapuche-shapes.html` — **generada desde `assets/icons/index.json`**. Si editas el JSON, regenera la página entera en el mismo paso; nunca la parchees con find-and-replace (los `<figure>` se pisan entre sí).
- `ui_kits/website/` — recreación del site de marketing.
- `ui_kits/apps/` — patrones de app (formulario, wizard, ficha) en desktop + mobile.
- `slides/` — plantillas de slide 16:9 para propuestas.