Identidad de Marca

GR Wellness Platform - Plataforma integral de nutrición y fitness para Gerardo Reyna. Sistema de diseño construido con Next.js 15, React 19, Tailwind CSS v4 y shadcn/ui.

Paleta de Colores

Sistema de colores temático con soporte para múltiples variantes visuales. Incluye colores primarios de marca y sistema SMAE de grupos alimenticios.

Colores Primarios de Marca
Negro Identidad
#000000
--primary (light)
Amarillo Energía
var(--accent-brand)
--primary (dark), --accent
Uso de Colores por Modo
Componente Light Mode Dark Mode
Botones Primarios Negro Amarillo
Acentos & Highlights Amarillo Amarillo
Sidebar Fondo Negro Negro
Sidebar Activo Amarillo Amarillo

Nota: El sistema mantiene consistencia con identidad Negro & Amarillo en ambos modos. En Light Mode, Negro es el color principal y Amarillo los acentos. En Dark Mode, Amarillo es el principal.

Colores Neutros y Base (Adaptativos)
Light Mode
Fondo
#fafaf9
--background
Tarjeta
#ffffff
--card
Muted BG
#f5f5f4
--muted
Borde
#e8e8e7
--border
Dark Mode
Fondo
#0a0a0a
--background
Tarjeta
#333333
--card
Muted BG
#444444
--muted
Borde
#444444
--border
Colores Semánticos
Destructivo
#ef4444
--destructive
Texto Destructivo
#faf8f6
--destructive-foreground
SMAE - Grupos Alimenticios
Verduras, Frutas, Cereales y Leguminosas
Verduras #22c55e Frutas #f97316 Cereales #eab308 Leguminosas #a16207
Alimentos de Origen Animal (AOA) - Por contenido de grasa
Muy Bajo #fca5a5 Bajo #dc2626 Moderado #b91c1c Alto #991b1b
Lácteos - Por contenido de grasa y Grasas
Descremado #60a5fa Semidescremado #3b82f6 Entero #2563eb Grasas #fbbf24
Sistema de Alertas - Cuestionarios Diarios
Verde (7-10) Excelente Amarillo (5-6) Regular Rojo (1-4) Alerta

Tipografías

Familia Geist Sans y Geist Mono utilizada en toda la plataforma para mantener consistencia visual y legibilidad.

Display • 48px / 3rem • 700 • 1.1 • text-5xl font-bold
GR Wellness Platform
Títulos de página, máximo impacto visual
H1 • 36px / 2.25rem • 700 • 1.2 • text-4xl font-bold
Dashboard de Pacientes
Titulos principales de página, headlines de máximo impacto
H2 • 30px / 1.875rem • 600 • 1.3 • text-3xl font-semibold
Plan Nutricional Personalizado
Subtítulos de sección, encabezados secundarios
H3 • 24px / 1.5rem • 600 • 1.4 • text-2xl font-semibold
Mediciones Antropométricas
Titulos de subsecciones, agrupar contenido relacionado
H4 • 20px / 1.25rem • 500 • 1.4 • text-xl font-medium
Información de Contacto
Títulos pequeños, etiquetas de tarjetas y bloques de contenido
Body Large • 18px / 1.125rem • 400 • 1.6 • text-lg
El sistema proporciona un seguimiento integral del progreso nutricional.
Párrafos destacados, introducciones de sección
Body • 16px / 1rem • 400 • 1.5 • text-base
El paciente ha completado el cuestionario diario con puntuación de 8/10.
Texto corporal principal, párrafos regulares, descripciones
Body Small • 14px / 0.875rem • 400 • 1.5 • text-sm
Última actualización: 3 Mar 2026 • Estado: Activo
Texto secundario, meta información, detalles menores
Caption • 12px / 0.75rem • 400 • 1.4 • text-xs
Este campo es obligatorio para continuar.
Etiquetas, texto de ayuda, notas pequeñas, disclaimers

Espaciado

Sistema de espaciado basado en incrementos de 4px para mantener consistencia visual y alineación perfecta en la interfaz.

Escala Base (4px)
0
space-00px
0.5
space-0.52px
1
space-14px
2
space-28px
3
space-312px
4
space-416px
5
space-520px
6
space-624px
8
space-832px
10
space-1040px
12
space-1248px
16
space-1664px
Border Radius
4px
radius-sm
Badges, chips, pequeños elementos
8px
radius
Inputs, botones, componentes
12px
radius-md
Cards, containers principales
16px
radius-lg
Modales, drawers, sheets
Full
radius-full
Avatares, pills, elementos circulares
Patrones Comunes
List spacing
space-y-4
16px
Grid gap
gap-4
16px
Section margin
mt-8
32px
Form spacing
space-y-6
24px
Component gap
gap-3
12px

Íconos

Biblioteca Lucide React para iconografía limpia, moderna y consistente. Todos los íconos utilizados en la plataforma con escalas y contexto de uso.

Escalas Estándar
16px
h-4 w-4
Botones, inline
20px
h-5 w-5
Listas, cards
40px
h-10 w-10
Empty states
64px
h-16 w-16
Destacados
Navegación
LayoutDashboard
Users
Calendar
MessageSquare
MoreHorizontal
Settings
Acciones
Plus
Pencil
Trash2
Eye
Check
X
Nutrición & Fitness
Flame
Wheat
Droplets
Heart
Dumbbell
Activity
Trophy
Home
Utilidades
ChevronDown
ChevronUp
ArrowLeft
ArrowRight
Search
CheckCircle2
AlertCircle
Info

Componentes

Elementos reutilizables del sistema de diseño.

Cards

Componentes card modulares para dashboards, pacientes y alertas.

PacienteCard

Componente para mostrar tarjetas de pacientes en el dashboard. Ubicación: components/dashboard/paciente-card.tsx

Ejemplo Visual - Estado Colapsado (Default)
PS

Pedro Solis

Contactado

41 años • 95kg

Pérdida de peso

Dieta Rutina Sin Pago
MB

María Barrera

En Consulta

42 años • 65kg

Mantenimiento y salud

Dieta Rutina Activo Plan
RC

Roberto Chiroga

Completado

35 años • 80kg

Ganancia muscular

Dieta Rutina Pago
Ejemplo Visual - Estado Expandido (Hover)
RC

Roberto Chiroga

Completado

35 años • 80kg

Ganancia muscular

Dieta Rutina Pago
Mar 10, 2026
Dr. Gerardo
AppointmentCard

Componente para mostrar citas/consultas con dos variantes: compact y full. Ubicación: components/agenda/appointment-card.tsx

Ejemplo Visual - Compact

Sofia Rodríguez

2:30 PM - Seguimiento
Confirmada

Carlos Mendez

4:00 PM - Consulta
Pendiente
Ejemplo Visual - Full
SR

Sofia Rodríguez

Confirmada
2:30 PM (45 min)
Online
Seguimiento

Notas: Revisar progreso de pérdida de peso. Ajustar macros según resultados.

CM

Carlos Mendez

Pendiente
4:00 PM (60 min)
Presencial
Consulta

Notas: Primera consulta. Traer análisis de sangre recientes.

AM

Ana Morales

En Progreso
3:00 PM (30 min)
Online
Valoración

Notas: Evaluación de composición corporal en curso.

ActionRequiredWidget

Componente para mostrar alertas de acción requerida. Ubicación: components/dashboard/action-required-widget.tsx

3
alertas
2 críticas
1 moderada

Sofia Rodríguez

Energía muy baja (2/10)

Carlos Mendez

Pago vencido

Laura Sánchez

8 días sin conexión

StatsCards

Componente para mostrar estadísticas del dashboard. Ubicación: components/dashboard/stats-cards.tsx

Pacientes Activos
24

+20% vs mes anterior

Consultas Este Mes
48

+14% vs mes anterior

Adherencia Promedio
78%

+5% vs mes anterior

Revenue del Mes
$24,500

$12,300 pendiente

PaymentSummaryCards

Componente para mostrar resumen de pagos. Ubicación: components/pagos/payment-summary-cards.tsx

Total Cobrado
$24,500

18 pacientes al día

Pendiente por Cobrar
$12,300

6 pagos pendientes

Anticipos Recibidos
$5,800

En proceso de liquidación

Pacientes al Día
18

De 24 con planes de pago

KanbanCard

Componente para tarjetas en vista kanban con soporte para drag and drop. Ubicación: components/pacientes/kanban-card.tsx

QRAccessCard

Componente para generar y gestionar enlaces QR de acceso para pacientes. Ubicación: components/pacientes/qr-access-card.tsx

Enlace Rapido
Activo hoy
Ultima conexion: 5 mar 2026 10:30
Enlace Rapido
Sin conexion

Sin enlace de acceso generado

SkeletonCard

Componente skeleton para estados de carga. Ubicación: components/ui/skeleton-card.tsx

Ejemplo Visual - Estados de Carga
ActionRequiredWidget

Widget para alertas de pacientes (cuestionarios, pagos, inactividad). Ubicación: components/dashboard/action-required-widget.tsx

Ejemplo Visual - Variante Compact
2
alertas
1 crítica 1 moderada

Pedro Solis

Energía muy baja (2/10)

María Barrera

9 días sin conexión

Ejemplo Visual - Variante Detailed
Acción Requerida
1 1
Pedro Solis

Energía muy baja (2/10)

María Barrera

9 días sin conexión

Botones

Variantes de botones en diferentes tamaños y estados.

ng: 24px; margin-bottom: 16px;"> n>
Riesgo Crítico 23/100
Completitud Expediente 88%
Distribución por módulo
Mat 35% CF 25% AML 20% Core 20%

KPIs

Tarjetas de indicadores clave con gráficos sparkline.

Proveedores activos
247
+12 esta semana
Flujo neto (13 sem)
$1.2M
-$89K vs anterior
Alertas abiertas
5
2 urgentes (UIF)

Tablas

Componentes de tablas con estados y gráficos integrados.

Status e indicadores
Pending In Progress Done Blocked
Filas de riesgo (tabla expandible)
!
Distribuidora Norte S.A. de C.V.
RFC: DNO980515HJ4 • 14 operaciones
23
SCORE
$2.4M MXN
En lista 69-B
AML
~
Logística Express del Bajío
RFC: LEB120320KT8 • 8 operaciones
58
SCORE
$890K MXN
Evidencia parcial
CF
✓
Soluciones Industriales QRO
RFC: SIQ190812MN3 • 22 operaciones
91
SCORE
$3.1M MXN
Expediente completo
MAT

Patrones

Patrones y convenciones de diseño recurrentes.

Layouts

Estructura y organización de layouts.

Layout Grid
Descripción del sistema de grilla...

Navegación

Patrones de navegación principal.

Top Navigation
Descripción de la navegación principal...

Feedback

Cards de alerta e investigación con estados y timelines.

AML-047 Urgente
Transacción inusual detectada
Depósito de $847,200 MXN sin factura correspondiente. Donante clasificado como PEP. Deadline UIF: 15 Mar 2026.
DetectadaKYCInvestigarReporte
MAT-112 Resuelto
Proveedor retirado de lista 69-B
Comercializadora Azteca presentó aclaración exitosa ante el SAT. Score actualizado de 31 → 78. Expediente cerrado.
DetectadaEvidenciaValidadoCerrado
Activity feed — centro de alertas
AML-047 — Transacción $847K requiere reporte UIF
Hace 2h • AML / Donatarias • Deadline: 15 Mar
Urgente
Brecha semana 7 — Déficit proyectado de $48K MXN
Hace 5h • Cashflow • Cobros pendientes cubren 80%
En progreso
MAT-112 — Proveedor retirado de lista 69-B
Hace 1 día • Materialidad • Score 31 → 78
Resuelto

Modales

Especificaciones de diálogos y confirmaciones.

Los modales se implementan con componentes flotantes centrados
Los modales usan el mismo sistema de colores, tokens y estilos que el resto de la aplicación.