NutriTrack Design System
Guía de referencia para equipos de diseño y desarrollo. Minimalista, accesible, coherente.
Intención de diseño
NutriTrack v2.0 adopta un sistema de diseño minimalista ("Simple DS") para los módulos de dashboard de pacientes, historial de consultas, generador de planes alimentarios y panel de analíticas. El objetivo es transmitir confianza clínica y claridad sin sobrecargar visualmente al dietista durante sesiones de uso intensivo.
Principio rector: cada píxel debe ganarse su lugar. Si un elemento no aporta contexto o acción, se elimina.
Paleta de Color
Usa siempre el nombre del token, nunca el valor hexadecimal directo en el código. Los tokens permiten theming futuro sin refactor.
Escala Tipográfica
Inter para UI e interfaz, JetBrains Mono para valores numéricos clínicos (IMC, kcal, macros). La escala sigue progresión 12/14/16/20/24/32.
Escala de Espaciado
Base 4px. Usa únicamente los valores de la escala. Nunca usar valores arbitrarios (5px, 7px, 13px) en componentes de producción.
Botones
Los botones son la acción primaria del usuario. Usa btn-primary solo una vez por pantalla. Las acciones destructivas usan btn-danger con confirmación modal obligatoria.
| Variante | Cuándo usarlo | Límite por pantalla |
|---|---|---|
| Primary | Acción principal única (guardar, crear, enviar) | Max 1 |
| Secondary | Acción secundaria o alternativa | Sin límite |
| Ghost | Acciones terciarias, navegación contextual | Sin límite |
| Danger | Acciones destructivas con confirmación obligatoria | Solo en modales |
Badges de Estado
Los badges comunican el estado de un paciente o consulta. Siempre incluyen texto legible (nunca solo color). El punto de estado refuerza visualmente pero no es el único indicador.
Cards de Paciente
La card de paciente es la unidad visual central del dashboard. Anatomy: avatar iniciales + nombre + meta datos + badge de estado + acción primaria.
Formularios
Los formularios deben guiar al dietista sin fricción. Label siempre visible (no usar placeholder como sustituto de label). Los errores se muestran bajo el campo, con ícono y texto (nunca solo rojo).
Tablas de Datos
Usar para datos tabulares con más de 3 columnas. Los valores numéricos (kcal, macros, IMC) deben usar la fuente mono para alineación correcta. La columna de acción siempre va última y alineada a la derecha.
| Paciente | IMC | Kcal/día | Próx. consulta | Estado | Acción |
|---|---|---|---|---|---|
| María Soriano López | 27.3 | 1.850 | 18 jun 2026 | Seguimiento | |
| Jorge Ramírez Vidal | 23.8 | 2.900 | 22 jun 2026 | Activo | |
| Ana Kovalenko | 18.1 | 1.200 | — | Alerta | |
| Luis Bermejo Torres | 24.5 | 2.200 | 30 jun 2026 | Inactivo |
WCAG 2.2 AA
NutriTrack tiene usuarios con discapacidad visual. Toda interfaz debe pasar los criterios de contraste 4.5:1 para texto normal y 3:1 para texto grande y elementos UI.
- Tab Navegación entre elementos interactivos en orden lógico del DOM
- Enter / Space Activar botones, checkboxes y selects
- Escape Cerrar modales, popovers y dropdowns
- :focus-visible Obligatorio en todos los elementos interactivos. Outline 2px solid --color-border-focus, offset 2px
- aria-label Obligatorio en botones icon-only y badges de estado en tablas
Qué no hacer
QA Checklist — Code Review
Ejecuta esta lista en cada PR que modifique componentes UI. Un fallo es motivo de cambios solicitados (changes requested).
- Tokens — Todos los valores de color, espaciado y tipografía referencian variables CSS o clases Tailwind de la paleta NutriTrack. Ningún valor hardcoded.
- Contraste — Verificado con axe DevTools o Colour Contrast Analyser. Ratio ≥ 4.5:1 para texto normal, ≥ 3:1 para texto grande (≥18px bold).
- Focus visible — Tab por todos los elementos interactivos del componente. El estado focus-visible es claramente visible (outline 2px blue, offset 2px).
- Estados de botón — Default, hover, focus-visible, active y disabled funcionan correctamente. Botones disabled tienen cursor: not-allowed y opacity 0.6.
- Formularios — Cada input tiene label asociado con for/id. Los errores muestran mensaje + ícono, no solo borde rojo. Placeholders son ejemplos, no labels.
- Badges — Nunca solo color para indicar estado. Siempre texto descriptivo legible por screen readers.
- Tipografía mono — Valores numéricos clínicos (IMC, kcal, peso) usan JetBrains Mono para alineación correcta en tablas.
- Responsive — Componentes verificados a 375px (mobile), 768px (tablet) y 1280px (desktop). Sin overflow horizontal.
- Un solo Primary — Máximo un btn-primary visible por pantalla/sección. Si aparecen dos, escalar la duda a diseño.
- Espaciado de escala — Ningún margin/padding usa valores arbitrarios. Solo múltiplos de 4px de la escala definida.
- aria-label — Todos los botones icon-only tienen aria-label descriptivo. Badges en tablas tienen aria-label="Estado: Activo" equivalente.
- Sin CDN externos — Los componentes no cargan recursos de terceros en producción que puedan fallar offline.