Hero-800 en light, nunca Hero-500
El lima --g-brand #B3F131 no pasa contraste sobre fondos claros. En modo claro se usa --g-800 #567F00, que llega a AAA. --neutral-06 #8B939E solo para íconos decorativos, nunca para texto de lectura.
Color
Skills
/galilei-brand GaliGreen
El color insignia de Galilei. Ramp digital de 500 a 900: 500-700 para dark UI, 800-900 para superficies claras (light mode, email).
Dark UI · App
400 · Light
500 · Brand
600 · Active
700
800 · Light CTA
Tokens funcionales derivados
Brand
Alpha a12
Deep
GaliNeutrals
Neutrales fríos a propósito (H214°) contra el hero cálido (H79°). Esa tensión es el carácter del sistema.
n00
n01
n02
n03
n04
n05
n06
n07
n08
white
--gradient-bg #171A1E → #292F36 · Fondo general app Galilei en modo claro
El modo claro solo aplica en 3 canales. Email marketing, slides, informes e impresos van en dark.
Fondos siempre neutrales
Ningún fondo, sección o contenedor se pinta de verde. El hero lima es solo para texto, íconos, CTAs y datos destacados · máx. 10% de la composición.
GALILEI LEARNING galilei.edu · +57 300 000 0000
Contrato de Servicios
Bogotá, 1 de mayo de 2026 Firmado por Recibido por
GALILEI LEARNING
¡Bienvenido, Carlos!
Tu cuenta ha sido creada exitosamente. Ya puedes acceder a tu programa de formación.
Ir a mi programa galilei.edu · Bogotá, Colombia G
ana@galilei.edu +57 300 000 0000 galilei.edu
Feedback states
Colores de estado para resultado, riesgo o información. El hero no se repite aquí · sus tokens viven en la sección 01.
Success
Success
Confirmación · validación · completado
✓ Guardado
Módulo completado al 100%
Warning
Warning
Atención · precaución · pendiente
Revisa antes de continuar
Tu sesión expira en 5 minutos
Alert
Alert
Acción requerida · urgencia media
Acción requerida
Completa tu perfil para avanzar
Error
Error
Falla · bloqueo · rechazo
Error al guardar
No se pudo procesar · intenta de nuevo
Info
Info
Aclaración · contexto · neutral
Nota
Este campo es opcional
Accent
Accent
Spotlight · destacado · CTA contextual
Ver detalle
CTA primario · acento de marca
Success · Esmeralda
Success
H142° · 63° del hero lime. Logros, completados, validación.
--success-light #8BDAA8 Light --success-vivid #22C55E Vivid --success-dark #14532D Dark --success-a05 note-callout a05 --success-a12 chip/badge a12 --success-a30 chip fuerte a30 --success-dark-a50 wash oscuro dark-a50 Light
--success-light #8BDAA8 Vivid
--success-vivid #22C55E Dark
--success-dark #14532D a05
--success-a05 note-callout a12
--success-a12 chip/badge a30
--success-a30 chip fuerte dark-a50
--success-dark-a50 wash oscuro Warning
Warning
Avisos · estados de riesgo · suscripciones por vencer.
--warning-light #FFEF7C Light --warning-vivid #ECCF07 Vivid --warning-dark #4B430E Dark --warning-a05 note-callout a05 --warning-a12 chip/badge a12 --warning-a30 chip fuerte a30 --warning-dark-a50 wash oscuro dark-a50 Light
--warning-light #FFEF7C Vivid
--warning-vivid #ECCF07 Dark
--warning-dark #4B430E a05
--warning-a05 note-callout a12
--warning-a12 chip/badge a30
--warning-a30 chip fuerte dark-a50
--warning-dark-a50 wash oscuro Alert
Alert
Estados intermedios · advertencias activas que requieren atención.
--alert-light #FFB482 Light --alert-vivid #F69554 Vivid --alert-dark #463123 Dark --alert-a05 note-callout a05 --alert-a12 chip/badge a12 --alert-a30 chip fuerte a30 --alert-dark-a50 wash oscuro dark-a50 Light
--alert-light #FFB482 Vivid
--alert-vivid #F69554 Dark
--alert-dark #463123 a05
--alert-a05 note-callout a12
--alert-a12 chip/badge a30
--alert-a30 chip fuerte dark-a50
--alert-dark-a50 wash oscuro Error
Error
Pagos fallidos · validaciones rotas · errores críticos.
--error-light #FAA4A4 Light --error-vivid #FB7E7E Vivid --error-dark #46282D Dark --error-a05 note-callout a05 --error-a12 chip/badge a12 --error-a30 chip fuerte a30 --error-dark-a50 wash oscuro · timer-bg dark-a50 Light
--error-light #FAA4A4 Vivid
--error-vivid #FB7E7E Dark
--error-dark #46282D a05
--error-a05 note-callout a12
--error-a12 chip/badge a30
--error-a30 chip fuerte dark-a50
--error-dark-a50 wash oscuro · timer-bg Secondary · Info
Secondary
H196° split-complementary del hero. Links · referencias · estados informativos. También es el acento narrativo de Siderax: una sola familia, dos roles.
--info-light #ABE3F8 Light --info-vivid #73C8E8 Vivid --info-dark #17536A Dark --info-a05 note-callout a05 --info-a12 chip/badge a12 --info-a30 chip fuerte a30 --info-dark-a50 wash oscuro dark-a50 Light
--info-light #ABE3F8 Vivid
--info-vivid #73C8E8 Dark
--info-dark #17536A a05
--info-a05 note-callout a12
--info-a12 chip/badge a30
--info-a30 chip fuerte dark-a50
--info-dark-a50 wash oscuro Distinción crítica
Success · Esmeralda vs GaliGreen · Lima
Dos verdes que dicen cosas distintas. Confundirlos rompe el lenguaje del sistema.
Success · Esmeralda
--s-500 Resultado final positivo · algo ya ocurrió y salió bien.
- Módulo completado al 100%
- Correo o código verificado correctamente
- Pago procesado exitosamente
- Logro desbloqueado / GaliEmbajador asignado
- Score ≥ umbral aprobatorio
GaliGreen · Lima
--g-brand Acción disponible o identidad de marca · algo que puede hacerse ahora.
- Botón primario CTA
- Badge de estado "Activo"
- Barra de progreso de módulo en curso
- Links activos y hover states
- Datos destacados en dashboard
Dos sistemas, dos lenguajes
En el UI solo hay dos sistemas de color: Brand (GaliGreen) y Feedback (estados). Identifica en cuál estás antes de elegir un color · si los mezclas, el cerebro lee ruido. Los colores de personaje (Gali, Siderax, Urbano) tienen paleta propia pero son narrativos: nunca se usan en UI, viven en Universo narrativo. El catálogo de UI (botones, badges, inputs, alertas) vive en Componentes.
GaliGreen
--g-brand · #B3F131 Se usa en
- Acento de headline (una palabra dentro del título)
- CTA primario, hover y focus glow
- Badge "activo", barra de progreso en curso
- Dots de notificación, indicadores live
No se usa en
- Como tinte global de fondo de sección
- Como reemplazo de success ("completado")
- Como color de personaje
- Como decoración sin función
Success · Warning · Alert · Error
vivid (light-bg) + light (dark-bg) Success Warning Alert Error
Se usa en
- Confirmaciones, validaciones, errores reales
- Instrucción documental "siempre / nunca"
- Status badges del sistema (online, fallido)
- Inline messages con ícono + texto explícito
No se usa en
- Chips de flujo lógico (sí/no en decision tree)
- Filtros, navegación, categorías
- Mezclando 3+ tonos en una vista pequeña
- Color como única señal (sin ícono ni texto)
Chip de feedback · cómo se construye
El chip de estado debe gritar el estado. Sobre dark, eso pide vivid como texto con opacity del vivid como bg. El light hex se reserva para prosa auxiliar (notas, leyendas), no para el chip mismo. Dos ejemplos lado a lado:
Success
Correcto · chip sobre dark
color: var(--success-vivid) (vivid) + background: var(--success-a12). La señal lee saturada y semánticamente fuerte.
Success
Sobre fondos claros
Cuando el chip vive sobre superficie clara (light mode, modal): vivid como bg sólido + texto blanco o --n00. Misma señal, soporte invertido.
Regla mental. Si la pieza es pequeña y debe gritar el estado (chip, badge, alert pill), va vivid. Si la pieza es larga o auxiliar (párrafo, nota, leyenda), va light.
Forma y tipografía. El texto del chip va en sentence case y peso regular ("Success", no "SUCCESS" ni bold): el ALL CAPS con tracking pertenece a los eyebrows, no a los chips. Y un chip siempre es un pill · los eyebrows y overlines (labels de sección o categoría) van en texto plano, nunca dentro de un pill.
Reglas de mezcla · cómo conviven los tres sistemas
Un mensaje, un sistema
Una pieza visual habla en un solo lenguaje: marca, o personaje, o feedback. Nunca los tres a la vez en la misma vista pequeña.
Brand domina la composición
Si necesitas un chip de feedback junto a un CTA GaliGreen, OK: el feedback vive contenido (callout, badge inline) y GaliGreen sigue mandando como acento global.
Personaje y feedback no se cruzan
Si la card es de Siderax (cian), no metas un chip success light ahí: el cerebro lee dos azules/verdes y se confunde. Para "esto sí pertenece a Siderax", usa el propio token de Siderax.
Dos feedback solo en patrón sí/no
Success + error solo cuando documentas SIEMPRE/NUNCA, válido/inválido, do/don't. Tres o más feedback simultáneos = ruido decorativo.
Color nunca es la única señal
Cada chip de feedback acompaña ícono + texto explícito. Daltonismo no es edge case. Aplica también a brand y personaje cuando el color carga significado.
Anti-patrones vistos y corregidos
Mal
Chip "SÍ MIRA" en success light dentro de un decision tree.
Bien
Chip "SÍ MIRA" en GaliGreen sobre tint lima. El flujo de decisión es brand, no feedback.
Mal
"Props válidos" en success + cards de Gali en lima al mismo tiempo. Dos verdes con significados distintos.
Bien
"Sí pertenece" en GaliGreen + neutral. Reservar success para confirmaciones reales del sistema.
Mal
GaliGreen como confirmación de "módulo completado".
Bien
Success `#22C55E` vivid + tint del vivid al 12% como bg, sobre dark. GaliGreen indica "puede hacerse", no "se hizo".
Regla 60 / 30 / 10
El acento siempre es minoría. Si el lima pasa del 10% de la pantalla, la UI pierde legibilidad.
Dashboard / App
Dark surfaces + texto + acento de datos
- --neutral-00 / --neutral-01 · fondos 60%
- --neutral-02 → --neutral-07 · cards 30%
- --g-brand · botones, datos 10%
Slide de presentación
Fondo oscuro + texto + headline de marca
- --neutral-00 60%
- --neutral-07 30%
- Hero CTAs · headlines 10%
Landing page
Hero section + cards + CTA único
- Gradient BG 60%
- Surfaces + texto 30%
- Hero button · CTA único 10%
Material impreso
Tarjeta · folleto · credencial
- --n00 60%
- Blanco + grises 30%
- Lima PMS382C 10%
Presupuesto de lima · el lima es señal, no decoración
El 10% controla el área. Pero el lima también pierde fuerza por frecuencia: si aparece en cada heading y cada número, el ojo deja de leerlo como "mira esto". Estas son las reglas que lo mantienen como acento puntual.
- 01 Una señal por viewport
Máximo un acento de lima en lo que se ve sin scroll. Si hay dos, una no es la más importante.
- 02 El heading firma de la página
Solo la sección más importante lleva palabra en lima. Idealmente una por página entera.
- 03 Lima funcional
Estado activo de navegación, un CTA, un dato clave aislado. Ahí el lima orienta y siempre va.
- 04 Sobre superficie neutra
El lima necesita fondo neutro para existir. Sobre oscuro salta, sobre verde se anula.
- 01 Palabra-acento automática
No toda h2 lleva palabra en lima. Cuando es fórmula deja de ser acento y se vuelve papel tapiz.
- 02 Números de sección en lima
Los 01 02 03 son orientación, no señal. Van en --text-tertiary.
- 03 Lima sobre superficie verde
Texto o icono lima sobre un card de fondo verde-tinte: no hay salto de contraste, se anula.
- 04 Lima para "darle vida"
Si el lima está solo de decoración, sobra. Ante la duda, quitarlo: 1 lima gana a 2 lima.
Matriz de contraste WCAG
Todos los pares críticos texto/fondo, verificados. La columna Preview muestra cómo se ve el texto sobre cada fondo.
Leyenda
AAA
AA+
AA
FAIL
| Pair | Texto | Fondo | Ratio | Texto grande | Texto normal | Preview |
|---|---|---|---|---|---|---|
| Negro #0E1012 sobre hero | #0E1012 | #B3F131 | 14.1 : 1 | AAA | AAA | Aa Texto |
| Blanco sobre n01 | #FFFFFF | #0E1012 | 19.1 : 1 | AAA | AAA | Aa Texto |
| Secundario (n07) sobre n02 | #C7CCD4 | #171A1E | 10.8 : 1 | AAA | AAA | Aa Texto |
| Terciario (n06) sobre n01 | #8B939E | #0E1012 | 6.1 : 1 | AAA | AA | Aa Texto |
| Terciario (n06) sobre n03 · no body | #8B939E | #292F36 | 4.4 : 1 | AA | FAIL | Aa Texto |
| Hero sobre n01 | #B3F131 | #0E1012 | 14.1 : 1 | AAA | AAA | Aa Texto |
| Info (#61BDDF) sobre n01 | #61BDDF | #0E1012 | 8.9 : 1 | AAA | AAA | Aa Texto |
| Hero sobre blanco | #B3F131 | #FFFFFF | 1.4 : 1 | FAIL | FAIL | Aa Texto |
| Hero-800 sobre blanco | #567F00 | #FFFFFF | 4.7 : 1 | AAA | AA | Aa Texto |