NutriFlow — Sistema de Diseño v1.0

1. Contexto y objetivo

Intención de diseño: NutriFlow utiliza un estilo Clean-Minimalista para transmitir confianza y profesionalidad a dietistas y clínicas, eliminando el ruido visual que genera ansiedad en contextos de salud. El sistema prioriza la legibilidad, la accesibilidad y la consistencia sobre la decoración.

Audiencia

Nutricionistas autónomos y clínicas peq./med.

Plataforma

App web React + Tailwind · Landing captación

Estándar

WCAG 2.2 AA · 44px touch · Keyboard-first

2. Tokens de color

Paleta semántica de 7 tokens base. Usar siempre el token, nunca el valor hex directo en componentes.

primary

--color-primary
#3B82F6

secondary

--color-secondary
#8B5CF6

success

--color-success
#16A34A

warning

--color-warning
#D97706

danger

--color-danger
#DC2626

text

--color-text
#111827

surface

--color-surface
#FFFFFF

surface-3

--color-surface-3
#F3F4F6

/* tailwind.config.js — extend.colors */
colors: {
  primary:   { DEFAULT: '#3B82F6', dark: '#2563EB', light: '#EFF6FF' },
  secondary: { DEFAULT: '#8B5CF6' },
  success:   { DEFAULT: '#16A34A', light: '#F0FDF4' },
  warning:   { DEFAULT: '#D97706', light: '#FFFBEB' },
  danger:    { DEFAULT: '#DC2626',  light: '#FEF2F2'  },
  surface:   '#FFFFFF',
  text:      '#111827',
}
        

3. Tipografía

Escala modular 12/14/16/20/24/32. Grid 8pt para line-height y espaciado.

h1 · Poppins 700
2rem / 1.2lh

Registro de paciente

h2 · Poppins 600
1.5rem / 1.3lh

Plan nutricional semanal

h3 · Poppins 600
1.25rem / 1.4lh

Objetivos calóricos

body · Roboto 400
1rem / 1.6lh

El seguimiento nutricional permite detectar patrones y ajustar los planes de forma precisa y sostenible.

small · Roboto 400
.875rem / 1.5lh

Última actualización: 14 jun 2026 · Dr. García

label · Inconsolata 500
.75rem / UC

Estado: activo · IMC: 22.4

4. Espaciado y bordes

Escala de espaciado — 8pt grid

space-1 · 8px

space-2 · 16px

space-3 · 24px

space-4 · 32px

space-6 · 48px

space-8 · 64px

Regla: usar solo múltiplos de 8. Nunca valores ad-hoc como 11px o 7px.

Border-radius

radius-sm · 4px
Badges, chips, tags

radius-md · 8px
Inputs, botones, cards internas

radius-lg · 12px
Cards, modales, paneles

radius-full · pill
Badges de estado, avatares

5. Componente — Button

Min-height 44px (WCAG 2.5.8). Estados: default · hover · focus-visible · disabled. Iconos opcionales inline.

Variantes

Tamaños

Estados

must Focus-visible con outline 3px offset 2px.
must min-height: 44px en todos los tamaños.
should Incluir aria-label cuando el botón solo contiene icono.
avoid Más de 2 acciones primarias en la misma vista.

6. Componente — Input

Min-height 44px. Label siempre visible (nunca solo placeholder). Error y hint en texto, no solo en color.

Nombre del paciente

Nombre completo tal como aparece en la HCE.

Email de contacto

Formato de email no válido.

Peso actual (kg)

Dato guardado correctamente.

Notas clínicas

Máx. 500 caracteres. No incluir datos bancarios.

7. Componentes — Badge y Alert

Badges de estado

Activo Objetivo alcanzado En revisión Urgente Archivado

must El color nunca es el único indicador de estado: incluir texto o icono.
should Usar font-mono para badges de datos técnicos (IMC, kcal, código).

Alertas

ℹ

Actualización disponibleEl módulo de informes tiene una nueva versión con exportación a PDF mejorada.

✓

Plan guardadoEl plan nutricional de María García fue guardado correctamente.

⚠

Sesión próxima a expirarTu sesión expira en 5 minutos. Guarda los cambios.

✕

Error al sincronizarNo se pudo conectar con la HCE. Reintenta en unos segundos.

8. Componente — Navigation

Top-nav + sidebar para la app. Sidebar colapsable en mobile. Estado activo con fondo primario claro en nav-link, primario sólido en sidebar.

NF

NutriFlow

Dashboard Pacientes Planes Informes

MG

Dashboard · Semana 24

Vista general de pacientes activos, citas y objetivos nutricionales del período.

12 pacientes activos 4 objetivos alcanzados 2 revisiones pendientes

9. Anti-patrones prohibidos

Evitar

Texto gris claro sobre blanco (ratio bajo)

El plan nutricional de este paciente...

Correcto

Texto secundario mínimo #6B7280 sobre blanco (AA)

El plan nutricional de este paciente...

Evitar

Múltiples botones primarios en la misma vista

Correcto

Una acción primaria clara, secundarias en ghost

Evitar

Espaciado inconsistente (valores ad-hoc)

gap: 11px, border-radius: 3px, 7px, 2px

Correcto

Tokens de token sistem siempre

gap: space-1 (8px), radius-sm (4px)

10. Checklist QA de implementación

✓

Contraste de textoVerificar ratio ≥ 4.5:1 para texto normal y ≥ 3:1 para texto grande (≥18pt). Usar Colour Contrast Analyser.
✓

Focus visibleTab a través de todos los elementos interactivos: el foco debe ser visible en todos sin excepción (outline 3px blue offset 2px).
✓

Touch targets 44pxInspeccionar en DevTools: todos los elementos interactivos miden ≥44×44px. Revisar especialmente badges-link y iconos.
Spacing en grid 8ptRevisar con plugin de Figma o CSS audit que todos los valores de margin/padding/gap son múltiplos de 8.
Sin tokens ad-hocgrep en el código: ningún color hex directo fuera de los archivos de tokens. Solo var(--color-*).
Estados de componenteCada botón e input tiene implementado: default, hover, focus-visible, active, disabled. Inputs además: error y success.
Reduced-motionVerificar que todas las animaciones CSS respetan @media (prefers-reduced-motion: reduce).
Screen-reader labelsTodos los inputs tienen label asociada (for/id). Botones icon-only tienen aria-label. Badges de estado tienen texto, no solo color.
Typography scaleNo hay font-size fuera de la escala 12/14/16/20/24/32. Verificar con CSS audit.
Estados vacíos/error/cargaCada vista tiene definido el estado vacío (empty state), estado de carga (skeleton) y estado de error con acción de recuperación.