NutriFlow — Sistema de Diseño v1.0

🔍

Auditoría de Consistencia Visual

10 dimensiones · puntuación 0-10 · con ejemplos y fixes concretos

6.2

Score Global

Interfaz Funcional, Base Frágil

NutriFlow tiene la estructura correcta pero acumula deuda de diseño: los colores azules son 4 tonos distintos del mismo intento de primario, el espaciado no sigue escala alguna, y las tipografías mezclan px fijos con valores arbitrarios. Un sistema de tokens resolvería el 70% de los problemas en una tarde de refactoring.

3Críticos

4Warnings

3OK

🎨Consistencia de color

4 variantes de azul primario: #2563eb, #3b82f6, #1d4ed8... ningún token

3/10

📝Jerarquía tipográfica

h1=32px vs .section-title=22px — gap insuficiente para jerarquía clara

5.5/10

📐Ritmo de espaciado

padding: 20px/28px/32px sin escala — 8 valores únicos vs 4 necesarios

2.5/10

🧩Consistencia componentes

.btn y .cta-button son el mismo componente con estilos diferentes

6/10

📱Responsive

Funciona, pero ningún breakpoint definido como token

7/10

🌙Modo oscuro

Solo sidebar con bg oscuro — no hay dark mode real implementado

1/10

✨Animaciones

Sin transitions — hover states sin feedback visual

6.5/10

♿Accesibilidad

Ratio de contraste aceptable en primario, faltan focus states

7/10

📊Densidad informativa

Bien calibrada para B2B. Podría mejorar el dashboard principal

8/10

💎Pulido general

Falta micro-interacciones: loading states, empty states, tooltips

6.5/10

CRÍTICO

Paleta de color fragmentada

El color primario aparece como #2563eb, #3b82f6, #1d4ed8 y #60a5fa en distintos componentes. Ninguno es canónico. Visualmente el usuario percibe inconsistencia aunque no lo articule.

FIX: styles/tokens.css → --color-primary: #16a34a (brand verde salud)

CRÍTICO

Escala de espaciado rota

padding: 20px, 28px, 32px, 14px... son 8 valores únicos arbitrarios. Una escala de 4px (4/8/12/16/24/32/48) reduciría el CSS un 40% y mejoraría la consistencia visual.

FIX: Reemplazar valores arbitrarios → var(--space-*) de la escala 4px

CRÍTICO

Cero soporte dark mode

El sidebar usa bg oscuro decorativo pero no hay prefers-color-scheme implementado. Para usuarios en entornos clínicos con pantallas bajo luz tenue esto es un problema de usabilidad real.

FIX: Añadir @media (prefers-color-scheme: dark) con CSS vars remapeadas

WARNING

Componentes duplicados

.btn-primary y .cta-button son el mismo patrón visual con nombres y estilos ligeramente distintos. Introduce inconsistencia de hover y es difícil de mantener.

FIX: components/Button.tsx → variante prop: 'primary' | 'secondary' | 'ghost'

WARNING

Jerarquía tipográfica insuficiente

h1=32px → .section-title=22px es un salto de solo 10px. Para que el ojo perciba jerarquía clara se necesita un ratio ≥1.25 entre niveles (mínimo 30px → 24px → 20px → 16px).

FIX: Adoptar escala modular 1.25 → usar var(--text-3xl/2xl/xl/base)

WARNING

Sin estados de interacción

Botones y tarjetas sin transiciones CSS. El usuario no recibe feedback inmediato al hover/focus. Para una app de uso prolongado (nutricionistas todo el día) esto aumenta la fatiga.

FIX: Añadir transition: all 150ms ease a .btn, .card, inputs

OK

Contraste de texto aceptable

Los textos principales sobre fondo blanco y el primario sobre blanco cumplen WCAG AA (4.5:1). El caption gris #6b7280 sobre blanco alcanza 4.6:1. Punto positivo a mantener.

Mantener: #6b7280 mínimo para textos secundarios

OK

Densidad informativa correcta

El dashboard de nutricionista tiene la densidad adecuada para un profesional. No está ni sobrecargado ni demasiado vacío. Las tarjetas de paciente son escaneables.

Mantener: ratio de información actual en vistas de lista

🎨

Tokens Generados — NutriFlow Design System

Verde salud · escala 4px · tipografía modular 1.25 · Inter

Primario — Verde Salud

brand-50#f0fdf4

brand-100#dcfce7

brand-200#bbf7d0

brand-300#86efac

brand-400#4ade80

brand-500#22c55e

brand-600 ★#16a34a

brand-700#15803d

brand-800#166534

brand-900#14532d

Neutrales

neutral-50#f8fafc

neutral-100#f1f5f9

neutral-200#e2e8f0

neutral-400#94a3b8

neutral-500#64748b

neutral-700#334155

neutral-800#1e293b

neutral-900#0f172a

Colores Semánticos

SUCCESS

#22c55e — Objetivos alcanzados, confirmaciones

WARNING

#f59e0b — Alertas nutricionales, macros fuera de rango

ERROR

#ef4444 — Déficit severo, restricciones no cumplidas

INFO

#3b82f6 — Notas clínicas, tooltips informativos

Escala Tipográfica

--text-4xlDisplay

NutriFlow

36px

700

--text-3xlH1

Dashboard

30px

700

--text-2xlH2

Mis Pacientes

24px

600

--text-xlH3

Plan Alimenticio

20px

600

--text-baseBody

El paciente cumple el 87% de sus macros diarios

16px

400

--text-smUI text

Última actualización hace 2 horas

14px

400

--text-xsCaption

PROTEÍNAS · 142G

12px

500

Escala de Espaciado (4px base)

--space-14px

--space-28px

--space-312px

--space-416px

--space-520px

--space-624px

--space-832px

--space-1040px

--space-1248px

--space-1664px

Ratio de reducción: De 8 valores únicos de padding a 5 necesarios — elimina el 37.5% de variación de espaciado del CSS actual.

🧩

Biblioteca de Componentes

Vista previa de componentes con el nuevo sistema de tokens

Botones

Badges de Estado

Objetivo cumplido En progreso Déficit

Cetogénica Sin gluten Vegana Diabético T2

Formularios

Peso actual (kg) Última medición: hace 3 días

Objetivo calórico Excede el límite para el perfil del paciente (2.200 kcal)

Cards de Métricas

Pacientes activos

+12%

47

+5 este mes

Adherencia media

+3pts

84%

objetivos nutricionales

Pacientes recientes

LP

Laura Pereira

Pérdida de peso · 72.4 kg

Activa

MG

Marcos García

Diabetes T2 · Plan adaptado

Seguimiento

SR

Sofía Ruiz

Ganancia muscular · Sin revisión 14d

Alerta

🤖

AI Slop Detection

Patrones de diseño genérico IA detectados en la interfaz actual

✅

Gradientes gratuitos en todo

LIMPIO — Colores planos, sin gradientes innecesarios

⚠️

Azul-violeta por defecto

DETECTADO — El azul primario original no tiene identidad; verde salud es más apropiado para health-tech

✅

Glassmorphism sin propósito

LIMPIO — Sin efectos blur/glass. Interfaz directa.

✅

Animaciones de scroll excesivas

LIMPIO — Sin animaciones de entrada. Podría añadir micro-interacciones útiles.

⚠️

Hero centrado con texto sobre gradiente

DETECTADO — Landing page usa layout hero genérico; recomendado: mostrar el producto directamente (dashboard screenshot)

✅

Stack sans-serif sin personalidad

LIMPIO — Inter es adecuado para B2B profesional. No es genérico en este contexto.

⚠️

Rounded corners en todo

DETECTADO — border-radius: 4/6/8/12/50% — 5 valores sin jerarquía. Usar sistema: sm(4) md(8) lg(12) full

✅

Ilustraciones stock de gente sonriendo

LIMPIO — Interfaz orientada a datos. Sin ilustraciones genéricas.

Resultado: 3 patrones de AI-slop detectados de 8 chequeados (37.5%)

NutriFlow tiene base sólida. Los 3 problemas detectados son fáciles de resolver y no comprometen la identidad del producto. Prioridad: sustituir el azul genérico por el verde salud propuesto, rediseñar el hero de landing con product screenshot, y unificar la escala de border-radius.

📦

design-tokens.json

Tokens exportables para Figma/Style Dictionary / CSS custom properties

{
  "color": {
    "brand": {
      "500": "#22c55e",
      "600": "#16a34a",  // primary action
      "700": "#15803d"   // hover state
    },
    "semantic": {
      "success": "#22c55e",
      "warning": "#f59e0b",
      "error":   "#ef4444",
      "info":    "#3b82f6"
    }
  },
  "typography": {
    "fontFamily": "'Inter', system-ui, sans-serif",
    "scale": {
      "xs":   "0.75rem",   // 12px — captions, labels
      "sm":   "0.875rem",  // 14px — UI text
      "base": "1rem",      // 16px — body
      "xl":   "1.25rem",   // 20px — H3
      "2xl":  "1.5rem",    // 24px — H2
      "3xl":  "1.875rem",  // 30px — H1
      "4xl":  "2.25rem"     // 36px — display
    }
  },
  "spacing": {
    "1":  "0.25rem",   // 4px
    "2":  "0.5rem",    // 8px
    "4":  "1rem",      // 16px
    "6":  "1.5rem",    // 24px
    "8":  "2rem",      // 32px
    "12": "3rem"       // 48px
  },
  "borderRadius": {
    "sm":   "0.25rem",  // 4px  — tags, badges
    "md":   "0.5rem",   // 8px  — cards, inputs
    "lg":   "0.75rem",  // 12px — modals, panels
    "xl":   "1rem",     // 16px — large containers
    "full": "9999px"   // pills, avatars
  }
}