Vocabulario Semántico-Visual: Aden
Cómo los territorios de marca se traducen a decisiones de diseño.
Este documento conecta las palabras que definen a Aden con las formas, colores, iconos e interacciones que las representan. Un diseñador que lea este documento sabe exactamente qué aspecto tiene cada valor de marca en la interfaz.
Los 5 territorios de Aden
Cada territorio es un espacio semántico. Juntos forman la identidad visual completa.
1. Anticipación
Significado: Ver antes de que pase. Actuar cuando aún se puede cambiar el curso.
Palabras asociadas: antes, futuro, trayectoria, proyección, tendencia, ventana, oportunidad, horizonte, temprano, prever
Manifestación visual
| Elemento | Forma | Ejemplo |
|---|---|---|
| Gráficas | Sparklines ascendentes, líneas de tendencia con proyección punteada | Score de 30 días con proyección a 90 |
| Iconografía | Telescopio, horizonte, flecha diagonal ↗, línea de tiempo | Ícono de trayectoria de salud |
| Color | Azul primario (#0f2fc7) para proyecciones y futuros positivos |
Área de proyección en gráfica |
| Tipografía | Números grandes para scores proyectados, label “en X días” | “85 proyectado en 90 días” |
| Interacción | Slider temporal (deslizar entre hoy → 90 días → 1 año) | Pantalla de escenarios futuros |
Nube de íconos buscables
Español / Inglés — Justificación visual
Telescopio / Telescope — Instrumento para ver lejos
Horizonte / Horizon — Línea donde se ve el futuro
Brújula / Compass — Orientación hacia un destino
Ruta / Path — Camino con dirección clara
Amanecer / Sunrise — Comienzo, posibilidad
Calendario / Calendar — Planificación temporal
Reloj de arena / Hourglass — Ventana de tiempo
Flecha ascendente / Rising arrow — Progreso, trayectoria positiva
Binoculares / Binoculars — Capacidad de ver más allá
Mapa / Map — Visibilidad del recorrido completo
2. Claridad
Significado: Entender sin esfuerzo. Ver con nitidez. Saber qué significa y qué hacer.
Palabras asociadas: entender, ver, saber, transparente, claro, explicado, visible, nítido, luz, lente
Manifestación visual
| Elemento | Forma | Ejemplo |
|---|---|---|
| Layout | Jerarquía estricta: un hero, un dato principal, espacio generoso | Dashboard con score prominente |
| Iconografía | Lupa, lente, prisma, ojo, foco de luz | Ícono de “ver detalle” |
| Color | Alto contraste (18:1 AAA). Fondo oscuro + texto blanco brillante | Score #F9FAFB sobre #0A0F1E |
| Tipografía | Score en ~120pt. Labels en tamaño legible. Una idea por línea | Número grande + label descriptivo |
| Espacio | Whitespace generoso. Cards con padding amplio. Respiración visual | Cards con p-6 mínimo |
Nube de íconos buscables
Lupa / Magnifying glass — Examinar con detalle
Lente / Lens — Enfocar, clarificar
Foco / Spotlight — Iluminar lo importante
Prisma / Prism — Descomponer complejidad en partes claras
Ojo / Eye — Visibilidad, transparencia
Bombilla / Lightbulb — Comprensión, momento eureka
Gráfica / Chart — Datos visualizados
Filtro / Filter — Separar lo relevante
Ventana / Window — Apertura a la información
Diagrama / Diagram — Estructura visual de conceptos
3. Control
Significado: Tú decides. Tus datos son tuyos. Tu autonomía sobre tu salud.
Palabras asociadas: tuyo, decidir, gestionar, autonomía, empoderamiento, acceso, permiso, propio, configurar, elegir
Manifestación visual
| Elemento | Forma | Ejemplo |
|---|---|---|
| Componentes | Toggles, switches, selectores de permisos, configuración visible | Pantalla de privacidad con toggles granulares |
| Iconografía | Candado abierto, interruptor, timón, llave, escudo con check | Ícono de “mis datos” |
| Color | Azul primario para estados activos (usuario eligió). Gris para inactivo | Toggle activo en #0f2fc7 |
| Interacción | Confirmación explícita antes de compartir. Revocación en un tap | “Compartir con mi médico” con toggle |
| Copy | “Tú decides” / “Puedes cambiar esto en cualquier momento” | Label bajo permisos |
Nube de íconos buscables
Candado abierto / Unlocked padlock — Acceso controlado por el usuario
Interruptor / Toggle switch — Control de activar/desactivar
Timón / Helm — Dirección y gobierno propio
Llave / Key — Acceso personal
Escudo / Shield — Protección activa
Huella / Fingerprint — Identidad única, biométrico
Engranaje / Gear — Configuración personal
Slider / Slider control — Ajuste preciso
Puerta / Door — Acceso que se abre/cierra
Corona / Crown — Propiedad, "esto es tuyo"
4. Validación
Significado: Evidencia, no fe. Medir, comprobar, verificar. Saber que funciona.
Palabras asociadas: medir, evidencia, datos, comprobar, verificar, ciclo, progreso, resultado, delta, comparar
Manifestación visual
| Elemento | Forma | Ejemplo |
|---|---|---|
| Gráficas | Comparativas antes/después, deltas con flecha, barras de progreso con número | “LDL: 142 → 128 (-10%)” |
| Iconografía | Balanza, check con número, gráfica de barras, regla, termómetro | Ícono de reporte 90 días |
| Color | Emerald (#10B981) para mejoras confirmadas. Azul para “en progreso” |
Delta positivo en verde |
| Tipografía | Números con delta visible: ↓14 pts. Porcentaje de cambio prominente | “-10% en 90 días” |
| Layout | Dos columnas: antes / después. Timeline con marcadores de ciclo | Reporte comparativo |
Nube de íconos buscables
Balanza / Scale — Medición equilibrada
Check con número / Verified checkmark — Confirmación con dato
Gráfica de barras / Bar chart — Comparación cuantitativa
Regla / Ruler — Medición precisa
Termómetro / Thermometer — Indicador de nivel
Contador / Counter — Seguimiento numérico
Microscopio / Microscope — Análisis detallado
Tubo de ensayo / Test tube — Laboratorio, evidencia
Ciclo / Cycle — Proceso que se repite y mejora
Cronómetro / Stopwatch — Medición temporal
5. Cuidado
Significado: Acompañamiento sin invasión. Presencia que protege sin controlar.
Palabras asociadas: acompañar, cuidar, alertar, proteger, bienestar, presente, atento, suave, cercano, calidez
Manifestación visual
| Elemento | Forma | Ejemplo |
|---|---|---|
| Notificaciones | Suaves, sin alarma. Dot indicator (no badge rojo). Tono conversacional | “Recordatorio: tu check-in de hoy” |
| Iconografía | Escudo, mano abierta, paraguas, corazón discreto, abrazo abstracto | Ícono de alertas |
| Color | Tonos cálidos dentro de la paleta permitida. Cream para contextos de lectura | Fondo cream #F5F5F0 en secciones de cuidado |
| Tipografía | Peso regular (400-500), no bold agresivo. Tamaño cómodo | Mensajes del health coach |
| Espacio | Generoso. Padding amplio. Nunca información comprimida | Cards con espacio para respirar |
| Animaciones | Transiciones suaves (300-500ms). FadeIn, no slide agresivo | Aparición de notificaciones |
Nube de íconos buscables
Escudo / Shield — Protección activa
Mano abierta / Open hand — Ofrecimiento, apoyo
Paraguas / Umbrella — Protección contra lo imprevisto
Corazón / Heart — Cuidado genuino (usar con discreción)
Campana suave / Soft bell — Notificación amable
Abrazo / Embrace — Cercanía (representación abstracta)
Casa / Home — Seguridad, espacio propio
Brújula / Compass — Guía sin imposición
Ancla / Anchor — Estabilidad, punto seguro
Estrella / Star — Reconocimiento discreto
Matriz de territorios por contexto de pantalla
| Pantalla | Territorio principal | Territorio secundario |
|---|---|---|
| Dashboard | Claridad | Anticipación |
| Onboarding | Cuidado | Control |
| Progreso / Scores | Validación | Anticipación |
| Laboratorios | Claridad | Validación |
| Plan del día | Anticipación | Cuidado |
| Alertas | Cuidado | Claridad |
| Familia | Cuidado | Control |
| Perfil / Ajustes | Control | — |
| Consulta médica | Anticipación | Validación |
| Reporte 90 días | Validación | Anticipación |
Relación entre territorios semánticos y pilares narrativos
Los 5 territorios describen cómo se siente la marca. Los 6 pilares narrativos (ver product/narrative) describen qué comunica. Esta tabla conecta ambos:
| Pilar narrativo | Territorio principal | Territorio secundario |
|---|---|---|
| 1. Velocidad | Anticipación | Claridad |
| 2. Seguridad | Validación | Control |
| 3. Calibración Latina | Control | Cuidado |
| 4. Integración | Claridad | Validación |
| 5. Honestidad | Validación | Control |
| 6. Experiencia | Claridad | Cuidado |
Cómo usarlo: Al diseñar una pantalla que ejecuta un pilar narrativo, usar el territorio principal como guía visual dominante.
Cómo usar este documento
- Al diseñar una pantalla nueva: Identificar el territorio principal en la matriz → usar la manifestación visual correspondiente
- Al elegir iconografía: Buscar en la nube de íconos del territorio relevante → usar como término de búsqueda en HugeIcons o similar
- Al escribir copy: Usar las palabras asociadas del territorio como vocabulario base
- Al validar un diseño: Verificar que los elementos visuales refuerzan el territorio correcto — no lo contradicen
Los territorios no son exclusivos. Cada pantalla combina 1-2 territorios. Pero siempre hay uno dominante que define la decisión visual principal.