Research: Color, Design System y Dirección Visual

Teoría del Color, Tipografía, Fotografía y Evaluación del Sistema Actual

1. Psicología del Color en Salud

Lo que Dice la Investigación

• Azul reduce frecuencia cardíaca y respiración (Journal of Environmental Psychology, 2010). Websites de salud con azules y verdes logran 18% más confianza que otras paletas
• Verde señala equilibrio, sanación, renovación. Contrarresta el riesgo de exceso de azul (que puede estimular tristeza)
• Rojo aumenta presión arterial, frecuencia cardíaca y respiración (Goldstein 1942, Elliot 2015). Útil con moderación para urgencia
• 12% de hombres y 0.5% de mujeres tienen dificultad distinguiendo rojo de verde — codificación rojo/verde en datos de salud es problemática

Cómo Usan Color los Líderes

2. Dirección Visual de ADEN

Identidad Aspiracional

Basado en el análisis de competidores y la dirección de marca, ADEN se posiciona en el territorio dark premium + datos inteligentes:

Referencias de Mercado Alineadas

• Ultrahuman — Sleep Index con score prominente en dark mode
• WHOOP — Datos de rendimiento sobre fondo oscuro, acento por color
• Calm — Inmersión nocturna, navy profundo como base
• Sandra AI — UI de inteligencia artificial en estética dark tech
• Moonlight Studio — Elementos circulares y anillos sobre fondo oscuro

3. Gap: Dirección Visual vs. Design System Actual

Comparación Directa

Análisis

La dirección de marca apunta a WHOOP + Ultrahuman (dark, tech, premium), pero el design system actual se construyó tipo Apple Health + Noom (light, warm, accesible).

Este es un gap de identidad visual que necesita resolverse.

Opciones

OPCIÓN A: Dark Mode como Principal
  Pro: Premium, diferenciador en LATAM, alineado con marca
  Con: Estudios muestran que 55% prefiere light mode para salud
  Riesgo: Puede intimidar a usuarios menos tech-savvy
  Referencia: WHOOP, Ultrahuman, Calm

OPCIÓN B: Light Mode como Principal + Dark Mode Accent
  Pro: Accesible, validado por Noom/Headspace
  Con: No refleja la dirección de marca
  Riesgo: Se ve como "otra app de salud más"
  Referencia: Noom, Apple Health, One Medical

OPCIÓN C: Dual Mode con Dark Default (RECOMENDADO)
  Pro: Refleja identidad de marca pero da opción al usuario
  Con: Más trabajo de desarrollo
  Referencia: Oura (cambia dinámicamente)
  
  Implementación:
  - Dashboard principal: Dark mode (hero, scores, métricas)
  - Formularios/input: Light mode (lectura, data entry)
  - Onboarding: Dark mode (impresión premium)
  - Settings/config: Light mode (funcional)

4. Paleta Propuesta (Dark + Accesibilidad)

Core Dark Palette

Accent Blue (Glowing)

Text on Dark

Semantic (Dark Mode Compatible)

Light Mode (Formularios/Input) — Mantener Actual

5. Efectos Visuales

Gaussian Blur / Glow

/* Orbe de luz azul (fondo de hero cards) */
.glow-orb {
  background: radial-gradient(circle, rgba(15,47,199,0.3) 0%, transparent 70%);
  filter: blur(60px);
}

/* Glass card (glassmorphism) */
.glass-card {
  background: rgba(17, 24, 39, 0.6);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Metric glow */
.metric-glow {
  text-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}

Elementos Circulares

ADEN tiene afinidad por elementos circulares como motivo visual:

• Score rings — Anillos de progreso (como Apple Watch pero en azul)
• Orbes — Formas circulares con blur como decoración
• Gauges — Medidores circulares para métricas de salud

6. Tipografía

Research Findings

• Sans-serif mejora velocidad de lectura 7-10% en screens digitales
• Mínimo 16px para audiencia general (US Dept of Health)
• 19px mínimo para contenido dirigido a adultos mayores
• Números tabulares son esenciales para datos de salud (alineación)

Fonts en Health Tech

Recomendación para ADEN

Google Sans Flex es buena elección. Para la estética dark/premium, considerar:

• Headlines: Weight 700, 32-48px, white on dark
• Métricas/Scores: Weight 700-800, 48-72px, con glow effect
• Body: Weight 400, 16-18px mínimo
• Labels: Weight 500, 12-14px, gray muted

7. Fotografía y Imagery

Dirección ADEN

La identidad visual de ADEN apunta a:

1. Macro/close-up de piel — Textura, intimidad, humanidad
2. Retratos con iluminación cinematográfica — Side-lit, moody, profundidad
3. Sin stock genérico — Todo debe sentirse editorial/auténtico
4. Personas diversas — Diferentes edades y contextos colombianos
5. Overlays de datos — Métricas superpuestas sobre fotografía real

Tendencia 2025-2026: Autenticidad

La industria se movió decisivamente hacia fotografía auténtica sin retocar:

• Hims/Hers: fotografía shot on film, sin retoque
• One Medical: personas reales, composiciones íntimas
• Headspace: cero fotografía, 100% ilustración

Anti-Fotografía

8. Accesibilidad y Color

WCAG Requirements

Daltonismo y Datos de Salud

Alternativas seguras para estados de salud:

• Azul y naranja — universalmente distinguibles
• Azul y amarillo — alta diferenciación
• Siempre agregar: iconos, labels de texto, patrones

Validación ADEN

Decisión de usar azul #0f2fc7 en lugar de verde/rojo para estados es correcta para accesibilidad. En dark mode, los ratios de contraste validan:

• White #F9FAFB sobre #0A0F1E: ~18:1 (excelente)
• Blue #3B82F6 sobre #0A0F1E: ~4.8:1 (AA pass)
• Gray #9CA3AF sobre #0A0F1E: ~6.2:1 (AA pass)
• Emerald #10B981 sobre #0A0F1E: ~5.9:1 (AA pass)

9. Cream Background — Validación para Light Mode

Investigación

• Backgrounds cálidos reducen fatiga ocular al bajar contenido de luz azul
• Pure white crea luminancia excesiva que causa incomodidad
• Cream es percibido como menos clínico y frío, más reconfortante
• Off-whites “brillan sin deslumbrar, lo que mantiene la concentración”

Quién Más Lo Usa

Veredicto

Cream #F5F5F0 está validado para formularios, configuración y secciones de lectura. Para la experiencia principal (dashboard, scores, métricas), dark mode es la dirección aspiracional de la marca.

10. Design System Comparativo

Posición Única de ADEN

Con la dirección dark + electric blue + gaussian blur, ADEN ocupa un territorio visual que ningún competidor en LATAM tiene:

• No es el “wellness suave” de Noom/Headspace
• No es el “performance puro” de WHOOP
• Es “ciencia premium accesible” — dark luxury con datos de salud comprensibles

Fuentes

• UXmatters: Color Psychology in Health Apps
• Headspace Design System — Standards
• WHOOP Design Guidelines
• Noom Brand Hub
• One Medical by Moniker
• Oscar Health Brand Redesign
• Hims & Hers Humanizing Healthcare Design
• Healthcare UI Design 2026 — Eleken
• Sans-Serif in Healthcare Typography — FontsArena
• WCAG 2.1: Use of Color
• Color Blind Friendly Palettes — Visme
• Cream Color in UI — Figma
• Ultrahuman App Design
• Big Human: Mindfulness App Design Trends 2026