canvas
El suelo de la composición. Nada va debajo.
- App background y body de página
- Fondo de slides y piezas gráficas
- Canvas de layouts en Figma
Fondos
Skills
/galilei-escenarios Tipos de fondo. Una gramática
Tres tipos de fondo en el sistema. Elige el tipo según el contexto, luego el tratamiento específico. El acabado (render, luz, composición) es el mismo en los tres.
Panel 3
Panel 2
Panel 1
Base
Frosted
?
01 Superficie oscura
El fondo siempre neutro. Jerarquía por luminosidad, nunca por borde. 7 niveles disponibles.
Galiverso Vibrantia
02 Imagen cinemática
Foto del Galiverso full cover + overlay gradiente to-top. Texto display anclado en la zona inferior.
Galiverso
Aprende. Gana.
Ver retos →
Capa 03 · Texto
Capa 02 · Assets
Capa 01 · Imagen
03 Hero inmersivo
Imagen + assets flotantes + texto y CTA. Tres capas superpuestas para el layout más completo.
AStack de elevación
luz
Mystery gamificación · caso especial
especial Frosted frosted · sobre imagen, video o contenido en scroll
condicional Panel 3
escalón destacado · solo dentro de Panel 2 #292F36 Panel 2
cards · modales · contenido de trabajo #171A1E Panel 1
sidebar · nav · estructura fija del app #0E1012 Outline
inputs · code blocks · solo sobre Base transparent + border Base
el suelo · nada debajo #0A0B0C B7 superficies
Buscar misiones...
Sin fondo, solo borde. Delimita áreas interactivas sobre Base.
- Inputs y campos de texto
- Search bars sobre el fondo de app
- Áreas de código y terminales
Nunca sobre Panel 1 ni Panel 2.
Estructura fija (sidebar, nav, header). Persiste en todas las vistas, sin datos adentro.
- Sidebar y nav rail
- Header y footer fijos
- Franja estructural en slides
El nivel de trabajo. Aquí el usuario lee, interactúa y consume contenido.
- Cards de misiones y programas
- Modales, drawers, panels de datos
- Cajas de contenido en slides y gráficas
Inset destacado solo dentro de Panel 2. La superficie más clara del stack: resalta una sub-área sin sumar otra card.
- Strips de previews dentro de cards
- Code wells y blocks técnicos
- Resaltados de KPI o métrica destacada
Tope del stack neutro. Nunca lleva otra superficie encima.
MISIÓN ACTIVA 94%
Frosted, efímero, contextual. Solo existe con algo visual detrás: imagen, video o contenido que se mueve al hacer scroll.
- Sticky nav bars y TOCs sobre contenido scrolleable
- Tooltips, dropdowns, popovers
- Notificaciones toast
- Caja sobre foto en slides o gráficas
* Solo con imagen real o contenido en scroll detrás. Sin movimiento detrás, usa Panel 2.
?
Gamificación. Hecho para sorprender. Máximo 1 visible por pantalla o slide.
- Quiz antes de revelar la respuesta
- Logro desbloqueado u onboarding sorpresa
- Slide de reveal en presentación
C Reglas de combinación Fila = superficie de abajo · Columna = qué puede ir encima · click para expandir
| Base | Outline | Panel 1 | Panel 2 | Panel 3 | Frosted | Mystery | |
|---|---|---|---|---|---|---|---|
| Base | · | ||||||
| Outline | · | ||||||
| Panel 1 | · | ||||||
| Panel 2 | · | ||||||
| Panel 3 | · | ||||||
| Frosted | |||||||
| Mystery |
Frosted necesita algo visual detrás: imagen, video o contenido que se mueve al hacer scroll (sticky bars, TOCs flotantes). Base nunca va encima de otra superficie.
DTinted · variante semántica
Tinta una superficie neutra (Panel 1) con un color semántico. El tinte sube desde abajo y cubre solo la mitad inferior del card. No es un nivel del stack: es una capa que se suma encima. Úsalo en callouts de estado, alerts, banners de feedback y spotlights.
Success Confirmación · validación · completado
Warning Atención · precaución · pendiente
Alert Acción requerida · urgencia media
Error Falla · bloqueo · rechazo
Info Aclaración · contexto · neutral
Accent Spotlight · destacado · CTA contextual
Recipe
.tinted-success {
background:
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 */
}EGradient · backgrounds decorativos
Decoración sobre el stack neutro. No es una superficie aparte: añade profundidad a Base o R2 sin sumar elevación. Galilei usa gradients y glows, nunca drop shadows.
Hero gradient
R2 → Base · 180deg Heros, landings y slides con profundidad extra Diagonal
R2 → R1 · 155deg Cards con presencia visual · phero · documentación Para spotlights de color semántico (verde success, lima accent) usa Tinted: cubre el mismo caso con la geometría correcta.
FBordes en superficies
Las superficies NO llevan borde decorativo. Sin excepción. La jerarquía la dan la luminosidad, el tipo de superficie, el contenido o el glow. Nunca el borde.
Permitido
- Outline · es borde por definición
- Inputs y text fields ·
1px rgba(255,255,255,0.10) - Dividers ·
border-top/bottom/rightcomo separadores - Chips, badges, pills, buttons, tooltips · UI elements, no superficies
- Mystery's inset shadow · parte de su identidad
Prohibido
- Border 1px alrededor de cards
- Border de acento lima/error en cards de éxito/error
- Border lateral grueso como "accent" decorativo
- Cualquier
border:aplicado a un contenedor de contenido - Border-radius con line para "definir" un panel
Excepción de documentación si un swatch de Base u Outline comparte color con la página, se permite un marcador visual (pseudo-element top+lados) solo alrededor del swatch, no del card. Aplica solo a páginas de doc, nunca a UI funcional. Los cards de esta página son el ejemplo vivo.
Hero Inmersivo
Tres capas superpuestas. La capa base varía según el contexto: superficie oscura para piezas abstractas, imagen del Galiverso para piezas con lore. Las capas de assets y texto son iguales en las dos variaciones.
Imagen del Galiverso + overlay + íconos 3D flotantes + cards + CTA. Composición rica para heroes de campaña, secciones de apertura y piezas de social con protagonismo visual.
Galiverso
Aprende. Crece. Gana.
Capa 03 Texto + CTA
Capa 02 Assets flotantes
Capa 01 Imagen Galiverso
Imagen del Galiverso + overlay + solo texto anclado en la zona inferior. Sin assets flotantes. Para heroes de subpágina, banners de sección y piezas donde la imagen es el protagonista.
Audiencia Los Normixianos
Producto La Rebelde · Vibrantia
03 · Texto + CTA Badge · headline · body · botón · floating cards. Z más alto, siempre legible.
02 · Assets flotantes Íconos 3D, personajes parciales, UI mockups, planetas GaliLore. Opacidad reducida: son textura, nunca el foco.
01 · Base Var. A: n00 (#0A0B0C) o n01 (#0E1012) + glow radial opcional. Var. B: imagen del Galiverso full cover + overlay gradiente to-top.
Qué puede ir en la capa media
15-40%
Íconos 3D Catálogo de 221 íconos · varios tamaños mezclados 50-80%
Personajes parciales Borde del frame · nunca centrados al 100% de opacidad 20-40%
Planetas · GaliLore Escala grande · funciona mejor en el borde del frame 01 --text-muted
Número editorial En --text-muted · nunca lima · nunca text-primary Siempre
- Fondo: n00 o n01. Nunca escenario painterly saturado como base del hero.
- Lima: máximo 1 acento visible en el frame (badge, CTA o una palabra del headline).
- Número editorial: --text-muted. Nunca lima, nunca text-primary.
- Floating cards sobre imagen cinemática: superficie Frosted (blur + semi-transparente). En hero sin imagen: Panel 2.
- Texto sobre imagen: el overlay debe favorecer el contraste donde vive el texto. La zona oscura del gradiente (bottom) soporta texto de cualquier tamaño. La zona clara (top, overlay transparente) solo admite texto display grande o un contenedor Frosted.
- Contraste del texto sobre la composición: mínimo 4.5:1 WCAG AA.
- Assets como textura: si compiten visualmente con el headline, bajar opacidad.
Nunca
- Dos o más acentos lima en el mismo frame.
- Personaje al 100% de opacidad en posición central (toma el foco del mensaje).
- Escenario painterly saturado como fondo directo del hero.
- Texto dentro de los assets flotantes (los assets van limpios, sin copy).
- Texto en zona sin contraste: si el overlay es claro o transparente donde vive el texto, texto body directo sobre la imagen. Muévelo a la zona oscura o ponlo en un contenedor Frosted.
- Más de 3 floating cards en el mismo viewport.
- Floating cards con Panel 2 sólido sobre imagen cinemática (bloque opaco rompe el patrón). Panel 3 o Mystery: tampoco.
Dónde viven los fondos
Siete contextos donde el sistema de fondos aparece en producto y marca. Cada uno tiene su proporción, su safe area para UI encima y su rol narrativo distinto · un fondo de loading no resuelve igual que un splash de logro.
9:16 vertical (1080×1920)
App · entrada a cada reto
Pantalla de inicio del reto
Anuncia el contexto del reto antes de empezar. El fondo da el ambiente que enmarca el desafío.
9:16 vertical (1080×1920)
App · home, dashboard del usuario
Hero de la app
Fondo persistente que respira detrás del contenido de la app. No debe distraer del UI.
9:16 vertical (1080×1920)
App · momento de logro, fin de reto, badge desbloqueado
Splash de logro
Celebra. Aquí la paleta se compromete con Asombro · saturación alta, luz dramática.
4:5 vertical (1080×1350)
App · perfil del empleado, cards de personajes coleccionables
Card de personaje
Backdrop del personaje. La paleta del fondo apoya pero no compite.
9:16 vertical (1080×1920)
App · transiciones entre retos, cargas
Loading entre misiones
Atmósfera de tránsito. Modo Sueño o Chispa creativa funcionan bien · sensación de paso.
9:16 (Stories/Reels) · 1:1 (feed cuadrado) · 4:5 (feed vertical)
Instagram · TikTok · Reels · Stories
Pieza de social media
Anuncia el reto fuera de la app. Llama la atención en feed.
16:9 horizontal (1920×1080)
Presentaciones · pitch · onboarding · capacitaciones internas
Slide deck
Section divider o background de slide. Da contexto y ritmo visual al deck.
Qué son los escenarios
Los escenarios son los mundos del Galiverso · cocinas, salones, calles, espacios imaginarios donde transcurre la historia del empleado. La coherencia del universo no vive en el color (cada escena tiene paleta propia) · vive en el acabado. Pixar opera con esta misma lógica · Inside Out tiene cinco paletas distintas y todas se sienten Pixar porque comparten el mismo acabado.
Seis modos de paleta
Cada modo es una decisión narrativa, no estética. La paleta sirve a lo que se está contando · si el reto va de soportar el rush, el modo es Gris-control. Si va de aprender una técnica, Chispa creativa. Si va de un logro, Asombro.
Gris · Control
Cuándo: Reto que va de soportar el rush · rutina, presión, sistema.
Cualquier personaje saturado encima cuenta historia solo · la chispa lima de Gali contra el gris es lectura inmediata.
Lima reservado para el personaje
#2A2F36
#4A5260
#6B7585
#9AA3B0
#B3F131 reservado para el personaje
Chispa creativa
Cuándo: Reto de aprendizaje · nueva técnica · mejora del oficio.
Mundo aún neutro pero con un acento de croma emergiendo. Anuncia transformación sin gritar.
Lima acento que crece en la escena
#3A3D45
#5C5E68
#A8A89C
#D4D2A0
#B3F131 acento que crece en la escena
Galiverso natural
Cuándo: Vida cotidiana del restaurante · escenas sin tensión narrativa fuerte.
Saturación media · estable, no estridente · cada escena su temperatura propia.
#3D5A4D
#6B8B7A
#A8B89F
#D4C9A8
Asombro · Magia
Cuándo: Logro celebratorio · promoción · servicio impecable · momento que cambia algo.
Saturación alta comprometida con un tono dominante. Luz dramática, atmósfera densa, partículas o destellos.
#4A2D7A
#8B4FBF
#C77DE6
#F0B6FF
Memoria · Origen
Cuándo: Recorrido del empleado · primer día, primera promoción, balance del camino.
Cálido dorado, suave, edges desenfocados, luz lateral baja como hora dorada. Tiempo detenido.
#5C3A1F
#A87545
#D4A574
#F0D9A8
Sueño · Imaginación
Cuándo: Loading · transición · escenas de "qué pasaría si" · mundos internos.
Paleta inesperada, escala onírica, gradientes irreales, sin reglas de gravedad o perspectiva terrestre.
#1F4A6B
#5C8BBF
#E69BC4
#FFD4A8
Seis capas + el cumpleaños
Curadas para empleados operativos de restaurantes y hospitalidad · cada capa coincide con un momento de alta carga de servicio o con el calendario humano del equipo. Son acentos que se montan encima del modo · color de apoyo, iconografía temática, atmósfera. Seis modos por seis capas dan mucho rango sin diseñar cada combo desde cero.
San Valentín · Amor y amistad
14 feb · sept (CO)Noche fuerte para restaurantes · servicio de pareja, montaje romántico. Asombro para servicio impecable, Memoria para reconectar con cliente recurrente, Gris-control si el reto va de soportar el rush.
Día de la madre
Mayo · 2° dom (CO)Uno de los días más fuertes del año · y muchos empleados son mamás. Cálido, doméstico. Funciona en Galiverso natural o Memoria.
Día del padre
Junio · 3° dom (CO)Otro día de alta ocupación. Azules cálidos. Galiverso natural o Memoria.
Día del trabajo
1 mayoLa capa que habla directamente al usuario · es SU día. Asombro para reconocer logros, Memoria para celebrar trayectoria, Chispa creativa para aprendizaje del oficio.
Velitas
7 dic (CO)Arranca la temporada decembrina en Colombia · momento íntimo, familiar. La iluminación es la protagonista. Memoria o Galiverso natural.
Navidad y fin de año
Dic 24 · Dic 31Temporada más alta de hospitalidad · cenas familiares, eventos de fin de año, brindis. Asombro para magia festiva, Memoria para balance del año. Nunca saturar los tres colores · siempre uno dominante.
Cumpleaños del empleado
Variable · universalSe activa por usuario, no por calendario. Asombro natural · la cocina y el salón se vuelven el escenario de la fiesta.
Universal · siempre disponibleMisma capa, distinto modo · distinta historia
Reto de servicio impecable · noche romántica · salón iluminado por velas, equipo en su mejor momento
Reto de reconocer trayectoria · año cumplido · trasfondo de cocina cálida, manos curtidas
Reto de nueva técnica · capacitación que cambia la forma de trabajar · cocina empieza a iluminarse
Reto de servicio fin de año · salón decorado, brindis a medianoche, equipo en uniforme festivo
El acabado del Galiverso
El color cambia en cada escena · esto es lo que hace que todas se sientan Galilei igual. Cinco reglas que se cumplen en TODOS los escenarios sin excepción. La paleta puede variar · estas no.
- 01 Render 3D painterly cinematográfico
Ni flat vector, ni photoreal, ni ilustración 2D plana. Pintura digital sobre render 3D · texturas suaves, brushwork visible en detalles, profundidad de campo cuando la escena lo pide.
- 02 Luz con intención
Cada escena resuelve key light, atmósfera y haze. La luz cuenta algo · de dónde viene, qué deja en sombra, cómo el aire interfiere. Nunca luz plana sin dirección.
- 03 Composición narrativa
Escala y framing trabajan para la historia. Un personaje pequeño en mundo grande dice una cosa, close-up dice otra. Composición no es decoración, es decisión.
- 04 Detalle painterly consistente
Mismo acabado en todos los escenarios. Si una escena tiene textura visible en el suelo, las demás también. Si una resuelve con planos limpios, las demás siguen.
- 05 Una sola gramática
Interior y exterior siguen las mismas cuatro reglas anteriores. Lo que cambia entre escenarios es la paleta, no el lenguaje visual.
Una escena, una paleta
La paleta de un escenario es decisión, no accidente. Cuando una escena se compromete con un modo, no mezcla con otros dentro del mismo frame · si es Gris-control, todo es Gris-control. Si es Asombro, todo es Asombro. La capa estacional se monta encima como acento, no como segundo modo.
Lo que une todos los escenarios del Galiverso no es el color · es el acabado. La paleta sirve a la historia. La historia decide la paleta.
Lo que rompe el sistema
Errores comunes que sacan al espectador del universo. Si una escena cae en cualquiera de estos, no es Galilei.
- 01 Mezclar dos modos en una sola escena
Una mitad gris-control y la otra saturada de asombro rompe el compromiso. Una escena, una paleta.
- 02 Modo desaturado sin personaje saturado encima
El gris-control existe para que el personaje haga el contraste. Sin personaje, es solo una imagen triste.
- 03 Capa estacional dominando la paleta
La capa son acentos · iconografía y color de apoyo, no color base. Una escena de San Valentín no es 100% rosa.
- 04 Saturación pareja entre fondo y personaje
Si el fondo está tan saturado como Gali, Gali desaparece. El mundo cede protagonismo cromático al personaje.
- 05 Iconografía estacional sin tratamiento painterly
Stickers planos de corazones o regalos sobre la escena rompen la gramática. Todo objeto sigue la regla del acabado.
Escenarios disponibles
Todos los fondos del sistema en alta resolución. Haz clic en la imagen para descargarla directamente.
Abismos de cristal Cuevas submarinas · luz ambiental azul gélido
Normix Ciudad industrial monocromática · mundo de trabajo y rutina
La Rebelde Nave insignia · exteriores e interiores de la flota
Vibrantia Planeta de vida · paisajes naturales saturados y épicos
Gali · escenas Gali en acción · close-ups, poses y cockpit del Henry
Galipieces Marca animada · piezas del símbolo dispersas como background
GaliTickets Tickets flotantes · sistema de recompensas y rachas
