Color System

Sistema construido sobre el hero lime, neutrales fríos, semánticos calibrados y reglas explícitas de contraste WCAG.

01Principales

GaliGreen

Color insignia de Galilei. Los pasos 500–900 son exclusivos de UI en dark mode. Los pasos 50–400 se reservan para certificados, PDFs y materiales impresos · no aparecen en pantalla.

Dark UI · App

500 · Brand

--g-brand #B3F131 rgb(179, 241, 49)

600 · Active

--g-600 #A5EF0A rgb(165, 239, 10)

700

--g-700 #8CCC04 rgb(140, 204, 4)

800 · Light CTA

--g-800 #71A800 rgb(113, 168, 0)

900 · Light Hover

--g-900 #567F00 rgb(86, 127, 0)

Print · PDF · Certificados

¿Por qué existen? El verde firma --g-500 sobre fondo blanco no pasa contraste WCAG · es demasiado claro. Estos pasos existen para contextos de fondo claro (papel, email, PDF) donde el verde necesita más peso visual para ser legible.

50–100 · Fondo de un badge de logro o chip de estado en certificado 200–300 · Highlight de una fila seleccionada en tabla PDF 400 · Bloque de acento en email de bienvenida o notificación Regla · Si no llama la atención intencionalmente, usa neutros

--g-50 #FAFBF9 rgb(250, 251, 249)

100

--g-100 #ECF1E4 rgb(236, 241, 228)

200

--g-200 #D9E7BB rgb(217, 231, 187)

300

--g-300 #C8E686 rgb(200, 230, 136)

400

--g-400 #BCEB5A rgb(188, 235, 90)

Tokens funcionales derivados

Brand

--g-brand #B3F131 rgb(179, 241, 49) CTA · links activos

Hover

--g-hover #77CB0E rgb(119, 203, 14) Hover botón primario

Opacity

--g-opacity rgba(179,241,49,.1) Badge bg suave

Deep

--g-dark #2D4203 rgb(45, 66, 3) Badge bg inverso

02Neutrales

GaliNeutrals

Temperatura fría intencional (H215°) en contraste con el hero cálido (H79°). La tensión visual es el carácter del sistema.

n00

Sunken --n00 #0B0B0B rgb(11, 11, 11)

n01

Body --n01 #101010 rgb(16, 16, 16)

n02

Overlay ↓ --n02 #171A1E rgb(23, 26, 30)

n03

Border --n03 #292F36 rgb(41, 47, 54)

n04

Muted --n04 #747C8A rgb(116, 124, 138)

n05

Sec Text --n05 #C7CCD4 rgb(199, 204, 212)

n06

Pri Text --n06 #F0F2F5 rgb(240, 242, 245)

n07

White --n07 #FFFFFF rgb(255, 255, 255)

--gradient-bg #171A1E → #292F36 · Fondo general app

03 Estados semánticos

Feedback States

Colores de estado para comunicar resultado, riesgo o información. El hero no se repite aquí · sus tokens funcionales viven en la sección 01.

Success · Esmeralda

H142° · 63° del hero lime. Logros, completados, validación.

Light --s-200 #8BDAA8

Vivid --s-500 #22C55E

Opacity --s-100 12% α

Dark --s-900 #0C5A29

Warning

Avisos · estados de riesgo · suscripciones por vencer.

Light --w-200 #FFEF7C

Vivid --w-500 #ECCF07

Opacity --w-100 10% α

Dark --w-900 #4B430E

Alert

Estados intermedios · advertencias activas que requieren atención.

Light --a-200 #FFB482

Vivid --a-500 #F69554

Opacity --a-100 20% α

Dark --a-900 #463123

Error

Pagos fallidos · validaciones rotas · errores críticos.

Light --e-200 #FAA4A4

Vivid --e-500 #FB7E7E

Opacity --e-100 10% α

Dark --e-900 #46282D

Secondary · Info

H196° split-complementary del hero. Links · referencias · estados informativos.

Light --i-200 #ABE3F8

Vivid --i-500 #73C8E8

Opacity --i-100 10% α

Dark --i-900 #17536A

Distinción crítica

Success · Esmeralda vs GaliGreen · Lima

Son dos verdes pero comunican cosas distintas. Confundirlos rompe el lenguaje semántico 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

04Superficies UI

Tipos de superficies

Galilei usa exactamente 5 superficies. La jerarquía nunca se comunica con bordes de acento · solo con el tipo de superficie.

Sunken depth 0

87 pts Promedio

Fondo base

App background · secciones de página · el suelo de toda la UI.

--n00 · background: #0B0B0B

Outlined depth 1

Campo de texto

$ galilei run --build

Wells e inputs

Inputs · áreas de código · wells · elementos secundarios.

--n03 · border: 1.5px solid #292F36

Overlay depth 2 · primario

94% Tasa de finalización Activo

Cards y panels

Dashboards · modales · contenedores principales de contenido.

gradient 155° --n02 → --n03

Glass · Default sobre fondos oscuros

MÓDULO ACTIVO 94% En progreso

INSCRITOS 1,240 Activo

Frosted · oscuro

Tooltips · menús flotantes · overlays sobre video o imagen oscura.

rgba(16,16,16, 0.40) · blur(4px) · r: 28px

Glass · Strong sobre fondos saturados

MÓDULO ACTIVO 94% En progreso

INSCRITOS 1,240 Activo

Frosted · strong

Overlays sobre fondos claros, saturados o con imagen de alta luminosidad.

rgba(16,16,16, 0.58) · blur(16px) · r: 28px

05 Componentes

Botones, Badges, Inputs, Alertas

Aplicación de tokens funcionales a componentes de interfaz.

Botones

Badges

Activo Completado Pendiente En proceso Vencido Nuevo Pro Beta

Inputs Correo electrónico ✓ Correo verificado Código de acceso Código inválido o expirado

Alertas

Aprobado. Módulo completado exitosamente. Tu certificado ya está disponible.

Informativo. Nueva lección disponible en tu programa de matemáticas.

Atención. Tu suscripción vence en 3 días. Renueva para no perder acceso.

Aviso. Calificación por debajo del mínimo aprobatorio registrada.

Error. No se pudo procesar el pago. Verifica los datos de tu tarjeta.

06 Accesibilidad

Matriz de Contraste WCAG

Verificación de todos los pares críticos texto/fondo. La columna Preview muestra exactamente cómo se ve el texto sobre cada fondo.

Leyenda

AAA

AA+

FAIL

Pair	Texto	Fondo	Ratio	Texto grande	Texto normal	Preview
Negro #101010 sobre hero	`#101010`	`#B3F131`	14.7 : 1	AAA	AAA	Aa Texto
Blanco sobre n01	`#FFFFFF`	`#101010`	19.6 : 1	AAA	AAA	Aa Texto
n05 sobre n02	`#C7CCD4`	`#171A1E`	11.2 : 1	AAA	AAA	Aa Texto
n04 sobre n01	`#747C8A`	`#101010`	4.7 : 1	AAA	AA	Aa Texto
Hero sobre n01	`#B3F131`	`#101010`	15.4 : 1	AAA	AAA	Aa Texto
Info sobre n01	`#73C8E8`	`#101010`	9.5 : 1	AAA	AAA	Aa Texto
Hero sobre blanco	`#B3F131`	`#FFFFFF`	1.4 : 1	FAIL	FAIL	Aa Texto
Hero-800 sobre blanco	`#71A800`	`#FFFFFF`	4.6 : 1	AAA	AA	Aa Texto

07Distribución

Regla 60 / 30 / 10

El acento es siempre minoría visual. Si el lime ocupa más del 10% de la pantalla, la UI pierde legibilidad.

60% · Fondos y estructura 30% · Texto y UI 10%

Dashboard / App

Dark surfaces + texto + acento de datos

--n00 / --n01 · fondos 60%
--n02 → --n05 · cards 30%
--g-brand · botones, datos 10%

Slide de presentación

Fondo oscuro + texto + headline de marca

--n00 60%
--n06 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%

08Light Mode

Galilei en modo claro

Light mode aplica en exactamente 3 canales. Email marketing, slides, informes y materiales impresos van en dark.

Hero-800 en light, nunca Hero-500

El lima --g-brand #B3F131 no pasa contraste sobre fondos claros. En light mode se usa --g-800 #71A800 que garantiza contraste AAA. --n04 #747C8A solo para íconos decorativos, nunca texto de lectura.

Fondos siempre neutrales

Ningún fondo de superficie, sección o contenedor se pinta de verde. El hero lime es exclusivo de texto, íconos, CTAs y datos destacados · máx. 10% de la composición.

Letterhead · Contrato

GALILEI LEARNING galilei.edu · +57 300 000 0000

Contrato de Servicios

Bogotá, 1 de mayo de 2026

Firmado por Recibido por

Email marketing

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

Firma de Correo

Ana Gómez Directora Académica Galilei Learning

ana@galilei.edu +57 300 000 0000 galilei.edu