Fondo claro
Sistema de branding y lenguaje visual
Branding hub
La identidad visual de Luma Grid ya está integrada en la app.
Esta página reúne la paleta principal, los colores semánticos del sistema y los logos, favicons e iconos reales que ya has añadido para web, branding y PWA.
Sistema de logos
Aplicado en landing, auth, favicons, PWA y documentación visual.
Vista comparada
El branding se muestra a la vez sobre fondo claro y fondo oscuro, independientemente del tema activo.
Fondo oscuro
Así puedes validar al instante la presencia de marca sobre superficies luminosas y profundas sin depender del modo actual de la interfaz.
Estado
Branding actualizado
Cobertura
Web, auth, footer y PWA
Uso
Web, app, PWA y docs
Paleta principal
Colores nucleares de marca
Esta es la capa mas identitaria: accion, reconocimiento y consistencia visual en todo el ecosistema.
Luma Indigo
#6366F1--accent
Color principal de accion, llamadas primarias y elementos de identidad.
Luma Indigo Light
#818CF8--accent-light
Gradientes, estados hover y apoyos visuales suaves.
Luma Indigo Dark
#4F46E5--accent-dark
Contraste, profundidad y variantes de CTA.
Sistema semantico
Tokens preparados para claro y oscuro
La identidad no depende de hex dispersos. Se apoya en tokens para fondo, superficie, texto, bordes y estados, haciendo que la marca se comporte bien en cualquier tema.
App Background
--app-bg
Fondo general del producto y pantallas principales.
Surface
--app-surface
Tarjetas, paneles y superficies elevadas.
Foreground
--app-foreground
Texto principal, iconografia y contraste base.
Muted Foreground
--app-muted-foreground
Texto secundario, soporte y descripciones.
Border
--app-border
Separadores, bordes suaves y contencion visual.
Predicted
--app-predicted
Resaltado de sugerencias y estados inteligentes.
Paleta de simbolos
Colores adaptativos para el sistema AAC
Estos colores se adaptan automaticamente al modo claro y oscuro y son la base visual del tablero y del editor.
Surface
--symbol-color-surface
Sky
--symbol-color-sky
Green
--symbol-color-green
Yellow
--symbol-color-yellow
Violet
--symbol-color-violet
Rose
--symbol-color-rose
Cyan
--symbol-color-cyan
Pink
--symbol-color-pink
Amber
--symbol-color-amber
Mint
--symbol-color-mint
Time
--symbol-color-time
Folder
--symbol-color-folder
Principios
Como debe sentirse Luma Grid
- Claro primero: la interfaz debe entenderse sin explicacion previa.
- Calma visual: pocas capas, bordes suaves y movimiento sutil.
- Accesibilidad real: contraste alto y lectura inmediata.
- Consistencia: un mismo sistema visual para tablero, admin y marketing.
Activos disponibles
Descargas y formatos listos para usar
Estado actual
La identidad visual ya está conectada en toda la app.
Si quieres, el siguiente nivel sería documentar normas de uso, tamaños mínimos, márgenes de seguridad, versiones monocromas y mockups de aplicación para dejar esta sección de branding más profesional.