NutriTrack Pro — Sistema de Diseño Levels (Orientado a Conversión)

1

Design Tokens — Paleta de Color Tokens semánticos · nunca valores raw

--color-primary #27272A Superficie oscura, texto inverse, nav

--color-secondary #8B5CF6 CTA principal, foco, acciones clave

--color-success #16A34A Confirmación, progreso completado

--color-warning #D97706 Alertas, riesgo nutricional moderado

--color-danger #DC2626 Errores, déficit nutricional crítico

--color-surface #FFFFFF Fondo base de tarjetas y modales

--color-text #111827 Texto principal · cuerpo y títulos

--color-surface-2 #F9FAFB Fondo de página, secciones alternas

2

Escala Tipográfica Inter (body) · JetBrains Mono (datos/código)

text-2xl

32px · weight 800

Título de Sección Hero

text-xl

24px · weight 700

Añade tu primer paciente

text-lg

20px · weight 600

Plan Nutricional Semanal

text-base

16px · weight 400

El plan incluye 5 comidas diarias ajustadas al IMC y objetivos del paciente, con seguimiento semanal automático.

text-sm

14px · weight 400/500

Última actualización: hoy a las 14:32 · Dietista: Marta García

text-xs mono

12px · JetBrains Mono

IMC: 24.8 · KCAL/DÍA: 1.850 · DÉFICIT: -300

3

Escala de Espaciado Base 4px · máx 32px · nunca valores arbitrarios

--space-1

4px Separación entre icono y etiqueta

--space-2

8px Gap entre tags, padding interno mínimo

--space-3

12px Padding de inputs, gap entre form items

--space-4

16px Padding de tarjetas, margen entre secciones

--space-6

24px Padding de modales, gap de grid principal

--space-8

32px Margen entre bloques mayores, hero padding

4

Componentes de Conversión Botones · Formularios · Tarjeta Paciente · Progreso · Alertas

Button — Variantes y Estados

Activo Pendiente Urgente Pro Archivado

Form Fields — Estados

Nombre completo * Aparecerá en los informes del paciente

Email profesional *

Número de colegiado El formato debe ser NUT-XXXXXN (ej. NUT-12345A)

Patient Card — Estado Hover

LM

Laura Martínez Ruiz

Últ. sesión: hace 2 días · Dietista: Ana García

Pérdida de peso Déficit calórico

72.4 kg

-1.2 kg este mes

JR

Jorge Ramos Blanco

Últ. sesión: hoy · Dietista: Ana García

En objetivo Deportista

84.1 kg

+0.3 kg este mes

Progress Bars & Alertas

Calorías diarias consumidas 74%

Ingesta de proteína 58%

Hidratación 90%

✓

Objetivos de la semana cumplidos

Laura ha alcanzado su objetivo calórico 5 de los últimos 7 días.

⚠

Déficit de micronutrientes

Ingesta de vitamina D por debajo del 30% recomendado. Considera suplementación.

Empty State — Primera Acción

🧑‍⚕️

Sin pacientes todavía

Añade tu primer paciente para empezar a registrar planes nutricionales y hacer seguimiento.

Alertas Informativas

◆

Consejo de configuración

Activa las notificaciones para recordar a tus pacientes sus comidas pendientes.

✕

Error al guardar el plan

No se pudo conectar con el servidor. Revisa tu conexión y vuelve a intentarlo.

5

Flujo de Onboarding — Paso 2 de 4 Reducción de fricción · CTA inequívoco · progreso visible

Tu perfil profesional

Paso 2 de 4 — Solo tardas 60 segundos en configurar tu cuenta

Especialización *

Número de colegiado Opcional. Aparecerá en los informes para tus pacientes.

¿Cuántos pacientes gestionas al mes? *

6

Accesibilidad — WCAG 2.2 AA Criterios verificables en implementación

Combinación	Ratio de contraste	Nivel mínimo	Resultado	Uso
Aa #111827 / surface	16.75:1	AA / AAA	PASS	Texto principal sobre fondo blanco
Aa white / #8B5CF6	4.54:1	AA	PASS	Texto en botón CTA principal
Aa white / #16A34A	4.52:1	AA	PASS	Texto en estado success
Aa white / #DC2626	4.61:1	AA	PASS	Texto en estado error
Aa white / #9CA3AF	2.28:1	— (decorativo)	FAIL	Placeholder — solo decorativo, no información
Aa white / text-muted	4.60:1	AA (texto grande 18px+)	PASS	Texto muted · solo en hints y metadata

Interacción por teclado

✓
Tab navega todos los elementos interactivos en orden lógico
✓
Focus-visible con ring de 3px en color secondary
✓
Enter/Space activan botones y controles
✓
Escape cierra modales y dropdowns

Etiquetas y semántica

✓
Todo input tiene label asociado (for/id o aria-label)
✓
Errores anunciados con aria-describedby
✓
Estados de carga con aria-busy="true"
✓
Imágenes decorativas con alt=""

7

Anti-patrones Prohibidos Nunca implementar · incluir nota de migración si ya existe

✗ No hacer — CTA ambiguo

Etiquetas genéricas ("Haz clic", "Enviar", "Aceptar") sin contexto de acción. El usuario no sabe qué pasará al pulsar.

✓ Hacer — CTA específico

La etiqueta describe la acción y el resultado. Reduce la duda de clic y aumenta CTR hasta un 14% (Basecamp, 2023).

✗ No hacer — color informativo solo

⬤ Error al guardar

Usar solo el color para comunicar estado. Los usuarios con daltonismo (8% de hombres) no distinguen rojo de verde.

✓ Hacer — color + icono + texto

✕ Error: el email ya está registrado

Siempre combinar color + icono + texto descriptivo. El estado es comprensible sin depender del color.

✗ No hacer — espaciado inconsistente

Usar margin: 13px, padding: 7px o valores que rompen el ritmo de la escala (4/8/12/16/24/32). Genera desalineación visual entre componentes.

✓ Hacer — tokens de espaciado

Referenciar siempre var(--space-N). Si el diseño necesita un valor intermedio, revisar si el componente necesita refactorizar.

8

Checklist de QA — Code Review Ejecutar en cada PR que toque UI · 100% verificable

Tokens y Fundamentos

✓
Todos los colores usan variables CSS (--color-*), no valores hex directos
✓
Tamaños de fuente referencian --text-* de la escala
✓
Espaciado usa --space-* (ningún valor arbitrario)
✓
Border-radius usa --radius-* (sm/md/lg/xl/full)
No hay fuentes importadas via CDN externo

Componentes Interactivos

✓
Botones tienen estado hover, focus-visible, disabled y loading
✓
Inputs tienen estado default, focus, error y success
✓
El CTA principal es el elemento visualmente dominante en la vista
Formularios tienen autoComplete configurado correctamente
✓
Touch targets mínimo 44×44px (tablet clínica)

Accesibilidad

✓
Ratio de contraste verificado con axe DevTools o Lighthouse
✓
Tab order lógico sin trampas de foco
✓
Errores anunciados a lectores de pantalla (aria-live o role="alert")
Test con VoiceOver/NVDA en flujo de onboarding completo
✓
No hay información crítica transmitida solo por color

Conversión y Contenido

✓
Etiquetas de botón describen acción y resultado (no "Enviar")
✓
Estado vacío incluye CTA para primera acción clave
✓
Indicador de progreso visible en flujos de >1 paso
✓
Mensajes de error son accionables (dicen qué hacer, no solo qué falló)
Copy revisado: conciso, confiado, sin jerga técnica