---
name: galilei-brand
description: Sistema de diseño y brand de Galilei Learning · rider activo. Cubre tokens, paleta (GaliGreen + Neutralverse), tipografía (Radio Canada Big + Space Grotesk), reglas inamovibles, Gali (mascota), logo, íconos 3D, superficies, sistema de listas, aplicaciones de marca por medium (app, web, slides, email, social, print, templates) y specs audiovisuales (formatos, ficha técnica, lower thirds). Aplica a TODO entregable visual digital o físico del rider. Activa con Galilei, Galilei Learning, brand portal, Gali, brief/colores/prompt/mockup/web/copy/slide/email/social/print/template/icono/video de Galilei, o cualquier pieza de marca del rider.
---

> **Canon:** portal `galilei-landing.pages.dev` · `/identidad-visual/sistema/`. Esta skill refleja esa pagina. Si hay conflicto, gana el portal.

# Galilei Learning · Brand & Design System

Rider activo de Viceversable. Plataforma de capacitación gamificada para negocios con empleados operativos. Posicionamiento: Play, Apply, Unlock.

| Recurso de marca | Donde |
|---|---|
| **Portal de Marca** · canon visual (esta skill lo refleja) | `galilei-landing.pages.dev` |
| **Figma · Brand master** | https://www.figma.com/design/urnZ0xm7vqE8gvx8yH2EDf/Galilei-Learning-Brand |
| **Figma · Viceversable** | https://www.figma.com/design/Lar9HysknrUkcvU0U0DMP3/Viceversable |
| **Web pública** | `galileilearning.com` |

> Esta skill es marca pura · qué ES Galilei. La **implementación del portal** (componentes, clases CSS, nombres de tokens en código, build y deploy) vive en `DESIGN.md` del repo `galilei-portal`, no aquí.

---

## 0. Contexto de marca · ADN, Golden Circle y voz

Resumen para encuadrar cualquier pieza. Para la profundidad: skills `galilei-estrategia` (ADN, posicionamiento, audiencia) y `galilei-identidad-verbal` (voz completa, tono por canal).

### Golden Circle
- **Why.** Nadie debería odiar los lunes. 2.700M de personas trabajan fuera de un escritorio, sostienen el negocio cada día y merecen orgullo, crecimiento y alegría. Y el dueño merece dejar de ser bombero para liderar un sistema que corre solo. Win-win: empleado + dueño.
- **How.** Galificación · **Juega. Aplica. Desbloquea.** El empleado juega 2 min al día, aplica en su turno y desbloquea recompensas reales solo cuando las métricas del negocio mejoran. Premiamos la acción, no el consumo de contenido. Galilei hace el trabajo, no el dueño.
- **What.** Un sistema gamificado de capacitación, gestión de desempeño y fidelización para negocios con personal operativo.

### ADN
- **Propósito.** Que el trabajo operativo deje de sentirse como condena y empiece a sentirse como un juego que se gana.
- **Visión.** El sistema operativo que conecta dueño, empleado y cliente en toda operación con personal operativo.
- **Pilares (4).** Día uno · Dog food · Justicia · Coherencia.
- **Personalidad (5).** Coach de tu lado (no juez) · juguetón con picardía · cálido y optimista · claro y sin corporativismo · reflector, no protagonista.
- **Arquetipos Kairos.** Mago (dominante · el GaliEffect) + Héroe compañero (soporte · del lado del personal operativo) + Bufón (textura · humor y toque paisa).

### Voz · resumen
- **Premisa.** Habla como un coach que sabe de operación y está de tu lado: cercano, claro, con energía positiva. Nunca institucional, condescendiente ni "corporativo latinoamericano". *"Tu parce que te quiere ver crecer, no tu jefe que te evalúa."*
- **6 atributos.** Personas al centro · se guía, no protagonista · juguetón con picardía · alegría + confianza = amor · simple y buena onda · celebra a los héroes de cada día.
- **Lengua.** Tú (no usted) · frases cortas · voz activa · celebra al empleado ("tú lo hiciste", no "se logró") · toque paisa solo en social/video, con moderación (nunca en UI ni documentos).
- **Prohibido.** El giro "No es solo X, es Y". Sentence case por default.

---

## 1. Reglas inamovibles de marca

1. **Cero em-dashes** (`—`) en cualquier escrito (UI, copy, captions). Reemplazos: `·` middle dot, `,`, `:`, `()`.
2. **Sentence case** por default en headlines, titulos, body, botones, labels. La unica excepcion es ALL CAPS en overlines (labels de seccion, kickers), en Space Grotesk con letter-spacing 14% (`overline-lg` 12px · `overline-sm` 10px). **Sin punto final en titulos** (h1, h2, titulos de seccion): un titulo no es una oracion. Los puntos internos de un tagline de marca si valen ("Juega. Aplica. Desbloquea.").
3. **Solo Radio Canada Big + Space Grotesk.** Via tokens `var(--font-display)`, `var(--font-body)`, `var(--font-mono)` (este ultimo apunta a Space Grotesk + tabular-nums). Cero Menlo, cero Inter, cero Arial.
4. **Pesos:** solo 400, 500, 600, 700. Sin 300, 800, 900, ni italics.
5. **Presupuesto de lima · el lima es senal, no decoracion.** GaliGreen `#B3F131` maximo 10% de cualquier composicion, y ademas: (a) maximo 1 acento de lima por viewport; si hay dos cosas lima sin scroll, una no es la mas importante. (b) El color en headings no es automatico: la palabra en lima firma vive solo en el titulo del hero de la pagina (una por pagina). Los titulos de seccion (h2) van todos en `--text-primary`, sin acento de lima. Asi cada pagina tiene exactamente un heading con lima: el hero. (c) Numeros de seccion nunca en lima, van en `--text-muted`. (d) Lima nunca sobre superficie verde-tinte; si el card ya es verde, texto e iconos encima van neutros. (e) Lima funcional siempre permitido (nav activo, CTA, dato clave aislado); lima para "darle vida" prohibido. (f) Ante la duda, quitarlo. Los iconos 3D si tienen libertad de color: eso es lo que mantiene al lima como acento puntual.
6. **Sin emojis** en navegacion, titulos, CTAs, badges, dashboards. Iconografia SVG del sistema o nada.
7. **Cero accent borders** en cards o contenedores. Jerarquia y estado se comunican con contenido, fondo de superficie o glow.
8. **Sin sombras decorativas.** Cero `box-shadow` / `drop-shadow` como recurso de profundidad o jerarquia. Se reemplaza por glow o cambio de superficie, mas el espaciado estandarizado (ver §3b Superficies en esta skill y portal Sistema · Espaciado). Unica excepcion: el inset shadow estructural de Mystery. (Decision 2026-05-16, reunion Diego.)

---

## 2. Paleta

### GaliGreen ramp (dark mode default)

| Step | Hex | Token | Rol |
|---|---|---|---|
| 500 | `#B3F131` | `--g-brand` | CTA · links activos |
| 600 | `#A5EF0A` | `--g-600` | Active |
| 700 | `#8CCC04` | `--g-700` | · |
| 800 | `#71A800` | `--g-800` | Light CTA |
| 900 | `#567F00` | `--g-900` | Light Hover |

### Neutralverse

| Token CSS | Hex | Label | Rol |
|---|---|---|---|
| `--neutral-00` / `--n00` | `#0A0B0C` | Base | Fondo absoluto (app background) |
| `--neutral-01` / `--n01` | `#0E1012` | Panel 1 | Chrome: sidebar, header, nav |
| `--neutral-02` / `--n02` | `#171A1E` | Panel 2 | Cards, modales, contenido |
| `--neutral-03` / `--n03` | `#292F36` | Panel 3 | Inset destacado dentro de Panel 2 (tope del stack neutro) |
| `--neutral-04` / `--n04` | `#3D444C` | Subtle text | Texto muy sutil |
| `--neutral-05` / `--n05` | `#58606C` | Muted text | Texto muted / labels secundarios |
| `--neutral-06` / `--n06` | `#8B939E` | Tertiary text | Texto terciario |
| `--neutral-07` / `--n07` | `#C7CCD4` | Secondary text | Texto secundario |
| `--neutral-08` / `--n08` | `#F0F2F5` | Near-white | Casi blanco |
| `--neutral-09` / `--n09` | `#FFFFFF` | Primary text | Texto primario, blanco puro |

**Aliases semanticas de texto:**

| Token semantico | Apunta a | Hex | Uso |
|---|---|---|---|
| `--text-primary` | `--neutral-08` | `#F0F2F5` | Texto principal (body, labels, párrafos) · near-white evita el "quemado" del blanco puro |
| `--white` | `--neutral-09` | `#FFFFFF` | **Headings h1-h4** · blanco puro para máximo contraste · también botones primary text sobre lima |
| `--text-secondary` | `--neutral-07` | `#C7CCD4` | Texto secundario |
| `--text-tertiary` | `--neutral-06` | `#8B939E` | Texto terciario |
| `--text-muted` | `--neutral-06` | `#8B939E` | Labels, captions sutil · piso legible AA (5.62:1 sobre n02) |
| `--text-subtle` | `--neutral-06` | `#8B939E` | Alias canonico de muted · no hay escalon legible por debajo en dark mode |

`--text-muted` y `--text-subtle` apuntan ambos a `--neutral-06`: en dark mode `--neutral-05` (#58606C) ya no pasa AA como color de texto (3.0:1), asi que n06 es el piso real. `--neutral-04`/`--neutral-05` son superficies/decorativos, no texto.

Los colores de tipografia NUNCA usan rgba con opacidad. Siempre hex del ramp Neutralverse.

### Feedback states
- Success: `#22C55E` vivid / `#8BDAA8` light (`--s-500` / `--s-300`)
- Warning: `#ECCF07` vivid / `#FFEF7C` light (`--w-500` / `--w-300`)
- Alert: `#F69554` vivid / `#FFB482` light (`--a-500` / `--a-300`)
- Error: `#FB7E7E` vivid / `#FAA4A4` light (`--e-500` / `--e-300`)

### Escala de alpha (transparencias) · por hue · espejo del Figma (refactor 2026-06-17)

Sistema unico de transparencias. **Una escalera cerrada compartida**, y cada hue
se suscribe a los peldanos que necesita. El grupo `tint` y el `white` suelto se
eliminaron; los alphas oscuros nacen del neutral (no existe un `black`).

**Escalera:** `a05 · a08 · a12 · a20 · a30` (+ `a60` en neutral). Si necesitas un
peldano nuevo, se cambia la escalera para todos · no se inventa un valor suelto.

| Hue | Nace de | Alphas | Rol por peldano |
|---|---|---|---|
| **brand** | `#B3F131` (`--g-500`) | `--g-a05/a08/a12/a20/a30` | a05 reposo/note-callout · a08 soft fill · a12 hover/chip · a20 activo/borde/ring · a30 glow |
| **neutral · claro** | `#FFFFFF` (`--neutral-09`) | `--neutral-n09-a05/a08/a12/a20/a30` | elevar sobre dark: fila, border (a08=`--border`), frosted, focus ring, lineas mystery |
| **neutral · oscuro** | `#0A0B0C` (`--neutral-00`) | `--neutral-n00-a20/a30/a60` | hundir / scrim · `n00-a60` = scrim de modal (negro de marca, no `#000`) |
| **feedback** (×5) | `vivid` (tints) + `dark` (wash) | `--<hue>-a05/a12/a30` · `--<hue>-dark-a50` | a05 note-callout · a12 chip · a30 chip fuerte · dark-a50 wash oscuro de pantalla |

Reglas: (a) el alpha de feedback nace del **vivid**, nunca de un hue oscurecido
(el viejo paso `opacity` al 18% se elimino por off-canon). (b) Espejo 1:1 con la
coleccion Color de Figma, agrupada por hue. (c) Cualquier `rgba()` literal de
estos colores en CSS nuevo es deuda: usa el token.

### Overlays de producto · Figma (3 variables, ligadas al sistema, 2026-06-17)

La coleccion `Overlays` del brand board (Figma) tiene 3 variables que NO viven en
CSS (son Figma-only). Cada una APUNTA (alias) a un token canonico, asi que NO son
una capa de color aparte: derivan del sistema.

| Overlay (Figma) | Rol en la app | Alias → token |
|---|---|---|
| `state-locked` (ex grey) | velo disabled/locked sobre cards y barras de progreso | `neutral/n09-a12` |
| `field-bg` (ex tertiary) | fondo de search field | `neutral/n09-a12` |
| `timer-bg` (ex timer) | fondo de pantalla completa del cronometro (urgencia) | `error/dark` |

`white-heavy` (duplicado de `neutral/n09-a60`) e `info-dark` (= `info/dark`) se
DISOLVIERON 2026-06-17: sus consumidores se repuntaron directo al token canonico y
las variables se borraron. El archivo de producto `📱 UX-UI (Copy)` esta deprecado;
TODO (sistema + UX/UI) vive en el unico archivo `Galiverso · Galilei`.

Regla: si la app necesita un overlay nuevo, no inventes un color. Usa el token del
sistema mas cercano: **solido** (`*/dark`, `*/vivid`) para rellenos de icono o barra,
**tint** (`a05`/`a12`) para velos translucidos. Un tint en un icono solido lo borra.

---

## 2b. Aplicacion semantica del color · matriz canonica

**Tres sistemas de color cohabitan el sistema. Nunca se cruzan.** Antes de elegir un color, identifica en cual de los tres sistemas estas. Si los mezclas, el cerebro lee ruido y la marca pierde lenguaje.

| Sistema | Token | Cuando se usa | Cuando NO |
|---|---|---|---|
| **Brand** | GaliGreen `#B3F131` · ≤10% del frame | Acento de headline (una palabra) · CTA primario · hover · glow · badge "activo" · barra de progreso en curso · dots de notificacion | No es success. No es color de personaje. No es decoracion. No como tinte global de fondo. |
| **Personaje** | Paleta Gali (lima cinetica) · Siderax (cian frio `#73C8E8` / `#ABE3F8`) · Urbano (amber mate `#F69554` / `#FFB482`) | Contextos narrativos del Galiverso: carriles, escenarios, props, fichas, ilustracion, storytelling de marca | No para UI funcional fuera del contexto narrativo. No como token de feedback. No mezclar personajes entre si en la misma toma. |
| **Feedback** | success / warning / alert / error · cada uno con `vivid` (fondos claros) + `light` (fondos oscuros) | Estados reales: confirmacion, validacion, error, advertencia. Instruccion documental "siempre / nunca". Status badge del sistema. | No para flujo logico (sí/no en decision tree, opcion preferida vs alterna). No para filtros, navegacion, categorias. No tres feedback simultaneos en una vista pequena. No color como unica senal. |

### Vivid vs light · una familia, dos roles
- **Chips / pildoras / badges / alerts sobre dark (default Galilei)** → **vivid como texto + vivid como tint del bg**. Formula canonica: `color: <vivid-hex>` (`#22C55E`, `#ECCF07`, `#F69554`, `#FB7E7E`) + `background: rgba(<R,G,B-del-vivid>, 0.10–0.14)`. La senal lee como vibrante y semanticamente fuerte, que es lo que un chip de estado debe hacer.
- **Chips / pildoras sobre fondos claros (light mode, modal overlay)** → se invierte: fondo = tinte `light` de la familia, texto = `dark` de la familia (clase `.snc-chip-on-light`). El wash oscuro del chip dark NO pasa contraste sobre blanco (success 4.22, alert 3.98, error 3.88, info 3.06); el tinte claro + texto oscuro pasa AA en las 7 (5.5–8.5) y diferencia mejor los tonos. Excepcion neutral: fondo `--neutral-07` + texto `--n00`; accent/brand: fondo `--g-brand` + texto `--g-dark`. SSOT: `portal-marca.css` (bloque snc-chip-on-light); la variante Figma "sobre light" del set chip ES esto (realineado 2026-07-03).
- **Light hex** (`#8BDAA8`, `#FFEF7C`, `#FFB482`, `#FAA4A4`) → reservado para casos donde el feedback debe suavizarse: prosa secundaria en notas, leyendas, dots de bullet en listas largas, texto explicativo bajo el chip. No para el chip mismo.
- Regla mental: si la pieza es PEQUENA y debe gritar el estado (chip, badge, alert pill), va vivid. Si la pieza es LARGA o auxiliar (parrafo, nota, leyenda), va light.
- **Forma y tipografia del chip:** un chip va en sentence case y peso regular ("Success", no "SUCCESS" ni bold). El ALL CAPS con tracking pertenece a los overlines, NO a los chips. Y los overlines (labels de seccion o categoria) van en texto plano, NUNCA dentro de un pill: el pill es para chips de contenido o estado. Overline ≠ chip.

### Reglas de combinacion entre los tres sistemas
1. **Un mensaje, un sistema.** Una pieza visual habla en un solo lenguaje: o brand, o personaje, o feedback. Nunca los tres en la misma vista pequena.
2. **Brand domina la composicion.** Si una pieza Galilei necesita un chip de feedback junto a un CTA GaliGreen, OK: el feedback vive contenido (callout, badge inline), GaliGreen sigue mandando como acento global.
3. **Personaje y feedback no se cruzan en la misma card.** Si la card tiene paleta de Siderax (cian), no metas un chip success light: el cerebro lee dos azules/verdes y se confunde. Para "esto sí pertenece a Siderax", usa el propio token de Siderax.
4. **Dos feedback contrastivos solo en patron sí/no.** success + error solo cuando documentas SIEMPRE/NUNCA, válido/invalido, do/don't. Tres o más feedback simultaneos = ruido.
5. **Color no es la unica senal.** Cada chip de feedback acompana icono + texto explicito. Daltonismo no es edge case. Aplica tambien a brand y personaje cuando el color carga significado.

### Anti-patrones documentados (vistos y corregidos)
- ❌ Verde success en chip de decision tree → ✅ GaliGreen + neutral (es flujo logico, no feedback)
- ❌ "Props válidos" en success + cards de Gali en lima en la misma vista → ✅ Renombrar "Sí pertenece" + usar GaliGreen para el sí y neutral para el no
- ❌ GaliGreen como confirmacion de "modulo completado" → ✅ Success `#22C55E` vivid (light mode) o `#8BDAA8` light (dark mode). GaliGreen indica "puede hacerse", no "se hizo".
- ❌ Success light sobre fondo claro → ✅ vivid sobre claro, light sobre oscuro siempre

**Referencias canonicas:**
- DESIGN.md del portal · seccion "Aplicacion semantica · matriz canonica"
- Pagina `/identidad-visual/color/#aplicacion` (SSOT humana visual)

---

## 3. Tipografia

| Token | Font | Peso | Uso |
|---|---|---|---|
| `--font-display` | Radio Canada Big | 500, 600, 700 | Headlines, hero, titulos de seccion |
| `--font-body` | Space Grotesk | 400, 500 | Body, labels, UI, captions |
| `--font-mono` | Space Grotesk | 500 (tabular-nums) | Numeros, datos, tablas |

NO usar otras fuentes. NO usar pesos 300, 800, 900 ni italics.

### Text styles · 18 estilos planos (espejo de Figma) + overline-xl editorial (extra del portal) · consolidado 2026-07-01

Una sola lista plana, sin categoria gali/producto (decision Mari: son pocos y
conviven). RCB = Radio Canada Big · SG = Space Grotesk.

| Estilo | Font · peso | Size / LH | Tracking · case |
|---|---|---|---|
| `display-xl` | RCB Bold | 100 / 105% | -2% |
| `display` | RCB Bold | 56 / 105% | -2% |
| `h1` | RCB Bold | 40 / 115% | -1% |
| `h2` | RCB Bold | 36 / 115% | -1% |
| `h3` | RCB SemiBold | 24 / 115% | -1% |
| `h4` | SG Medium | 20 / 130% | 0 |
| `h5` | SG Medium | 15 / 115% | 0 |
| `lead` | SG Regular | 24 / 150% | 0 | (intro editorial · el specimen de Figma sigue en 16, desactualizado)
| `body` | SG Regular | 16 / 160% | 0 |
| `caption` | SG Medium | 12 / 130% | 0 |
| `mono` | SG Regular | 12 / 130% | 0 · tabular |
| `micro` | SG Medium | 9 / 130% | 4% |
| `overline-lg` | SG Medium | 16 / 130% | 14% · UPPER |
| `overline-sm` | SG Medium | 10 / 130% | 14% · UPPER |
| `tab` | SG Medium | 14 / 14px | 0 |
| `button-lg` | SG Medium | 16 / 100% | 0 |
| `button-sm` | SG Medium | 12 / 100% | 0 |

Dos overlines en mayuscula, **ambos en Space Grotesk**, mismo tracking 14%, diferenciados por tamano:
`overline-lg` (12px) y `overline-sm` (10px). La clase CSS del portal es `.kicker` (= overline-lg).

**Peso de Radio Canada Big segun tamano** (regla de legibilidad):

| Tamano | Peso recomendado | Por que |
|---|---|---|
| Display ≥ 32px | 700 | Headlines hero, peso completo |
| Large 20-32px | 600-700 | Titulos de seccion, h2 |
| Medium 14-20px | 600 | Subtitulos, nombres de card |
| Small 11-14px | 500 | Labels, captions display, etiquetas chicas |

**Regla:** RCB en tamanos chicos (< 14px) con weight 700 pierde legibilidad porque sus formas ya son chunky. Usar 500 a tamano chico, 600 para medium, 700 solo para display grande.

---

## 3b. Superficies (UI Surfaces) · resumen operativo

Sistema de 7 superficies que define profundidad y jerarquía visual. **En dark mode, elevación = luminosidad.** El stack neutro mapea 1:1 al ramp del Neutralverse.

```
Base      #0A0B0C  · n00 ·  el suelo absoluto
Outline  transparente+borde·  solo encima de Base
Panel 1  #0E1012  · n01 ·  chrome y estructura
Panel 2  #171A1E  · n02 ·  contenido y trabajo
Panel 3  #292F36  · n03 ·  inset · tope del stack neutro
Frosted     blur            ·  efímero y flotante
Mystery   especial        ·  gamificación
```

**Cuándo usar cada una:**
| Superficie | Para qué |
|---|---|
| Base | Fondo de pantalla, contenedores raíz |
| Outline | Botones secundarios, chips, contenedores sin peso |
| Panel 1 | Cards, sidebars, chrome estructural |
| Panel 2 | Contenido de trabajo, formularios |
| Panel 3 | Insets, áreas hundidas dentro de Panel 2 |
| Frosted | Modales flotantes, overlays efímeros |
| Mystery | Gamificación, recompensas, momentos lúdicos |

**Reglas críticas:**
- **Scrim** (`rgba(0,0,0,0.6)`) es comportamiento, no superficie
- **Drop shadows:** prohibidos sobre Base; permitidos solo en Panel 1+ con receta documentada
- **Bordes:** la jerarquía se construye con luminosidad, no con bordes

**Detalle de implementación** (CSS por superficie, scrim, drop shadows, bordes, Mystery SVG-exact, aplicaciones de marca, patrón responsive): en el repo del portal: `DESIGN.md`.
## 3c. Sistema de listas · resumen operativo

**Solo 2 tipos permitidos.** Todo lo demás está fuera del sistema.

- **Tipo A · Punto lima `·`** · bullet narrativo. Para listas no ordenadas en cuerpo, presentaciones, social.
- **Tipo B · Número editorial** · para listas ordenadas con peso editorial (pasos, capítulos, prioridades).

**Prohibido:** ✓, →, –, •, *, emojis como bullets, mezcla de bullet styles en la misma lista.

**Detalle de implementación** (CSS, kerning, márgenes, casos por superficie, aplicación en presentaciones e impreso): en el repo del portal: `DESIGN.md`.


## 4. Logo

Variantes (primario · secundario · isotipo), mono, comportamiento sobre
fondos y manual de mal uso viven en el portal. No tiene skill dedicada:
el canon es la pagina. Regla inamovible: nunca distorsionar, rotar,
recolorear ni cambiar la tipografia del logo · siempre 100% opacidad.

Canon: portal `/identidad-visual/logo/`.

---

## 5. Gali · Mascota

Estrella de 5 puntas verde lima, antropomorfica, proporciones chibi. Nunca
en contextos negativos. Ficha, voz, arco, specs visuales y prompt viven en
su skill dedicada (no se duplican aqui). Siderax y Urbano: `galilei-siderax`,
`galilei-urbano`. El universo: `galilei-narrativa`.

Canon: portal `/identidad-visual/gali/` · `/poses/`.
Spec completa: cargar skill `galilei-gali`.

---

## 6. Iconos 3D

### Prompt visual de generacion

Stylized friendly 3D iconography with soft organic geometry. PBR (Physically Based Rendering) with consistent diffuse studio lighting and coherent shadows. The main light creates a silky sheen on convex areas. Materials retain stylized realistic properties based on the object type (soft satin metals, glossy glaze, smooth organic textures). Clean aesthetic, omitting intricate details, vibrant saturated pop colors.

| Parametro | Valor |
|---|---|
| **Render** | PBR, iluminacion de estudio difusa, sombras coherentes |
| **Geometria** | Organica suave, amigable, estilizada |
| **Materiales** | Satindos suaves (metales), glaseado brillante (ceramica/vidrio), texturas organicas lisas |
| **Estetica** | Limpia, sin detalles intrincados, colores pop vibrantes y saturados |
| **Iluminacion** | Luz principal genera sheen sedoso en zonas convexas |

### Categorias

El sistema tiene ~220 iconos 3D en 6 categorias.

| # | ID | Nombre | Iconos | Descripcion |
|---|---|---|---|---|
| 1 | `galicon` | Galicon | 29 | El sistema propio del universo Galilei: cofres, planetas, llave, telescopio, mecanicas y artefactos del juego. |
| 2 | `props` | Props & Conceptos | 46 | Objetos abstractos y transversales que ilustran ideas: cerebro, cohete, diana, megafono, graficas. |
| 3 | `operacion` | Operacion de Restaurante | 31 | POS, cocina, hoteleria, uniformes, fachadas, mobiliario y momentos del dia a dia operativo. |
| 4 | `estandar` | Estandares & Capacitacion | 33 | Higiene, manipulacion de alimentos, mantenimiento, checklists, capacitacion y SOPs. |
| 5 | `premios` | Premios & Recompensas | 26 | Trofeos, monedas, gift boxes, podio, ratings y momentos de celebracion. |
| 6 | `comida` | Comida & Bebida | 56 | Platos, postres, bebidas y snacks. Util para cartas, redes y banners de F&B. |

### Como usar los iconos

1. Busca por categoria el icono que necesitas (tabla arriba).
2. Nunca inventes nombres · todos existen en el catalogo.
3. Si el icono no existe, propon crearlo antes de usar un placeholder.
4. Para conceptos abstractos transversales, la categoria `props` es la mas rica.

> Catalogo completo (nombres de archivo, paths de assets, uso en codigo) → `DESIGN.md` / repo `galilei-portal`.

**Tres capas de íconos, tres reglas de color (2026-07-02):** (1) **FLAT** (Phosphor fill) = utilidad de UI; el color es señal, respeta la paleta. (2) **GLOW** (íconos del sistema para avisos y momentos clave: misión, recompensa, objetivo, bloqueo) = SÍ respetan la paleta de marca (usan lima, cian info, coral error; nunca naranja pirata). (3) **3D** (los ~220 renderizados, stickers, celebración) = libertad cromática, son ilustración, no UI (un 3D puede ser naranja o multicolor sin romper el sistema). Nunca se mezclan capas en un mismo grupo de UI.

## 7. Aplicaciones de marca

Galilei aplica en 8 categorías de mediums. Cada uno tiene reglas específicas de superficie, tipografía, color y layout. Esta sección es la SSOT operativa: antes de generar una pieza, identifica el medium y aplica sus reglas.

### Mapa general

| # | Categoría | Mediums activos |
|---|---|---|
| 1 | **Producto digital** | App Galilei · Web pública · Portal Marca · Partner Pass HTML |
| 2 | **Presentaciones** | Google Slides · Keynote · PDF decks · Pitch decks |
| 3 | **Email** | Transaccional · Marketing · Signature |
| 4 | **WhatsApp / mensajería con usuarios** ⭐ | Grupos · broadcast · templates · status · stickers (canal primario de comunicación con usuarios) |
| 5 | **Social media** | IG · LinkedIn · TikTok · YouTube |
| 6 | **Print / Impreso** | Letterhead · Business cards · Brochures · Posters · Merch · Onboarding kit |
| 7 | **Templates internos** | Contratos · Propuestas · Case studies · Notion |
| 8 | **Micro-UX** | Push · Toasts · Achievement unlocks · Alerts |
| 9 | **Iconografía de app** | App icons · Favicon · Splash · Loading |

---

### 7.1 Producto digital

| Medium | Modo | Superficies permitidas | Tipografía | Mystery | Reglas especiales |
|---|---|---|---|---|---|
| **App Galilei** | Dark | Todas (Base→Mystery) | Full scale | Sí · core de gamification | Stack completo, lima ≤10% |
| **Web pública** `galileilearning.com` | Dark (light opcional) | Todas + Gradient | Full | Max 1 por página | Hero gradient permitido |
| **Portal de Marca** `galilei-landing.pages.dev` | Dark estricto | Todas | Full | Sí | Documentation aid patterns OK |
| **Partner Pass HTML** `riders.viceversable.com/galilei/` | Dark | Base + P1 (header) + P2 (data cards) + Tinted (status) | Conservadora | **NO** | Es reporte serio · sin Mystery · sin gradients llamativos |

---

### 7.2 Presentaciones

| Medium | Dimensiones | Modo | Superficies | Tipografía | Reglas |
|---|---|---|---|---|---|
| **Google Slides** | 1920×1080 (16:9) | Dark | Base + P2 cards + Mystery 1× | Titles ≥48px RCB 700 | Max 1 Mystery por deck (el reveal slide) |
| **Keynote** | 1920×1080 (16:9) | Dark | Idem Slides | Idem | Idem |
| **PDF deck (sales)** | 1920×1080 o A4 | Dark o Light | Base + P2 | Bigger | Light variant: GaliGreen → g-800 `#71A800` (WCAG) |
| **Pitch deck** | 1920×1080 | Dark | Todas | Hero impact | Iconos 3D como decoración, Frosted solo con imagen detrás |

**Reglas comunes:**
- Iconos 3D como elemento decorativo central
- Frosted prohibido sin imagen real detrás (en slide sin foto, usar P2)
- Tipografía bigger que en app · titulares hero ≥48-72px
- Stack simplificado: típicamente Base + P2 cards

---

### 7.3 Email

| Medium | Modo | Ancho | Superficies | Tipografía | Mystery / Gradients |
|---|---|---|---|---|---|
| **Transaccional** (welcome, alerts, receipts) | Light | 600px max | Base + P2 max | Web-safe fallback (Helvetica/Arial) | **NO** · clients no renderizan |
| **Marketing / Newsletter** | Light o Dark | 600px max | Base + P2 + Tinted | Web-safe | Gradients OK clients modernos (con fallback) |
| **Email signature** | Light | Compact | Base + 1 separator | Web-safe | Sin imágenes pesadas, logo isotipo 32px max |

**Reglas comunes email:**
- Light mode preferred (mejor compatibilidad con clients)
- Web-safe typography fallbacks obligatorios (no asumir Radio Canada Big)
- Tinted permitido sobre Base blanca para success/error states
- Sin Frosted (backdrop-filter no funciona en email)
- Sin Mystery (efecto se rompe en clients)
- Buttons: GaliGreen → g-800 `#71A800` para WCAG en light mode

---

### 7.4 WhatsApp / mensajería con usuarios ⭐

**WhatsApp es el canal primario de comunicación con usuarios de Galilei** · principalmente via grupos. Trato especial: no es social media (broadcast), es conversación 1-to-1 / 1-to-grupo. Voz cercana, directa, sin formalismo corporativo. Ver `galilei-identidad-verbal` para detalle de tono.

| Medium | Dimensiones | Reglas |
|---|---|---|
| **Grupos** (canal primario) | · | Voz directa · brand voice en cada mensaje · respuestas rápidas templated · sin emojis decorativos · `galilei-identidad-verbal` para tono |
| **Broadcast lists** | · | Anuncios masivos · texto + 1 imagen 1080×1080 max · CTA claro |
| **Templates de mensaje** (welcome, achievement, reminder, reward) | · | Brand voice · personalizables con variables `{nombre}`, `{lección}`, etc. |
| **WhatsApp Business profile** | 500×500 logo | Isotipo en GaliGreen sobre Base · profile bio: tagline + URL |
| **WhatsApp Status** | 1080×1920 | Mismo formato que IG story · Mystery permitido en reveals · brand mark visible |
| **WhatsApp Stickers** | 512×512 WebP transparente | Gali poses · íconos 3D · expresiones · cero texto en el sticker · pack de 30 max |
| **Greeting / Away messages** | · | Texto auto-reply · brand voice · expectativa de respuesta clara |
| **Mensajes con adjuntos** | · | PDF letterhead · imágenes IG-spec · cualquier asset descargable con branding completo |

**Reglas inamovibles WhatsApp:**
- Brand voice consistente · cero formalismo corporativo · ver `galilei-identidad-verbal`
- Sin emojis decorativos (regla universal Galilei). Excepción: stickers oficiales del pack Galilei
- Mensajes cortos · scannables · 1 idea por mensaje
- CTAs claros con verbos de acción
- Imágenes con marca visible (no fotos sueltas sin contexto)
- Grupos: tono comunidad · "ustedes / nosotros" no "estimados usuarios"
- Templates de respuesta: idénticos al copy de la app (consistencia cross-medium)
- **Cero spam:** cada mensaje al grupo debe agregar valor

**Touchpoints típicos en grupo:**
- Bienvenida al curso/cohort
- Lección del día / reminder
- Achievement unlock celebration
- Quiz challenge
- Reward / sorteo
- Q&A asíncrono
- Anuncio de nueva feature

---

### 7.5 Social media

| Medium | Dimensiones | Surfaces | Tipografía | Reglas |
|---|---|---|---|---|
| **IG post** | 1080×1080 | Todas | ≥40px on 1080w | Mystery 1× por carrusel OK |
| **IG story / reel cover** | 1080×1920 | Todas | Bigger | Brand mark al inicio y al final |
| **LinkedIn banner** | 1584×396 | Base + P2 | Profesional | **NO** Mystery aquí, tono LinkedIn |
| **LinkedIn post** | 1200×1200 o 1200×627 | Base + P2 | Profesional | Mystery muy limitado |
| **TikTok / Reel** | 1080×1920 (video) | Todas | Bigger | Reveals con Mystery OK |
| **YouTube thumbnail** | 1280×720 | Base + P2 | Bold | Iconografía 3D + título grande |
| **YouTube channel banner** | 2560×1440 | Base + Gradient | Hero | · |

**Reglas comunes social:**
- Tipografía bigger que en app
- Brand mark (logo o isotipo) visible en cada pieza
- Tinted variants para posts de estado (success, alert, warning)
- Sin Frosted excepto si la pieza tiene foto/video de fondo
- Hashtags y caption rules en skill `galilei-identidad-verbal`
- Social media es BROADCAST (1-a-muchos), distinto de WhatsApp grupos que es comunidad

---

### 7.6 Print / Impreso

| Medium | Dimensiones | Modo | Surfaces | Tipografía | Reglas |
|---|---|---|---|---|---|
| **Letterhead** | A4 (210×297mm) o Carta (8.5×11in) | Light | Base blanca + P2 dark header (15-20% altura) | RCB 600 títulos, SG 400 body | g-800 `#71A800` para CTAs/links |
| **Business cards** | 85×55mm | Light | Base + texto | RCB 500-600 nombre, SG 400 contacto | Minimal · logo + nombre + rol front, contacto + URL back |
| **Brochures / flyers** | A5/A4 | Light o Dark | Todas + Iconos 3D | Editorial | Hero gradient permitido |
| **Posters / event banners** | Varios | Dark o Light | Todas | Bold ≥80pt RCB 700 | GaliGreen como acento principal · iconos 3D centrales |
| **Backdrops / step & repeat** | 2×2m+ | Dark | Logo + pattern | Logo grande | Pattern de isotipos lima sobre Base, repetitivo |
| **Merch** (camisetas, mugs, stickers, libretas) | Varios | Solid | Logo solid only | · | Vector only · sin gradients · lima como acento o blanco/negro base · **NO** Mystery |
| **Onboarding kit físico** | Mix | Mix | Mix | Mix | Tono celebratorio · iconos 3D OK |

**Reglas comunes print:**
- Light mode preferred (papel es blanco)
- GaliGreen pivot: dark mode usa `#B3F131`, light mode usa `#71A800` (g-800) por WCAG
- Sin Frosted (no se imprime el blur)
- Sin Mystery decorativo (rara excepción: portada especial)
- Vector only para logos · cero rasters

---

### 7.7 Templates internos

| Medium | Modo | Surfaces | Tipografía | Reglas |
|---|---|---|---|---|
| **Contratos / propuestas comerciales** | Light | Letterhead-style: Base + P2 header | RCB 600 títulos, SG 400 body | Sin Mystery · texto-heavy |
| **Case studies** | Light o Dark | Base + P2 + Tinted accent | Editorial | Hero data en Tinted accent (lima) · iconos 3D OK |
| **Reports a cliente** | Dark | Base + P1 + P2 + Tinted | Conservadora | Igual que Partner Pass HTML |
| **Notion templates** | Notion native | Native blocks | Native (Notion fonts) | Brand colors solo en callouts · logo en header |
| **Pitch decks de venta** | Ver §7.2 | · | · | · |

---

### 7.8 Micro-UX

| Medium | Surfaces | Tipografía | Reglas |
|---|---|---|---|
| **Push notification** | (system) | Brand voice tone | Texto only · logo en app icon · `galilei-identidad-verbal` |
| **In-app toast** | P2 + Tinted variant | Body | Auto-dismiss 4s · fade 150ms |
| **Achievement unlock** | Mystery 1× | Bold | Iconos 3D + glow lima · confetti opcional · momento épico |
| **Email alert** | Light · Base + Tinted | Web-safe | CTA simple · sin Mystery |
| **In-app modal** | Scrim 60% + Panel 2 | Body | Scrim siempre detrás |

---

### 7.9 Iconografía de app

| Medium | Dimensiones | Bg | Reglas |
|---|---|---|---|
| **App icon iOS** | 1024×1024 master, exporta sizes Apple HIG | `#0E1012` (P1) solid · sin gradients (Apple HIG) | Isotipo lima centered |
| **App icon Android** | 512×512 master, adaptive icon | `#0E1012` (P1) | Isotipo lima · safe zone respetada |
| **Favicon** | 32×32 + 16×16, SVG preferred | Transparente | Isotipo en GaliGreen `#B3F131` |
| **Splash screen mobile** | Dispositivo nativo | Base `#0A0B0C` | Logo primario centrado · Mystery glow sutil opcional |
| **Loading state** | Componente | Base o overlay | Lima dot spinner · Mystery surface si es loading "épico" |
| **OG / social share image** | 1200×630 | Dark o Light | Logo + título · GaliGreen accent |

---

### 7.10 Checklist universal antes de generar

1. **¿Cuál es el medium?** Identifica la fila en las tablas arriba.
2. **¿Modo dark o light?** Generalmente dark, salvo email/print/contratos.
3. **¿Mystery aplica?** Solo en gamification core, slides reveal, IG story/reel, achievement unlocks.
4. **¿Tipografía web-safe?** Solo en email · todos los otros mediums usan RCB + Space Grotesk.
5. **¿GaliGreen pivot?** Dark = `#B3F131` · Light/print = `#71A800` (g-800).
6. **¿Frosted permitido?** Solo si hay imagen/video detrás. Si no, usar P2.
7. **¿Lima ≤10%?** Verificar la composición.
8. **¿Sin shadows decorativas?** Gradients y glows en su lugar.
9. **¿Sin bordes decorativos en surfaces?** Solo Outlined, inputs, dividers, chips.

---

## 7b. Audiovisual · specs canonicas

**Formatos de entrega.** Vertical 9:16 (1080×1920) para Reels / Stories / TikTok / Shorts (primario). Horizontal 16:9 (1920×1080) para YouTube / webinars / embeds web / presentaciones.

**Ficha tecnica:** codec H.264 · 24-30 fps · bitrate 12-16 Mbps · audio AAC 256 kbps · color Rec. 709 / sRGB.

**Duracion por canal:** Reels IG 15-60s · TikTok 15-90s · Shorts YouTube &lt;60s · YouTube largo y web embed sin limite.

**Lower thirds (placa de overlay para video largo):**
- **Identidad (nombre + rol):** Radio Canada Big 24px / 600, blanco sobre placa `#0A0B0C` al 85%, slide-up 300ms ease-out, bottom-left padding 64px.
- **Metrica (data point):** Space Grotesk 32px / 700 tabular-nums, GaliGreen `#B3F131`, count-up 600ms, top-right o center.
- **Tag (categoria):** Space Grotesk 12px / 700 ALL CAPS, `#C7CCD4` letter-spacing 0.18em, fade-in 200ms, arriba de la placa de identidad.

El pipeline de produccion de Reels (roughcut, transcripcion, hook, subtitulos, render) vive en la skill `remotion-galilei-video`. Canon publicado: `/identidad-visual/audiovisual/`.

---

## 8. Patrones interactivos · Buttons (resumen operativo)

**Set canónico (Figma Galiverso · 2026-07-01):** primary (lima fill · LA acción principal, una por vista) · secondary (white fill) · tertiary (n03 discreto) · soft (white tint 12% + hairline · opcionales y salidas) · info (tint azul · ayuda/detalles) · destructive-soft (tint error · peligrosa reversible) · destructive-solid (error fill · irreversible). Los viejos `ghost` y `destructive` se eliminaron.

**Tamaños:** lg (40px · texto 16 · radius 12 · default), sm (28px · texto 12 · radius 8). Shape rectangular redondeado, NO pill.

**Estados (5):** default, hover (oscurece un paso: g-600 / tints a20), active (un paso más: g-700 / a30 + scale 0.98), focus (ring 1.5px offset 2px del color de la variante, nunca glow), disabled (mismo fill al 40%).

**Componentes derivados:** chips (dark-a50 + light/vivid, sin dot), note callouts (meta-info inline), code tags (valores técnicos inline).

**Reglas inamovibles:**
- Botón primario único por pantalla. Si hay 2 acciones principales, una debe ser secondary.
- Focus visible obligatorio (ring 1.5px con offset 2px, del color de la variante). No suprimir el focus ring.
- Disabled nunca cambia de color, solo de opacidad (0.4).
- En light mode (pivot): primary se mantiene GaliGreen, los demás invierten.

**Detalle de implementación** (CSS de cada variante, specs comunes, callouts, code tags, pivot light mode): en el repo del portal: `DESIGN.md`.

**Tabs · regla de jerarquía (2026-07-01):** dos niveles espejo de Figma. Tab primaria = underline (texto 12, activa g-600 + subrayado 1px, inactivas neutral-04): SIEMPRE el primer nivel de una vista. Tab secundaria = pill (contenedor n03 r12, activa n01 + white, texto 14): SOLO anidada bajo un primario visible. Nunca pill como primer nivel, nunca dos del mismo nivel anidadas.

**Chips = un solo sistema (consolidado 2026-07-01):** el snc-chip etiqueta ESTADO y también NOMBRA (categorías, pesos, deltas, metadata) con tonos neutral/accent + `.snc-chip-mono` para números. Receta Figma: bg dark de la familia al 50%, texto light/vivid, sentence case, sin dot; micro 9 solo texto, 12 con ícono; `.snc-chip-on-light` sobre claro. El sistema `.tag` se eliminó por redundante. Utilidades hermanas: num-badge, num-eyebrow, meter, acc-toggle. El chip NUNCA ejecuta acción (chip-action se eliminó 2026-07-01: especulativo; si el admin necesita filter chips, nacen primero en Figma).

**Formularios (6 patrones):** express · código segmentado · multi-paso · selección por tarjetas (elegido = success fill) · conversacional · compacto horizontal. Input = un paso más oscuro que su superficie + borde 1px n03; estados por el borde (focus g-600, success/error vivid) con mensaje micro debajo. Dropdown y data table: `/recursos/componentes/`.

**Reglas de color del juego (selladas Mari 2026-07-01):** CTA blanco = cierre/siguiente de celebración, CTA lima = acción que avanza. El gradiente amarillo→cian en progress bars es LEGACY: todo progress va lima plano (meter). El naranja acento no tiene rol: se reemplaza por la familia alert. Tokens de LIGA (teal Plata / dorado Oro): se definen primero como molécula en Figma; mientras tanto la liga activa usa la familia info.

**Capa Game:** el juego NO usa estos componentes: tiene su propia escala (respuestas de misión 55px texto 24, timers semaforizados, glow counters, boosters, pop-ups full-scene). Doc: `/recursos/juego/`. Nunca mezclar capas en una misma vista.

## 9. Props canónicos · especificación de referencia

Objetos recurrentes del Galiverso que aparecen en banners, iconos, contenido social y piezas de marca. Documentados aquí para garantizar consistencia entre generaciones.

### Cofre Galilei · GaliChest

El cofre canónico del sistema de recompensas. No es un baúl pirata dorado: es un objeto tecnológico-gamificado del Galiverso.

| Elemento | Especificación |
|----------|---------------|
| **Cuerpo** | Metálico gris/plata · acabado liso con bordes redondeados · volumen sólido |
| **Paneles laterales** | Verde oscuro (casi negro-verde) con relieve de circuitos o patrones de onda en lima `#B3F131` |
| **Brillo interno** | Glow lima intenso emanando desde el interior · visible en las ranuras y el borde de la tapa |
| **Cerradura** | Llavero de plata · centrado en el frente · forma de ojo de llave clásica |
| **Contenido visible** | GaliPiezas (piezas de rompecabezas 3D verde lima) + GaliTickets (talonarios 3D azul cielo `#87CEEB` con borde punteado) |
| **Estilo 3D** | PBR estilizado · misma familia visual que el catálogo de iconos 3D · proporciones chibi/friendly |
| **Materiales** | Metal satinado (cuerpo) · plástico duro mate (paneles verdes) · sin translucencia |

**Prompt snippet para generación:**

```
A stylized 3D reward chest with a smooth silver-grey metallic body with rounded edges,
dark green side panels with lime green (#B3F131) circuit/wave relief patterns,
strong lime green glow emanating from inside through the open lid and panel seams,
a silver keyhole lock centered on the front,
overflowing with lime green 3D puzzle pieces and sky blue (#87CEEB) ticket stubs
with dashed borders · same PBR stylized 3D aesthetic as friendly game UI icons,
chibi proportions, soft studio lighting.
```

**Errores a evitar:**
- ❌ Dorado/marrón (baúl pirata)
- ❌ Madera
- ❌ Transparente o cristalino
- ❌ Contenido genérico (monedas, joyas)

---

## 10. Como usar esta skill

Antes de generar cualquier pieza para Galilei:

1. **Identifica el medium** (sección 7) y aplica sus reglas
2. **Verifica las 7 reglas inamovibles** (sección 1) · aplican sin excepcion
3. **Usa solo las 2 fuentes** · Radio Canada Big + Space Grotesk (sección 3)
4. **Peso RCB segun tamano** (sección 3): 500 chico, 600 medium, 700 display
5. **Surface system** (sección 3b): mapeo 1:1 con ramp · Panel 3 solo dentro de Panel 2 · sin bordes decorativos · sin drop shadows
6. **GaliGreen max 10%** · es acento, no fondo · pivot a g-800 `#71A800` en light mode
7. **Cero emojis y cero em-dashes** en superficies de marca
8. **Consulta el Figma** si la pieza tiene referencia visual

Superficies (§3b), sistema de listas (§3c) e iconos 3D (§6) viven AQUI en esta skill, no son skills aparte. Si necesitas voz/tono: `galilei-identidad-verbal`. Si necesitas ADN/narrativa: `galilei-estrategia`. Si necesitas un personaje: `galilei-gali`, `galilei-siderax`, `galilei-urbano`. Universo/lore: `galilei-narrativa`.