canvas
El suelo de toda composición. No hay nada debajo.
- App background y body de página
- Fondo de slides y piezas gráficas
- Canvas de layouts en Figma
Componentes
Kit de UI completo de Galilei: sistema de 7 superficies, micro-componentes (buttons · chips · code tags · notes) y 3 sistemas de íconos coordinados (Flat Phosphor · 24 Glow · 221 3D estilo plastilina). Todo lo que necesitas para construir interfaces coherentes con la marca.
¿Para qué vienes hoy?
Esta página reúne el kit visual completo de Galilei. Ubícate según lo que vas a hacer.
Diseñar una pieza
Slide, banner, gráfica de redes, pieza impresa. Empieza por superficies e íconos 3D.
Superficies + íconos →Construir UI
Pantallas, formularios, dashboards. Usa buttons, chips, code tags y notes.
Micro-componentes →Ver un ejemplo
Composición de referencia: todo el sistema en una sola pieza. Bueno para arrancar rápido.
Ejemplo en vivo →7 superficies. Una sola lógica.
Elevación = luminosidad. Cuanto más cerca de la luz, más claro. La jerarquía se comunica con el tipo de superficie, nunca con bordes de acento. El sistema aplica en plataforma digital, presentaciones, piezas gráficas e impreso.
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 directamente 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. No contiene datos.
- Sidebar y nav rail
- Header y footer fijos
- Franja estructural en slides
El nivel de trabajo. Donde 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: subraya una sub-área sin sumar otra card encima.
- 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. Existe cuando hay algo visual detrás: imagen, video o contenido que se desliza 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 de fondo real o contenido en scroll detrás. Sin movimiento detrás, usar Panel 2.
?
Gamificación. Diseñado 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
CReglas de combinación
Fila = superficie de abajo · Columna = qué puede ir encima
| Base | Outline | Panel 1 | Panel 2 | Panel 3 | Frosted | Mystery | |
|---|---|---|---|---|---|---|---|
| Base | — | ||||||
| Outline | — | ||||||
| Panel 1 | — | ||||||
| Panel 2 | — | ||||||
| Panel 3 | — | ||||||
| Frosted | |||||||
| Mystery |
Frosted requiere algo visual detrás: imagen, video o contenido que se desliza al hacer scroll (sticky bars, TOCs flotantes). Base nunca va encima de otra superficie.
DTinted · variante semántica
Modificador que tinta una superficie neutra (base Panel 1) con un color semántico vía gradient overlay. El tinte emana desde el bottom hacia arriba, cubriendo solo la mitad inferior del card. No es un nivel del stack: es una capa de tinte que se suma sobre la superficie base. Usar para callouts de estado, alerts, banners de feedback, 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 independiente: es un tratamiento visual que añade profundidad a Base o R2 sin sumar elevación al sistema. Galilei usa gradients y glows como tratamiento visual, nunca drop shadows.
Hero gradient
R2 → Base · 180deg Hero sections, landing pages, 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, etc.) usar Tinted en su lugar · ahí el atardecer al revés cubre el mismo caso de uso con la geometría correcta.
FBordes en superficies
Las superficies NO llevan borde decorativo. Sin excepción. La jerarquía se comunica con luminosidad, tipo de superficie, contenido o glow. Nunca con 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 documentation cuando se documenta el sistema y 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 completo. Exclusivo de páginas de doc, no aplica a UI funcional. Los cards de esta página son el ejemplo vivo de este patrón.
Etiquetas de estado y categoría.
Pills compactos que etiquetan algo: una superficie, un estado, una categoría. No ejecutan acción, solo informan. Dos familias: structural (punto con el color de la superficie) y semantic (icono + color del estado). Más chicos y livianos que un button.
Structural · familia surfaces
Identifican el tipo de superficie. El dot con el color real de la surface ES la información: cuando ves un chip con dot oscuro, sabes que es Panel 1 sin leer el texto. Se usan en docs, layouts anotados y mockups técnicos.
Base Outline Panel 1 Panel 2 Panel 3 Frosted Mystery
Semantic · estado y categoría
Comunican estado: completado, pendiente, error, beta, nuevo. Van con ícono Phosphor porque el ícono significa más rápido que un color solo. El bg tiene un tint sutil del color semántico y el texto va en el color del estado.
Casos de uso: badges en tablas, indicadores beta/new en cards, prioridad de tareas, validación inline de forms.
Regla del texto
Máximo 2 palabras por chipEl chip vive en 1 línea sin wrap. Si una palabra sola ya es larga (10+ chars), revisa si hay sinónimo más corto. Si necesitas explicar más, ya no es chip · es note callout. Ejemplos válidos: Completado, Beta, En progreso. Inválidos: Falló por error de red, Pendiente de revisión.
Anchor chips · navegación intra-página
Tercera familia. A diferencia de structural y semantic (que solo etiquetan), los anchor chips son clickeables: llevan a un ancla de la misma página. Tienen estado hover y estado activo (scroll-spy). Usados en el TOC interno de Superficies y como nav de sub-secciones largas. Badge de letra o número opcional al inicio.
Diferencias con los otros 2: structural usa dot del color de surface (no clickeable) · semantic usa icon + tint del estado (no clickeable) · anchor usa badge de letra/número (clickeable + scroll-spy). Mismo border-radius pill 100px, mismo registro tipográfico body 500 12-13px, sentence case.
Chip vs Button · cómo se diferencian
A simple vista pueden parecerse (ambos son pills). La diferencia es función: un chip etiqueta, un button actúa. Y eso se traduce en escala, peso y comportamiento.
Panel 2
Chip - 10px mono · weight 500 · UPPERCASE
- Height 22px · padding 0 10px
- Pill radius 100px (mini-button shape)
- Dot indicator del color real de la surface
- Bg neutral muy sutil · sin borde
- Letter-spacing 0.08em
- No estados interactivos
- 14px text · weight 600
- Padding 10px × 20px
- Height 40px (touch target)
- Bg sólido (lima primary)
- Sin borde (filled)
- Radius 100px (pill)
- 5 estados (default → disabled)
Cuándo SÍ vs cuándo NO
Sí usa chip
- Para etiquetar el estado de algo: "Completado", "Pendiente", "Falló".
- Para indicar una categoría corta: "Beta", "Nuevo", "Premium".
- Para identificar una superficie en docs: chip structural con dot de color.
- Para mostrar prioridad en tablas o cards de tareas.
- Para señalar filtros activos en una lista (sin acción de click).
No usa chip
- Como botón clickeable. Si ejecuta acción, usa button.
- Con texto largo. 1-2 palabras máximo, si no es note callout.
- Mezclando colores semánticos sin razón. Solo cuando comunican estados reales del mismo objeto.
- Sin dot ni ícono. Un chip sin indicador es solo un label.
- Structural con ícono. Los structural llevan dot del color de la surface, nunca ícono.
Notes inline contextuales
Notas inline que viven al lado del contenido principal: anatomías, excepciones, tips, aclaraciones. Característica clave: bg flat a opacidad baja 5% con el color del estado, sin gradient. Si necesitas algo más prominente como card de estado, usa Tinted (sección 04).
Variantes semánticas
Accent (lima) default para meta-notes del sistema · anatomías, excepciones, footer notes.
Info tips contextuales, explicaciones complementarias, aclaraciones.
Success notas positivas in-context, confirmaciones inline, "todo bien aquí".
Warning precauciones · "esto requiere atención antes de proceder".
Error notas de bloqueo o anti-patrón · "esto no se hace nunca".
Neutral info gris muted · cuando ni siquiera lima aplica, solo separación visual sutil.
Regla del eyebrow
El título es la categoría, no la preguntaEl eyebrow (la palabra en uppercase arriba del callout) identifica de qué se trata el contenido. Por eso nunca lleva dos puntos al final · es redundante. Escribe Error, no Error:. Si el título no es lo suficientemente diciente por sí solo, el problema es el título, no la falta de puntuación · repiénsalo.
Specs
| Propiedad | Valor |
|---|---|
| Bg | rgba(C, 0.05) flat full-coverage · sin gradient |
| Padding | 14px 18px |
| Border-radius | 10px |
| Font | Space Grotesk regular · 0.82rem · line-height 1.55 |
| Color | text-secondary · strong en text-primary |
| HTML | <p> o <aside> |
| Estados | Estático · sin hover/active |
Cuándo NO usar
- Para textos largos. Note callout es un párrafo contextual breve (1-3 líneas). Si necesitas más, repiensa la estructura: probablemente es una sub-sección con su propio heading.
- Como sustituto de un card de estado. Si el contenido tiene título + descripción + lista de bullets, eso es Tinted (superficie). Note callout es inline, no card.
- Apilados uno tras otro. 3 note callouts seguidos crean ruido visual. Si tienes muchas notas para el mismo tema, agrúpalas en un solo párrafo o usa una lista.
- Para acciones. Si el callout tiene un button adentro pidiendo clickear, eso ya es un banner o un Tinted con CTA. Note callout es solo info.
- Variante semántica al azar. El color del callout DEBE coincidir con la intención: error = rojo, success = verde, etc. No uses warning amarillo solo porque "se ve bien".
3 sistemas, una sola jerarquía.
Galilei tiene 3 tipos: Flat para UI funcional, Glow para plataforma y 3D para hero. Una pieza, un tipo dominante.
3D
Hero · onboarding emotivo, slides de marca, celebraciones.
Glow
Plataforma · badges, currency, racha, achievements.
Flat
UI funcional · navegación, botones, inputs, estados.
Phosphor Icons en variante fill · catálogo completo en phosphoricons.com.
Sistema
Galicon
29 íconosEl sistema propio del universo Galilei: cofres, planetas, llave, telescopio, mecánicas y artefactos del juego.
Props & Conceptos
46 íconosObjetos abstractos y transversales que ilustran ideas: cerebro, cohete, diana, megáfono, gráficas.
Operación de Restaurante
31 íconosPOS, cocina, hotelería, uniformes, fachadas, mobiliario y momentos del día a día operativo.
Estándares & Capacitación
33 íconosHigiene, manipulación de alimentos, mantenimiento, checklists, capacitación y SOPs.
Premios & Recompensas
26 íconosTrofeos, monedas, gift boxes, podio, ratings y momentos de celebración.
Comida & Bebida
56 íconosPlatos, postres, bebidas y snacks. Útil para cartas, redes y banners de F&B.
Composición de referencia.
Mini-dashboard que pone todo el sistema en una sola pieza. Si vas a construir algo, este es el atajo: copia el patrón. Aquí conviven Base, los Paneles, Tinted, Mystery, Gradient e Outline sin pelearse, junto con buttons, chips, code tags y notes.
Plataforma · onboarding
Diseña tu programa de capacitación
Construye misiones, monitorea progreso y celebra cada logro con el equipo.
Gradient · Panel 2 → Panel 1 Build
Scale
Reward
Crear con plantillas
Sin código. Drag and drop. Listo en minutos.
Nombre de la misión…
Empezar → Panel 2 + Outline Crear con la API
Framework para orquestar contenido programáticamente.
npm install @galilei/sdk Anatomía de la composición 1 hero con Panel 2 + Gradient diagonal · 2 cards principales en Panel 2 (una con Outline input, otra con Panel 3 code well) · 4 misiones en Panel 2 incluyendo 1 Mystery y 1 Tinted Success. Todo sobre Base. Cero bordes decorativos.