--- 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. | Asset | Donde esta | |---|---| | **Portal de Marca** | `galilei-landing.pages.dev` (Cloudflare Pages) | | **Repo portal** | `viceversable/galilei-portal` (Astro 6 SSG) | | **Local work** | `/Users/marianamejia/tmp-galilei/galilei/` | | **Figma master** | https://www.figma.com/design/urnZ0xm7vqE8gvx8yH2EDf/Galilei-Learning-Brand | ### Componentes compartidos del portal (usar, no reinventar) | Componente | Archivo | Uso | |-----------|---------|-----| | `PortalSubPage` | `src/components/PortalSubPage.astro` | Shell de TODA subpagina. Hero card + sidebar + slot. | | `SkillCallout` | `src/components/SkillCallout.astro` | Badge de skill de Claude con boton copiar. Props: `cmd`, `description`, `tag?`. | | `VerdictPanel` | `src/components/VerdictPanel.astro` | Panel SIEMPRE/NUNCA con pill + lista numerada. Props: `verdict`, `rules`. | | `BaseLayout` | `src/layouts/BaseLayout.astro` | Layout raiz. Inyecta fonts, meta tags, script clipboard global. | ### Patrones CSS globales (en `portal-marca.css`, no redefinir) | Patron | Clases | Uso | |--------|--------|-----| | Seccion numerada | `cs-section` > `cs-head` > `cs-head-num` + `cs-head-dash` + `cs-title` + `cs-sub` | Estructura base de CADA seccion | | Card grid 2-col | `card-grid-2` > `cg-card` > `cg-card-tag` + `h3` + `p` | Cards con hover animation, numero coordenada `::before` | | Verdict grid | `vd-grid` > `VerdictPanel` (componente) | Paneles SIEMPRE/NUNCA | | Stat row | `stat-row` > `stat-card` > `stat-card-label` + `stat-card-bottom` | Metricas en grid 4-col | | Data table | `data-table-wrap` > `data-table` | Tablas con progress bars y badges | | Callout | `callout callout-ok` / `callout callout-info` > `callout-icon` + `callout-body` | Info boxes | | Badge | `badge badge-success` / `badge-warning` / `badge-muted` | Pills de estado | | **Figma Viceversable** | https://www.figma.com/design/Lar9HysknrUkcvU0U0DMP3/Viceversable | | **Web publica** | `galileilearning.com` (sincroniza Andres a AWS, NO es lo mismo que el portal) | | **Partner Pass** | `riders.viceversable.com/galilei/` (reporte de horas) | | **3D icons SSOT** | `src/data/icons-3d.ts` en el repo del portal | --- ## 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/eyebrows en Space Grotesk con letter-spacing 0.18em. **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-05` | `#58606C` | Labels, captions sutil | | `--text-subtle` | `--neutral-04` | `#3D444C` | Texto casi invisible | 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`) --- ## 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: ` (`#22C55E`, `#ECCF07`, `#F69554`, `#FB7E7E`) + `background: rgba(, 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)** → vivid como background solido + texto blanco o `--n00`. - **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 eyebrows/overlines, NO a los chips. Y los eyebrows (labels de seccion o categoria) van en texto plano, NUNCA dentro de un pill: el pill es para chips de contenido o estado. Eyebrow ≠ 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. **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): ver `REFERENCE.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): ver `REFERENCE.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 | ### SSOT El catalogo vive en `src/data/icons-3d.ts` del repo `viceversable/galilei-portal`. Los assets PNG estan en `/public/assets/icons/3d/{categoria}/galilei-3d-icon-{nombre}.png`. ### 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. | ### Path de assets ```typescript // Desde el repo del portal: const iconPath = `/assets/icons/3d/${categoryId}/galilei-3d-icon-${file}.png`; // Ejemplos: // /assets/icons/3d/galicon/galilei-3d-icon-treasure-chest-gold-open.png // /assets/icons/3d/food/galilei-3d-icon-hamburger.png // /assets/icons/3d/props/galilei-3d-icon-target-bullseye.png ``` ### Reglas de uso en el portal #### En Astro ```astro --- import { icons3D, type Category3D, type Icon3D } from '../data/icons-3d'; --- {item.name} ``` #### Como heroArt en PortalSubPage ```astro heroArt="/assets/icons/3d/props/galilei-3d-icon-target-bullseye.png" ``` #### Naming convention - Archivos: `galilei-3d-icon-{slug}.png` (kebab-case, en ingles) - Nombres display: texto en español ("Cofre dorado abierto", "Diana") ### Iconos frecuentes por seccion | Seccion del portal | Icono recomendado | |---|---| | Estrategia / Golden Circle | `props/galilei-3d-icon-target-bullseye.png` | | Estrategia / Brand Story | `props/galilei-3d-icon-spiral-notebook.png` | | Estrategia / Voz y tono | `props/galilei-3d-icon-megaphone.png` | | Estrategia / Audiencias | `props/galilei-3d-icon-user-profile.png` | | Identidad Visual / Logo | `props/galilei-3d-icon-gold-star.png` | | Identidad Visual / Gali | `galicon/galilei-3d-icon-dragon-orb.png` | | Identidad Visual / Graphic Assets | `props/galilei-3d-icon-four-diamonds-grid.png` | | Recursos / Plantillas | `props/galilei-3d-icon-rocket-launch.png` | ### Como usar esta skill 1. Si necesitas un icono 3D, busca primero en `icons-3d.ts` por categoria 2. Usa el path estandar: `/assets/icons/3d/{categoria}/galilei-3d-icon-{file}.png` 3. Nunca inventes nombres de iconos · todos existen en el SSOT 4. Si el icono que buscas no existe en el catalogo, proponer su creacion antes de usar un placeholder 5. Para props especificos del portal, usa la categoria `props` (tiene los iconos mas abstractos y transversales) ## 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 <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) **Variantes:** primary (acción principal · GaliGreen), secondary (Outline), tertiary (Ghost), destructive (Feedback red). **Tamaños:** sm (32px), md (40px · default), lg (48px). **Estados (5):** default, hover, active, focus, disabled. **Componentes derivados:** chips (pill + dot indicator), 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 (outline 2px GaliGreen 100). 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, chips con dot indicator, callouts, code tags, pivot light mode): ver `REFERENCE.md`. ## 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. **PortalSubPage** para cualquier subpagina nueva del portal 9. **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`. --- # Galilei Learning · Referencia detallada Archivo de consulta. La skill operativa vive en `SKILL.md`. Esta referencia se carga cuando se construye una superficie específica, se implementa un patrón de botón/chip/callout, se aplica el sistema de listas en una pieza, o se consulta el inventario completo de iconos 3D. --- ## 3b. Superficies (UI Surfaces) Sistema de superficies de Galilei Learning. Define los 7 niveles de profundidad, sus tokens de color, reglas de uso, restricciones de apilamiento y el scrim como utilidad complementaria. Las superficies son un vocabulario visual, no clases de CSS. Aplican en plataforma digital, presentaciones, piezas gráficas e impreso. --- ### Principio base En dark mode, **elevación = luminosidad**. Lo que está más cerca de la luz es más claro. Lo que está hundido es más oscuro. No hay excepciones. **El stack neutro mapea 1:1 al ramp del Neutralverse:** cada elevación es un paso del ramp. Base=n00, Panel 1=n01, Panel 2=n02, Panel 3=n03. Outline, Frosted y Mystery son superficies especiales fuera del ramp. ``` 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 ``` El Scrim (`rgba(0,0,0,0.6)`) no es una superficie: es un comportamiento. Ver sección al final. --- ### 1. Base · `#0A0B0C` **Qué es:** el suelo de toda la UI. No hay nada debajo. **Cuándo sí:** - App background de la plataforma Galilei - Fondo del portal de marca - Body de cualquier página del sistema - Fondo de secciones de página sin contenido elevado **Cuándo no:** - Nunca como fondo de un componente interactivo (card, input, modal, drawer) - Nunca como background de un elemento que el usuario "toca" (eso es Panel) - No usar directamente para texto si hay una superficie disponible debajo **Variante gradient:** `linear-gradient(180deg, #171A1E 0%, #0A0B0C 100%)` (Panel 2 → Base) para hero sections o landings donde se quiere profundidad extra sin agregar una superficie real. No es un nivel independiente, es decoración sobre Base. **Encima de Base puede vivir:** Outline, Panel 1, Panel 2, Frosted, Mystery, texto, iconos, ilustraciones. --- ### 2. Outline · solo sobre Base **Qué es:** superficie sin fondo con borde visible. Delimita un área interactiva o de código directamente sobre Base. No tiene elevación propia · el borde es su única presencia visual. **Token:** - Background: `transparent` o `rgba(255,255,255,0.02)` (casi invisible) - Border: `1px solid rgba(255,255,255,0.10)` en reposo · `1px solid rgba(255,255,255,0.20)` en focus - Border-radius: coherente con el componente (inputs: 8px, code blocks: 10px) **Regla inamovible:** solo existe encima de Base (`#0A0B0C`). Nunca sobre Panel 1, Panel 2 ni ninguna otra superficie. Si necesitas delimitar algo dentro de una card (Panel 2), usar un borde más sutil o un divider, no Outline. **Cuándo sí:** - Inputs y campos de texto en el app background - Áreas de código y terminales sobre fondo oscuro - Search bars standalone sobre Base - Wells de datos directamente sobre el fondo de página **Cuándo no:** - Nunca sobre Panel 1 ni Panel 2 - No para cards de contenido (eso es Panel 2) - No para navegación **Encima de Outline puede vivir:** texto, iconos, placeholders, cursores. No otras superficies. **Aplicaciones de marca:** en presentaciones e impreso, Outline es una caja con borde fino sobre el fondo oscuro. Útil para destacar un dato, un comando o un fragmento de código sin agregar peso visual. --- ### 3. Panel 1 · `#0E1012` · n01 **Qué es:** la primera capa de elevación. Reservada para chrome: la estructura que enmarca el contenido, no el contenido en sí. **Cuándo sí:** - Sidebar de navegación - Nav rail lateral - Header fijo de la app - Footer de navegación - Panel de herramientas o configuración lateral - Cualquier elemento estructural que persiste en todas las vistas **Cuándo no:** - Nunca como fondo de una card de contenido (para eso está Panel 2) - Nunca en tarjetas de datos, paneles de estadísticas, contenedores de lecciones - No usar para modales ni drawers temporales **Regla clave:** si el elemento contiene datos o acciones de contenido, la superficie correcta es Panel 2, no Panel 1. Panel 1 es estructura, no contenido. **Encima de Panel 1 puede vivir:** Panel 2, Panel 3, Frosted, Mystery, texto, iconos, inputs, badges. --- ### 4. Panel 2 · `#171A1E` · n02 **Qué es:** el nivel de trabajo. Donde el usuario lee, interactúa y consume contenido. **Cuándo sí:** - Cards de contenido (lecciones, módulos, logros) - Panels de datos y estadísticas - Modales y diálogos - Drawers temporales - Contenedores de formularios - Dashboards de progreso - Cualquier superficie que contiene información accionable **Cuándo no:** - No usar para estructura de navegación (sidebar, nav): eso es Panel 1 - No usar como fondo de página completa: eso es Base - No usar dos Panel 2 apilados directamente uno sobre otro sin diferenciación visual **Regla clave:** es el nivel más usado del sistema. Si dudas entre Panel 1 y Panel 2, pregunta: ¿el usuario interactúa con el contenido de este elemento? Si sí, es Panel 2. **Encima de Panel 2 puede vivir:** Panel 3, Frosted, Mystery, Scrim (cuando hay modal encima), texto, iconos, inputs, componentes. --- ### 5. Panel 3 · `#292F36` · n03 **Qué es:** el tope del stack neutro y la superficie más clara de la elevación de ramp. Funciona como un inset elevado **exclusivamente dentro de Panel 2** (cards, modales, drawers, paneles): subraya una sub-área sin agregar otra card encima. **Regla inamovible:** Panel 3 solo vive dentro de Panel 2. Nunca dentro de Panel 1 (chrome) ni sobre Base. En chrome el contraste de Panel 3 es demasiado fuerte (Δ +12 L) y rompe la calma estructural; en Base saltaría dos niveles del stack. **Cuándo sí:** - Preview strips de íconos o thumbnails dentro de una card de Panel 2 - Asset grids compactos al pie de una card de categoría - Code wells y blocks técnicos dentro de un panel de Panel 2 - KPI hero destacado dentro de una card de dashboard - Sub-secciones de contenido visual dentro de un modal **Cuándo no:** - Nunca dentro de Panel 1 (chrome, sidebar, nav): contraste +12 L rompe la jerarquía - Nunca sobre Base directamente (salta niveles del stack) - Nunca sobre Outline (Outline es zona interactiva, no contenedora) - No para inputs ni search bars (eso es Outline) - No para secciones largas de texto (eso es R2) - No stackable: nada sólido va encima de un Panel 3 **Diferencia con Outline:** - Outline vive sobre Base, tiene borde visible, zona interactiva (inputs, code blocks) - Panel 3 vive dentro de Panel 2, no tiene borde, agrupación visual pasiva (no interactiva por sí sola) **Regla clave:** Panel 3 es el tope del stack neutro. Si necesitas algo encima de Panel 3, esa cosa solo puede ser texto, íconos, imágenes o ilustraciones. No otra superficie. **Encima de Panel 3 puede vivir:** texto, iconos, imágenes, ilustraciones. No otras superficies. --- ### 6. Frosted **Qué es:** superficie frosted semitransparente. Siempre efímera y contextual. Nunca persistente. **Regla universal:** Frosted existe solo cuando hay algo visual detrás · imagen, video, gradiente rico, ilustración. Si el fondo es un color sólido, Frosted no existe: usar Panel 2. **Variantes:** | Variante | Digital | Presentación / gráfica | |---|---|---| | Default | `backdrop-filter: blur(12px)` sobre fondos oscuros | Rectángulo semitransparente sobre foto oscura | | Strong | `backdrop-filter: blur(20px)` sobre fondos claros o saturados | Rectángulo semitransparente sobre foto brillante o colorida | **Cuándo sí:** - Tooltips, menús flotantes, dropdowns, popovers - Notificaciones toast - Badges flotantes sobre imágenes - Overlays contextuales que aparecen y desaparecen - En presentaciones: caja de texto o callout sobre slide con foto de fondo - En gráficas: layer translúcido sobre imagen en Figma o Illustrator - En impreso: overlay sobre foto en InDesign **Cuándo no:** - Nunca sobre fondo sólido (Base, Panel 1 o Panel 2 sin imagen encima) - Nunca como superficie principal de contenido (no cards de datos en Frosted) - No para elementos persistentes (sidebar, header): Frosted es efímero por definición - No apilar Frosted sobre Frosted **Regla de jerarquía:** Frosted siempre es el nivel más alto de cualquier stack sólido. Nada sólido va encima de Frosted. --- ### 7. Mystery **Qué es:** superficie especial de gamificación. Fondo oscuro casi opaco con elipses de GaliGreen y blur de borde, líneas de circuito y borde blanco sutil. **Tokens visuales:** - Fondo: `rgba(10, 13, 10, 0.80)` - Borde: `inset 0 0 0 0.7px rgba(255,255,255,0.18)` - Elipses: GaliGreen `#B3F131` con `filter: blur(10.6cqi)` (proporcional al ancho del contenedor) - Líneas de circuito: top/bottom blancas, left/right lima - Border-radius: `21px` - `container-type: inline-size` (activa `cqi` para blur responsive) **Cuándo sí:** - Quiz prompts y preguntas de evaluación - Recompensas ocultas antes de revelar - Steps de onboarding con elemento de sorpresa - Achievements y logros desbloqueados - Cualquier elemento donde el misterio o la revelación es parte del UX **Cuándo no:** - Nunca para contenido informativo neutro (lección regular, descripción de módulo) - No para navegación ni estructura - No para formularios regulares - No como fondo de página **Regla de escasez:** máximo 1 Mystery visible por vista. Si hay más de uno, pierde el efecto y se convierte en ruido. Mystery es especial por definición: en cuanto se normaliza, deja de serlo. **Lima como minoría:** el glow lima del Mystery es la excepción que confirma la regla del sistema (GaliGreen máximo 10% de cualquier composición). Mystery usa Lima con intención dramática, no decorativa. --- ### Scrim · utilidad, no superficie **Qué es:** capa semitransparente que bloquea visualmente el contenido de fondo cuando hay un modal o drawer activo. No tiene token de color de superficie porque no es una superficie: es un comportamiento de interacción. **Valor:** `rgba(0, 0, 0, 0.60)` **Cuándo aparece:** siempre detrás de modales (Panel 2) y drawers temporales, sobre el contenido de fondo. **Reglas:** - No se usa decorativamente - No aparece con tooltips ni popovers (esos son Frosted, no necesitan scrim) - No animar el scrim de forma llamativa: fade simple `150ms ease` --- ### Reglas de apilamiento Lo que puede vivir encima de cada superficie: ``` Base → Outline, Panel 1, Panel 2, Frosted, Mystery Outline → texto, iconos, placeholders. No otras superficies. Panel 1 → Panel 2, Frosted, Mystery Panel 2 → Panel 3, Frosted, Mystery, Scrim (cuando hay modal encima) Panel 3 → texto, iconos, imágenes. No otras superficies. Tope del stack neutro. Frosted → nada sólido. Tope del stack. Mystery → nada. Caso especial, no acumula capas. ``` **Combinaciones prohibidas:** - Outline encima de Panel 1, Panel 2 o Panel 3 (solo vive sobre Base) - Panel 1 encima de Panel 2 (rompe la jerarquía de elevación) - Panel 3 encima de Base, Outline o Panel 1 (Panel 3 solo vive dentro de Panel 2) - Base encima de cualquier superficie (es el suelo) - Frosted sobre Frosted - Mystery sobre Mystery - Mystery dentro de un modal (demasiado ruido) --- ### 8. Tinted · variante semántica **Qué es:** modificador que tinta una superficie neutra (base **Panel 1** · `#0E1012`) con un color semántico vía gradient overlay. **El tinte emana desde el bottom edge hacia arriba**, cubriendo solo la mitad inferior del card. No es un nivel del stack independiente: es una capa de tinte que se suma sobre la superficie base. **Panel 1 como base** (no Panel 2) permite que el tint se lea más nítido sin competir visualmente con los cards R2 del mismo layout. **Recipe canónica:** ```css .tinted-success { background: /* Linear bottom-up · full card coverage · opacidad baja para sutileza */ linear-gradient( 0deg, rgba(34,197,94,0.22) 0%, rgba(34,197,94,0.12) 30%, rgba(34,197,94,0.04) 60%, transparent 95% ), #0E1012; /* Panel 1 base */ } ``` **Geometría del gradient:** - `linear-gradient(0deg, ...)` · bottom-up · color denso en BOTTOM edge, fade gradual hacia arriba - 4 stops cubriendo el card completo (transparent casi al 95%): - `0%` peak alpha 0.22 (bottom edge · bajado de 0.32 para sutileza) - `30%` alpha 0.12 (mid color) - `60%` alpha 0.04 (fade) - `95%` transparent (top edge casi sin tint) **Por qué full coverage + baja opacidad:** el tint emana desde el bottom edge y se va difuminando lentamente hacia arriba, llegando casi imperceptible al top. Cubre todo el card (100%) pero sin saturar · el peak está a 0.22 (no 0.32 como antes) para que la sutileza compense el área extendida. Sensación de "atmósfera color asentándose" sin tapar contenido. **Por qué multi-stop:** simula efecto blur smooth sin requerir `filter: blur()`. Los 4 stops dan transición suave en lugar de un edge duro. **Variantes semánticas (peak alpha 0.55):** | Tint | Color overlay (peak) | Color del nombre | Uso | |---|---|---|---| | **Success** | `rgba(34,197,94,0.35)` | `#8BDAA8` | Confirmación, validación, completado | | **Warning** | `rgba(236,207,7,0.35)` | `#FFEF7C` | Atención, precaución, pendiente | | **Alert** | `rgba(246,149,84,0.35)` | `#FFB482` | Acción requerida, urgencia media | | **Error** | `rgba(251,126,126,0.35)` | `#FAA4A4` | Falla, bloqueo, rechazo | | **Info** | `rgba(115,200,232,0.35)` | `#ABE3F8` | Aclaración, contexto, neutral | | **Accent** | `rgba(179,241,49,0.35)` | `#B3F131` | Spotlight, destacado, CTA contextual | **Cuándo sí:** - Callouts de estado (verdict yes/no, success/error) - Alerts y banners de feedback - Spotlights de contenido destacado - Skill callouts contextuales **Cuándo no:** - No como fondo principal de página (usar Base) - No como reemplazo de las superficies neutras (R1, R2) - No saturar: máximo un par de Tinted visibles por vista - No mezclar tints en el mismo card (un solo color semántico por superficie tintada) --- ### 9. Gradient · backgrounds decorativos **Qué es:** tratamiento visual que añade profundidad a una superficie neutra (Base, R1, R2) sin sumar elevación al stack. Galilei usa gradients y glows como recurso de profundidad, **nunca drop shadows**. **Patrones canónicos (2 variantes):** ```css /* Hero gradient · vertical Panel 2 → Base */ background: linear-gradient(180deg, #171A1E 0%, #0A0B0C 100%); /* Diagonal · Panel 2 → Panel 1 */ background: linear-gradient(155deg, #171A1E 36.755%, #0E1012 123.54%); ``` **Nota:** los spotlights de color semántico (verde success, lima accent, info azul, etc.) NO van en Gradient · usar **Tinted** con su receta de atardecer al revés. Gradient queda solo para washes neutros entre niveles del stack. **Cuándo sí:** - Hero sections de landing pages - Slides con profundidad extra - Cards con presencia visual (phero, hero cards) - Spotlight contextual (highlight de sección activa) - Backgrounds de páginas de documentación **Cuándo no:** - No usar gradients para áreas de contenido denso (usar superficie sólida) - No mezclar gradient + Tinted en el mismo elemento (over-treatment) - No usar gradients en chrome (R1 debe quedar plano y calmo) --- ### Drop shadows · regla inamovible **Galilei NO usa drop shadows como tratamiento visual.** Los recursos para añadir profundidad o destacar son: - **Gradients** (linear o radial) sobre la superficie - **Glows** (box-shadow con color, sin offset) - **Insets** (box-shadow inset para Mystery's stroke o bevel) - **Tinted overlays** (variante semántica) **Excepción funcional:** sombras sutiles para affordance (nav flotante, modal lift). Nunca decorativas, nunca > `0 8px 24px rgba(0,0,0,0.20)`. **Prohibido:** - `box-shadow: 0 4px 12px rgba(0,0,0,0.3)` aplicado a cards decorativos - `text-shadow` que no sea glow lima (e.g. Mystery glyph) - Doble shadow combinada para "depth" visual - Cualquier shadow que sustituya a gradient/glow como recurso de jerarquía --- ### Bordes en superficies · regla inamovible **Las superficies NO llevan borde decorativo.** Sin excepción. La jerarquía entre superficies se comunica con: - Diferencia de luminosidad (más claro = más arriba en el stack) - Tipo de superficie (Frosted, Mystery, etc.) - Contenido o glow **NO se comunica con:** - Borde de 1px alrededor de cards - Borde de acento lima/error en cards de éxito/error - Borde lateral grueso como "accent" decorativo - Cualquier `border:` aplicado a un contenedor de contenido **Bordes permitidos** (no son decorativos en superficies): - **Outline** · la superficie ES su borde, único caso donde el borde define la superficie - **Inputs y campos de texto** · `border: 1px solid rgba(255,255,255,0.10)` define el área interactiva - **Buttons, chips, badges, pills, tooltips** · elementos UI pequeños interactivos, no son superficies - **Dividers** · `border-top`, `border-bottom`, `border-right` como separadores entre secciones, filas de tabla o columnas - **Mystery's inset glows** · combo de 4 inset shadows (stroke + top bevel especular + 2 lime inner glows) que forman la firma acrylic glass de la superficie. Son glows inset, NO drop shadows; cumplen la regla de "gradients y glows en lugar de shadows". Parte de la identidad de Mystery, no decoración encima **Patrón excepción · "Documentation aid":** cuando se documenta el sistema y un swatch de Base u Outline comparte color con la página (se vuelve invisible), se permite un marcador visual SOLO alrededor del swatch (no del card completo). Implementación: pseudo-element absoluto con `border: 1px solid rgba(255,255,255,0.12)` en top + lados, `border-bottom: 0`, `border-radius` matcheando el contenedor padre. Pointer-events none. Esto es exclusivo de páginas de documentación, no aplica a UI funcional. ```css /* Patrón documentation aid · solo en swatches que se confunden con la página */ .swatch-base, .swatch-outlined { position: relative; } .swatch-base::after, .swatch-outlined::after { content: ''; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,0.12); border-bottom: 0; border-radius: 16px 16px 0 0; /* match card padre */ pointer-events: none; } ``` --- ### Mystery · receta SVG-exact (CSS programático, sin imágenes) Mystery se construye 100% con CSS layers. Ninguna imagen, ningún SVG embebido. La receta es responsive (escala a cualquier tamaño usando `cqi` = container query inline size). **Arquitectura de capas:** ``` ┌──────────────────────────────────────────┐ │ Element (.mystery-surface) │ │ ├─ bg: rgba(10,13,10,0.80) │ Capa 0 · CardBody │ ├─ box-shadow: inset stroke blanco 18% │ Capa 0 · Stroke │ ├─ ::before (z-index 0) │ Capa 1 · 4 elipses │ │ filter: blur(10.6cqi) │ │ │ 4 radial-gradient (lima + gris) │ │ └─ ::after (z-index 1) │ Capa 2 · 4 líneas │ 4 linear-gradient │ │ top/bottom blancas · left/right lima│ └──────────────────────────────────────────┘ ``` **Receta canónica:** ```css .mystery-surface { container-type: inline-size; /* activa cqi */ position: relative; isolation: isolate; overflow: hidden; border-radius: 21px; /* SVG original = 21px */ /* Background enriquecido: dark base + diagonal lima atmospheric (del skill-callout) */ background: linear-gradient(135deg, rgba(179,241,49,0.06) 0%, transparent 55%), rgba(10, 13, 10, 0.80); /* Combo de glows inset (acrylic glass + top accent del skill-callout): */ box-shadow: inset 0 0 0 0.7px rgba(255,255,255,0.18), /* Stroke SVG canónico */ inset 0 1px 0 0 rgba(179,241,49,0.30), /* Top accent line lima (skill-callout) */ inset 0 1px 2px 0 rgba(255,255,255,0.10), /* Top bevel especular */ inset 0 24px 70px 0 rgba(179,241,49,0.12), /* Inner lime ambient */ inset 0 50px 100px 0 rgba(165,239,10,0.22); /* Inner lime swell */ } /* Capa 1 · 4 elipses con blur */ .mystery-surface::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; filter: blur(10.6cqi); /* 38px ÷ 359px = 10.6% */ background: radial-gradient(ellipse 33.1% 10.1% at 50.1% 99.0%, rgba(179,241,49,0.60) 0%, transparent 100%), radial-gradient(ellipse 41.2% 7.1% at 50.1% 7.7%, rgba(116,124,138,0.60) 0%, transparent 100%), radial-gradient(ellipse 12.8% 7.8% at 95.8% 30.5%, rgba(179,241,49,0.56) 0%, transparent 100%), radial-gradient(ellipse 3.8% 9.6% at 0.0% 37.6%, rgba(179,241,49,0.56) 0%, transparent 100%); } /* Capa 2 · 4 líneas perimetrales */ .mystery-surface::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: /* Top · blanca 36% · centrado */ linear-gradient(90deg, transparent 6.6%, rgba(255,255,255,0.36) 34.9%, rgba(255,255,255,0) 63.1%, transparent 100%) 0 0 / 100% 1px no-repeat, /* Bottom · blanca 60% · centrado */ linear-gradient(90deg, transparent 21.9%, rgba(255,255,255,0.60) 50.0%, rgba(255,255,255,0) 78.3%, transparent 100%) 0 100% / 100% 1px no-repeat, /* Left · lima 60% · arriba-centro */ linear-gradient(180deg, transparent 19.0%, rgba(179,241,49,0.60) 29.4%, rgba(179,241,49,0) 39.8%, transparent 100%) 0 0 / 1px 100% no-repeat, /* Right · lima 60% · arriba-centro */ linear-gradient(180deg, transparent 20.1%, rgba(179,241,49,0.60) 34.0%, rgba(179,241,49,0) 47.9%, transparent 100%) 100% 0 / 1px 100% no-repeat; } ``` **Porqué cqi (container query inline size):** - `1cqi = 1%` del ancho del contenedor - Blur original: `38px ÷ 359px = 10.6%` → `blur(10.6cqi)` - Las posiciones en `%` del `::before` y `::after` escalan solas - La misma receta funciona en swatches de 80px de alto y en cards de 400px de alto sin tocar el código **Mapeo SVG → CSS:** | Elemento SVG (Figma node 62:561) | Implementación CSS | |---|---| | `` CardBody fill `#747C8A 3%` sobre fondo oscuro | `background: rgba(10,13,10,0.80)` | | `` stroke blanco 18% | `box-shadow: inset 0 0 0 0.7px rgba(255,255,255,0.18)` | | `` 6 lima inferior (cx=180 cy=376.86 rx=119 ry=38.5) | `radial-gradient(ellipse 33.1% 10.1% at 50.1% 99.0%, ...)` | | `` 9 gris superior (cx=180 cy=29.36 rx=148 ry=27) | `radial-gradient(ellipse 41.2% 7.1% at 50.1% 7.7%, ...)` | | `` 7 lima derecha (cx=343.9 cy=116 rx=45.9 ry=29.8) | `radial-gradient(ellipse 12.8% 7.8% at 95.8% 30.5%, ...)` | | `` 8 lima izquierda (cx=-0.35 cy=143 rx=13.67 ry=36.46) | `radial-gradient(ellipse 3.8% 9.6% at 0.0% 37.6%, ...)` | | `` backdrop-filter blur 52px | `filter: blur(10.6cqi)` aplicado al `::before` con todas las elipses | | 4 `` (top/bottom white, left/right lima, fade center) | 4 `linear-gradient` con background-position + `1px` size | **Aplicar a otra shape:** copiar el `::before` y `::after`, ajustar solo el `border-radius` o agregar `clip-path` al padre. Las elipses y líneas se reposicionan solas porque están en `%`. **Visual exact:** la implementación CSS coincide pixel-a-pixel con el SVG original de Figma (a paridad de tamaño). Ningún rendering "aproximado": todos los valores son medidos del archivo fuente. --- ### Aplicaciones de marca Las superficies son el mismo vocabulario en todos los medios. La lógica de elevación (más claro = más cerca de la luz) aplica igual en digital, presentación, gráfica e impreso. > **Spec completa por medium:** ver `galilei-brand` § 7 (Aplicaciones de marca). Incluye 8 categorías: producto digital, presentaciones, email, social media, print, templates internos, micro-UX e iconografía de app. Cada una con sus reglas específicas de superficie, tipografía, color y layout. | Superficie | Plataforma digital | Presentación (Keynote / PPT / Figma) | Social / gráfica | Impreso | |---|---|---|---|---| | **Base** | App background, body | Fondo del slide | Fondo de la pieza | Fondo de documento | | **Outline** | Inputs, search bars, code blocks sobre fondo | Caja con borde fino sobre slide oscuro | Dato o comando destacado sobre fondo | Fragmento de código o dato en recuadro | | **Panel 1** | Sidebar, nav rail, header | Barra lateral, franja de header | Bloque estructural secundario | Franja de sección | | **Panel 2** | Cards, modales, drawers | Caja de contenido, callout, card | Card principal del post | Recuadro de contenido | | **Panel 3** | Preview strips, code wells, KPI hero dentro de card | Strip de assets dentro de card | Inset destacado en post grid | Tabla inset o estadística resaltada | | **Frosted** | `backdrop-filter` sobre imagen o video | Rectángulo semitransparente sobre foto | Layer translúcido sobre imagen en Figma | Overlay sobre foto en InDesign | | **Mystery** | Quiz, rewards, onboarding | Slide de reveal o pregunta sorpresa | Pieza de gamificación | Portada especial | | **Scrim** | Backdrop de modal | Overlay de transición entre slides | N/A | N/A | **Nota Frosted en medios no digitales:** solo aplica cuando el slide o la pieza tiene una imagen o fondo visual rico detrás del elemento. Si el fondo es color sólido, la capa semitransparente no comunica nada: usar Panel 2. --- ### CSS · implementación de referencia ```css /* Base */ body, .app-bg { background: #0A0B0C; } /* Outline · solo sobre Base */ .input, .search-bar, .code-block { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.10); border-radius: 8px; } .input:focus, .search-bar:focus { border-color: rgba(255,255,255,0.20); outline: none; } /* Panel 1 */ .sidebar, .nav-rail, .app-header { background: #0E1012; } /* Panel 2 */ .card, .panel, .modal, .drawer { background: #171A1E; } /* Panel 3 · inset hex sólido dentro de Panel 2 o R1 */ .card-preview-strip, .code-well, .kpi-hero { background: #292F36; } /* Frosted Default */ .tooltip, .dropdown, .popover { background: rgba(23, 26, 30, 0.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.08); } /* Frosted Strong */ .overlay-light { background: rgba(41, 47, 54, 0.60); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } /* Mystery */ .mystery-surface { container-type: inline-size; position: relative; isolation: isolate; overflow: hidden; background: rgba(10, 13, 10, 0.80); box-shadow: inset 0 0 0 0.7px rgba(255,255,255,0.18), /* Stroke SVG */ inset 0 1px 2px 0 rgba(255,255,255,0.10), /* Top bevel · specular */ inset 0 24px 70px 0 rgba(179,241,49,0.12), /* Inner lime ambient */ inset 0 50px 100px 0 rgba(165,239,10,0.22); /* Inner lime swell */ border-radius: 21px; } .mystery-surface::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; filter: blur(10.6cqi); background: radial-gradient(ellipse 33.1% 10.1% at 50.1% 99.0%, rgba(179,241,49,0.60) 0%, transparent 100%), radial-gradient(ellipse 41.2% 7.1% at 50.1% 7.7%, rgba(116,124,138,0.60) 0%, transparent 100%), radial-gradient(ellipse 12.8% 7.8% at 95.8% 30.5%, rgba(179,241,49,0.56) 0%, transparent 100%), radial-gradient(ellipse 3.8% 9.6% at 0.0% 37.6%, rgba(179,241,49,0.56) 0%, transparent 100%); } .mystery-surface::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, transparent 6.6%, rgba(255,255,255,0.36) 34.9%, rgba(255,255,255,0) 63.1%, transparent 100%) 0 0 / 100% 1px no-repeat, linear-gradient(90deg, transparent 21.9%, rgba(255,255,255,0.60) 50.0%, rgba(255,255,255,0) 78.3%, transparent 100%) 0 100% / 100% 1px no-repeat, linear-gradient(180deg, transparent 19.0%, rgba(179,241,49,0.60) 29.4%, rgba(179,241,49,0) 39.8%, transparent 100%) 0 0 / 1px 100% no-repeat, linear-gradient(180deg, transparent 20.1%, rgba(179,241,49,0.60) 34.0%, rgba(179,241,49,0) 47.9%, transparent 100%) 100% 0 / 1px 100% no-repeat; } /* Scrim */ .scrim { background: rgba(0,0,0,0.60); } ``` --- ### Patrón responsive · Mystery en cualquier shape El efecto Mystery escala con el contenedor gracias a `cqi` (container query inline size): - `1cqi = 1%` del ancho del contenedor - Blur base: `38px ÷ 359px = 10.6%` → `blur(10.6cqi)` - Las posiciones en `%` del `::before` escalan solas - `overflow: hidden` clipea el efecto a cualquier `border-radius` o `clip-path` Para aplicar a otra shape, solo cambiar el selector padre y el `border-radius` o `clip-path`. El `::before` y `::after` se adaptan solos. --- ## 3c. Sistema de listas Sistema de listas de Galilei Learning. Solo dos tipos permitidos: punto lima y número editorial. Todo lo demás está fuera del sistema. --- ### Principio base Galilei no usa viñetas genéricas. El marcador es parte del sistema tipográfico: o es el punto lima en GaliGreen, o es el número editorial en Radio Canada Big. No hay tercera opción. --- ### Tipo A · Punto lima `·` **Qué es:** lista desordenada con middle dot (`·` U+00B7) en GaliGreen como marcador. **Specs:** - Carácter: `·` U+00B7 - Color marcador: GaliGreen `#B3F131` - Fuente body: Space Grotesk 400 - Gap entre ítems: 14px mínimo - Alineación: `align-items: baseline` para alinear el dot con la primera línea **Cuándo sí:** - Features y beneficios de un producto o servicio - Listas de capacidades, herramientas, recursos - Ítems que no tienen jerarquía entre ellos (orden no importa) - Cuerpos de texto dentro de cards, modales, presentaciones **Cuándo no:** - Cuando el orden sí importa (usar Tipo B) - No para un solo ítem (usar párrafo directo) - No en títulos ni eyebrows **CSS de referencia:** ```css .dot-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; } .dot-list li { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body); line-height: 1.5; color: var(--text-secondary); display: flex; align-items: baseline; gap: 10px; } .dot-list li::before { content: '·'; color: #B3F131; font-size: 1.2rem; line-height: 1; flex-shrink: 0; } ``` --- ### Tipo B · Número editorial **Qué es:** lista ordenada donde el número es un elemento display dominante, en su propia línea, seguido del contenido abajo. Editorial, no funcional. **Specs:** - Fuente: Radio Canada Big 700 - Tamaño: `clamp(3.8rem, 7.5vw, 5.5rem)` · nunca menos de ~60px en desktop - Color: GaliGreen `#B3F131` - Letter-spacing: `-0.04em` (tight, propio de RCB en tamaños grandes) - Line-height del número: `0.82` (el número no necesita leading) - El texto del ítem va abajo del número, separado ~6px de padding-top - Formato de numeración: dos dígitos con cero (`01`, `02`...), nunca `1.` ni `1)` **Cuándo sí:** - Pasos de un proceso o metodología donde el orden importa - Onboarding steps con revelación progresiva - Fases de un proyecto o roadmap numerado - Listas cortas (2-5 ítems) donde cada número merece protagonismo visual **Cuándo no:** - Listas largas (+6 ítems): el efecto se diluye y se vuelve ruido - Cuando el orden no importa (usar Tipo A) - Nunca inline (el número no va en la misma línea que el texto) - Nunca en tablas, navegación ni microcopy **CSS de referencia:** ```css .num-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 20px; } .num-list li { display: flex; flex-direction: column; gap: 2px; } .num-list-n { font-family: var(--font-display); font-weight: 700; font-size: clamp(3.8rem, 7.5vw, 5.5rem); line-height: 0.82; color: #B3F131; letter-spacing: -0.04em; display: block; } .num-list-body { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body); line-height: 1.5; color: var(--text-secondary); margin: 0; padding-top: 6px; padding-left: 3px; } ``` --- ### Prohibiciones absolutas Los siguientes patrones no existen en el sistema Galilei: | Patrón | Motivo | |--------|--------| | Viñeta HTML `•` (`list-style: disc`) | Genérica, sin identidad, fuera del sistema | | Chevron `›` o `>` como bullet | No forma parte del vocabulario visual | | Em-dash `—` como marcador de lista | Prohibido en toda la marca (ver regla tipográfica) | | Número inline `1.` `2.` `3.` | Funcional y sin carácter editorial | | Guion `-` como bullet | Sin valor visual, texto plano | | Check `✓` salvo en VerdictPanel | Solo en el componente específico de siempre/nunca | --- ### Aplicación en presentaciones e impreso **Tipo A · Punto lima:** - En Keynote/PPT: punto `·` en GaliGreen, mismo tamaño que el texto, alineado baseline - En impreso: mismo carácter, mismo color **Tipo B · Número editorial:** - En Keynote/PPT: número muy grande en Radio Canada Big limón, texto en cuerpo más pequeño debajo, en la misma caja de texto o en caja separada - El número puede ocupar hasta el 40% de la altura visible del elemento - No usar en slides con más de 3 pasos visibles simultáneamente --- --- ## 8. Patrones interactivos · Buttons Los buttons son **UI elements**, no surfaces. Distintos de los chips: los buttons invitan acción, los chips etiquetan contenido. Sistema de 6 variantes × 3 tamaños × 5 estados. ### Variantes | Variante | Background | Border | Text | Uso | |---|---|---|---|---| | **Primary** | `#B3F131` lima | none | `#0E1012` weight 600 | Acción principal. Single per view. | | **Secondary** | `#FFFFFF` white fill | none | `#0E1012` weight 600 | Acción alterna paired con primary. Alto contraste sin competir con lima. Hover bg `#F0F2F5`. | | **Ghost** | `rgba(179,241,49,0.06)` lima 6% | none | `#B3F131` weight 600 | Acción terciaria, navegación in-context. Tint sutil por default, hover sube a 14% + glow + arrow icon slide 3px. | | **Destructive** | `#FB7E7E` error vivid | none | `#0E1012` weight 600 | Borrar, revocar, archivar. | | **Soft** | `rgba(179,241,49,0.08)` lima 8% | `inset 1px rgba(lima,0.15)` | `#B3F131` weight 600 | Acción compacta inline con icon (Copy, Compartir). Tamaño small por default. Para uso dentro de callouts, cards, tooltips. | | **Tertiary** | `#292F36` neutral (Panel 3) | none | `#F0F2F5` weight 600 | Acción de bajo énfasis sin marca (filtros, toggles, cerrar). No compite con primary. | ### Tamaños | Tamaño | Height | Padding H | Font-size | Uso | |---|---|---|---|---| | **Small** | 32px | 14px | 13px | Tablas, filtros, cards densas | | **Medium** (default) | 40px | 20px | 14px | CTAs standard, forms, modales | | **Large** | 48px | 28px | 16px | Hero CTAs, landing, momentos clave | ### Specs comunes - **Font:** Space Grotesk weight 600 · letter-spacing -0.005em - **Border-radius:** 100px (pill default Galilei) o 10px (rounded rect contextual) - **Gap ícono-label:** 8px - **Touch target:** ≥40px web · ≥44px mobile (Apple HIG) - **Transition:** 0.18s ease para bg/color/shadow · 0.12s para transform ### Estados (5 niveles) | Estado | Visual | |---|---| | **Default** | Base color de la variante | | **Hover** | Lighten 4-8% del brand + `box-shadow: 0 0 24px rgba(brand, 0.30)` (glow lima) | | **Active** | Darken 5% + `transform: scale(0.98)` | | **Focus** | Glow halo puro lima sin ring: `box-shadow: 0 0 36px 4px rgba(179,241,49,0.55)` · sin outline, sin ring duro · más intenso que hover para diferenciarse · 100% on-brand (gradients y glows, no outlines) | | **Disabled** | `background: rgba(255,255,255,0.06)` gris neutral · `color: rgba(255,255,255,0.30)` · cursor not-allowed · sin hover effects · NO preserva brand color (evita falsa affordance) | ### Diferenciación chip vs button | | Chip | Button | |---|------|--------| | Rol | Etiqueta · estado · metadato | Acción · trigger | | Text | 10px mono · weight 500 · UPPERCASE | 14px sans · weight 600 | | Height | 22px | 40px | | Padding | 0 / 10px (sin padding vertical) | 10px / 20px | | Background | Neutral muy sutil rgba(white,0.04) | Sólido (filled) | | Indicator | Dot 8px del color real de la surface | Ícono opcional 14-16px | | Border | Ninguno · solo dot indicator | Ninguno (filled) o 1px brand | | Radius | 100px (pill mini) | 100px (pill) | | Estados | Default (sin hover) | 5 estados completos | ### CSS de referencia El CSS vivo de buttons, chips, notes y code tags es el portal: el codigo fuente es el canon, no se pega aqui (se desincroniza). Reglas conceptuales arriba; implementacion y estados exactos en `portal-marca.css` y en la pagina. Canon: `/recursos/componentes/`. ### Chips · pill + dot indicator Los chips son UI elements distintos de los buttons. **Etiquetan estado**, no triggerean acción. **Estructura base (todos los chips):** - Shape: pill `border-radius: 100px` - Height: 22px · padding: 0 10px 0 8px - Tipografía: Space Grotesk MONO 10px weight 500 UPPERCASE letter-spacing 0.08em - Sin border · solo el dot indicator a la izquierda - Dot: 8px circle + inset stroke 0.5px white 18% **Variantes estructurales (surface chips):** Identifican qué superficie se referencia. Dot = color real de la surface. - chip-base · dot `#0A0B0C` - chip-r1 (Panel 1) · dot `#0E1012` - chip-r2 (Panel 2) · dot `#171A1E` - chip-well (Panel 3) · dot `#292F36` - chip-outlined · dot transparente + ring blanco - chip-gl (Frosted) · dot gradient verde/blanco - chip-my (Mystery) · dot radial lima→dark **Variantes semánticas (state chips):** Comunican estado del contenido. Bg con tint semántico sutil 10% + texto en color semántico light + dot con glow. | Chip | Bg tint | Text color | Dot vivid | Uso | |---|---|---|---|---| | chip-success | `rgba(34,197,94,0.10)` | `#8BDAA8` | `#22C55E` | Completado, validado | | chip-warning | `rgba(236,207,7,0.10)` | `#FFEF7C` | `#ECCF07` | Pendiente, atención | | chip-alert | `rgba(246,149,84,0.10)` | `#FFB482` | `#F69554` | Acción requerida | | chip-error | `rgba(251,126,126,0.10)` | `#FAA4A4` | `#FB7E7E` | Falló, bloqueo | | chip-info | `rgba(115,200,232,0.10)` | `#ABE3F8` | `#73C8E8` | Beta, contexto | | chip-accent | `rgba(179,241,49,0.10)` | `#B3F131` | `#B3F131` | Nuevo, destacado | | chip-neutral | `rgba(white,0.04)` | `text-tertiary` | `text-muted` | Borrador, default | **Casos de uso semánticos:** badges de estado en tablas, etiquetas de categoría, indicadores de versión (beta/new), labels de progreso, prioridad de tareas. ### Note callouts · meta-info inline **4to micro-UI element** del sistema (junto a buttons, chips, code tags). Para meta-notes contextuales: anatomías, excepciones, side info, tips inline al lado del contenido principal. **Característica clave: bg FLAT a 5% opacity, sin gradient.** Se distingue de Tinted (gradient bottom-up 35% peak) y de chips (pill compacto con dot/icon). **Variantes (6):** | Variante | Bg flat | Uso | |---|---|---| | **note-callout-accent** (default) | `rgba(179,241,49,0.05)` lima | Meta-notes del sistema, anatomías, footer notes | | **note-callout-info** | `rgba(115,200,232,0.05)` azul | Tips contextuales, aclaraciones | | **note-callout-success** | `rgba(34,197,94,0.05)` verde | Notas positivas in-context | | **note-callout-warning** | `rgba(236,207,7,0.05)` amarillo | Precauciones · 'requiere atención' | | **note-callout-error** | `rgba(251,126,126,0.05)` rojo | Bloqueos o anti-patrones · 'esto no se hace nunca' | | **note-callout-neutral** | `rgba(white,0.03)` gris | Cuando ni siquiera lima aplica · separación visual sutil | **Specs comunes:** | Propiedad | Valor | |---|---| | Padding | 14px 18px | | Border-radius | 10px | | Font | Space Grotesk regular · 0.82rem · line-height 1.55 | | Color | `text-primary` (#F0F2F5 · near-white) · alta legibilidad sin quemar · `strong` en weight 700 | | HTML | `

` o `