ADEN Design System

Versión: 1.0 Last updated: 2026-04-05 Status: Canonical reference

“Ciencia premium accesible” — dark luxury con datos de salud comprensibles.

Este documento es LA referencia autoritativa para todas las decisiones de diseño visual en ADEN. Cualquier conflicto con otros documentos se resuelve a favor de este archivo.

Tabla de Contenidos

1. Filosofía de Diseño
2. Estrategia de Color: Modo Dual
3. Paleta Dark Mode
4. Paleta Light Mode
5. Colores de Acento
6. Efectos Visuales
7. Tipografía
8. Espaciado y Layout
9. Componentes
10. Iconografia
11. Dirección Fotografica
12. Prohibiciones Absolutas

1. Filosofía de Diseño

Posición en el Mercado

ADEN no es wellness suave (Noom, Headspace) ni performance puro (WHOOP). ADEN es ciencia premium accesible: una interfaz oscura de lujo con datos de salud que cualquier persona puede entender.

Principios Fundamentales

Referencias de Identidad Visual

2. Estrategia de Color: Modo Dual

Regla de Aplicación

ADEN usa dos modos visuales con propositos específicos. El dark mode es la experiencia principal; el light mode es utilitario.

Resolución del Azul Primario

Existen dos azules en documentos previos. Esta es la resolución definitiva:

Regla: En la app, siempre usar #0f2fc7 como primario. #2563EB solo aparece en materiales de marca externos.

3. Paleta Dark Mode

La experiencia principal de ADEN. Dashboard, scores, onboarding, métricas.

Fondos

Texto sobre Dark

CSS Variables (Dark Mode)

[data-mode="dark"] {
  --bg-primary: #0A0F1E;
  --bg-surface: #111827;
  --bg-elevated: #1E293B;
  --border-default: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.12);
  --text-primary: #F9FAFB;
  --text-secondary: #9CA3AF;
  --text-muted: #6B7280;
}

4. Paleta Light Mode

Modo secundario. Formularios, configuración, lectura, data entry.

Fondos

Texto sobre Light

Por qué Cream y no White puro

El cream #F5F5F0 está validado por investigación:

• Reduce fatiga ocular al bajar contenido de luz azul
• Menos luminancia que blanco puro, más confortable
• Percibido como menos clínico y frio
• Usado por Noom (#F6F4EE) y Headspace (#FFF8F0)

CSS Variables (Light Mode)

[data-mode="light"] {
  --bg-primary: #F5F5F0;
  --bg-surface: #FFFFFF;
  --bg-elevated: #FFFFFF;
  --border-default: #E5E5E5;
  --border-hover: #D4D4D4;
  --text-primary: #171717;
  --text-secondary: #525252;
  --text-muted: #A3A3A3;
}

5. Colores de Acento

Azul Primario (Marca)

La escala completa de Persian Blue, con el shade 800 como primario.

Azul Glow (Efectos)

Colores Semanticos

Usados para comunicar estado de datos de salud y estados de interfaz.

Importante: No usar rojo/verde como único diferenciador. Siempre agregar iconos y labels de texto (12% de hombres tienen dificultad distinguiendo rojo de verde).

Colores de Categoría (Uso Limitado)

Para diferenciación de módulos o categorías de salud. Solo en iconos y etiquetas pequenas.

6. Efectos Visuales

Estos efectos definen la estética premium de ADEN en dark mode. No se aplican en light mode.

Glow Orbs (Decoración de Fondo)

Orbes de luz difusa que aparecen detrás de hero cards y secciones destacadas.

.glow-orb {
  position: absolute;
  width: 300px;
  height: 300px;
  background: radial-gradient(
    circle,
    rgba(15, 47, 199, 0.3) 0%,
    transparent 70%
  );
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

/* Variante azul claro */
.glow-orb--light {
  background: radial-gradient(
    circle,
    rgba(59, 130, 246, 0.2) 0%,
    transparent 70%
  );
  filter: blur(80px);
}

Glassmorphism (Cards en Dark Mode)

El efecto principal para cards sobre dark backgrounds.

.glass-card {
  background: rgba(17, 24, 39, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
}

/* Variante elevada */
.glass-card--elevated {
  background: rgba(30, 41, 59, 0.7);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

Tailwind equivalente:

<div class="bg-gray-900/60 backdrop-blur-xl border border-white/[0.08] rounded-2xl">
  <!-- contenido -->
</div>

Metric Glow (Números Destacados)

Para scores y métricas grandes que necesitan impacto visual.

.metric-glow {
  color: #F9FAFB;
  text-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}

/* Variante por estado */
.metric-glow--optimal {
  text-shadow: 0 0 20px rgba(16, 185, 129, 0.5);
}

.metric-glow--attention {
  text-shadow: 0 0 20px rgba(248, 113, 113, 0.4);
}

Score Rings (Anillos de Progreso)

Elemento circular iconico de ADEN. Inspirado en Apple Watch pero en azul electrico.

.score-ring {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(
    #3B82F6 0deg,
    #3B82F6 calc(var(--progress) * 3.6deg),
    rgba(59, 130, 246, 0.15) calc(var(--progress) * 3.6deg),
    rgba(59, 130, 246, 0.15) 360deg
  );
  display: flex;
  align-items: center;
  justify-content: center;
}

.score-ring__inner {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #0A0F1E;
  display: flex;
  align-items: center;
  justify-content: center;
}

.score-ring__value {
  font-size: 36px;
  font-weight: 700;
  color: #F9FAFB;
  text-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}

Transiciones y Animaciones

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 25%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.04) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

7. Tipografía

Font Family

Google Sans Flex (variable weight) — elegido por:

• Soporte completo de pesos (100-900)
• Números tabulares nativos
• Optimizada para pantallas
• Buena legibilidad en tamanhos pequenos

font-family: 'Google Sans Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

Escala Tipografica: Dark Mode

Para dashboard, scores, métricas — tipografía grande, bold, alto impacto.

Escala Tipografica: Light Mode

Para formularios, settings, lectura — tipografía más moderada, funcional.

Números Tabulares

Todos los datos de salud DEBEN usar números tabulares para alineación correcta.

.tabular-nums {
  font-variant-numeric: tabular-nums;
}

<span class="tabular-nums text-6xl font-bold">87.4</span>

Colores de Texto

Copywriting

Todo texto en la UI es en español colombiano. Sin excepciones.

Ciudad en mocks: Medellín (siempre) Nombre por defecto: María

8. Espaciado y Layout

Sistema de Grid: 8px

Todo el espaciado se basa en multiplos de 8px. Esto incluye padding, margin, gap, y tamaño de elementos.

Patrones de Layout Comunes

Bento Grid (Dashboards)

Para páginas tipo dashboard con múltiples métricas. Usar 6 columnas con jerarquía visual.

<div class="grid grid-cols-1 md:grid-cols-6 gap-4">
  <!-- HERO: Elemento dominante -->
  <div class="col-span-6 md:col-span-2 md:row-span-2">
    <!-- Score principal, métrica hero -->
  </div>

  <!-- SUPPORT: 2-3 elementos de acción -->
  <div class="col-span-6 md:col-span-2">
    <!-- Card de acción -->
  </div>
  <div class="col-span-6 md:col-span-2">
    <!-- Card de acción -->
  </div>

  <!-- CONTEXT: Información secundaria -->
  <div class="col-span-6 md:col-span-4">
    <!-- Tabla, lista, gráfico -->
  </div>
</div>

Jerarquía obligatoria:

1. HERO — Un elemento dominante (col-span-2 row-span-2). Score principal o métrica clave.
2. SUPPORT — 2-3 elementos de acción (col-span-2). CTAs y métricas secundarias.
3. CONTEXT — Información de soporte (col-span-4+). Tablas, listas, detalles.

Regla: Cards con tamanos VARIADOS. Nunca una grilla uniforme de cards identicas.

Border Radius

Z-Index

9. Componentes

9.1 Botones

Dark Mode

<!-- Primary CTA -->
<button class="px-6 py-3.5 bg-[#0f2fc7] text-white rounded-full font-medium
  hover:bg-[#0a1f8a] active:scale-[0.98] transition-all duration-200">
  Continuar
</button>

<!-- Secondary -->
<button class="px-6 py-3.5 bg-white/10 text-white rounded-full font-medium
  hover:bg-white/15 transition-all duration-200">
  Ver mas
</button>

<!-- Ghost -->
<button class="px-6 py-3.5 text-gray-400 rounded-full font-medium
  hover:text-white hover:bg-white/5 transition-all duration-200">
  Cancelar
</button>

Light Mode

<!-- Primary CTA -->
<button class="px-6 py-3.5 bg-[#0f2fc7] text-white rounded-full font-medium
  hover:bg-[#0a1f8a] active:scale-[0.98] transition-all duration-200">
  Continuar
</button>

<!-- Secondary -->
<button class="px-6 py-3.5 text-neutral-600 font-medium rounded-full
  hover:bg-neutral-200/50 transition-all duration-200">
  Cancelar
</button>

<!-- Outline -->
<button class="px-6 py-3.5 border border-neutral-300 text-neutral-700 rounded-full font-medium
  hover:border-neutral-400 transition-all duration-200">
  Editar
</button>

9.2 Cards

Glass Card (Dark Mode)

<div class="bg-gray-900/60 backdrop-blur-xl border border-white/[0.08] rounded-2xl p-5">
  <h3 class="text-lg font-semibold text-gray-50">Título de Card</h3>
  <p class="text-sm text-gray-400 mt-1">Descripción secundaria</p>
</div>

Glass Card Elevated (Dark Mode)

<div class="bg-slate-800/70 backdrop-blur-2xl border border-white/[0.12] rounded-2xl p-5">
  <!-- contenido -->
</div>

Hero Card (Dark Mode)

<div class="relative overflow-hidden bg-[#0f2fc7] rounded-2xl p-6">
  <!-- Glow orb decorativo -->
  <div class="absolute -top-20 -right-20 w-60 h-60 bg-blue-400/20 rounded-full blur-3xl"></div>
  <div class="relative z-10">
    <p class="text-white/70 text-sm font-medium">Tu Score de Salud</p>
    <p class="text-5xl font-bold text-white tabular-nums mt-2">87</p>
  </div>
</div>

White Card (Light Mode)

<div class="bg-white border border-neutral-200 rounded-2xl p-5">
  <h3 class="text-base font-medium text-neutral-900">Título</h3>
  <p class="text-sm text-neutral-500 mt-1">Descripción</p>
</div>

9.3 Inputs

Dark Mode

<div>
  <label class="text-xs font-medium text-gray-500 mb-2 block uppercase tracking-wide">
    Nombre completo
  </label>
  <input class="w-full px-4 py-3.5 bg-white/5 border border-white/[0.08] rounded-xl
    text-sm text-gray-50 placeholder:text-gray-600
    focus:outline-none focus:border-[#3B82F6]/50 focus:ring-2 focus:ring-[#3B82F6]/10
    transition-all" placeholder="María Garcia" />
</div>

Light Mode

<div>
  <label class="text-xs font-medium text-neutral-500 mb-2 block">
    Nombre completo
  </label>
  <input class="w-full px-4 py-3.5 bg-transparent border border-neutral-300 rounded-xl
    text-sm text-neutral-900 placeholder:text-neutral-400
    focus:outline-none focus:border-[#0f2fc7] focus:ring-2 focus:ring-[#0f2fc7]/10
    transition-all" placeholder="María Garcia" />
</div>

9.4 Pills / Tags

Dark Mode

<!-- Selected -->
<span class="px-4 py-2 bg-[#0f2fc7] text-white text-sm font-medium rounded-full">
  Opción A
</span>

<!-- Unselected -->
<span class="px-4 py-2 border border-white/[0.12] text-gray-400 text-sm font-medium rounded-full
  hover:border-white/20 hover:text-gray-200 cursor-pointer transition-all">
  Opción B
</span>

Light Mode

<!-- Selected -->
<span class="px-4 py-2.5 bg-[#0f2fc7] text-white text-sm font-medium rounded-full">
  Opción A
</span>

<!-- Unselected -->
<span class="px-4 py-2.5 border-2 border-neutral-300 text-neutral-600 text-sm font-medium rounded-full
  hover:border-neutral-400 cursor-pointer transition-all">
  Opción B
</span>

9.5 Score Ring

<div class="relative w-32 h-32">
  <svg class="w-full h-full -rotate-90" viewBox="0 0 120 120">
    <!-- Track -->
    <circle cx="60" cy="60" r="52" fill="none"
      stroke="rgba(59,130,246,0.15)" stroke-width="8" />
    <!-- Progress -->
    <circle cx="60" cy="60" r="52" fill="none"
      stroke="#3B82F6" stroke-width="8" stroke-linecap="round"
      stroke-dasharray="326.73"
      stroke-dashoffset="calc(326.73 - (326.73 * var(--progress) / 100))"
      class="transition-all duration-800 ease-out" />
  </svg>
  <div class="absolute inset-0 flex items-center justify-center">
    <span class="text-4xl font-bold text-gray-50 tabular-nums"
      style="text-shadow: 0 0 20px rgba(59,130,246,0.5)">
      87
    </span>
  </div>
</div>

9.6 Skeleton Loading

Toda página DEBE tener skeleton con shimmer como primer estado.

Dark Mode Skeleton

<div class="animate-pulse space-y-4">
  <div class="h-10 bg-white/5 rounded-xl w-48"></div>
  <div class="h-40 bg-white/5 rounded-2xl"></div>
  <div class="h-24 bg-white/5 rounded-2xl"></div>
  <div class="h-24 bg-white/5 rounded-2xl"></div>
</div>

Light Mode Skeleton

<div class="animate-pulse space-y-4">
  <div class="h-9 bg-neutral-200 rounded-xl w-48"></div>
  <div class="h-32 bg-neutral-200 rounded-2xl"></div>
  <div class="h-12 bg-neutral-200 rounded-xl"></div>
</div>

9.7 Header Fijo

Dark Mode

<header class="sticky top-0 z-50 bg-[#0A0F1E]/80 backdrop-blur-xl border-b border-white/[0.08]">
  <div class="max-w-xl mx-auto px-4 py-3 flex items-center justify-between">
    <!-- contenido -->
  </div>
</header>

Light Mode

<header class="sticky top-0 z-50 bg-[#F5F5F0]/80 backdrop-blur-xl">
  <div class="max-w-xl mx-auto px-4 py-3 flex items-center justify-between">
    <!-- contenido -->
  </div>
</header>

9.8 Footer Fijo

<footer class="fixed bottom-0 left-0 right-0 z-40
  bg-[#0A0F1E]/80 backdrop-blur-xl border-t border-white/[0.08] p-4">
  <div class="max-w-xl mx-auto">
    <button class="w-full px-6 py-3.5 bg-[#0f2fc7] text-white rounded-full font-medium">
      Continuar
    </button>
  </div>
</footer>

9.9 Alertas e Info Boxes

Info (Dark Mode)

<div class="flex items-start gap-3 p-4 bg-[#3B82F6]/10 border border-[#3B82F6]/20 rounded-xl">
  <!-- HugeIcon info -->
  <p class="text-sm text-gray-300">Texto informativo aquí</p>
</div>

Info (Light Mode)

<div class="flex items-start gap-3 p-4 bg-neutral-50 rounded-xl">
  <!-- HugeIcon info -->
  <p class="text-sm text-neutral-600">Texto informativo aquí</p>
</div>

10. Iconografia

Pack Único Permitido

HugeIcons (@hugeicons/react) es el UNICO pack de iconos permitido en ADEN.

npm install @hugeicons/react

import { Home01Icon, Calendar01Icon } from '@hugeicons/react';

<Home01Icon size={24} color="currentColor" variant="stroke" />

Estilo

Contenedor de Icono

<!-- Dark mode -->
<div class="w-10 h-10 bg-white/5 rounded-xl flex items-center justify-center">
  <Icon size={20} className="text-gray-400" />
</div>

<!-- Light mode -->
<div class="w-10 h-10 bg-[#0f2fc7]/10 rounded-xl flex items-center justify-center">
  <Icon size={20} className="text-[#0f2fc7]" />
</div>

Prohibiciones de Iconografia

• NO usar inline SVGs dibujados a mano
• NO usar otros packs de iconos (Heroicons, Lucide, Feather, etc.)
• NO usar emojis como reemplazo de iconos
• NO mezclar variantes (stroke y solid en la misma vista)

11. Dirección Fotografica

Estilo Visual

Fotografia Permitida

• Retratos intimistas con iluminación natural o cinematografica
• Macro de piel, manos, texturas humanas
• Personas en rutinas cotidianas de salud (no posando)
• Familias multigeneracionales en contextos naturales
• Médicos en interacción humana, cercana
• Datos visualizados sobre fotografia real

Anti-Fotografia (Prohibido)

12. Prohibiciones Absolutas

Reglas que no admiten excepción. Si se viola alguna, el diseño se rechaza.

Colores

Elementos

Layout

Proceso

Las 5 Preguntas (Obligatorias Antes de Disenar)

1. STAKEHOLDER: Paciente, Médico, o Cuidador?
2. ORIGEN: De donde viene el usuario?
3. ACCION: Que UNA cosa debe hacer aquí?
4. DESTINO: A donde puede ir después?
5. HERO: Cual es el elemento visual principal?

Apendice: Accesibilidad

WCAG 2.1 Requisitos

Reglas para Datos de Salud

• Nunca usar solo color para indicar estado (siempre agregar icono + label)
• Siempre proveer alternativas para combinaciones rojo/verde (12% de hombres tienen daltonismo rojo-verde)
• Preferir azul + naranja o azul + amarillo como pares distinguibles universalmente
• Mínimo 16px para texto de datos de salud
• Mínimo 19px para contenido dirigido a adultos mayores

Validación de Contraste (Dark Mode)

Validación de Contraste (Light Mode)

Apendice: CSS Variables Completas

:root {
  /* Brand */
  --aden-blue: #0f2fc7;
  --aden-blue-hover: #0a1f8a;
  --aden-blue-glow: #3B82F6;
  --aden-blue-light: #E9F4FF;

  /* Semantic */
  --aden-optimal: #10B981;
  --aden-review: #3B82F6;
  --aden-attention: #F87171;

  /* Shared */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;
}

[data-mode="dark"] {
  --bg-primary: #0A0F1E;
  --bg-surface: #111827;
  --bg-elevated: #1E293B;
  --border-default: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.12);
  --text-primary: #F9FAFB;
  --text-secondary: #9CA3AF;
  --text-muted: #6B7280;
}

[data-mode="light"] {
  --bg-primary: #F5F5F0;
  --bg-surface: #FFFFFF;
  --bg-elevated: #FFFFFF;
  --border-default: #E5E5E5;
  --border-hover: #D4D4D4;
  --text-primary: #171717;
  --text-secondary: #525252;
  --text-muted: #A3A3A3;
}

Este documento es la fuente de verdad para todo diseño visual en ADEN. Ante conflictos con otros archivos, este documento prevalece.