Diseño de experiencia móvil · UX/UI

Lume
Mood

«Tu estado de ánimo no es un dato. Es tu luz.»

Plataforma iOS · Prototipo web
Pantallas 6 principales + overlays
Año 2026
Probar el prototipo →
Abre en nueva pestaña · experiencia completa
lume mood
01 · Contexto

El problema
y la oportunidad

Las aplicaciones de seguimiento emocional presentan una paradoja frecuente: o son demasiado frías y funcionales, o tan simplificadas que resultan irrelevantes pasadas las primeras semanas.

—
Demasiado frías
Listas, formularios, estadísticas áridas. La emoción se convierte en un campo de texto. La experiencia no invita a volver.
—
Demasiado vacías
Simplificadas al punto de perder matices. Cinco emojis no capturan la complejidad emocional de un día real.
—
Ninguna resuelve las tres a la vez
Rápida de usar en el momento. Que acumule valor con el tiempo. Que se sienta bien al usarla. Las apps existentes no cumplen estas tres condiciones simultáneamente — y ninguna tiene una identidad visual propia y memorable.
La oportunidad
1
Tratar la emoción como luz, no como dato. Que registrar cómo te sientes sea tan natural como encender una lámpara.
2
Una identidad visual única y coherente. No más clones de bienestar en sans-serif limpio sobre blanco.
3
Una microinteracción que sorprenda. El check-in diario como gesto físico y sensorial, no como formulario.
02 · Identidad

Concepto
& naming

El nombre · Lume

Lume proviene del latín lumen, luz. Corto, fácil de pronunciar en cualquier idioma, activa una metáfora inmediata: las emociones como fuentes de luz interior que cambian de intensidad y color cada día.

Las apps de bienestar suelen llamarse con términos de calma o serenidad — todas suenan igual. Lume apunta a algo diferente: no la tranquilidad, sino la presencia.

Concepto visual · Glow & Flow

La pantalla es un espacio de luz viva. Los estados de ánimo no son etiquetas ni colores planos: son esferas luminosas con núcleo blanco brillante y halo de color que respiran, laten y se expanden.

El fondo nunca es estático. Cuatro orbes se mueven en trayectorias distintas, creando una nebulosa que cambia sin que el usuario lo perciba conscientemente.

Sistema de 5 estados emocionales
Radiante
Alegría expansiva, éxito, plenitud
#FFB830
Energía
Motivación, creatividad activa, rabia, intensidad
#FF6B35
Calma
Serenidad, descanso, respiración pausada
#A78BFA
Reflexión
Introspección, aprendizaje, observación
#4A9EFF
Sombra
Tristeza, cansancio, vulnerabilidad
#9B6B9B
04 · Identidad

Tipografía

Dos familias que se complementan: una para personalidad y emoción, otra para claridad y función.

Display · Cormorant Garamond
Lume
mood · estado
Serif elegante con variantes en cursiva. Aporta un tono íntimo, casi manuscrito. Usada en títulos, nombres de mood y elementos con carga emocional.
Light 300 Radiante · Calma · Reflexión
Regular 400 Tu luz de hoy
Italic 300 estado · diario · galaxia
Cuerpo · DM Sans
DM Sans
Registra tu estado emocional. Una nota breve sobre tu día.
Sans-serif limpia y legible en tamaños pequeños. Para etiquetas, notas, datos, timestamps y todos los elementos funcionales de la interfaz.
Light 300 09:41 · Mañana
Regular 400 Check-in · Hoy
Medium 500 Guardar estado
05 · Identidad

Color &
glassmorphism

Paleta de moods
Radiant
#FFB830
Energy
#FF6B35
Calm
#A78BFA
Reflection
#4A9EFF
Shadow
#9B6B9B
Fondos y neutros
Background
#04020C
Surface
#07050F
Day bg
#F5F0FF
Glass fill
rgba(255,255,255,5%)
Glassmorphism · La técnica
Calma · 14:30
Tarde tranquila. El fondo se ve a través de la card, manteniendo la sensación de profundidad y movimiento.
backdrop-filter: blur(24px)
background: rgba(255,255,255, 5%)
border: 1px solid rgba(255,255,255, 10%)
Modo día / modo noche
◐ Noche
Fondo #06040F
Texto #F0EBF8
Orbes saturados
◑ Día
Fondo #F5F0FF
Texto #1A1030
Orbes sutiles
06 · Experiencia

Las cinco
pantallas

Cada pantalla tiene un rol claro dentro del flujo emocional diario. Desliza para explorarlas.

09:41 ●●● ▶ ■
Good morning,
Lucía
Now
Calm
2h ago · Afternoon
Quiet afternoon, good coffee. Feeling present.
This week
M
T
W
T
F
S
S
Daily check-in
How are you feeling now?
✦
⌂
Home
◎
Check
◐
Lume
✦
Galaxy
◉
Profile
Home
←
lume mood
drag · tap · feel
Calm
drag to change
A note about your state… (optional)
Save state
Check-in ★
09:41 ●●● ▶ ■
monday, 23 feb
Lume
‹
›
☀ Morning
Radiant
Coffee and sun. Day starting well.
🌅 Afternoon
Reflection
Quiet afternoon of work.
Calm
Thinking about the project.
🌙 Evening
Calm
Serene night. Reading.
⌂
Home
◎
Check
◐
Lume
✦
Galaxy
◉
Profile
Diary (Lume)
09:41
february, 2026
Galaxy
‹
›
M
T
W
T
F
S
S
This month
7
5
⌂
Home
◎
Check
◐
Lume
✦
Galaxy
◉
Profile
Galaxy
09:41
Lucía
on lume since jan 2026
27 days in a row
Your dominant moods
33%
Calm
22%
Radiant
15%
Reflection
🔔 Reminder
20:00
◑ Visual mode
⌂
Home
◎
Check
◐
Lume
✦
Galaxy
◉
Profile
Profile
Your light
has been
saved.
Tonight you shine with
Calm — keep shining.
Back to home
Confirmation
Probar el prototipo →
Abre en nueva pestaña · experiencia completa
07 · Experiencia

The Glow Pulse —
la microinteracción

El corazón de Lume. En lugar de un selector de opciones, el check-in es un gesto físico: arrastrar una esfera de luz para cambiar el estado de ánimo.

Calm
Tres capas de la esfera
Shell de color con gradiente radial, núcleo blanco difuminado (efecto bombilla) y outer glow extendido más allá de los bordes.
Anillos concéntricos
Tres anillos se expanden en bucle desfasado (animation-delay: -1.33s), creando efecto de onda de luz continua.
Color global en tiempo real
Dos variables CSS (--mood y --mood-r) se actualizan al cambiar de estado, propagando el color a toda la interfaz al mismo tiempo.
Animación breathe
Escala 1 → 1.055 → 1 en 6s. La esfera respira. Simula presencia, vida interior. Se pausa durante el arrastre.
08 · Experiencia

Catálogo de
animaciones

Cada animación tiene un propósito: no existe decoración vacía. Todas están construidas en CSS puro.

Breathe
La esfera respira. Escala 1 → 1.055 → 1 en bucle. Transmite vida y presencia.
6s ease-in-out infinite
Pulse Ring
Anillos concéntricos que se expanden hacia afuera. Tres en desfase de 1.33s.
scale(.85)→scale(1.2) linear
Drift
Orbes de fondo que se mueven en trayectorias irregulares. Crea la nebulosa ambiente.
translate + scale · 17–28s
Color Transition
Al cambiar de mood, toda la UI transiciona de color en 1.5s. Un cambio de tema global coordinado.
transition: 1.5s ease
✦
Calendar Ripple
Al pulsar un día del calendario, un ripple blanco se expande antes de abrir el detalle. Toca el botón.
scale(0)→scale(5) · 0.6s
Fade-in Stagger
Cards y elementos entran con retraso progresivo al cargar cada pantalla. Crea ritmo visual.
fsu · 0.7s · delays 0.1s
09 · Técnica

Sistema de
diseño

La coherencia visual de Lume no es accidental: está construida sobre decisiones técnicas elegantes y escalables.

·
Variables CSS dinámicas
Todo el sistema de color se gestiona con dos variables CSS que se actualizan en tiempo real al cambiar de mood. Añadir un estado nuevo es tan simple como un objeto en el array de datos.
/* Cambio de mood */
document.documentElement.style
.setProperty('--mood', '#A78BFA');
document.documentElement.style
.setProperty('--mood-r', '167,139,250');
·
Por qué esferas
La esfera es la forma más orgánica: evoca algo vivo, cálido, interior. Un cuadrado habría dado un tono tecnológico y frío. El núcleo blanco (efecto bombilla) refuerza la metáfora sin explicarla.
·
Transición día/noche
Cada elemento CSS tiene su propia duración de transición (0.6s–0.9s). El fondo empieza a clarear mientras los textos todavía cambian. La luz entra poco a poco, como de verdad.
·
Por qué cinco moods
Cinco cubre el espectro cotidiano sin abrumar. Más de cinco haría el check-in más lento. Reflexión y Sombra son distintos. Radiante y Energía también. Los matices importan.
·
Cursor personalizado (prototipo web)
El cursor del sistema es reemplazado por un anillo circular translúcido del color del mood activo, con un punto central. Al hacer clic, el anillo se contrae y brilla. No existiría en la app nativa, pero en el prototipo de portfolio refuerza la identidad visual de forma inmediata.
El cursor hereda el color del mood activo vía --mood-r. Al presionar se contrae a 28px y brilla.
10 · Cierre
«Cuando la metáfora es fuerte,
el sistema de diseño se construye solo.»

Lume Mood es el proyecto que demuestra que el diseño de interfaz no es solo resolver problemas funcionales. Es también crear atmósferas, proponer metáforas, hacer que algo cotidiano —registrar cómo te sientes— se convierta en un momento que el usuario quiera vivir cada día.

Cada decisión —tipografía, animación, color, interacción— fluía de la misma idea central: las emociones son luz, y la luz se mueve.

Lume Mood · Proyecto UX/UI · 2026